AI-Powered Apps

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

.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/ai-apps/#webpage",
                "url": "https://www.adalo.com/solutions/ai-app-builder",
                "name": "AI-Powered Apps | Adalo",
                "description": "Build AI-powered apps for iOS, Android, and web with Adalo's no-code app builder. Connect OpenAI, Claude, and other AI APIs to native apps using Custom Actions\u2014see every screen on one canvas, preview on any device, and publish to the Apple App Store and Google Play.",
                "isPartOf": { "@id": "https://www.adalo.com/#website" }
            },
            {
                "@type": "BreadcrumbList",
                "itemListElement": [
                    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.adalo.com/" },
                    { "@type": "ListItem", "position": 2, "name": "Solutions", "item": "https://www.adalo.com/solutions" },
                    { "@type": "ListItem", "position": 3, "name": "AI-Powered Apps", "item": "https://www.adalo.com/solutions/ai-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": "How do I connect OpenAI or Claude to my Adalo app?", "acceptedAnswer": { "@type": "Answer", "text": "Through Custom Actions. Configure the API endpoint, add your API key as an authentication header, define the request body with user input mapped to variables, and map the response fields to display in your app. The entire configuration is visual\u2014no backend server required." } },
                    { "@type": "Question", "name": "Can I build AI features into any type of app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. AI features via Custom Actions can be added to any Adalo app\u2014CRM apps with AI-powered lead scoring, inventory apps with image recognition, marketplace apps with smart search, or standalone AI tools." } },
                    { "@type": "Question", "name": "How is Ada different from the AI app I'm building?", "acceptedAnswer": { "@type": "Answer", "text": "Ada is the AI that helps you build the app itself\u2014generating screens and databases from your description. The AI in your app (OpenAI, Claude) is what your end users interact with. Ada builds the container; your AI API provides the intelligence inside it." } },
                    { "@type": "Question", "name": "How do I manage prompts and templates in the app?", "acceptedAnswer": { "@type": "Answer", "text": "Store system prompts and templates in Adalo's built-in relational database. Users can browse, select, and customize templates. Since prompts live in the database, you can update them without republishing the app." } },
                    { "@type": "Question", "name": "How much does it cost to run an AI app on Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo costs $36/mo with unlimited usage. AI API costs are separate and paid to your provider. A typical AI app with 1,000 daily queries might cost $5\u201330/mo in API fees. Free plan includes 500 records to prototype." } },
                    { "@type": "Question", "name": "How is Adalo different from Lovable or Bolt for AI apps?", "acceptedAnswer": { "@type": "Answer", "text": "Lovable and Bolt are prompt-led web app builders\u2014they generate web code you must maintain. Adalo is a no-code app builder that publishes native iOS and Android apps to app stores with no code to maintain." } },
                    { "@type": "Question", "name": "What can't Adalo do for AI apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo handles standard request-response API patterns for most AI use cases. Real-time streaming responses, fine-tuning AI models, on-device ML inference, and complex chained AI pipelines require custom development or specialized platforms." } }
                ]
            }
        ]
    }
    </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>AI-Powered Apps</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F916; AI-Powered Apps
                    </div>
                    <h1>
                        Build <span class="hero-highlight">AI-Powered Apps</span> with a Visual Builder
                    </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. Connect OpenAI, Claude, and other AI APIs to build intelligent native apps without writing code.
                    </p>
                <div class="hero-buttons">
                    <a href="https://app.adalo.com/signup" class="btn-primary">Build Free <span class="arrow">&rarr;</span></a>
                    <a href="https://www.adalo.com/pricing" class="btn-outline-hero">View Pricing</a>
                </div>
                <ul class="perks">
                    <li>No credit card required</li>
                    <li>Hosted Postgres database included</li>
                    <li>500 records on the free plan with no time limit</li>
                    <li>Web publishing complimentary</li>
                    <li>No overages or excess usage charges</li>
                </ul>
                <div class="hero-stats">
                        <div class="stat">
                            <div class="stat-value">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 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/ai-dashboard</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>AI Models</h4>
                                    <div class="dk-add">+ New Model</div>
                                </div>
                                <div class="dk-body">
                                    <div class="dk-sidebar">
                                        <span class="si active">&#x25A0;</span>
                                        <span class="si">&#x25CB;</span>
                                        <span class="si">&#x25A1;</span>
                                        <span class="si">&#x25B3;</span>
                                        <span class="si">&#x2699;</span>
                                    </div>
                                    <div class="dk-kanban">
                                        <div class="dk-col">
                                            <div class="glass-col-header">Active</div>
                                            <div class="glass-card">
                                                <div class="glass-name">GPT Classifier</div>
                                                <div class="glass-price">98.2% acc</div>
                                                <span class="glass-tag glass-tag-ok">LIVE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Image Detect</div>
                                                <div class="glass-price">95.7% acc</div>
                                                <div class="glass-sub">v2.1</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Text Summarizer</div>
                                                <div class="glass-price">96.4% acc</div>
                                                <span class="glass-tag glass-tag-new">STABLE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Training</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Sentiment v3</div>
                                                <div class="glass-price">Epoch 45/100</div>
                                                <span class="glass-tag glass-tag-pop">RUNNING</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">NER Model</div>
                                                <div class="glass-price">Epoch 12/50</div>
                                                <div class="glass-sub">Batch 64</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Speech-to-Text</div>
                                                <div class="glass-price">Epoch 3/80</div>
                                                <div class="glass-sub">Queued</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Review</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Fraud Detect</div>
                                                <div class="glass-price">91.3% acc</div>
                                                <span class="glass-tag glass-tag-new">REVIEW</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Churn Predictor</div>
                                                <div class="glass-price">89.5% acc</div>
                                                <div class="glass-sub">Needs tuning</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Archive</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Legacy v1</div>
                                                <div class="glass-price">87.1% acc</div>
                                                <div class="glass-sub">DEPRECATED</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Old Classifier</div>
                                                <div class="glass-price">82.0% acc</div>
                                                <span class="glass-tag glass-tag-pop">RETIRED</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>Training</h4>
                                    <span class="neon-items">Epoch 45</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Sentiment v3</div>
                                            <div class="n-amount neon-cyan">45/100</div>
                                            <div class="n-contact">Loss: 0.0234</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Accuracy</div>
                                            <div class="n-amount neon-gold">94.8%</div>
                                            <div class="n-contact">+0.3% from last</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Val Loss</div>
                                            <div class="n-amount neon-magenta">0.0312</div>
                                            <div class="n-contact">Converging</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">ETA</div>
                                            <div class="tb-total-amount">2h 15m</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>AI Assistant</h4>
                                    <span class="native-accent">Online</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Input</span>
                                    <span>Process</span>
                                    <span class="active">Response</span>
                                    <span>Learn</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">Active</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Recent Queries</div>
                                        <div class="native-row">
                                            <span class="native-value">Classify image</span>
                                            <span class="native-price">Cat 98%</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Summarize text</span>
                                            <span class="native-price">Done</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">Predict churn</span>
                                            <span class="native-price">23% risk</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Today</span>
                                        <span class="native-total-amount">142</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 AI App You Can Imagine</h2>
                <p class="section-description">
                    From AI chatbots to content generators&mdash;describe what you need and Ada, Adalo's AI builder, generates a working app with Magic Start in minutes. Then connect AI APIs through Custom Actions to add intelligence.
                </p>
            </div>

