Event & Conference 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, .nav-right-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; transition: color 0.2s; }
        .nav-login:hover, .nav-right-link:hover { color: var(--teal); }

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

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

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

.hero::before { content: none; }

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

.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 32px;   }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .breadcrumb a { color: #00A695; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
        .breadcrumb a:hover { opacity: 0.7; }
        .breadcrumb-separator { color: #424242; }

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

/* CYBERPUNK DEVICE CLUSTER */

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

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

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

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

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

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

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

h1 { font-family: 'Work Sans', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; background: linear-gradient(180deg, #006445, #00A695); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: slideUp 0.6s ease-out 0.2s both; }
        .hero-highlight { display: inline; }
        .hero-description { font-size: 16px; line-height: 1.5;  margin-bottom: 36px; color: #000;  }
        .hero-stats { display: flex; gap: 24px; flex-wrap: wrap;  }
        .stat { display: flex; flex-direction: column; }
        .stat-value { font-family: 'Work Sans', sans-serif; font-size: 36px; font-weight: 800; color: #00A695; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 14px; color: #424242; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

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

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

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

.problem-solution { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
        .problem-card, .solution-card { padding: 48px; border-radius: 24px; position: relative; }
        .problem-card { background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%); border: 2px solid #FFD5D5; }
        .problem-card::before { content: '\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/event-app-builder/#webpage",
                "url": "https://www.adalo.com/solutions/event-app-builder",
                "name": "Event & Conference Apps | Adalo",
                "description": "Build custom event and conference apps for iOS, Android, and web with Adalo's no-code app builder. See every screen on one canvas, preview on any device, and visually direct the AI to create schedule, speaker, networking, and check-in features before publishing 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": "Event & Conference Apps", "item": "https://www.adalo.com/solutions/event-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 add ticketing and QR code check-in to my event app?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's built-in database can store attendee records with unique QR codes generated at registration. Organizers scan codes using the app's camera to check attendees in at the door or at individual sessions. For payment processing, connect to Stripe via Zapier or use Adalo's Stripe integration." } },
                    { "@type": "Question", "name": "How much does a custom event app cost?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo's paid plans start at $36/mo with unlimited usage\u2014no caps on attendees, sessions, data, or storage. Compare that to Whova ($2\u20138 per attendee) or custom development ($10,000\u201350,000+). The free plan includes 500 database records so you can prototype your event app before committing." } },
                    { "@type": "Question", "name": "Can attendees receive push notifications for schedule changes?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo builds true native iOS and Android apps with built-in push notification support. You can send notifications for schedule changes, room switches, session reminders, networking matches, and general announcements." } },
                    { "@type": "Question", "name": "Does Adalo support attendee networking features?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. You can build attendee profiles with company, role, and interest fields, then let attendees browse and connect with other participants. Adalo's relational database links attendees to their sessions, interests, and conversations." } },
                    { "@type": "Question", "name": "Can I build an app for a multi-day event with multiple tracks?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Adalo's relational database handles multi-day schedules with multiple tracks, rooms, and session types. You can build day-by-day navigation, track-filtered views, and personalized My Schedule screens." } },
                    { "@type": "Question", "name": "Can I reuse my event app for future events?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Your Adalo event app is yours to keep and update. For your next conference, update the schedule, speakers, and branding in the database\u2014the app structure, design, and App Store listing carry over." } },
                    { "@type": "Question", "name": "What can't Adalo do for event apps?", "acceptedAnswer": { "@type": "Answer", "text": "Adalo excels at building custom, branded event apps with schedules, networking, and attendee engagement features. However, it doesn't include built-in live video streaming\u2014you'd embed a third-party stream. For large-scale hybrid events with thousands of concurrent live stream viewers, dedicated event platforms may be more appropriate. For in-person events where attendee experience matters, Adalo is the practical choice." } }
                ]
            }
        ]
    }
    </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>Event &amp; Conference Apps</span>
            </div>
            <div class="hero-inner">
                <div class="hero-content">
                    <div class="use-case-badge">
                        &#x1F3AA; Events &amp; Conferences
                    </div>
                    <h1>
                        Build Custom <span class="hero-highlight">Event Apps</span> for Any Conference or Gathering
                    </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. Give attendees a branded event experience with schedules, speaker profiles, and networking&mdash;all from your own native app.
                    </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">300+</div>
                            <div class="stat-label">Event Apps Built</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">3</div>
                            <div class="stat-label">Platforms</div>
                        </div>
                        <div class="stat">
                            <div class="stat-value">$36/mo</div>
                            <div class="stat-label">Unlimited Usage</div>
                        </div>
                    </div>
                </div>

