Internal Tools & Operations 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/internal-tools/#webpage",
                "url": "https://www.adalo.com/solutions/internal-tools-app-builder",
                "name": "Internal Tools & Operations Apps | Adalo",
                "description": "Build custom internal tools for iOS, Android, and web with Adalo's no-code app builder. Approval workflows, employee portals, field inspections, and operations dashboards\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": "Internal Tools", "item": "https://www.adalo.com/solutions/internal-tools-app-builder" }
                ]
            },
            {
                "@type": "FAQPage",
                "mainEntity": [
                    { "@type": "Question", "name": "What is Adalo?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project \u2014 no code, no developers required." } },
                    { "@type": "Question", "name": "Can I build role-based access control?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo supports visibility rules that control which screens, components, and data users see based on their role. Managers see approval queues; employees see only their own requests." } },
                    { "@type": "Question", "name": "Can I build approval workflows?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Build multi-step approval workflows using Adalo's database and conditional logic. Every action is logged with timestamps and user attribution for a full audit trail." } },
                    { "@type": "Question", "name": "Can I connect to our existing HR or ERP system?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, if your system exposes a REST API. Adalo's External Collections and Custom Actions connect to any REST endpoint. Use Zapier or Make as a bridge for systems without an API." } },
                    { "@type": "Question", "name": "Do field workers get offline access?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's native apps cache previously viewed data for low-connectivity environments. Full offline editing with sync-on-reconnect is on the product roadmap." } },
                    { "@type": "Question", "name": "Is Adalo secure enough for internal company data?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo provides user authentication, role-based access control, HTTPS encryption, and encrypted databases. For enterprise-grade compliance needs, verify current certifications with Adalo's security documentation." } },
                    { "@type": "Question", "name": "How much does a custom internal tool cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo starts at $36/mo with unlimited users and storage. Compare to Retool at $10+/user/month (50-person team = $500+/mo) or custom development at $50K\u2013200K+ upfront. Free plan includes 500 records." } },
                    { "@type": "Question", "name": "What can't Adalo do compared to Retool?", "acceptedAnswer": { "@type": "Answer", "text": "Retool excels at developer-led admin panels with direct SQL queries and custom JavaScript. Adalo is better when ops managers need to build their own tools, when field workers need native mobile access, or when per-seat pricing doesn't work." } }
                ]
            }
        ]
    }
    </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>Internal Tools</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x2699;&#xFE0F; Internal Tools &amp; Ops
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">Internal Tools</span> for Your Operations 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 the exact operations tools your team needs, not what an off-the-shelf platform decided they need.
                    </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/approvals</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Approval Queue</h4>
                                    <div class="dk-add">+ New Request</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">Pending</div>
                                            <div class="glass-card">
                                                <div class="glass-name">PO-2847</div>
                                                <div class="glass-price">$5,200</div>
                                                <span class="glass-tag glass-tag-new">BUDGET</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">HR-1923</div>
                                                <div class="glass-price">New hire</div>
                                                <span class="glass-tag glass-tag-sale">URGENT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">FAC-0312</div>
                                                <div class="glass-price">Repair</div>
                                                <div class="glass-sub">HVAC unit</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Reviewing</div>
                                            <div class="glass-card">
                                                <div class="glass-name">IT-4521</div>
                                                <div class="glass-price">Software</div>
                                                <span class="glass-tag glass-tag-pop">IT</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">PO-2845</div>
                                                <div class="glass-price">$890</div>
                                                <div class="glass-sub">Office supplies</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">TR-0198</div>
                                                <div class="glass-price">Travel</div>
                                                <span class="glass-tag glass-tag-new">EXPENSE</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Approved</div>
                                            <div class="glass-card">
                                                <div class="glass-name">PO-2840</div>
                                                <div class="glass-price">$3,100</div>
                                                <span class="glass-tag glass-tag-ok">DONE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">IT-4519</div>
                                                <div class="glass-price">Licenses</div>
                                                <span class="glass-tag glass-tag-ok">PROCURED</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Rejected</div>
                                            <div class="glass-card">
                                                <div class="glass-name">PO-2838</div>
                                                <div class="glass-price">$12,400</div>
                                                <div class="glass-sub">Over budget</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">MK-0721</div>
                                                <div class="glass-price">$8,900</div>
                                                <span class="glass-tag glass-tag-sale">DENIED</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>PO-2847</h4>
                                    <span class="neon-items">$5,200</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">Requester</div>
                                            <div class="n-amount neon-cyan">Jane Park</div>
                                            <div class="n-contact">Marketing Dept</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Category</div>
                                            <div class="n-amount neon-gold">Equipment</div>
                                            <div class="n-contact">Q1 Budget</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Justification</div>
                                            <div class="n-amount neon-magenta">Team laptops</div>
                                            <div class="n-contact">3 units</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">SUBMITTED</div>
                                            <div class="tb-total-amount">Mar 1</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>Quick Approve</h4>
                                    <span class="native-accent">4 pending</span>
                                </div>
                                <div class="native-progress">
                                    <div class="progress-dot" style="background:#059669;"></div>
                                    <div class="progress-line" style="background:#a7f3d0;"></div>
                                    <div class="progress-dot" style="background:#059669;box-shadow:0 0 6px rgba(5,150,105,0.3);"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                    <div class="progress-line" style="background:#e5e7eb;"></div>
                                    <div class="progress-dot" style="background:#e5e7eb;"></div>
                                </div>
                                <div class="native-progress-labels">
                                    <span>Submit</span>
                                    <span class="active">Review</span>
                                    <span>Approve</span>
                                    <span>Process</span>
                                </div>
                                <div class="native-content">
                                    <div class="native-card">
                                        <div class="native-row">
                                            <span class="native-label" style="margin:0;">Priority</span>
                                            <span class="native-pill pill-success">Normal</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Queue</div>
                                        <div class="native-row">
                                            <span class="native-value">PO-2847</span>
                                            <span class="native-price">$5,200</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">HR-1923</span>
                                            <span class="native-price">Hire</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">IT-4521</span>
                                            <span class="native-price">License</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Pending</span>
                                        <span class="native-total-amount">4</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 Internal Tool You Can Imagine</h2>
                <p class="section-description">From employee portals to field inspection apps&mdash;describe what you need and Ada, Adalo's AI builder, generates a working internal tool with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x2705;</div><div class="chip-text">Approval Workflow</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F464;</div><div class="chip-text">Employee Portal</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CB;</div><div class="chip-text">Field Inspection</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CA;</div><div class="chip-text">Operations Dashboard</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4B0;</div><div class="chip-text">Expense Tracker</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4C5;</div><div class="chip-text">PTO Manager</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4DD;</div><div class="chip-text">Work Order System</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F465;</div><div class="chip-text">Team Directory</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Your Team Shouldn't Wait Months for IT to Build a Simple Tool</h2>
                <p class="section-description">Most operations teams are stuck between fragile spreadsheets and enterprise platforms that require IT involvement for every change. There's a faster way.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Internal Tools Problem</h3>
                    <ul class="card-list">
                        <li>Approval workflows managed through email chains and sticky notes</li>
                        <li>Employee requests tracked in spreadsheets with no accountability trail</li>
                        <li>Field workers can't access tools on their phones between sites</li>
                        <li>Retool and Power Apps require developer-level skills to configure</li>
                        <li>IT backlogs mean simple tools take weeks or months to build</li>
                        <li>Per-seat licensing makes it expensive to give every employee access</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Internal Tools Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design approval flows, dashboards, and portals your way</li>
                        <li>Built-in relational database tracks requests, employees, and approvals with full audit trail</li>
                        <li>Native iOS and Android apps for field workers, drivers, and remote staff</li>
                        <li>$36/mo with unlimited users, records, and storage&mdash;no per-seat charges</li>
                        <li>Ada generates a working internal tool from a description&mdash;ship in days, not months</li>
                        <li>Operations managers can build and update tools without waiting for IT</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 Operations Team Needs in One App</h2>
                <p class="section-description">Built for teams that need internal tools tailored to how they actually work&mdash;on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature"><div class="feature-icon">&#x2705;</div><h3>Approval Workflows</h3><p>Build multi-step approval flows for PTO requests, expense reports, purchase orders, and more. Managers receive push notifications, review details, and approve or reject with a tap. Every action is logged in the database with timestamps and user attribution.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F464;</div><h3>Employee Directory &amp; Profiles</h3><p>Store employee information in Adalo's built-in relational database. Link employees to departments, managers, roles, and locations. Build searchable directories with photos, contact details, and org chart views.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CB;</div><h3>Field Inspections &amp; Forms</h3><p>Create custom inspection checklists, maintenance reports, and site surveys. Field workers complete forms on their phones with photo capture, GPS location stamps, and signature collection&mdash;data syncs to the central database in real time.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F514;</div><h3>Push Notifications</h3><p>Native push notifications alert managers when requests need approval, remind staff of overdue tasks, and notify field workers of new assignments. Critical for teams that can't check email or dashboards during the workday.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F4CA;</div><h3>Operations Dashboards</h3><p>Build admin dashboards showing KPIs, pending approvals, team activity, and resource utilization. Filter by department, location, date range, or any custom field your operations process requires.</p></div>
                <div class="feature"><div class="feature-icon">&#x1F512;</div><h3>Role-Based Access</h3><p>Control who sees what. Give managers approval permissions, limit employees to their own requests, and restrict admin dashboards to operations leads. Adalo's visibility rules let you build different views for different roles from the same 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 Internal Tool 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 internal tool 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 Tool to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, what your operations team needs. Magic Start generates a complete internal tool 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 an employee self-service app. I need a PTO request form, an expense submission form with photo receipt upload, a team directory, an approval queue for managers, and an admin dashboard showing pending requests and PTO balances."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Configure Roles &amp; Permissions</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to set up role-based views&mdash;employee self-service screens, manager approval queues, and admin dashboards. Use visibility rules to control access by role.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical role structure:</div>
                            <div class="columns-list">
                                <div class="column-item">Employee</div>
                                <div class="column-item">Manager</div>
                                <div class="column-item">HR Admin</div>
                                <div class="column-item">Ops Lead</div>
                                <div class="column-item">Field Worker</div>
                                <div class="column-item">Executive</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 operations data, or connect Google Sheets via SheetBridge if your team already tracks workflows in spreadsheets. Add Zapier or Make integrations for HR systems, Slack notifications, and accounting tools.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common internal tool integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import employee rosters and schedules from Google Sheets</div></div>
                                <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to Slack, email, HR systems, and accounting software</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to existing HRIS or ERP endpoints</div></div>
                                <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger Slack alerts when approvals are needed or requests are submitted</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 internal tool on any device form factor directly from the canvas. Test the full workflow&mdash;submitting requests, approving items, checking dashboards, completing field forms&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 internal tool 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 team downloads the app and starts working 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 Internal Tools</span>
                <h2>The Internal Tool Platform That Doesn't Need IT</h2>
                <p class="section-description">Operations managers build and maintain their own tools. No developer required. No IT backlog.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card"><div class="benefit-icon">&#x1F4B8;</div><h3>Fraction of Enterprise Cost</h3><p>Adalo costs $36/mo with unlimited users, records, and storage. No per-seat licensing. A 50-person team on Retool pays $500+/mo. That same team on Adalo costs $36/mo total, with native mobile apps included.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F4F1;</div><h3>Field Worker Mobility</h3><p>True native iOS and Android apps with push notifications, camera access, and GPS. Field workers, drivers, and remote staff submit inspections, expenses, and time logs from their phones instead of waiting until they're back at a desk.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F6E0;&#xFE0F;</div><h3>Ops Managers Build It Themselves</h3><p>Adalo's visual canvas and Ada's AI generation mean operations managers can build their own tools without writing code or filing IT tickets. Describe what you need, visually customize it, and publish.</p></div>
                <div class="benefit-card"><div class="benefit-icon">&#x1F680;</div><h3>Ship in Days, Not Quarters</h3><p>Ada generates your internal tool from a description. Visually customize it on the canvas. Publish to three platforms from one build. Most Makers go from idea to live tool in under a week.</p></div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>See Every Workflow on One Canvas</h3>
                    <p>Adalo's multi-screen canvas shows approval forms, dashboards, checklists, and admin panels simultaneously. Visually direct the AI to refine flows—no developer handoff required.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Scale Across Departments</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and handles 1M+ monthly active users. Your internal tool grows from a single-team utility to a company-wide platform without re-building.</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 Internal Tools vs. Developer Platforms vs. Custom Development</h2>
                <p class="section-description">See how building internal tools with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead><tr><th>Factor</th><th>Adalo Internal Tool</th><th>Retool / Glide</th><th>Custom Development</th></tr></thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Days to weeks (Retool requires dev skills)</td><td>3&ndash;6 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited users)</td><td>$10&ndash;50/user/mo (Retool); Glide $25&ndash;250/mo</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>Retool: web only. Glide: PWA only.</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in</td><td>Retool: none. Glide: limited.</td><td>Custom implementation required</td></tr>
                    <tr><td>Builder Skill Level</td><td>&#x2705; Operations managers (no code)</td><td>Retool: developer-level. Glide: non-technical.</td><td>Full engineering team</td></tr>
                    <tr><td>Built-In Database</td><td>&#x2705; Relational database included</td><td>Retool: external DB required. Glide: Sheets-based.</td><td>Custom setup</td></tr>
                    <tr><td>Time to Change</td><td>&#x2705; Minutes</td><td>Retool: hours (dev needed). Glide: minutes.</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 Internal Tool Success</h2>
                <p class="section-description">Patterns from Makers who have built and shipped successful internal tools with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card"><h3><span class="practice-icon">&#x2705;</span> Start with the Approval Flow</h3><p>Most internal tools center on a request-and-approve workflow. Build your approval flow first (submit request, manager review, approve/reject, notify), then expand to dashboards, history, and reporting.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F512;</span> Plan Roles Before Screens</h3><p>Decide who sees what before designing screens. Map out employee, manager, and admin views. Build role-based visibility rules into your database from the start&mdash;retrofitting permissions is harder.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F4F1;</span> Design Mobile-First for Field Staff</h3><p>If field workers or remote staff will use the tool, design for phones first. Large tap targets, minimal typing, camera-based input (photos, receipts, barcodes), and clear action buttons.</p></div>
                <div class="practice-card"><h3><span class="practice-icon">&#x1F517;</span> Connect Slack for Notifications</h3><p>Use Zapier to send Slack messages when approvals are needed or requests change status. Teams already live in Slack&mdash;meeting them there drives adoption faster than relying on email or push notifications alone.</p></div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Migrate from Spreadsheets with SheetBridge</h3>
                    <p>If your team tracks processes in Google Sheets, use SheetBridge to connect them as a relational database. Migrate checklists, approvals, and tracking data without starting from scratch.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Shadow the Current Workflow First</h3>
                    <p>Before building, watch 3–5 employees complete the task your tool will replace. Real workflows have steps, shortcuts, and exceptions that documentation doesn't capture.</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 Internal Tools</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 requests, employees, or approvals. 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 approval requests, task assignments, and deadline reminders. Keeps your team responsive without requiring them to check dashboards constantly.</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 operations 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 internal tool to 6,000+ services. Sync with Slack, email, HR platforms, accounting software, and calendar tools 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 Internal Tools</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 role-based access control?</h3><div class="faq-answer"><p>Yes. Adalo supports visibility rules that control which screens, components, and data users see based on their role. You can create roles (employee, manager, admin) in the database and show or hide entire screens, approval buttons, and data views based on the logged-in user's role. Managers see approval queues; employees see only their own requests.</p></div></div>