<div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F4AC;</div><div class="chip-text">AI Chatbot</div></div>
                <div class="app-chip"><div class="chip-icon">&#x270D;&#xFE0F;</div><div class="chip-text">Content Generator</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F5BC;&#xFE0F;</div><div class="chip-text">Image Analyzer</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4DD;</div><div class="chip-text">AI Note Taker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F30D;</div><div class="chip-text">Translation App</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F50D;</div><div class="chip-text">Smart Search</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4DA;</div><div class="chip-text">Study Assistant</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F3AF;</div><div class="chip-text">Recommendation Engine</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>You Have an AI App Idea&mdash;But Building It Shouldn't Require a Dev Team</h2>
                <p class="section-description">
                    AI APIs like OpenAI and Claude are powerful, but turning them into a polished, published app typically requires full-stack development. There's a faster path.
                </p>
            </div>

<div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The AI App Development Problem</h3>
                    <ul class="card-list">
                        <li>Prompt-led web app builders generate web-only output with code you need to maintain</li>
                        <li>Building a native mobile AI app requires React Native or Swift/Kotlin expertise</li>
                        <li>No visual way to design the AI interaction flow and user experience</li>
                        <li>Connecting AI APIs requires backend infrastructure, authentication, and error handling</li>
                        <li>Prompt-to-app tools give you a starting point but no path to App Store publishing</li>
                        <li>Custom development for an AI app costs $20K&ndash;100K+ and takes months</li>
                    </ul>
                </div>