<div class="device-column">
                <div class="device-cluster">
                    
                    <div class="cyber-desktop">
                        <div class="frame">
                            <div class="toolbar">
                                <span class="dot dot-r"></span>
                                <span class="dot dot-y"></span>
                                <span class="dot dot-g"></span>
                                <div class="url-bar">app.adalo.com/events</div>
                            </div>
                            <div class="screen">
                                <div class="dk-header">
                                    <h4>Event Schedule</h4>
                                    <div class="dk-add">+ Add Session</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">Track A</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Keynote</div>
                                                <div class="glass-price">9:00 AM</div>
                                                <span class="glass-tag glass-tag-new">MAIN</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Workshop</div>
                                                <div class="glass-price">11:00 AM</div>
                                                <div class="glass-sub">Room 101</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Fireside Chat</div>
                                                <div class="glass-price">1:30 PM</div>
                                                <span class="glass-tag glass-tag-sale">SOLD OUT</span>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Track B</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Panel Talk</div>
                                                <div class="glass-price">10:00 AM</div>
                                                <span class="glass-tag glass-tag-pop">POPULAR</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Networking</div>
                                                <div class="glass-price">12:00 PM</div>
                                                <div class="glass-sub">Lobby</div>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Lightning Talks</div>
                                                <div class="glass-price">3:00 PM</div>
                                                <div class="glass-sub">5 speakers</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Track C</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Demo Hour</div>
                                                <div class="glass-price">2:00 PM</div>
                                                <span class="glass-tag glass-tag-ok">LIVE</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">Office Hours</div>
                                                <div class="glass-price">4:00 PM</div>
                                                <div class="glass-sub">Room 205</div>
                                            </div>
                                        </div>
                                        <div class="dk-col">
                                            <div class="glass-col-header">Evening</div>
                                            <div class="glass-card">
                                                <div class="glass-name">Gala Dinner</div>
                                                <div class="glass-price">7:00 PM</div>
                                                <span class="glass-tag glass-tag-sale">VIP</span>
                                            </div>
                                            <div class="glass-card">
                                                <div class="glass-name">After Party</div>
                                                <div class="glass-price">9:30 PM</div>
                                                <span class="glass-tag glass-tag-ok">ALL ACCESS</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>Keynote</h4>
                                    <span class="neon-items">Track A</span>
                                </div>
                                <div class="tb-kanban">
                                    <div style="flex:1;">
                                        <div class="neon-card">
                                            <div class="n-name">The Future of AI</div>
                                            <div class="n-amount neon-magenta">Dr. Sarah Lee</div>
                                            <div class="n-contact">Main Stage</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Time</div>
                                            <div class="n-amount neon-cyan">9:00 - 10:00</div>
                                            <div class="n-contact">342 registered</div>
                                        </div>
                                        <div class="neon-card">
                                            <div class="n-name">Materials</div>
                                            <div class="n-amount neon-gold">3 files</div>
                                            <div class="n-contact">Download ready</div>
                                        </div>
                                        <div class="tb-total-row">
                                            <div class="tb-total-label">CAPACITY</div>
                                            <div class="tb-total-amount">342/400</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>My Schedule</h4>
                                    <span class="native-accent">4 sessions</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>Register</span>
                                    <span class="active">Check In</span>
                                    <span>Attend</span>
                                    <span>Review</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">Checked In</span>
                                        </div>
                                    </div>
                                    <div class="native-card">
                                        <div class="native-label">Next Up</div>
                                        <div class="native-row">
                                            <span class="native-value">10:00 AM</span>
                                            <span class="native-price">Panel Talk</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">12:00 PM</span>
                                            <span class="native-price">Networking</span>
                                        </div>
                                        <div class="native-row">
                                            <span class="native-value">2:00 PM</span>
                                            <span class="native-price">Demo Hour</span>
                                        </div>
                                    </div>
                                    <div class="native-total">
                                        <span class="native-total-label">Badge</span>
                                        <span class="native-total-amount">#247</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 Event App You Can Imagine</h2>
                <p class="section-description">From single-day meetups to multi-day conferences&mdash;describe what you need and Ada, Adalo's AI builder, generates a working event app with Magic Start in minutes.</p>
            </div>
            <div class="app-types-grid">
                <div class="app-chip"><div class="chip-icon">&#x1F3A4;</div><div class="chip-text">Conference App</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4C5;</div><div class="chip-text">Schedule Builder</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F3AB;</div><div class="chip-text">Ticket Scanner</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F91D;</div><div class="chip-text">Networking Hub</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F399;&#xFE0F;</div><div class="chip-text">Speaker Directory</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4CD;</div><div class="chip-text">Venue Navigator</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4DD;</div><div class="chip-text">Session Feedback</div></div>
                <div class="app-chip"><div class="chip-icon">&#x1F4F8;</div><div class="chip-text">Photo Wall</div></div>
            </div>
        </div>
    </div>