<div class="faq-item"><h3 class="faq-question">Can I build approval workflows?</h3><div class="faq-answer"><p>Yes. Build multi-step approval workflows using Adalo's database and conditional logic. An employee submits a request (PTO, expense, purchase order), the request appears in the manager's approval queue, the manager approves or rejects with a tap, and the employee receives a push notification with the outcome. Every action is logged with timestamps and user attribution for a full audit trail.</p></div></div>

<div class="faq-item"><h3 class="faq-question">Can I connect to our existing HR or ERP system?</h3><div class="faq-answer"><p>Yes, if your system exposes a REST API. Adalo's External Collections and Custom Actions can connect to any REST endpoint to read and write data. For systems without an API, use Zapier or Make as a bridge. Many teams start with Adalo's built-in database and connect to their HRIS or ERP incrementally as needs grow.</p></div></div>

<div class="faq-item"><h3 class="faq-question">Do field workers get offline access?</h3><div class="faq-answer"><p>Adalo's native apps cache previously viewed data, so field workers can reference information in areas with poor connectivity. Full offline editing with sync-on-reconnect is on the product roadmap. For field teams, the native app experience is significantly more reliable than web-based tools in low-connectivity environments like construction sites, warehouses, or rural areas.</p></div></div>

<div class="faq-item"><h3 class="faq-question">Is Adalo secure enough for internal company data?</h3><div class="faq-answer"><p>Adalo provides user authentication, role-based access control, HTTPS encryption for data in transit, and encrypted databases. For internal tools handling standard operational data (PTO requests, expenses, inspections), this meets most small and mid-size business requirements. For enterprise-grade security needs like SOC 2 compliance, HIPAA, or GDPR-specific data residency, verify current certifications with Adalo's security documentation.</p></div></div>

