1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Call Karma - Business Intelligence That Comes to You</title> 7 <meta name="description" content="Get actionable business insights delivered to your inbox every morning, with urgent SMS alerts when immediate action can save deals or prevent problems." /> 8 9 <!-- Open Graph / Facebook --> 10 <meta property="og:type" content="website" /> 11 <meta property="og:url" content="https://callkarma.ai/" /> 12 <meta property="og:title" content="Call Karma - Business Intelligence That Comes to You" /> 13 <meta property="og:description" content="AI-powered call analytics platform delivering actionable insights to your inbox with urgent SMS alerts when immediate action can save deals." /> 14 <meta property="og:image" content="https://callkarma.ai/og-image.svg" /> 15 <meta property="og:image:width" content="1200" /> 16 <meta property="og:image:height" content="630" /> 17 <meta property="og:site_name" content="Call Karma" /> 18 19 <!-- Twitter --> 20 <meta property="twitter:card" content="summary_large_image" /> 21 <meta property="twitter:url" content="https://callkarma.ai/" /> 22 <meta property="twitter:title" content="Call Karma - Business Intelligence That Comes to You" /> 23 <meta property="twitter:description" content="AI-powered call analytics platform delivering actionable insights to your inbox with urgent SMS alerts when immediate action can save deals." /> 24 <meta property="twitter:image" content="https://callkarma.ai/og-image.svg" /> 25 26 <!-- Additional SEO --> 27 <meta name="robots" content="index, follow" /> 28 <meta name="author" content="Call Karma" /> 29 <meta name="keywords" content="call analytics, business intelligence, AI phone analysis, call tracking, customer insights, sales intelligence, call scoring" /> 30 <link rel="canonical" href="https://callkarma.ai/" /> 31 32 <!-- Favicon --> 33 <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 34 <link rel="manifest" href="/manifest.json" /> 35 <meta name="theme-color" content="#3192F6" /> 36 37 <!-- Mobile-optimized performance hints --> 38 <link rel="dns-prefetch" href="//fonts.googleapis.com" /> 39 <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" /> 40 <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin /> 41 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 42 43 <!-- Mobile-specific resource hints --> 44 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 45 <meta name="mobile-web-app-capable" content="yes" /> 46 <meta name="apple-mobile-web-app-status-bar-style" content="default" /> 47 48 <!-- Analytics performance optimizations - mobile deferred --> 49
49<script> 50 // Only preconnect to analytics on desktop or after interaction on mobile 51 if (window.innerWidth > 768) { 52 const prefetches = [ 53 '//www.googletagmanager.com', 54 '//www.google-analytics.com', 55 '//app.posthog.com' 56 ]; 57 prefetches.forEach(url => { 58 const link = document.createElement('link'); 59 link.rel = 'dns-prefetch'; 60 link.href = url; 61 document.head.appendChild(link); 62 }); 63 } 64 </script>
64 65 66 <!-- Critical resource preloading for LCP optimization --> 67 <link rel="preload" href="/images/placeholder-dashboard-2-optimized.webp" as="image" type="image/webp" /> 68 <link rel="modulepreload" href="data:application/octet-stream;base64,aW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gInJlYWN0LWRvbS9jbGllbnQiOwppbXBvcnQgeyBRdWVyeUNsaWVudCwgUXVlcnlDbGllbnRQcm92aWRlciB9IGZyb20gIkB0YW5zdGFjay9yZWFjdC1xdWVyeSI7CmltcG9ydCBBcHAgZnJvbSAiLi9BcHAiOwppbXBvcnQgIi4vaW5kZXguY3NzIjsKCmNvbnN0IHF1ZXJ5Q2xpZW50ID0gbmV3IFF1ZXJ5Q2xpZW50KHsKICBkZWZhdWx0T3B0aW9uczogewogICAgcXVlcmllczogewogICAgICBzdGFsZVRpbWU6IDYwICogMTAwMCwKICAgICAgZ2NUaW1lOiA1ICogNjAgKiAxMDAwLAogICAgfSwKICB9LAp9KTsKCi8vIE1pbmltYWwgcmVuZGVyaW5nIGZvciBtb2JpbGUgcGVyZm9ybWFuY2UKY3JlYXRlUm9vdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgicm9vdCIpISkucmVuZGVyKAogIDxRdWVyeUNsaWVudFByb3ZpZGVyIGNsaWVudD17cXVlcnlDbGllbnR9PgogICAgPEFwcCAvPgogIDwvUXVlcnlDbGllbnRQcm92aWRlcj4KKTsK" /> 69 70 <!-- Defer font preloading --> 71
71<script> 72 requestIdleCallback(() => { 73 const font1 = document.createElement('link'); 74 font1.rel = 'preload'; 75 font1.as = 'font'; 76 font1.href = 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2'; 77 font1.type = 'font/woff2'; 78 font1.crossOrigin = 'anonymous'; 79 document.head.appendChild(font1); 80 }, { timeout: 1000 }); 81 </script>
81 82 83 <!-- Basic styles --> 84 <style> 85 body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } 86 87 .header { 88 position: fixed; 89 top: 0; 90 width: 100%; 91 background: rgba(255,255,255,0.95); 92 z-index: 50; 93 padding: 1rem 0; 94 } 95 .header-content { 96 max-width: 1200px; 97 margin: 0 auto; 98 padding: 0 1rem; 99 display: flex; 100 justify-content: space-between; 101 align-items: center; 102 } 103 .logo { font-size: 1.5rem; font-weight: 800; color: #3192F6; } 104 105 /* Mobile instant hero overlay - uses z-index layering, NOT display:none on #root */ 106 #mobile-instant { 107 position: fixed; 108 top: 0; 109 left: 0; 110 width: 100%; 111 height: 100vh; 112 background: linear-gradient(135deg, #3192F6 0%, #1E40AF 100%); 113 display: none; /* Hidden by default, shown via JavaScript on homepage mobile */ 114 flex-direction: column; 115 justify-content: center; 116 align-items: center; 117 text-align: center; 118 color: white; 119 z-index: 9999; /* Overlay on top of React app */ 120 padding: 20px; 121 } 122 123 #mobile-instant h1 { 124 font-size: 28px; 125 font-weight: 800; 126 margin: 0 0 16px 0; 127 line-height: 1.2; 128 } 129 130 #mobile-instant .subtitle { 131 font-size: 20px; 132 font-weight: 600; 133 margin: 0 0 24px 0; 134 opacity: 0.95; 135 } 136 137 #mobile-instant .description { 138 font-size: 16px; 139 line-height: 1.6; 140 margin: 0 0 32px 0; 141 max-width: 500px; 142 opacity: 0.9; 143 } 144 145 #mobile-instant .primary-btn { 146 background: white; 147 color: #3192F6; 148 border: none; 149 padding: 16px 32px; 150 border-radius: 8px; 151 font-size: 18px; 152 font-weight: 700; 153 margin: 8px; 154 cursor: pointer; 155 min-width: 200px; 156 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 157 } 158 159 #mobile-instant .secondary-btn { 160 background: transparent; 161 color: white; 162 border: 2px solid white; 163 padding: 14px 30px; 164 border-radius: 8px; 165 font-size: 16px; 166 font-weight: 600; 167 margin: 8px; 168 cursor: pointer; 169 min-width: 180px; 170 } 171 </style> 172 173 <!-- Load CSS for all devices --> 174 175 <!-- Enhanced mobile font loading optimization --> 176
176<script> 177 // Mobile-first font loading with aggressive optimization 178 if (window.innerWidth <= 768) { 179 // Mobile: Load critical fonts only after LCP 180 setTimeout(() => { 181 const link = document.createElement('link'); 182 link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'; 183 link.rel = 'stylesheet'; 184 link.media = 'print'; 185 link.onload = function() { 186 this.media = 'all'; 187 document.documentElement.classList.add('fonts-loaded'); 188 }; 189 document.head.appendChild(link); 190 }, 1000); // Delay for mobile LCP 191 } else { 192 // Desktop: Faster font loading 193 setTimeout(() => { 194 const link = document.createElement('link'); 195 link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'; 196 link.rel = 'stylesheet'; 197 link.media = 'print'; 198 link.onload = function() { 199 this.media = 'all'; 200 document.documentElement.classList.add('fonts-loaded'); 201 }; 202 document.head.appendChild(link); 203 }, 200); 204 } 205 </script>
205 206 207 <!-- Fallback for no-JS with font-display optimization --> 208 <noscript> 209 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 210 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"> 211 </noscript> 212 213 <!-- Critical CSS inline - Mobile Optimized --> 214 <style> 215 /* Critical above-the-fold styles - Mobile First FCP */ 216 *,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb} 217 html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,sans-serif} 218 body{margin:0;line-height:inherit;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f2937;background:#fff} 219 220 /* Critical mobile layout - Minimal classes */ 221 .fixed{position:fixed}.top-0{top:0}.w-full{width:100%}.z-50{z-index:50} 222 .h-16{height:4rem}.mx-auto{margin:0 auto}.px-4{padding:0 1rem} 223 .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between} 224 .text-2xl{font-size:1.5rem}.font-bold{font-weight:700} 225 .pt-20{padding-top:5rem}.min-h-screen{min-height:100vh} 226 227 /* Mobile hero - Simplified */ 228 .py-16{padding:4rem 0}.text-center{text-align:center} 229 .text-4xl{font-size:2.25rem;line-height:2.5rem} 230 .text-gray-900{color:#111827}.text-gray-600{color:#4b5563} 231 .mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem} 232 233 /* Mobile button - Essential only */ 234 .bg-primary{background:#3192f6}.text-white{color:#fff} 235 .px-8{padding:0 2rem}.py-4{padding:1rem 0} 236 .rounded-lg{border-radius:0.5rem} 237 238 /* Mobile specific optimizations */ 239 @media (max-width:767px) { 240 .text-4xl{font-size:1.75rem;line-height:2rem} 241 .px-8{padding:0 1.5rem}.py-4{padding:0.75rem 0} 242 .py-16{padding:2rem 0} 243 .h-16{height:3.5rem} 244 } 245 246 /* Prevent animations on mobile for FCP */ 247 @media (max-width:767px) { 248 *{animation:none!important;transition:none!important} 249 } 250 251 /* Hide FontAwesome icons until loaded */ 252 .fas,.far,.fab{opacity:0} 253 254 /* Skeleton loading for mobile */ 255 .skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite} 256 @keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}} 257 258 /* Critical path only */ 259 #root{min-height:100vh;background:#fff} 260 </style> 261 262 263 264 <!-- Non-critical CSS with media=print to load asynchronously --> 265 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" media="print" onload="this.media='all';document.querySelectorAll('.fas, .far, .fab').forEach(el => el.style.opacity = '1');document.querySelectorAll('.lucide').forEach(el => el.style.opacity = '1');"> 266 <noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"></noscript> 267 268 <!-- Structured Data --> 269
269<script type="application/ld+json"> 270 { 271 "@context": "https://schema.org", 272 "@type": "SoftwareApplication", 273 "name": "Call Karma", 274 "applicationCategory": "BusinessApplication", 275 "description": "AI-powered business intelligence platform that delivers actionable insights from phone calls directly to your inbox with urgent SMS alerts.", 276 "url": "https://callkarma.ai", 277 "operatingSystem": "Web", 278 "offers": { 279 "@type": "Offer", 280 "priceCurrency": "USD", 281 "price": "149", 282 "priceValidUntil": "2025-12-31" 283 }, 284 "provider": { 285 "@type": "Organization", 286 "name": "Call Karma", 287 "url": "https://callkarma.ai", 288 "contactPoint": { 289 "@type": "ContactPoint", 290 "contactType": "customer support", 291 "url": "https://callkarma.ai/contact" 292 } 293 }, 294 "featureList": [ 295 "AI-powered call analytics", 296 "Email-first business intelligence", 297 "SMS urgent alerts", 298 "Multi-platform integrations", 299 "Real-time insights" 300 ] 301 } 302 </script>
302 303
303<script type="module" crossorigin src="/assets/index-BFuMcAQN.js"></script>
303 304 <link rel="stylesheet" crossorigin href="/assets/index-heBaTREa.css"> 305 </head> 306 <body> 307 <!-- Mobile instant hero overlay - Only shown on homepage mobile for LCP optimization --> 308 <div id="mobile-instant"> 309 <h1>Business Intelligence That Comes to You</h1> 310 <div class="subtitle">Transform Every Call Into Business Value</div> 311 <div class="description">Get actionable insights delivered to your inbox every morning, with urgent alerts when immediate action can save deals or prevent problems</div> 312 <button class="primary-btn" onclick="window.location.href='/free-analysis'" aria-label="Get free call analysis">Get Free Analysis</button> 313 <button class="secondary-btn" onclick="hideMobileInstant()" aria-label="View full site">See How It Works</button> 314 </div> 315 316 <div id="root"></div> 317 318 <!-- Mobile optimization logic --> 319
319<script> 320 function hideMobileInstant() { 321 const mobileInstant = document.getElementById('mobile-instant'); 322 if (mobileInstant) { 323 mobileInstant.style.display = 'none'; 324 } 325 } 326 327 // Show mobile instant overlay ONLY on homepage + mobile 328 const isMobile = window.innerWidth <= 768; 329 const isHomepage = window.location.pathname === '/' || window.location.pathname === ''; 330 331 if (isMobile && isHomepage) { 332 // Show the overlay on homepage mobile 333 const mobileInstant = document.getElementById('mobile-instant'); 334 if (mobileInstant) { 335 mobileInstant.style.display = 'flex'; 336 337 // Auto-hide after 2 seconds to show React app 338 setTimeout(hideMobileInstant, 2000); 339 } 340 } 341 </script>
341 342 343 <!-- Ensure Lucide icons are visible after React loads --> 344
344<script> 345 // Multiple approaches to ensure Lucide icons become visible 346 function showLucideIcons() { 347 document.querySelectorAll('.lucide').forEach(el => { 348 el.style.opacity = '1'; 349 el.style.visibility = 'visible'; 350 }); 351 } 352 353 // Run when DOM is ready 354 if (document.readyState === 'loading') { 355 document.addEventListener('DOMContentLoaded', showLucideIcons); 356 } else { 357 showLucideIcons(); 358 } 359 360 // Run periodically to catch dynamically added icons 361 setTimeout(showLucideIcons, 100); 362 setTimeout(showLucideIcons, 500); 363 setTimeout(showLucideIcons, 1000); 364 setTimeout(showLucideIcons, 2000); 365 366 // Observer to catch new icons as they're added 367 const observer = new MutationObserver(() => { 368 showLucideIcons(); 369 }); 370 371 observer.observe(document.body, { 372 childList: true, 373 subtree: true 374 }); 375 </script>
375 376 <!-- Defer non-critical Replit script to avoid render-blocking --> 377
377<script> 378 // Load Replit dev banner asynchronously 379 if (window.location.hostname.includes('replit') || window.location.hostname.includes('repl.it')) { 380 const script = document.createElement('script'); 381 script.src = 'https://replit.com/public/js/replit-dev-banner.js'; 382 script.async = true; 383 script.defer = true; 384 document.head.appendChild(script); 385 } 386 </script>
386 387 </body> 388</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.