<div class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-label">The Challenge</span>
                <h2>Events Deserve Better Than PDF Agendas &amp; Generic Platforms</h2>
                <p class="section-description">Most event organizers choose between expensive platforms with rigid templates and generic tools that don't deliver a branded experience. Your event deserves its own app.</p>
            </div>
            <div class="problem-solution">
                <div class="problem-card">
                    <h3 class="card-title">The Event Management Problem</h3>
                    <ul class="card-list">
                        <li>PDF schedules that attendees lose or forget to download</li>
                        <li>Generic event platforms that look the same as every other conference</li>
                        <li>No direct communication channel to attendees during the event</li>
                        <li>Eventbrite and Whova charging $2&ndash;8 per attendee for basic features</li>
                        <li>Networking left to chance with no way to connect attendees by interest</li>
                        <li>Post-event feedback collected weeks later when details are forgotten</li>
                    </ul>
                </div>
                <div class="solution-card">
                    <h3 class="card-title">The Adalo Event App Solution</h3>
                    <ul class="card-list">
                        <li>Visual canvas lets you design branded schedule, speaker, and networking screens</li>
                        <li>Built-in relational database connects sessions, speakers, venues, and attendees</li>
                        <li>Native iOS and Android apps with push notifications for schedule changes</li>
                        <li>$36/mo flat with unlimited attendees, sessions, and data&mdash;no per-ticket fees</li>
                        <li>Ada generates a working event app from a description&mdash;ready in days</li>
                        <li>Personalized schedules, real-time updates, and in-app feedback collection</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 Event Needs in One Native App</h2>
                <p class="section-description">Built for organizers who want full control over the attendee experience&mdash;on web, iOS, and Android from a single build.</p>
            </div>
            <div class="features">
                <div class="feature">
                    <div class="feature-icon">&#x1F4C5;</div>
                    <h3>Dynamic Schedule Builder</h3>
                    <p>Create multi-track schedules with session details, speaker bios, room assignments, and time slots. Attendees add sessions to personalized "My Schedule" views and get push notifications before sessions start.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F399;&#xFE0F;</div>
                    <h3>Speaker Profiles &amp; Directory</h3>
                    <p>Rich speaker profiles with photos, bios, session listings, and social links. Attendees browse speakers, save favorites, and get notified when a speaker's session is about to begin.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F91D;</div>
                    <h3>Attendee Networking</h3>
                    <p>Let attendees create profiles, browse other participants by interest or company, and exchange contact information. Built-in messaging connects people without sharing personal phone numbers or emails.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F514;</div>
                    <h3>Push Notifications</h3>
                    <p>Native push notifications for schedule changes, session reminders, venue announcements, and networking matches. Critical for keeping hundreds of attendees informed in real time across a multi-day event.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F3AB;</div>
                    <h3>QR Check-In</h3>
                    <p>Generate unique QR codes for each attendee and scan them at entry or individual sessions. Track attendance in real time from the organizer dashboard without manual check-in sheets.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">&#x1F4CA;</div>
                    <h3>Feedback &amp; Ratings</h3>
                    <p>Collect session ratings and attendee feedback in real time through the app. Survey data flows directly into your database for instant analysis&mdash;no waiting weeks for email survey responses.</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 Event Concept to Live 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 event 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 Event to Ada</h3>
                        <p>Tell Ada, Adalo's AI builder, about your conference or event. Magic Start generates a complete app with schedule screens, speaker profiles, attendee registration, and navigation from your description&mdash;typically in under two minutes.</p>
                        <div class="step-details">
                            <div class="step-details-title">Example prompt:</div>
                            <div style="margin-top: 8px; padding: 16px; background: var(--white); border-radius: 8px; border-left: 3px solid var(--teal);">
                                <div style="font-size: 14px; color: var(--gray-600); line-height: 1.6; font-style: italic;">"Build me a conference app for a 2-day tech summit. I need a multi-track schedule with session details, a speaker directory with bios and photos, attendee profiles with networking, QR code check-in, and push notifications for schedule changes."</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Design Your Schedule &amp; Tracks</h3>
                        <p>See every screen on the visual canvas simultaneously. Point at elements and visually direct Ada to adjust your schedule layout, track colors, session card designs, and speaker profile pages. Add features with Magic Add using natural language.</p>
                        <div class="step-details">
                            <div class="step-details-title">Typical schedule tracks:</div>
                            <div class="columns-list">
                                <div class="column-item">Main Stage</div>
                                <div class="column-item">Workshops</div>
                                <div class="column-item">Panels</div>
                                <div class="column-item">Lightning Talks</div>
                                <div class="column-item">Networking</div>
                                <div class="column-item">After Party</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workflow-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Connect Your Data</h3>
                        <p>Use Adalo's built-in relational database for sessions, speakers, and attendees, or connect Google Sheets via SheetBridge if your team already manages speaker lists in spreadsheets. Add Zapier integrations for ticketing platforms and email marketing.</p>
                        <div class="step-details">
                            <div class="step-details-title">Common event integrations:</div>
                            <div class="screens-grid">
                                <div class="screen-item"><div class="screen-title">SheetBridge</div><div class="screen-desc">Import speaker lists and session data from Google Sheets</div></div>
                                <div class="screen-item"><div class="screen-title">Zapier / Make</div><div class="screen-desc">Connect to ticketing, email marketing, and calendar tools</div></div>
                                <div class="screen-item"><div class="screen-title">Custom API</div><div class="screen-desc">External Collections connect to ticketing APIs and registration systems</div></div>
                                <div class="screen-item"><div class="screen-title">Webhooks</div><div class="screen-desc">Trigger automations when attendees register or sessions change</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 event app on any device form factor directly from the canvas. Test the full attendee flow&mdash;browsing the schedule, viewing speaker profiles, adding sessions, and receiving notifications&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 event 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. Attendees download your branded app and have the full event experience in their pocket.</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 Events</span>
                <h2>Your Event, Your App&mdash;Without the Platform Tax</h2>
                <p class="section-description">Stop paying per attendee for someone else's template. Build the exact event experience your audience deserves.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4B8;</div>
                    <h3>No Per-Attendee Fees</h3>
                    <p>Adalo costs $36/mo with unlimited users, records, and storage. A 1,000-person conference on Whova might cost $3,000+. On Adalo, the same event costs $36/mo total with a fully branded native app.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F3A8;</div>
                    <h3>Fully Branded Experience</h3>
                    <p>Your event app looks and feels like it belongs to your brand. Custom colors, logos, layouts, and navigation&mdash;not a generic template with your logo pasted on top. Published under your own App Store listing.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F4F1;</div>
                    <h3>Native Push Notifications</h3>
                    <p>True native iOS and Android apps mean reliable push notifications for schedule changes, room switches, and networking matches. Web-based event platforms can't match this level of real-time communication.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">&#x1F504;</div>
                    <h3>Reusable Year After Year</h3>
                    <p>Build once, update for each event. Your app infrastructure persists across conferences&mdash;just update the schedule, speakers, and branding. Each subsequent event takes a fraction of the initial build time.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F50D;</div>
                    <h3>Design Every View on One Canvas</h3>
                    <p>See schedules, speaker profiles, networking features, and check-in screens simultaneously. Adalo's multi-screen canvas lets you design event flows visually with AI direction.</p>
                </div>