<div class="solution-card">
                    <h3 class="card-title">The Adalo AI App Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design AI interaction screens, prompt flows, and result displays</li>
                        <li>Custom Actions connect to OpenAI, Claude, and any REST API without backend code</li>
                        <li>Native iOS and Android output&mdash;publish AI apps to the App Store and Google Play</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;pay only your AI API costs separately</li>
                        <li>Ada generates a working app shell from a description&mdash;add AI features in hours, not months</li>
                        <li>Built-in database stores prompts, responses, user preferences, and usage history</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 Build AI-Powered Native Apps</h2>
                <p class="section-description">
                    Adalo gives you the visual builder and native output. You bring the AI API. Together, they make intelligent apps that run on web, iOS, and Android from a single build.
                </p>
            </div>

<div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x26A1;</div>
                    <h3>Custom Actions for AI APIs</h3>
                    <p>Connect to OpenAI, Anthropic's Claude, Google Gemini, or any REST API through Custom Actions. Send user input to the AI, receive responses, and display results&mdash;all configured visually without writing backend code.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4AC;</div>
                    <h3>Chat &amp; Conversation UI</h3>
                    <p>Build chat interfaces with message bubbles, typing indicators, and conversation history stored in Adalo's built-in relational database. Create AI chatbots, customer support assistants, or interactive tutors.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4DD;</div>
                    <h3>Prompt Management</h3>
                    <p>Store system prompts, templates, and user preferences in the database. Build prompt template libraries that users can select, customize, and reuse. Manage prompt versions without redeploying the app.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F5BC;&#xFE0F;</div>
                    <h3>Image &amp; File Processing</h3>
                    <p>Upload images through native camera access on iOS and Android. Send photos to vision APIs for analysis, OCR, or classification. Display AI-generated images from DALL-E or Stable Diffusion in your app.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F4CA;</div>
                    <h3>Usage Tracking Dashboard</h3>
                    <p>Build admin dashboards that track API calls, token usage, response times, and costs. Monitor per-user activity and set usage limits using database records and conditional logic.</p>
                </div>

<div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Notify users when AI processing completes, new content is generated, or results are ready. Native push notifications on iOS and Android keep users engaged with your AI app.</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 AI 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 AI 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 AI App to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your app does. Magic Start generates a complete app with screens, database, and navigation from your description. Ada builds the app structure&mdash;you'll add the AI API connection in step 3.</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 an AI writing assistant app. I need a home screen with prompt templates, a chat interface where users type questions and see AI responses, a history screen showing past conversations, and a settings screen for choosing the AI model."
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design the AI Interaction Flow</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your chat layout, prompt input fields, and result displays. Add features like prompt templates or conversation history with Magic Add.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical AI app screens:</div>
                            <div class="columns-list">
                                <div class="column-item">Prompt Input</div>
                                <div class="column-item">AI Response</div>
                                <div class="column-item">Chat History</div>
                                <div class="column-item">Template Library</div>
                                <div class="column-item">Settings</div>
                                <div class="column-item">Usage Stats</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Your AI API</h3>
                        <p>Use Custom Actions to connect to OpenAI, Claude, Gemini, or any REST API. Configure the API endpoint, authentication, request body (with user input as variables), and map the response to display in your app. No backend server required.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common AI API connections:</div>
                            <div class="screens-grid">
                                <div class="screen-item">
                                    <div class="screen-title">OpenAI (GPT-4o)</div>
                                    <div class="screen-desc">Text generation, chat completions, summarization, and translation</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Anthropic (Claude)</div>
                                    <div class="screen-desc">Long-form content, analysis, code generation, and reasoning tasks</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">DALL-E / Stable Diffusion</div>
                                    <div class="screen-desc">AI image generation from text prompts displayed in your app</div>
                                </div>
                                <div class="screen-item">
                                    <div class="screen-title">Google Vision / OCR</div>
                                    <div class="screen-desc">Image analysis, text extraction from photos, and object detection</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 AI app on any device form factor directly from the canvas. Test the full flow&mdash;sending prompts, receiving AI responses, browsing history, switching models&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 AI 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 users download the app and start using AI features 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 AI Apps</span>
                <h2>The Fastest Way to Ship AI Apps to the App Store</h2>
                <p class="section-description">
                    Prompt-led web app builders give you web pages. Adalo gives you published native apps.
                </p>
            </div>