<div class="faq-item"><h3 class="faq-question">How much does a custom internal tool 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 Retool at $10+/user/month (a 50-person team costs $500+/mo) or custom development at $50K&ndash;200K upfront plus ongoing maintenance. The free plan includes 500 database records so you can prototype before committing.</p></div></div>

<div class="faq-item"><h3 class="faq-question">What can't Adalo do compared to Retool?</h3><div class="faq-answer"><p>Retool excels at building complex admin panels for developer-led teams&mdash;direct SQL queries, custom JavaScript transformations, and deep database integrations. If your internal tool needs to query PostgreSQL directly, join data across multiple databases with SQL, or embed custom JavaScript logic, Retool gives you more control. The trade-off: Retool requires a developer to build and maintain, costs $10+/user/month, and produces web-only tools with no native mobile apps. Adalo is the better choice when operations managers need to build and maintain their own tools, when field workers need native mobile access, or when per-seat pricing doesn't work for large teams.</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/ai-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">AI-Powered Apps</a>. Learn more about <a href="https://www.adalo.com/" style="color: var(--teal); font-weight: 600; text-decoration: none;">Adalo's no-code app builder</a>.
                </p>
            </div>
        </div>
    </div>

<div class="section section-light resources">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Resources &amp; Tutorials</span>
                <h2>Learn How to Build Internal Tools with Adalo</h2>
                <p class="section-description">Step-by-step guides, video walkthroughs, and documentation to help you build and ship your internal tool.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-internal-tools" class="resource-card"><div class="resource-type">Tutorial</div><h3>How to Build Internal Tools Without Code</h3><p>Full walkthrough: approval workflows, role-based views, dashboards, 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 to Existing Systems</h3><p>How to use External Collections and Custom Actions to connect your tool to existing HR, ERP, and database systems.</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 Internal App via SheetBridge</h3><p>Migrate your spreadsheet workflows to a real app without losing your existing data or processes.</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>Building Role-Based Access</h3><p>How to use collections, relationships, and visibility rules to control access by user role.</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 Team's Internal Tool?</h2>
            <p>Join Makers who have replaced email chains, spreadsheet trackers, and expensive per-seat 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 Internal Tool 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>