<div class="benefit-card">
                    <div class="benefit-icon">&#x1F4CA;</div>
                    <h3>Handle Any Event Size</h3>
                    <p>Adalo 3.0 delivers 3–4× faster performance and scales to 1M+ monthly active users. Your app handles 200-person workshops and 20,000-person conferences with the same reliability.</p>
                </div>
            
            </div>
        </div>
    </div>

<div class="section comparison">
        <div class="container">
            <div class="section-header">
                <span class="section-label">Compare Your Options</span>
                <h2>Custom Event App vs. Event Platforms vs. Custom Development</h2>
                <p class="section-description">See how building your own event app with Adalo compares to the alternatives.</p>
            </div>
            <table class="comp-table">
                <thead>
                    <tr>
                        <th>Factor</th>
                        <th>Adalo Event App</th>
                        <th>Eventbrite / Whova</th>
                        <th>Custom Development</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Build Time</td><td>&#x2705; Days to weeks</td><td>Immediate setup, limited customization</td><td>3&ndash;6 months</td></tr>
                    <tr><td>Monthly Cost</td><td>&#x2705; $36/mo flat (unlimited attendees)</td><td>$2&ndash;8 per attendee + platform fees</td><td>$10,000&ndash;50,000+ (build + hosting)</td></tr>
                    <tr><td>Native Mobile App</td><td>&#x2705; iOS and Android (true native)</td><td>Platform's branded app (shared)</td><td>Yes (if budgeted separately)</td></tr>
                    <tr><td>Push Notifications</td><td>&#x2705; Built-in native</td><td>Limited to platform's system</td><td>Custom implementation required</td></tr>
                    <tr><td>Branding</td><td>&#x2705; Fully custom &mdash; your App Store listing</td><td>Template with logo overlay</td><td>Full (at development cost)</td></tr>
                    <tr><td>Reusability</td><td>&#x2705; Update for next event &mdash; same app</td><td>New setup each event</td><td>Reusable (with dev updates)</td></tr>
                    <tr><td>Attendee Data</td><td>&#x2705; You own all data</td><td>Platform controls data access</td><td>Full ownership</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 Event App Success</h2>
                <p class="section-description">Patterns from organizers who have built and shipped successful event apps with Adalo.</p>
            </div>
            <div class="practices-grid">
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4C5;</span> Start with the Schedule</h3>
                    <p>The schedule is the core of every event app. Build the session list, day navigation, and track filters first. Then add speaker profiles, networking, and check-in features around it.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F91D;</span> Make Networking Easy</h3>
                    <p>Let attendees create profiles with interests and company info during registration. Use Adalo's relational database to suggest connections based on shared interests or session attendance.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F514;</span> Plan Your Notifications</h3>
                    <p>Map out which notifications matter: session starting in 10 minutes, room change, speaker swap, networking match. Too many notifications will make attendees turn them off. Be selective.</p>
                </div>
                <div class="practice-card">
                    <h3><span class="practice-icon">&#x1F50D;</span> Collect Feedback in Real Time</h3>
                    <p>Add session rating screens that appear right after each talk ends. Real-time feedback while the session is fresh produces higher response rates and more useful data than post-event email surveys.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F4CB;</span> Import Attendee Lists from Sheets</h3>
                    <p>If your registration data lives in Google Sheets or a CSV export, use SheetBridge to connect it as a relational database. Attendees, tickets, and sessions import without manual entry.</p>
                </div>