<div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Native App Store Publishing</h3>
                    <p>Publish your AI app to the Apple App Store and Google Play as a true native app. Prompt-led web app builders like Lovable and Bolt generate web-only output. Adalo builds native iOS and Android apps from one codebase.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F441;&#xFE0F;</div>
                    <h3>Visual AI Flow Design</h3>
                    <p>See every screen of your AI app on one canvas. Design prompt inputs, response displays, and conversation flows visually&mdash;instead of describing them in a chat prompt and hoping for the right output.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F5C4;&#xFE0F;</div>
                    <h3>Built-In Data Layer</h3>
                    <p>Adalo's relational database stores conversation history, user preferences, prompt templates, and usage metrics without configuring external services. Your AI app has persistent memory out of the box.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B8;</div>
                    <h3>Predictable Platform Cost</h3>
                    <p>Adalo costs $36/mo with unlimited users and storage. You pay your AI API provider (OpenAI, Anthropic) separately based on usage. No surprise platform charges on top of your AI costs.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Visual Canvas for AI Workflows</h3>
                    <p>See input screens, AI processing views, results displays, and history logs simultaneously. Adalo's multi-screen canvas lets you design AI-powered flows visually with spatial precision.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale to Production Traffic</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and handles 1M+ monthly active users. Your AI app handles growing usage without infrastructure changes or performance degradation.</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 AI App vs. Prompt-Led Web Builders vs. Custom Development</h2>
                <p class="section-description">
                    See how building AI apps with Adalo compares to prompt-led web app builders and custom development.
                </p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo AI App</th>
                        <th>Lovable / Bolt (Prompt-Led)</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Build Time</td>
                        <td>&#x2705; Days to weeks</td>
                        <td>Hours (web prototype only)</td>
                        <td>3&ndash;6 months</td>
                    </tr>
                    <tr>
                        <td>Monthly Cost</td>
                        <td>&#x2705; $36/mo flat + AI API costs</td>
                        <td>$20&ndash;50/mo + AI API costs + hosting</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 only&mdash;no app store publishing</td>
                        <td>Yes (if budgeted separately)</td>
                    </tr>
                    <tr>
                        <td>Visual Editing</td>
                        <td>&#x2705; Multi-screen canvas, point-and-direct</td>
                        <td>Chat-based&mdash;describe changes in text</td>
                        <td>Code-based</td>
                    </tr>
                    <tr>
                        <td>Built-In Database</td>
                        <td>&#x2705; Relational database included</td>
                        <td>Requires external setup (Supabase, etc.)</td>
                        <td>Custom implementation</td>
                    </tr>
                    <tr>
                        <td>Code Maintenance</td>
                        <td>&#x2705; No code to maintain</td>
                        <td>Generated code you must maintain</td>
                        <td>Full codebase to maintain</td>
                    </tr>
                    <tr>
                        <td>AI API Connection</td>
                        <td>&#x2705; Custom Actions (visual config)</td>
                        <td>Code-level API integration</td>
                        <td>Custom backend implementation</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 AI App Success</h2>
                <p class="section-description">
                    Patterns from Makers who have built and shipped successful AI-powered apps with Adalo.
                </p>
            </div>

<div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F3AF;</span> Start with One AI Feature</h3>
                    <p>Don't build a Swiss Army knife. Pick one AI capability (text generation, image analysis, classification) and nail the user experience. Expand to additional AI features once the core works well.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4DD;</span> Store Prompts in the Database</h3>
                    <p>Put system prompts and templates in Adalo's database instead of hardcoding them in Custom Actions. This lets you update prompts without republishing the app and A/B test different prompt versions.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x23F3;</span> Handle Loading States</h3>
                    <p>AI API calls take 1&ndash;10 seconds. Design loading indicators, typing animations, or progress bars so users know the AI is working. A blank screen during processing feels broken; a spinner feels intentional.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4B0;</span> Monitor API Costs Early</h3>
                    <p>Build a usage tracking dashboard before launch. Track API calls per user, token counts, and costs. Set up alerts via Zapier when usage exceeds thresholds so you're never surprised by an AI bill.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Use SheetBridge for Training Data</h3>
                    <p>If your prompts, examples, or reference data live in Google Sheets, use SheetBridge to connect them as a relational database. Update your AI's context without redeploying the app.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Test with Edge-Case Inputs</h3>
                    <p>AI features fail in surprising ways. Before launching, test with empty inputs, very long inputs, special characters, and nonsensical prompts. Build graceful error handling for every failure mode.</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; Ship an AI App</h2>
            </div>

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

<div class="requirement-card">
                    <div class="requirement-icon">&#x26A1;</div>
                    <div class="requirement-content">
                        <h4>Custom Actions for Any API</h4>
                        <p>Connect to OpenAI, Claude, Gemini, or any REST endpoint. Configure authentication, request bodies, and response mapping visually&mdash;no backend code required.</p>
                    </div>
                </div>

<div class="requirement-card">
                    <div class="requirement-icon">&#x1F4C4;</div>
                    <div class="requirement-content">
                        <h4>Google Sheets via SheetBridge</h4>
                        <p>Store prompt templates, training data, or configuration in Google Sheets. SheetBridge connects your spreadsheet as a relational database for easy content management.</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 completed AI processing, new content alerts, and engagement reminders. Keep users coming back to your AI app.</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 AI 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">How do I connect OpenAI or Claude to my Adalo app?</h3>
                    <div class="faq-answer">
                        <p>Through Custom Actions. You configure the API endpoint (e.g., api.openai.com/v1/chat/completions), add your API key as an authentication header, define the request body with user input mapped to variables, and map the response fields to display in your app. The entire configuration is visual&mdash;no backend server, no code deployment. You bring your own API key from OpenAI, Anthropic, Google, or any other provider.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">Can I build AI features into any type of app?</h3>
                    <div class="faq-answer">
                        <p>Yes. AI features via Custom Actions can be added to any Adalo app&mdash;CRM apps with AI-powered lead scoring, inventory apps with image-based item recognition, marketplace apps with smart search, or standalone AI tools like chatbots and content generators. The AI capability is an integration layer, not a separate app type.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How is Ada (Adalo's AI builder) different from the AI app I'm building?</h3>
                    <div class="faq-answer">
                        <p>Ada is the AI that helps you build the app itself&mdash;it generates screens, databases, and navigation from your description using Magic Start, and makes changes when you visually direct it on the canvas. The AI in your app (OpenAI, Claude, etc.) is what your end users interact with. Ada builds the container; your AI API provides the intelligence inside it. They're separate systems serving different purposes.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How do I manage prompts and templates in the app?</h3>
                    <div class="faq-answer">
                        <p>Store system prompts and user-facing templates in Adalo's built-in relational database as a Prompts collection. Each record holds the prompt text, category, model preference, and parameters. Users can browse templates, select one, and customize it before sending to the AI. Since prompts live in the database, you can update them without republishing the app&mdash;just change the record.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How much does it cost to run an AI app on 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. AI API costs are separate and paid directly to your provider (OpenAI, Anthropic, etc.). For reference, OpenAI's GPT-4o costs roughly $2.50 per million input tokens. A typical AI app with 1,000 daily queries might cost $5&ndash;30/mo in API fees on top of the $36 Adalo subscription. The free plan includes 500 database records to prototype your AI app before committing.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">How is Adalo different from Lovable or Bolt for AI apps?</h3>
                    <div class="faq-answer">
                        <p>Lovable and Bolt are prompt-led web app builders&mdash;you describe what you want in text, they generate web code, and you deploy a web app. Adalo is a no-code app builder&mdash;you see every screen on a canvas, visually direct changes, and publish native iOS and Android apps to the App Store and Google Play. If you need a quick web prototype, prompt-led builders work well. If you need a published native app with a polished user experience, a built-in database, and no code to maintain, Adalo is the better fit.</p>
                    </div>
                </div>

<div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for AI apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building the user-facing app layer with AI integrations, but it doesn't replace dedicated AI infrastructure. Real-time streaming responses (token-by-token display), fine-tuning AI models, running ML inference locally on-device, and building complex AI pipelines with chained model calls require custom development or specialized AI platforms. Adalo's Custom Actions handle standard request-response API patterns, which covers most AI app use cases (chatbots, content generation, image analysis, classification). For apps that need streaming or on-device ML, you'd need native development.</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/marketplace-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Marketplace Apps</a>, <a href="https://www.adalo.com/solutions/inventory-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Inventory 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 AI Apps with Adalo</h2>
                <p class="section-description">
                    Step-by-step guides, video walkthroughs, and documentation to help you build and ship AI-powered apps.
                </p>
            </div>

<div class="resources-grid">
                <a href="https://help.adalo.com/integrations/custom-actions" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Custom Actions: Connect Any API</h3>
                    <p>How to configure Custom Actions to connect your app to OpenAI, Claude, and other REST APIs.</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>External Collections for AI Data</h3>
                    <p>How to use External Collections to read and write data from external AI services and databases.</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>Managing AI Prompts with SheetBridge</h3>
                    <p>Use Google Sheets to manage prompt templates and AI configuration without redeploying your app.</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>Database for Conversation History</h3>
                    <p>Store AI conversations, user preferences, and usage data using Adalo's built-in relational database.</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 AI App?</h2>
            <p>
                Join Makers who are shipping AI-powered native apps to the App Store and Google Play&mdash;without writing code or maintaining a backend.
            </p>
            <div class="cta-buttons">
                <a href="https://www.adalo.com/signup" class="btn btn-white">
                    Start Building Your AI 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>