<div class="practice-card">
                    <h3><span class="practice-icon">&#x1F9EA;</span> Run a Dry Event First</h3>
                    <p>Use the app at a smaller event or internal meeting before the main conference. Live event conditions—Wi-Fi congestion, simultaneous check-ins, last-minute schedule changes—reveal issues testing can't.</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 an Event App</h2>
            </div>
            <div class="requirements-cards">
                <div class="requirement-card">
                    <div class="requirement-icon">&#x267E;&#xFE0F;</div>
                    <div class="requirement-content">
                        <h4>Unlimited Attendees on Paid Plans</h4>
                        <p>No caps on attendees, sessions, or speakers. Adalo paid plans include unlimited database records, users, and storage. Free plan includes 500 records to prototype your event app.</p>
                    </div>
                </div>
                <div class="requirement-card">
                    <div class="requirement-icon">&#x1F514;</div>
                    <div class="requirement-content">
                        <h4>Push Notifications</h4>
                        <p>Native push notifications for schedule changes, session reminders, room switches, and networking alerts. Keeps attendees informed without relying on email or SMS.</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 managing speakers and sessions in Google Sheets? SheetBridge connects your spreadsheet as a relational database so you can update the app by updating the sheet.</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 event app to ticketing platforms, email marketing tools, CRMs, and survey tools via Zapier or Make. Automate registration workflows and post-event follow-ups.</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 Event Apps</h2>
            </div>
            <div class="faq-container">
                <div class="faq-item">
                    <h3 class="faq-question">What is Adalo?</h3>
                    <div class="faq-answer">
                        <p>Adalo is the no-code app builder that pairs AI-powered generation with a visual multi-screen canvas, so entrepreneurs and business teams can design, build, and publish custom database-driven apps to the Apple App Store, Google Play Store, and web from a single project &mdash; no code, no developers required.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I add ticketing and QR code check-in to my event app?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo's built-in database can store attendee records with unique QR codes generated at registration. Organizers scan codes using the app's camera to check attendees in at the door or at individual sessions. For payment processing, connect to Stripe via Zapier or use Adalo's Stripe integration to sell tickets directly through the app. Attendance data flows into your dashboard in real time.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can attendees receive push notifications for schedule changes?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo builds true native iOS and Android apps with built-in push notification support. You can send notifications for schedule changes, room switches, session reminders, networking matches, and general announcements. This is a significant advantage over web-based event platforms, which rely on email or in-browser notifications that attendees often miss.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Does Adalo support attendee networking features?</h3>
                    <div class="faq-answer">
                        <p>Yes. You can build attendee profiles with company, role, and interest fields, then let attendees browse and connect with other participants. Adalo's relational database links attendees to their sessions, interests, and conversations. You can add in-app messaging so attendees exchange contact information without sharing personal phone numbers or email addresses publicly.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">How much does a custom event app cost?</h3>
                    <div class="faq-answer">
                        <p>Adalo's paid plans start at $36/mo with unlimited usage&mdash;no caps on attendees, sessions, data, or storage. Compare that to Whova ($2&ndash;8 per attendee, so a 500-person event costs $1,000&ndash;4,000) or custom development ($10,000&ndash;50,000+). The free plan includes 500 database records so you can prototype your event app before committing.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I build an app for a multi-day event with multiple tracks?</h3>
                    <div class="faq-answer">
                        <p>Yes. Adalo's relational database handles multi-day schedules with multiple tracks, rooms, and session types. You can build day-by-day navigation, track-filtered views, and personalized "My Schedule" screens where attendees save their preferred sessions. The same database structure works whether your event is a single-day workshop or a week-long conference with parallel tracks.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">Can I reuse my event app for future events?</h3>
                    <div class="faq-answer">
                        <p>Yes, and this is one of the biggest advantages over event platforms that charge per event. Your Adalo event app is yours to keep and update. For your next conference, update the schedule, speakers, and branding in the database&mdash;the app structure, design, and App Store listing carry over. Most organizers find that subsequent events take a fraction of the initial build time.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <h3 class="faq-question">What can't Adalo do for event apps?</h3>
                    <div class="faq-answer">
                        <p>Adalo excels at building custom, branded event apps with schedules, networking, and attendee engagement features. However, it doesn't include built-in live video streaming&mdash;you'd embed a third-party stream (YouTube Live, Vimeo) or link out. Adalo also doesn't provide a built-in payment gateway for ticket sales out of the box&mdash;you'd connect Stripe via integration. For large-scale hybrid events with thousands of concurrent live stream viewers, dedicated event platforms like Hopin or Bizzabo may be more appropriate. For in-person and lightly hybrid events where attendee experience matters most, Adalo is the practical choice.</p>
                    </div>
                </div>
            </div>

<div style="margin-top: 60px; text-align: center; padding: 40px; background: var(--gray-50); border-radius: 16px;">
                <p style="font-size: 16px; color: var(--gray-600); margin-bottom: 20px;">
                    Explore more solutions: <a href="https://www.adalo.com/solutions/crm-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">CRM &amp; Sales Apps</a>, <a href="https://www.adalo.com/solutions/booking-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Booking Apps</a>, <a href="https://www.adalo.com/solutions/business-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Business Apps</a>, and <a href="https://www.adalo.com/solutions/real-estate-app-builder" style="color: var(--teal); font-weight: 600; text-decoration: none;">Real Estate 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 Event Apps with Adalo</h2>
                <p class="section-description">Step-by-step guides, documentation, and examples to help you build and ship your event app.</p>
            </div>
            <div class="resources-grid">
                <a href="https://www.adalo.com/posts/how-to-build-an-event-app" class="resource-card">
                    <div class="resource-type">Tutorial</div>
                    <h3>How to Build an Event App Without Code</h3>
                    <p>Full walkthrough: schedule database, session screens, speaker profiles, and attendee networking.</p>
                    <span class="resource-link">Read guide &rarr;</span>
                </a>
                <a href="https://help.adalo.com/integrations/external-collections" class="resource-card">
                    <div class="resource-type">Documentation</div>
                    <h3>Connecting External Data Sources</h3>
                    <p>How to use External Collections and Custom Actions to connect your event app to ticketing and registration APIs.</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 Event App via SheetBridge</h3>
                    <p>Import your speaker lists and session schedules from Google Sheets into a working event 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>Relational Database Basics</h3>
                    <p>Understand collections, relationships, and record linking&mdash;the foundation of sessions, speakers, and attendees.</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 Event's App?</h2>
            <p>Join organizers who have replaced generic event platforms and PDF schedules 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 Event 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>