PageSourceSearch

https://vibeotter-5690a.firebaseapp.com/

html vibeotter-5690a.firebaseapp.com collected 2026-10-03 14:08:01 UTC 160,510 bytes, 2,510 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <!-- Favicon -->
5    <link rel="icon" type="image/png" href="/favicon.png?v=1790948744">
6    <link rel="apple-touch-icon" href="/favicon.png?v=1790948744">
7    <!-- Acquisition copy assignment: runs pre-paint, byte-identical on every
8         host. No cookie -> weighted pick + 1-year vo_acq cookie; cookie -> its
9         copy; a valid ?copy= override wins. A cookie whose copy id is no longer
10         in VARIANTS re-rolls as a brand-new visitor (fresh UUID) so retired
11         copy rows never absorb new-test traffic. The beacon fires on every
12         eligible load (single redundancy) — the server keeps only the first
13         touch. The static HTML below stays the crawler/no-JS copy.
14         VARIANTS ids/weights must match pricing.html exactly. -->
15    
15<script>
16    (function () {
17        var VARIANTS = { free3_base: 1, free3_paywall: 1 }; // copy id -> assignment weight
18        var HERO = { heroTitle: 'Easy Professional Websites', heroSubtitle: 'Tell the Otter what you want and build a website in 24 minutes' };
19        var TEXT = { free3_base: HERO, free3_paywall: HERO }; // copy id -> { heroTitle, heroSubtitle } overrides; both Free-3 arms share the base hero (the paywall arm differs on pricing.html only)
20        if (location.pathname.indexOf('/es-mx/') === 0) return; // Spanish pages always show baseline
21        if (!window.crypto || !crypto.randomUUID) return; // ancient browser: baseline, unrecorded
22        var m = document.cookie.match(/(?:^|; )vo_acq=([0-9a-f-]{36})\.([A-Za-z0-9_-]{1,40})/);
23        var visitorId = m && VARIANTS[m[2]] != null ? m[1] : crypto.randomUUID();
24        var copyId = m && VARIANTS[m[2]] != null ? m[2] : null;
25        var qs = /[?&]copy=([A-Za-z0-9_-]{1,40})/.exec(location.search);
26        if (qs && VARIANTS[qs[1]] != null) copyId = qs[1];
27        if (!copyId) {
28            var total = 0, k;
29            for (k in VARIANTS) total += VARIANTS[k];
30            var buf = new Uint32Array(1);
31            crypto.getRandomValues(buf);
32            var roll = (buf[0] / 4294967296) * total;
33            for (k in VARIANTS) { roll -= VARIANTS[k]; if (roll < 0) { copyId = k; break; } }
34            if (!copyId) copyId = 'free3_base';
35        }
36        document.cookie = 'vo_acq=' + visitorId + '.' + copyId + '; Max-Age=31536000; Path=/; Secure; SameSite=Lax';
37        window.__voAcq = { visitorId: visitorId, copyId: copyId, text: TEXT[copyId] || {} };
38        // Inlined hostname -> API map (mirror of js/config.js, which loads too late for pre-paint work)
39        var h = location.hostname, api;
40        if (h === 'vibeotter.com' || h === 'www.vibeotter.com') api = 'https://api.vibeotter.com';
41        else if (h === 'vibeotter.dev' || h === 'www.vibeotter.dev') api = 'https://api.vibeotter.dev';
42        else if (h.indexOf('firebaseapp.com') !== -1 || h.indexOf('web.app') !== -1) api = h.indexOf('vibeotter-staging') !== -1 ? 'https://api.vibeotter.dev' : 'https://api.vibeotter.com';
43        else if (h === 'localhost' || h === '127.0.0.1') api = 'http://localhost:3000';
44        else if (/^\d+\.\d+\.\d+\.\d+$/.test(h)) api = 'http://' + h + ':3000';
45        else api = 'https://api.vibeotter.com';
46        var url = api + '/api/acquisition/visit';
47        var payload = JSON.stringify({ v: visitorId, c: copyId, p: location.pathname });
48        var sent = false;
49        if (navigator.sendBeacon) { try { sent = navigator.sendBeacon(url, payload); } catch (e) {} }
50        if (!sent) { try { fetch(url, { method: 'POST', body: payload, keepalive: true, headers: { 'Content-Type': 'text/plain' } }); } catch (e) {} }
51    })();
52    </script>
52
53    <!-- Delayed analytics for better LCP -->
54    
54<script>
55      window.dataLayer = window.dataLayer || [];
56      window.gtag = window.gtag || function(){dataLayer.push(arguments);};
57      window.oaiq = window.oaiq || function () {
58        (window.oaiq.q = window.oaiq.q || []).push(arguments);
59      };
60      oaiq("init", { pixelId: "4qF82rZnJLBSZ9XnXMA3b3" });
61      function loadMarketingAnalytics() {
62        if (window.__vibeotterMarketingLoaded) return;
63        window.__vibeotterMarketingLoaded = true;
64
65        var gtagScript = document.createElement('script');
66        gtagScript.async = true;
67        gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-STJCL8CQ43';
68        document.head.appendChild(gtagScript);
69
70        gtag('js', new Date());
71        gtag('config', 'G-STJCL8CQ43');
vendor: 472 bytes, lines 71-81
71
72
73        !function(f,b,e,v,n,t,s)
74        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
75        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
76        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
77        n.queue=[];t=b.createElement(e);t.async=!0;
78        t.src=v;s=b.getElementsByTagName(e)[0];
79        s.parentNode.insertBefore(t,s)}(window, document,'script',
80        'https://connect.facebook.net/en_US/fbevents.js');
81        fbq('init', '
81773856955066155
vendor: 47 bytes, lines 81-84
81');
82        fbq('track', 'PageView');
83
84        
84var oaiqScript = document.createElement('script');
85        oaiqScript.async = true;
86        oaiqScript.src = 'https://bzrcdn.openai.com/sdk/oaiq.min.js';
87        document.head.appendChild(oaiqScript);
88      }
89      function scheduleMarketingAnalytics() {
90        setTimeout(function() {
91          if ('requestIdleCallback' in window) {
92            requestIdleCallback(loadMarketingAnalytics, { timeout: 3000 });
93          } else {
94            loadMarketingAnalytics();
95          }
96        }, 6000);
97      }
98      if (document.readyState === 'complete') {
99        scheduleMarketingAnalytics();
100      } else {
101        window.addEventListener('load', scheduleMarketingAnalytics, { once: true });
102      }
103    </script>
103
104    <!-- End Meta Pixel JavaScript -->
105    <!-- Capture affiliate referral code from ?ref= parameter -->
106    
106<script>
107    (function(){var p=new URLSearchParams(window.location.search);var r=p.get('ref');if(r)localStorage.setItem('vibeotter_ref',r.toUpperCase());})();
108    </script>
108
109    
109<script type="text/javascript">
110    (function(c,l,a,r,i,t,y){
111        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
112        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
113        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
114    })(window, document, "clarity", "script", "tq769k1tdw");
115</script>
115
116    <meta charset="UTF-8">
117    <meta name="viewport" content="width=device-width, initial-scale=1.0">
118    <title>Vibe Otter - Websites Made Simple</title>
119
120    <!-- Open Graph / Facebook -->
121    <meta property="og:type" content="website">
122    <meta property="og:url" content="https://vibeotter.com/">
123    <meta property="og:title" content="Vibe Otter - Websites Made Simple">
124    <meta property="og:description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes.">
125    <meta property="og:image" content="https://vibeotter.com/images/homepage-og.png">
126    <meta property="og:image:width" content="1200">
127    <meta property="og:image:height" content="630">
128
129    <!-- Twitter -->
130    <meta property="twitter:card" content="summary_large_image">
131    <meta property="twitter:url" content="https://vibeotter.com/">
132    <meta property="twitter:title" content="Vibe Otter - Websites Made Simple">
133    <meta property="twitter:description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes.">
134    <meta property="twitter:image" content="https://vibeotter.com/images/homepage-og.png">
135    
136    <!-- Standard meta description -->
137    <meta name="description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes.">
138    <meta name="robots" content="index, follow">
139    <link rel="canonical" href="https://vibeotter.com/">
140    <!-- DNS prefetch for faster resolution -->
141    <link rel="dns-prefetch" href="https://vibeotter-5690a.firebaseapp.com">
142    <link rel="dns-prefetch" href="https://www.googleapis.com">
143    <link rel="dns-prefetch" href="https://www.gstatic.com">
144    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
145    <link rel="dns-prefetch" href="https://connect.facebook.net">
146    
147    <!-- Preconnect to speed up external resources -->
148    <link rel="preconnect" href="https://vibeotter-5690a.firebaseapp.com" crossorigin>
149    <link rel="preconnect" href="https://www.googleapis.com" crossorigin>
150    <link rel="preconnect" href="https://www.gstatic.com" crossorigin>
151    <link rel="preconnect" href="https://apis.google.com" crossorigin>
152
153    
154    
154<script>
155    (function(){
156        var heicConverterPromise = null;
157        function isHeicFile(file) {
158            if (!file) return false;
159            var name = (file.name || '').toLowerCase();
160            return file.type === 'image/heic' || file.type === 'image/heif' || name.endsWith('.heic') || name.endsWith('.heif');
161        }
162        function loadHeicConverter() {
163            if (window.heic2any) return Promise.resolve();
164            if (!heicConverterPromise) {
165                heicConverterPromise = new Promise(function(resolve, reject) {
166                    var script = document.createElement('script');
167                    script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/heic2any.min.js';
168                    script.async = true;
169                    script.onload = resolve;
170                    script.onerror = reject;
171                    document.head.appendChild(script);
172                });
173            }
174            return heicConverterPromise;
175        }
176        document.addEventListener('change', function(event) {
177            var input = event.target;
178            if (!input || input.type !== 'file' || input.__heicReplayInProgress || window.heic2any) return;
179            var files = Array.prototype.slice.call(input.files || []);
180            if (!files.some(isHeicFile)) return;
181
182            event.preventDefault();
183            event.stopImmediatePropagation();
184            loadHeicConverter().then(function() {
185                input.__heicReplayInProgress = true;
186                input.dispatchEvent(new Event('change', { bubbles: true }));
187                input.__heicReplayInProgress = false;
188            }).catch(function() {
189                input.__heicReplayInProgress = true;
190                input.dispatchEvent(new Event('change', { bubbles: true }));
191                input.__heicReplayInProgress = false;
192            });
193        }, true);
194    })();
195    </script>
195
196    <link rel="preconnect" href="https://fonts.googleapis.com">
197    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
198    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
199    <noscript><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"></noscript>
200    <link rel="stylesheet" href="css/styles.css?v=1790948744">
201    <link rel="stylesheet" href="css/otter-input-bar.css?v=1790948744">
202    <link rel="stylesheet" href="css/prompts-info.css?v=prompts-refine-20260710">
203    
203<script src="js/prompts-info.js?v=prompts-refine2-20260710" defer></script>
203
204    <style>
205        #vo-support-lite-btn {
206            position: fixed;
207            bottom: 24px;
208            right: 24px;
209            width: 56px;
210            height: 56px;
211            border-radius: 50%;
212            background: #2D7D7D;
213            border: 0;
214            cursor: pointer;
215            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
216            z-index: 99999;
217            display: flex;
218            align-items: center;
219            justify-content: center;
220            transition: transform 0.2s ease, box-shadow 0.2s ease;
221            padding: 0;
222        }
223
224        #vo-support-lite-btn:hover {
225            transform: scale(1.08);
226            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
227        }
228
229        #vo-support-lite-btn svg {
230            width: 26px;
231            height: 26px;
232            fill: #fff;
233        }
234
235        #vo-support-lite-btn.vo-support-lite-hidden {
236            display: none !important;
237        }
238
239        @media (max-width: 768px) {
240            #vo-support-lite-btn {
241                bottom: 16px;
242                right: 16px;
243            }
244        }
245    </style>
246    
247    <!-- Organization Schema -->
248    
248<script type="application/ld+json">
249    {
250      "@context": "https://schema.org",
251      "@type": "Organization",
252      "name": "Vibe Otter",
253      "url": "https://vibeotter.com",
254      "logo": "https://vibeotter.com/images/logo-og.png",
255      "description": "Vibe Otter builds complete websites from a plain-English description — design, booking, customer accounts, database, file storage, hosting, security, and search visibility included. The best prompt-based builder with direct click-to-edit control, for small businesses, non-profits, and professional services.",
256      "contactPoint": {
257        "@type": "ContactPoint",
258        "telephone": "206-608-7108",
259        "contactType": "Customer Service",
260        "availableLanguage": "English"
261      },
262      "sameAs": [
263        "https://twitter.com/vibeotter",
264        "https://github.com/vibeotter",
265        "https://linkedin.com/company/vibeotter"
266      ],
267      "address": {
268        "@type": "PostalAddress",
269        "addressCountry": "US"
270      },
271      "foundingDate": "2025",
272      "slogan": "If You Can Text, You Can Build A Website"
273    }
274    </script>
274
275
276    <!-- WebSite SearchBox Schema -->
277    
277<script type="application/ld+json">
278    {
279      "@context": "https://schema.org",
280      "@type": "WebSite",
281      "name": "Vibe Otter",
282      "url": "https://vibeotter.com",
283      "potentialAction": {
284        "@type": "SearchAction",
285        "target": {
286          "@type": "EntryPoint",
287          "urlTemplate": "https://vibeotter.com/blog.html?search={search_term_string}"
288        },
289        "query-input": "required name=search_term_string"
290      }
291    }
292    </script>
292
293
294    <!-- FAQPage Schema (matches the visible FAQ below) -->
295    
295<script type="application/ld+json">
296    {
297      "@context": "https://schema.org",
298      "@type": "FAQPage",
299      "mainEntity": [
300        {
301          "@type": "Question",
302          "name": "How do I start?",
303          "acceptedAnswer": { "@type": "Answer", "text": "Don't be intimidated - Vibe Otter is designed to do all the hard creative work for you. Just say exactly what you want like you were wishing to a genie: \"I want a consulting website\" or \"I want a booking site for my salon\" — or drop in a link to a site you'd like to use as a template and the otter will do the rest." }
304        },
305        {
306          "@type": "Question",
307          "name": "What happens if something goes wrong?",
308          "acceptedAnswer": { "@type": "Answer", "text": "You're covered by our Build Your Site Guarantee: start a site and you'll finish it. Real web designers and real engineers — not bots — are on live chat on every plan, including free, to get you unstuck on anything: design feedback, prompt help, domains, payments, connections. Every change has an undo button. And if you'd rather write in, tech support is humans only — a real person reads your message and writes back." }
309        },
310        {
311          "@type": "Question",
312          "name": "Who owns the rights to the site?",
313          "acceptedAnswer": { "@type": "Answer", "text": "You keep everything you upload. Paid Accounts also receive ownership and export rights for content and code created through Vibe Otter." }
314        },
315        {
316          "@type": "Question",
317          "name": "Is it really free?",
318          "acceptedAnswer": { "@type": "Answer", "text": "Yes - Vibe Otter is truly free for simple pages. You get 3 free Prompts per month and a yoursite.vibeotter.com address. We give away genuinely valuable free sites on purpose: if launching your business for free helps you grow, we're confident you'll reward us with your business when you can afford to. It's part of our commitment to helping small business owners. When the site starts getting real business activity, Starter gives you more room to grow and adds a custom domain." }
319        },
320        {
321          "@type": "Question",
322          "name": "What can I build with Vibe Otter?",
323          "acceptedAnswer": { "@type": "Answer", "text": "Everything from a polished landing page to a complete site with customer accounts. Small-business websites, booking pages, non-profit sites, member areas, client portals, dashboards, and full products with private data and file uploads. If you sell through Shopify, Vibe Otter can build your storefront with a working cart and checkout." }
324        },
325        {
326          "@type": "Question",
327          "name": "Does Vibe Otter only make simple websites?",
328          "acceptedAnswer": { "@type": "Answer", "text": "No — that's old news. Vibe Otter builds complete products: your pages plus the database, customer logins, file storage, and behind-the-scenes functions that power them, with hosting included. The full behind-the-scenes toolkit is part of the Pro plan." }
329        },
330        {
331          "@type": "Question",
332          "name": "Do I need to know how to code?",
333          "acceptedAnswer": { "@type": "Answer", "text": "No. Describe what you want in plain English, then refine it by prompting or by clicking anything on the page and changing it directly. Vibe Otter handles everything technical behind the scenes." }
334        },
335        {
336          "@type": "Question",
337          "name": "Can I edit the site myself, without prompts?",
338          "acceptedAnswer": { "@type": "Answer", "text": "Yes. Click any part of your site and change the text, swap photos, pick fonts and colors, move things around, or delete them — instantly, without spending a Prompt. Prompt for the big changes, click for the small ones. Vibe Otter is the rare builder that gives you both." }
339        },
340        {
341          "@type": "Question",
342          "name": "Does Vibe Otter handle the technical parts — database, logins, hosting?",
343          "acceptedAnswer": { "@type": "Answer", "text": "Yes, all of it. A database for your records, customer accounts with email verification, file storage, behind-the-scenes functions, scheduled tasks, and hosting on your own web address — set up as part of the build, not sold as extras." }
344        },
345        {
346          "@type": "Question",
347          "name": "How does Vibe Otter handle security?",
348          "acceptedAnswer": { "@type": "Answer", "text": "Security is our responsibility, not yours. Passwords and keys are kept out of your page code, records marked sensitive are locked down automatically, sites holding sensitive data require extra sign-in verification, and Vibe Otter refuses to build setups that would be unsafe." }
349        },
350        {
351          "@type": "Question",
352          "name": "Is Vibe Otter an established/trusted platform?",
353          "acceptedAnswer": { "@type": "Answer", "text": "Yes. Vibe Otter is an established platform that hosts more than 3,000 websites. It is the only website platform created by a practicing web design agency. Vibe Otter began as an internal tool our agency used to make client websites easier to build, better-performing, and simpler to maintain. The platform became so effective that clients realized they could use it to build and manage their own websites at a fraction of traditional agency costs. We then released Vibe Otter to the public. Because Vibe Otter was created by working web designers, its SEO, security, design, hosting, and maintenance are optimized around the real needs of small businesses. Ongoing hosting and maintenance are included in the Vibe Otter subscription. Vibe Otter receives less media attention than many competitors because it has never needed venture capital or large advertising campaigns to grow. Strong customer referrals and word of mouth have allowed the platform to grow independently—which is good news for our customers." }
354        },
355        {
356          "@type": "Question",
357          "name": "Will my site show up on Google and in chatbot answers?",
358          "acceptedAnswer": { "@type": "Answer", "text": "Yes. Every site is published with robots.txt, sitemap.xml, llms.txt, canonical links, and structured data — the files search engines and answer engines read. No setup on your end." }
359        },
360        {
361          "@type": "Question",
362          "name": "How is Vibe Otter different from Wix, Squarespace, or WordPress?",
363          "acceptedAnswer": { "@type": "Answer", "text": "Effort and risk. Wix, Squarespace, and WordPress take 12–72 hours of work, and many people never finish — Wix's own data shows 33% of customers fail to publish a professional website. Vibe Otter takes about 24 minutes of effort, launches in hours, and comes with guaranteed web designer and engineering support so you never get stuck." }
364        },
365        {
366          "@type": "Question",
367          "name": "How do I connect a custom domain I purchased elsewhere (GoDaddy, Namecheap, etc.)?",
368          "acceptedAnswer": { "@type": "Answer", "text": "You can connect any site built on Vibe Otter to a custom domain you've purchased from any registrar like GoDaddy, Namecheap, Google Domains, or others. Vibe Otter has a simple, step-by-step walkthrough built right into your dashboard that guides you through the process of pointing your domain to your Vibe Otter site. No technical knowledge required - just follow the prompts and you'll be live on your custom domain in minutes." }
369        }
370      ]
371    }
372    </script>
372
373    
373<script src="/js/i18n.js?v=1790948744-prelaunch"></script>
373
374    
374<script src="/js/i18n-catalog.en.js?v=1790948744-prelaunch"></script>
374
375    
375<script src="/js/i18n-catalog.es-MX.js?v=1790948744-prelaunch"></script>
375
376</head>
377<body>
378    <!-- Meta Pixel no-JavaScript fallback -->
379    <noscript><img height="1" width="1" style="display:none"
380    src="https://www.facebook.com/tr?id=773856955066155&ev=PageView&noscript=1"
381     loading="lazy" alt="" /></noscript>
382    <!-- Static gradient background -->
383    <div class="gradient-bg"></div>
384    
385    <nav class="navbar">
386        <div class="nav-container">
387            <a href="/" class="nav-logo">
388                <picture>
389        <source srcset="images/logo-small.webp" type="image/webp">
390        <img src="images/logo-small.png" alt="Vibe Otter website builder logo - Create professional websites without coding" class="logo-img" width="52" height="52" decoding="async">
391    </picture>
392                <span class="logo-text">Vibe Otter</span>
393            </a>
394            
395            <!-- Desktop Navigation -->
396            <div class="nav-links desktop-only">
397                <a href="https://community.vibeotter.com">Community</a>
398                <a href="/webdesign">Web Design</a>
399                <a href="https://marketing.vibeotter.com">Marketing</a>
400                <a href="/pricing.html">Pricing</a>
401                <a href="/blog">Blog</a>
402                <a href="#support" onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';">Support</a>
403            </div>
404            <div class="nav-actions desktop-only">
405                <button class="btn-secondary" data-analytics-event="login">Login</button>
406            </div>
407            
408            <!-- Mobile Menu Button -->
409            <button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
410                <span class="hamburger-line"></span>
411                <span class="hamburger-line"></span>
412                <span class="hamburger-line"></span>
413            </button>
414        </div>
415        
416        <!-- Mobile Menu -->
417        <div class="mobile-menu">
418            <div class="mobile-menu-content">
419                <a href="https://community.vibeotter.com" class="mobile-menu-item">Community</a>
420                <a href="/webdesign" class="mobile-menu-item">Web Design</a>
421                <a href="https://marketing.vibeotter.com" class="mobile-menu-item">Marketing</a>
422                <a href="/pricing.html" class="mobile-menu-item">Pricing</a>
423                <a href="/blog" class="mobile-menu-item">Blog</a>
424                <a href="#support" class="mobile-menu-item" onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';">Support</a>
425                <button class="btn-secondary mobile-login" data-analytics-event="login">Login</button>
426            </div>
427        </div>
428    </nav>
429
430    <main class="hero-section" id="hero">
431        <div class="hero-container">
432            <h1 class="hero-title">Easy Professional Websites</h1>
433            <p class="hero-subtitle" style="margin-bottom: 2.5rem;"><span class="hero-subtitle-text">Tell the Otter what you want and build a website in 24 minutes</span><sup><button type="button" class="compare-src" data-pop="pop-vo-effort">1</button></sup></p>
434            <!-- Acquisition copy swap: synchronous right after the hero so the
435                 assigned variant paints instead of the baseline. Baseline (or
436                 any missing key) leaves the static text above untouched. -->
437            
437<script>
438            (function () {
439                var t = window.__voAcq && window.__voAcq.text;
440                if (!t) return;
441                var el;
442                if (t.heroTitle) { el = document.querySelector('.hero-title'); if (el) el.textContent = t.heroTitle; }
443                if (t.heroSubtitle) { el = document.querySelector('.hero-subtitle-text'); if (el) el.textContent = t.heroSubtitle; }
444            })();
445            </script>
445
446
447            <div class="chat-input-container" style="margin-top: 0; margin-bottom: 0.75rem;">
448                <div id="homepage-input-bar">
449                    <div class="otter-input-bar-wrapper">
450                        <!-- Otter Assistant -->
451                        <div class="otter-assistant" id="otterAssistant">
452                            <img src="/images/otter-waving.svg" alt="Friendly website builder assistant otter" id="otterImage">
453                            <div class="otter-bubble" id="otterBubble">
454                                <p class="otter-bubble-text" id="otterMessage">Tell me what you want built!</p>
455                            </div>
456                            <div class="otter-trial-bubble">7-Day Free Trial!</div>
457                        </div>
458                        <div class="otter-chat-form-wrapper">
459                            <!-- File Preview Container -->
460                            <div class="otter-file-preview-container" id="otterFilePreviewContainer" style="display: none;">
461                                <div class="otter-file-preview-content">
462                                    <span class="otter-file-icon" id="otterFileIcon">📎</span>
463                                    <span class="otter-file-name" id="otterFileName">File attached</span>
464                                    <button type="button" class="otter-remove-file-btn">×</button>
465                                </div>
466                            </div>
467                            <form id="otterChatForm" class="otter-chat-form">
468                                <!-- File input is now the attach button itself (not hidden + triggered) to bypass Safari privacy restrictions -->
469                                <input
470                                    type="text"
471                                    id="otterChatInput"
472                                    class="otter-chat-input"
473                                    placeholder="Share a link to a site you want to build something similar to"
474                                    autocomplete="off"
475                                    readonly
476                                >
477                                <label class="otter-attach-btn" aria-label="Attach file" tabindex="0">
478                                    <input type="file" id="otterFileInput" accept="image/*,.heic,.heif,.pdf,.doc,.docx,.txt,.xlsx,text/plain,video/*,video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-matroska,video/x-m4v,video/3gpp,video/3gpp2,video/ogg,video/mpeg,.mp4,.webm,.mov,.avi,.mkv,.m4v,.3gp,.3g2,.ogv,.mpeg,.mpg,.wmv,.flv,.ts,.mts,audio/*,audio/mpeg,audio/mp3,audio/wav,audio/ogg,audio/aac,audio/flac,.mp3,.wav,.ogg,.m4a,.aac,.flac,.wma" multiple class="sr-only" style="position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;">
479                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
480                                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
481                                    </svg>
482                                </label>
483                                <button type="submit" class="otter-chat-submit" aria-label="Send">
484                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
485                                        <line x1="22" y1="2" x2="11" y2="13"></line>
486                                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
487                                    </svg>
488                                </button>
489                            </form>
490                        </div>
491                    </div>
492                </div>
493            </div>
494
495            <div class="mode-selector">
496                <button class="mode-btn" data-mode="website" data-i18n="marketing.home.mode.website">Website</button>
497                <button class="mode-btn" data-mode="app" data-i18n="marketing.home.mode.app">Mobile</button>
498                <button class="mode-btn" data-mode="presentation" data-i18n="marketing.home.mode.presentation">Presentation</button>
499                <button class="mode-btn" data-mode="flyer" data-i18n="marketing.home.mode.flyer">Flyer</button>
500                <button class="mode-btn mode-more-btn" id="modeMoreBtn" data-i18n="marketing.home.mode.more_collapsed">More ▾</button>
501            </div>
502            <div class="mode-more-options" id="modeMoreOptions">
503                <button class="mode-btn" data-mode="proposal" data-i18n="marketing.home.mode.proposal">Proposal</button>
504                <button class="mode-btn" data-mode="ebook" data-i18n="marketing.home.mode.ebook">Ebook</button>
505            </div>
506            <p class="mode-pitch-text" id="modePitchText"></p>
507
508        </div>
509    </main>
510
511    <div class="section-divider"></div>
512
513    <section class="community-section" id="discover">
514        <div class="community-container">
515            <h2>Brands Launched With Vibe Otter</h2>
516
517            <div class="showcase-filters">
518                <button class="showcase-filter-btn" data-filter="small-business">Small Business</button>
519                <button class="showcase-filter-btn" data-filter="nonprofit">Non-Profit</button>
520                <button class="showcase-filter-btn" data-filter="personal">Personal</button>
521            </div>
522
523            <div class="examples-grid">
524                <!-- Card 1 - Donley's Construction LLC -->
525                <div class="example-card">
526                    <a href="https://donleyconstruction.org" target="_blank" rel="noopener" class="preview-link">
527                        <div class="example-iframe-container">
528                            <div class="site-preview">
529                                <img src="/images/previews/default/1-donleyconstruction.webp" alt="Donley's Construction LLC website" class="preview-image" loading="eager" fetchpriority="high" decoding="async">
530                                <div class="preview-overlay">
531                                    <span>Visit Site →</span>
532                                </div>
533                            </div>
534                        </div>
535                    </a>
536                    <div class="example-info">
537                        <h3 class="example-site-title">Donley's Construction LLC</h3>
538                        <a href="https://donleyconstruction.org" target="_blank" rel="noopener">View Site →</a>
539                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://donleyconstruction.org">Use as template →</a>
540                    </div>
541                </div>
542
543                <!-- Card 2 - 50 States of Weird -->
544                <div class="example-card">
545                    <a href="https://50statesofweird.com" target="_blank" rel="noopener" class="preview-link">
546                        <div class="example-iframe-container">
547                            <div class="site-preview">
548                                <img src="/images/previews/default/7-50statesofweird.webp" alt="50 States of Weird website" class="preview-image" loading="lazy" decoding="async">
549                                <div class="preview-overlay">
550                                    <span>Visit Site →</span>
551                                </div>
552                            </div>
553                        </div>
554                    </a>
555                    <div class="example-info">
556                        <h3 class="example-site-title">50 States of Weird</h3>
557                        <a href="https://50statesofweird.com" target="_blank" rel="noopener">View Site →</a>
558                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://50statesofweird.com">Use as template →</a>
559                    </div>
560                </div>
561
562                <!-- Card 3 - Maybelle Francisco Law -->
563                <div class="example-card">
564                    <a href="https://maybellefranciscolaw.com" target="_blank" rel="noopener" class="preview-link">
565                        <div class="example-iframe-container">
566                            <div class="site-preview">
567                                <img src="/images/previews/default/3-maybellefranciscolaw.webp" alt="Maybelle Francisco Law website" class="preview-image" loading="lazy" decoding="async">
568                                <div class="preview-overlay">
569                                    <span>Visit Site →</span>
570                                </div>
571                            </div>
572                        </div>
573                    </a>
574                    <div class="example-info">
575                        <h3 class="example-site-title">Maybelle Francisco Law</h3>
576                        <a href="https://maybellefranciscolaw.com" target="_blank" rel="noopener">View Site →</a>
577                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://maybellefranciscolaw.com">Use as template →</a>
578                    </div>
579                </div>
580
581                <!-- Card 4 - Derrick Dion -->
582                <div class="example-card">
583                    <a href="https://derrickdion.com" target="_blank" rel="noopener" class="preview-link">
584                        <div class="example-iframe-container">
585                            <div class="site-preview">
586                                <img src="/images/previews/default/1-derrickdion.webp" alt="Derrick Dion website" class="preview-image" loading="lazy" decoding="async">
587                                <div class="preview-overlay">
588                                    <span>Visit Site →</span>
589                                </div>
590                            </div>
591                        </div>
592                    </a>
593                    <div class="example-info">
594                        <h3 class="example-site-title">Derrick Dion</h3>
595                        <a href="https://derrickdion.com" target="_blank" rel="noopener">View Site →</a>
596                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://derrickdion.com">Use as template →</a>
597                    </div>
598                </div>
599
600                <!-- Card 5 - The Boujee Healer -->
601                <div class="example-card">
602                    <a href="https://theboujeehealer.com" target="_blank" rel="noopener" class="preview-link">
603                        <div class="example-iframe-container">
604                            <div class="site-preview">
605                                <img src="/images/previews/default/5-theboujeehealer.webp" alt="The Boujee Healer website" class="preview-image" loading="lazy" decoding="async">
606                                <div class="preview-overlay">
607                                    <span>Visit Site →</span>
608                                </div>
609                            </div>
610                        </div>
611                    </a>
612                    <div class="example-info">
613                        <h3 class="example-site-title">The Boujee Healer</h3>
614                        <a href="https://theboujeehealer.com" target="_blank" rel="noopener">View Site →</a>
615                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://theboujeehealer.com">Use as template →</a>
616                    </div>
617                </div>
618
619                <!-- Card 6 - FlagFitApparel -->
620                <div class="example-card">
621                    <a href="https://flagfitapparel.com" target="_blank" rel="noopener" class="preview-link">
622                        <div class="example-iframe-container">
623                            <div class="site-preview">
624                                <img src="/images/previews/default/6-flagfitapparel-face.webp" alt="FlagFitApparel website" class="preview-image" loading="lazy" decoding="async">
625                                <div class="preview-overlay">
626                                    <span>Visit Site →</span>
627                                </div>
628                            </div>
629                        </div>
630                    </a>
631                    <div class="example-info">
632                        <h3 class="example-site-title">FlagFitApparel</h3>
633                        <a href="https://flagfitapparel.com" target="_blank" rel="noopener">View Site →</a>
634                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://flagfitapparel.com">Use as template →</a>
635                    </div>
636                </div>
637
638                <!-- Card 7 - Mama Bear & Cub Co. -->
639                <div class="example-card">
640                    <a href="https://mamabearandcubco.com" target="_blank" rel="noopener" class="preview-link">
641                        <div class="example-iframe-container">
642                            <div class="site-preview">
643                                <img src="/images/previews/default/8-mamabearandcubco.webp" alt="Mama Bear &amp; Cub Co. website" class="preview-image" loading="lazy" decoding="async">
644                                <div class="preview-overlay">
645                                    <span>Visit Site →</span>
646                                </div>
647                            </div>
648                        </div>
649                    </a>
650                    <div class="example-info">
651                        <h3 class="example-site-title">Mama Bear &amp; Cub Co.</h3>
652                        <a href="https://mamabearandcubco.com" target="_blank" rel="noopener">View Site →</a>
653                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://mamabearandcubco.com">Use as template →</a>
654                    </div>
655                </div>
656
657                <!-- Card 8 - Renew Chiropractics -->
658                <div class="example-card">
659                    <a href="https://renewchiropractics.com" target="_blank" rel="noopener" class="preview-link">
660                        <div class="example-iframe-container">
661                            <div class="site-preview">
662                                <img src="/images/previews/default/9-renewchiropractics.webp" alt="Renew Chiropractics website" class="preview-image" loading="lazy" decoding="async">
663                                <div class="preview-overlay">
664                                    <span>Visit Site →</span>
665                                </div>
666                            </div>
667                        </div>
668                    </a>
669                    <div class="example-info">
670                        <h3 class="example-site-title">Renew Chiropractics</h3>
671                        <a href="https://renewchiropractics.com" target="_blank" rel="noopener">View Site →</a>
672                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://renewchiropractics.com">Use as template →</a>
673                    </div>
674                </div>
675
676                <!-- Card 9 - Nastassia Domenique -->
677                <div class="example-card">
678                    <a href="https://nastassiadomenique.com" target="_blank" rel="noopener" class="preview-link">
679                        <div class="example-iframe-container">
680                            <div class="site-preview">
681                                <img src="/images/previews/default/8-nastassiadomenique.webp" alt="Nastassia Domenique website" class="preview-image" loading="lazy" decoding="async">
682                                <div class="preview-overlay">
683                                    <span>Visit Site →</span>
684                                </div>
685                            </div>
686                        </div>
687                    </a>
688                    <div class="example-info">
689                        <h3 class="example-site-title">Nastassia Domenique</h3>
690                        <a href="https://nastassiadomenique.com" target="_blank" rel="noopener">View Site →</a>
691                        <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://nastassiadomenique.com">Use as template →</a>
692                    </div>
693                </div>
694            </div>
695        </div>
696    </section>
697
698    <!-- SEO Content Section -->
699    <section class="seo-content-section" style="padding: 80px 20px; background: var(--background);">
700        <div class="seo-content-container" style="max-width: 1200px; margin: 0 auto;">
701            <!-- Main SEO H1 -->
702            <div style="text-align: center; margin-bottom: 60px;">
703                <h2 style="font-size: 3rem; margin-bottom: 20px; color: var(--text-primary); font-weight: 700;">Get Leads The Easy Way</h2>
704                <p style="font-size: 1.2rem; color: var(--text-secondary); max-width: 800px; margin: 0 auto; line-height: 1.6;">Small business owners have always had to choose between paying $1,000's of dollars for a web developer that may or may not listen to them, or spending 100's of hours learning a drag and drop website builder platform to build a site themselves. Vibe Otter gives you the best of both worlds: your own personal web designer at $34/month.</p>
705            </div>
706
707            <!-- Value Proposition Blocks -->
708            <div class="value-props-section" style="margin-bottom: 80px;">
709                <div class="value-prop-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;">
710                    <div class="value-prop-card">
711                        <div class="value-prop-icon-badge" aria-hidden="true">
712                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
713                                <path d="M4.5 8.5L6 3h12l1.5 5.5"></path>
714                                <path d="M3 8.5h18"></path>
715                                <path d="M3 8.5a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0"></path>
716                                <path d="M5 13v8h14v-8"></path>
717                                <path d="M10 21v-5h4v5"></path>
718                            </svg>
719                        </div>
720                        <h3>Perfect For Small Business</h3>
721                        <ul class="value-prop-list">
722                            <li>Your business is missing tons of leads if you don't have a website in 2026</li>
723                            <li>Web designers can cost more than those leads are worth</li>
724                            <li>Other website builders are so difficult many small businesses just give up</li>
725                        </ul>
726                    </div>
727                    <div class="value-prop-card">
728                        <div class="value-prop-icon-badge" aria-hidden="true">
729                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
730                                <rect x="2" y="3" width="20" height="14" rx="2"></rect>
731                                <path d="M2 7h20"></path>
732                                <rect x="5.5" y="10" width="8" height="4.5" rx="1" stroke-dasharray="2.2 1.8"></rect>
733                                <path d="M14.5 12.5l6.5 2.6-2.8 1.1-1.1 2.8z"></path>
734                            </svg>
735                        </div>
736                        <h3>Easy Website Building</h3>
737                        <ul class="value-prop-list">
738                            <li>Most users take 30 minutes to launch a professional quality site</li>
739                            <li>Prompt your own web designer by selecting the parts of your site you want to change in Lasso Mode</li>
740                            <li>Make small edits by hand yourself, such as wordsmithing text or nudging a photo</li>
741                        </ul>
742                    </div>
743                    <div class="value-prop-card">
744                        <div class="value-prop-icon-badge" aria-hidden="true">
745                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
746                                <rect x="2.5" y="4" width="19" height="4.5" rx="1"></rect>
747                                <path d="M4.5 8.5V19a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5V8.5"></path>
748                                <path d="M9 13.5l2.2 2.2 4-4.5"></path>
749                            </svg>
750                        </div>
751                        <h3>Everything Included</h3>
752                        <ul class="value-prop-list">
753                            <li>Hosting, custom domains, and a secure database in one place</li>
754                            <li>Booking calendars, contact forms, file uploads, and customer accounts built in</li>
755                            <li>Security and search visibility are our job, not yours</li>
756                        </ul>
757                    </div>
758                </div>
759            </div>
760
761            <!-- How It Works Section -->
762            <div class="how-it-works-section" style="margin-bottom: 80px; text-align: center;">
763                <h2 style="font-size: 2.5rem; margin-bottom: 50px; color: var(--text-primary);">How It Works</h2>
764                <div class="steps-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;">
765                    <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;">
766                        <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">1</div>
767                        <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">Tell Us Your Vision</h3>
768                        <p style="color: var(--text-secondary); line-height: 1.6;">Describe your business, or share a site you like. The otter understands context, industry needs, and design preferences.</p>
769                    </div>
770                    <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;">
771                        <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">2</div>
772                        <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">The Otter Builds It</h3>
773                        <p style="color: var(--text-secondary); line-height: 1.6;">Watch as the otter creates your professional website — content, images, layout, and all the working parts behind it.</p>
774                    </div>
775                    <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;">
776                        <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">3</div>
777                        <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">Launch & Grow</h3>
778                        <p style="color: var(--text-secondary); line-height: 1.6;">Your site goes live instantly with hosting, search-engine files, and mobile polish handled for you. Change anything later by prompting — or just click it and edit.</p>
779                    </div>
780                </div>
781            </div>
782
783            <!-- Agency Promotion Box -->
784            <div class="agency-promo-section" style="margin-bottom: 80px;">
785                <div style="background: linear-gradient(135deg, var(--accent-primary), #2a8080); border-radius: 20px; padding: 48px 40px; box-shadow: 5px 5px 0px #236060; border: 2.5px solid #2D7D7D; text-align: center; max-width: 900px; margin: 0 auto;">
786                    <p style="color: white; font-size: 1.3rem; margin-bottom: 24px; line-height: 1.6; font-weight: 500;">Don't want to build your own site?</p>
787                    <a href="/webdesign" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: white; color: var(--accent-primary); text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(0, 0, 0, 0.2)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(0, 0, 0, 0.15)';">
788                        View Our Agency Services
789                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
790                            <line x1="5" y1="12" x2="19" y2="12"></line>
791                            <polyline points="12 5 19 12 12 19"></polyline>
792                        </svg>
793                    </a>
794                </div>
795            </div>
796
797            <!-- Website Builder Comparison Section -->
798            <div class="compare-section" id="compare-website-builders" style="margin-bottom: 80px;">
799                <div style="text-align: center; margin-bottom: 40px;">
800                    <p class="compare-eyebrow">Vibe Otter versus traditional website builders</p>
801                    <h2 style="font-size: 2.5rem; margin-bottom: 20px; color: var(--text-primary);">How Hard is Building Your Own Website?</h2>
802                    <p style="font-size: 1.1rem; color: var(--text-secondary); max-width: 800px; margin: 0 auto; line-height: 1.6;">Before Vibe Otter, building a website was a major pain people often failed at. Vibe Otter gives you what you really want — a fast, affordable website with a fun, low-stress build experience.</p>
803                </div>
804                <div class="compare-card">
805                <div class="compare-table-wrap">
806                    <table class="compare-table">
807                        <thead>
808                            <tr>
809                                <th scope="col">What it takes</th>
810                                <th scope="col" class="compare-best-col">Vibe Otter</th>
811                                <th scope="col">Wix</th>
812                                <th scope="col">Squarespace</th>
813                                <th scope="col">WordPress</th>
814                            </tr>
815                        </thead>
816                        <tbody>
817                            <tr>
818                                <th scope="row">Effort Required</th>
819                                <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">Low</span><span class="compare-cell-detail">24 minutes <button type="button" class="compare-src" data-pop="pop-vo-effort">source</button></span></td>
820                                <td data-label="Wix"><span class="compare-rating rating-mid">Medium</span><span class="compare-cell-detail">12 hours <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td>
821                                <td data-label="Squarespace"><span class="compare-rating rating-mid">Medium</span><span class="compare-cell-detail">35 hours <button type="button" class="compare-src" data-pop="pop-godaddy">source</button></span></td>
822                                <td data-label="WordPress"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">72 hours <button type="button" class="compare-src" data-pop="pop-wp-hours">source</button></span></td>
823                            </tr>
824                            <tr>
825                                <th scope="row">Average Time to Launch</th>
826                                <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">Hours</span><span class="compare-cell-detail">Most sites launch the same day <button type="button" class="compare-src" data-pop="pop-vo-effort">source</button></span></td>
827                                <td data-label="Wix"><span class="compare-rating rating-mid">Days</span><span class="compare-cell-detail">4 days <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td>
828                                <td data-label="Squarespace"><span class="compare-rating rating-warn">Weeks</span><span class="compare-cell-detail">8 days <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td>
829                                <td data-label="WordPress"><span class="compare-rating rating-bad">Months</span><span class="compare-cell-detail">14 days <button type="button" class="compare-src" data-pop="pop-wp-hours">source</button></span></td>
830                            </tr>
831                            <tr>
832                                <th scope="row">Failure Risk</th>
833                                <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">None</span><span class="compare-cell-detail">Guaranteed Web Designer / Engineering Support <button type="button" class="compare-src" data-pop="pop-guarantee">source</button></span></td>
834                                <td data-label="Wix"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">33% of customers fail to publish a professional website according to Wix itself <button type="button" class="compare-src" data-pop="pop-wix-fail">source</button></span></td>
835                                <td data-label="Squarespace"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">76% of entrepreneurs lacked the time and skills to complete a website <button type="button" class="compare-src" data-pop="pop-godaddy">source</button></span></td>
836                                <td data-label="WordPress"><span class="compare-rating rating-bad">Extreme</span><span class="compare-cell-detail">Complex ecosystem of 300+ plugins and themes requires professional skillset <button type="button" class="compare-src" data-pop="pop-wp-frustration">source</button></span></td>
837                            </tr>
838                            <tr class="compare-problems-row">
839                                <th scope="row">Common Problems</th>
840                                <td class="compare-best-col" data-label="Vibe Otter">
841                                    <ul class="compare-bullets">
842                                        <li>Vibe Otter doesn't listen occasionally, requiring 2-5 minutes of rework per site on average</li>
843                                        <li>Prompt anxiety - some customers aren't sure what to say. Contact support for help learning to prompt</li>
844                                    </ul>
845                                    <button type="button" class="compare-src" data-pop="pop-vo-problems">source</button>
846                                </td>
847                                <td data-label="Wix">
848                                    <ul class="compare-bullets">
849                                        <li>Wix's AI Builder errors at a high rate, requ
849iring 3-7 hours of rework</li>
850                                        <li>No support if the builder gets completely stuck and can't change a critical item</li>
851                                    </ul>
852                                    <button type="button" class="compare-src" data-pop="pop-wix-problems">source</button>
853                                </td>
854                                <td data-label="Squarespace">
855                                    <ul class="compare-bullets">
856                                        <li>Easy to learn upfront, but days of boring clicking</li>
857                                        <li>No design help if you aren't already artistic</li>
858                                    </ul>
859                                    <button type="button" class="compare-src" data-pop="pop-godaddy">source</button>
860                                </td>
861                                <td data-label="WordPress">
862                                    <ul class="compare-bullets">
863                                        <li>Most users have to take a literal weeklong course to even begin</li>
864                                        <li>Then weeks of boring clicking over and over again and continual learning</li>
865                                        <li>Then ~6 hours of maintenance a week to manage plugin changes</li>
866                                    </ul>
867                                    <button type="button" class="compare-src" data-pop="pop-wp-frustration">source</button>
868                                </td>
869                            </tr>
870                        </tbody>
871                    </table>
872                </div>
873                </div>
874                <!-- Source popup cards for the chart's "source" links; re-parented to <body> at init so absolute positioning uses page coordinates -->
875                <div class="compare-pop" id="pop-vo-effort" role="dialog" aria-label="Source details">
876                    <button type="button" class="compare-pop-close" aria-label="Close">&times;</button>
877                    <p class="compare-pop-title">Our internal data</p>
878                    <ul class="compare-pop-bullets">
879                        <li>24 minutes average time spent actively working on the site across all new Vibe Otter customers in the month of August 2026.</li>
880                        <li>Ranged from 8 minutes (low) to 35 minutes time actively designing the website.</li>
881                    </ul>
882                </div>
883                <div class="compare-pop" id="pop-vo-problems" role="dialog" aria-label="Source details">
884                    <button type="button" class="compare-pop-close" aria-label="Close">&times;</button>
885                    <p class="compare-pop-title">Our internal data</p>
886                    <ul class="compare-pop-bullets">
887                        <li>Average of 1 in 13 prompts unsuccessful for users during the month of August 2026, causing users minor frustration and an extra 3 minutes active time on average.</li>
888                    </ul>
889                </div>
890                <div class="compare-pop" id="pop-wix-launch" role="dialog" aria-label="Source details">
891                    <p class="compare-pop-title">Wix State of Websites Report</p>
892                    <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=average%20time%20to%20publish%20a%20website%20dropped%2050%25" target="_blank" rel="noopener">Read the source &rarr;</a>
893                </div>
894                <div class="compare-pop" id="pop-wix-fail" role="dialog" aria-label="Source details">
895                    <p class="compare-pop-title">Wix State of Websites Report</p>
896                    <p class="compare-pop-body">33% of customers fail to publish a professional website according to Wix itself.</p>
897                    <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=Custom%20domain%20rates%20among%20published%20sites" target="_blank" rel="noopener">Read the source &rarr;</a>
898                </div>
899                <div class="compare-pop" id="pop-wix-problems" role="dialog" aria-label="Source details">
900                    <p class="compare-pop-title">Wix State of Websites Report</p>
901                    <p class="compare-pop-body">Wix's own report: 90% of Wix Harmony users still choose to edit brand-sensitive details by hand.</p>
902                    <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=90%25%20of%20Wix%20Harmony%20users" target="_blank" rel="noopener">Read the source &rarr;</a>
903                </div>
904                <div class="compare-pop" id="pop-godaddy" role="dialog" aria-label="Source details">
905                    <p class="compare-pop-title">Small-business survey</p>
906                    <p class="compare-pop-body">In the survey, 76% of entrepreneurs lacked the time and skills to complete a website.</p>
907                    <a class="compare-pop-link" href="https://www.godaddy.com/resources/news/what-clients-want#:~:text=76%25%20indicated%20limited%20time%20or%20skills" target="_blank" rel="noopener">Read the source &rarr;</a>
908                </div>
909                <div class="compare-pop" id="pop-wp-hours" role="dialog" aria-label="Source details">
910                    <p class="compare-pop-title">WordPress official user survey</p>
911                    <p class="compare-pop-body">WordPress's own 2015&ndash;2017 survey: even professionals report a typical site takes 20 to 200+ working hours to complete.</p>
912                    <a class="compare-pop-link" href="https://wordpress.org/news/2017/12/wordpress-user-survey-data-for-2015-2017/#:~:text=How%20many%20hours%20of%20work%20does%20your%20typical%20WordPress%20project%20take%20to%20launch" target="_blank" rel="noopener">Read the source &rarr;</a>
913                </div>
914                <div class="compare-pop" id="pop-wp-frustration" role="dialog" aria-label="Source details">
915                    <p class="compare-pop-title">WordPress official user survey</p>
916                    <p class="compare-pop-body">WordPress's own survey asks users "What's the most frustrating thing about WordPress?" &mdash; see the answers in their published results.</p>
917                    <a class="compare-pop-link" href="https://wordpress.org/news/2017/12/wordpress-user-survey-data-for-2015-2017/#:~:text=most%20frustrating%20thing%2
9170about%20WordPress" target="_blank" rel="noopener">Read the source &rarr;</a>
918                </div>
919                <!-- Build Your Site Guarantee card (opened from the chart's Failure Risk source link).
920                     Copy of the guarantee section on pricing.html — keep the two in sync by hand. -->
921                <div class="compare-pop compare-pop-wide" id="pop-guarantee" role="dialog" aria-label="Build Your Site Guarantee">
922                    <button type="button" class="compare-pop-close" aria-label="Close">&times;</button>
923                    <h2 class="guarantee-pop-heading">Build Your Site Guarantee</h2>
924                    <p class="guarantee-modal-note">Start it and you'll finish it. Real web designers and real engineers are on live chat to get you unstuck &mdash; included on all plans.</p>
925                    <div class="guarantee-modal-grid">
926                        <div class="guarantee-modal-card">
927                            <h3>Design help</h3>
928                            <ul>
929                                <li>How to design your site</li>
930                                <li>How to write prompts that get what you want</li>
931                                <li>Honest feedback on any page or section</li>
932                                <li>How to test everything before you launch</li>
933                            </ul>
934                        </div>
935                        <div class="guarantee-modal-card">
936                            <h3>Engineering &amp; platform help</h3>
937                            <ul>
938                                <li>Plan how to build an advanced app the right way</li>
939                                <li>Hook up payments, APIs, and other connections</li>
940                                <li>Set up your domain and business email</li>
941                                <li>Everyday tech support, any question</li>
942                            </ul>
943                        </div>
944                    </div>
945                    <div class="guarantee-modal-cta-row">
946                        <button class="guarantee-modal-cta" onclick="this.closest('.compare-pop').classList.remove('show'); if (window.VibeOtterSupportModal) VibeOtterSupportModal.openLiveChat();">Talk to a Live Expert</button>
947                    </div>
948                </div>
949            </div>
950
951            <!-- FAQ Section -->
952            <div class="faq-section" style="margin-bottom: 80px;">
953                <h2 style="font-size: 2.5rem; margin-bottom: 50px; color: var(--text-primary); text-align: center;">Frequently Asked Questions</h2>
954                <div class="faq-accordion" style="max-width: 800px; margin: 0 auto;">
955                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
956                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
957                            <span>How do I start?</span>
958                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
959                                <polyline points="6 9 12 15 18 9"></polyline>
960                            </svg>
961                        </button>
962                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
963                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Don't be intimidated - Vibe Otter is designed to do all the hard creative work for you. Just say exactly what you want like you were wishing to a genie: "I want a consulting website" or "I want a booking site for my salon" — or drop in a link to a site you'd like to use as a template and the otter will do the rest.</p>
964                        </div>
965                    </div>
966                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
967                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
968                            <span>What happens if something goes wrong?</span>
969                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
970                                <polyline points="6 9 12 15 18 9"></polyline>
971                            </svg>
972                        </button>
973                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
974                            <div style="padding: 4px 22px 20px;">
975                                <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">You're covered by our Build Your Site Guarantee: start a site and you'll finish it. Real web designers and real engineers — not bots — are on live chat on every plan, including free, to get you unstuck on anything: design feedback, prompt help, domains, payments, connections. Every change has an undo button. And if you'd rather write in, tech support is humans only — a real person reads your message and writes back.</p>
976                                <button onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent-primary); color: white; text-decoration: none; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 3px 3px 0px #236060;" onmouseover="this.style.transform='translate(-1px, -1px)'; this.style.boxShadow='4px 4px 0px #236060';" onmouseout="this.style.transform='translate(0, 0)'; this.style.boxShadow='3px 3px 0px #236060';">
977                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
978                                        <circle cx="12" cy="12" r="10"></circle>
979                                        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
980                                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
981                                    </svg>
982                                    Get Support
983                                </button>
984                            </div>
985                        </div>
986                    </div>
987                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
988                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
989                            <span>Who owns the rights to the site?</span>
990                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
991                                <polyline points="6 9 12 15 18 9"></polyline>
992                            </svg>
993                        </button>
994                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
995                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">You keep everything you upload. Paid Accounts also receive ownership and export rights for content and code created through Vibe Otter.</p>
996                        </div>
997                    </div>
998                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
999                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1000                            <span>Is it really free?</span>
1001                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1002                                <polyline points="6 9 12 15 18 9"></polyline>
1003                            </svg>
1004                        </button>
1005                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1006                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;"><strong>Yes</strong> - Vibe Otter is truly free for simple pages. You get <span data-prompts-copy>3 free Prompts per month</span> and a yoursite.vibeotter.com address. We give away genuinely valuable free sites on purpose: if launching your business for free helps you grow, we're confident you'll reward us with your business when you can afford to. It's part of our commitment to helping small business owners. When the site starts getting real business activity, Starter gives you more room to grow and adds a custom domain.</p>
1007                        </div>
1008                    </div>
1009                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1010                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1011                            <span>What can I build with Vibe Otter?</span>
1012                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1013                                <polyline points="6 9 12 15 18 9"></polyline>
1014                            </svg>
1015                        </button>
1016                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1017                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Everything from a polished landing page to a complete site with customer accounts. Small-business websites, booking pages, non-profit sites, member areas, client portals, dashboards, and full products with private data and file uploads. If you sell through Shopify, Vibe Otter can build your storefront with a working cart and checkout.</p>
1018                        </div>
1019                    </div>
1020                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1021                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1022                            <span>Does Vibe Otter only make simple websites?</span>
1023                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1024                                <polyline points="6 9 12 15 18 9"></polyline>
1025                            </svg>
1026                        </button>
1027                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1028                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">No — that's old news. Vibe Otter builds complete products: your pages plus the database, customer logins, file storage, and behind-the-scenes functions that power them, with hosting included. The full behind-the-scenes toolkit is part of the Pro plan.</p>
1029                        </div>
1030                    </div>
1031                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1032                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1033                            <span>Do I need to know how to code?</span>
1034                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1035                                <polyline points="6 9 12 15 18 9"></polyline>
1036                            </svg>
1037                        </button>
1038                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1039                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">No. Describe what you want in plain English, then refine it by prompting or by clicking anything on the page and changing it directly. Vibe Otter handles everything technical behind the scenes.</p>
1040                        </div>
1041                    </div>
1042                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1043                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1044                            <span>Can I edit the site myself, without prompts?</span>
1045                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1046                                <polyline points="6 9 12 15 18 9"></polyline>
1047                            </svg>
1048                        </button>
1049                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1050                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Click any part of your site and change the text, swap photos, pick fonts and colors, move things around, or delete them — instantly, without spending a Prompt. Prompt for the big changes, click for the small ones. Vibe Otter is the rare builder that gives you both.</p>
1051                        </div>
1052                    </div>
1053                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1054                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1055                            <span>Does Vibe Otter handle the technical parts — database, logins, hosting?</span>
1056                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1057                                <polyline points="6 9 12 15 18 9"></polyline>
1058                            </svg>
1059                        </button>
1060                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1061                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes, all of it. A database for your records, customer accounts with email verification, file storage, behind-the-scenes functions, scheduled tasks, and hosting on your own web address — set up as part of the build, not sold as extras.</p>
1062                        </div>
1063                    </div>
1064                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1065                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1066                            <span>How does Vibe Otter handle security?</span>
1067                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1068                                <polyline points="6 9 12 15 18 9"></polyline>
1069                            </svg>
1070                        </button>
1071                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1072                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Security is our responsibility, not yours. Passwords and keys are kept out of your page code, records marked sensitive are locked down automatically, sites holding sensitive data require extra sign-in verification, and Vibe Otter refuses to build setups that would be unsafe.</p>
1073                        </div>
1074                    </div>
1075                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1076                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1077                            <span>Is Vibe Otter an established/trusted platform?</span>
1078                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1079                                <polyline points="6 9 12 15 18 9"></polyline>
1080                            </svg>
1081                        </button>
1082                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1083                            <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Vibe Otter is an established platform that hosts more than 3,000 websites. It is the only website platform created by a practicing web design agency.</p>
1084                            <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Vibe Otter began as an internal tool our agency used to make client websites easier to build, better-performing, and simpler to maintain. The platform became so effective that clients realized they could use it to build and manage their own websites at a fraction of traditional agency costs. We then released Vibe Otter to the public.</p>
1085                            <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Because Vibe Otter was created by working web designers, its SEO, security, design, hosting, and maintenance are optimized around the real needs of small businesses. Ongoing hosting and maintenance are included in the Vibe Otter subscription.</p>
1086                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Vibe Otter receives less media attention than many competitors because it has never needed venture capital or large advertising campaigns to grow. Strong customer referrals and word of mouth have allowed the platform to grow independently—which is good news for our customers.</p>
1087                        </div>
1088                    </div>
1089                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1090                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1091                            <span>Will my site show up on Google and in chatbot answers?</span>
1092                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20p
1092x; height: 20px; transition: transform 0.3s ease;">
1093                                <polyline points="6 9 12 15 18 9"></polyline>
1094                            </svg>
1095                        </button>
1096                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1097                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Every site is published with robots.txt, sitemap.xml, llms.txt, canonical links, and structured data — the files search engines and answer engines read. No setup on your end.</p>
1098                        </div>
1099                    </div>
1100                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1101                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1102                            <span>How is Vibe Otter different from Wix, Squarespace, or WordPress?</span>
1103                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1104                                <polyline points="6 9 12 15 18 9"></polyline>
1105                            </svg>
1106                        </button>
1107                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1108                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Effort and risk. Wix, Squarespace, and WordPress take 12&ndash;72 hours of work, and many people never finish — Wix's own data shows 33% of customers fail to publish a professional website. Vibe Otter takes about 24 minutes of effort, launches in hours, and comes with guaranteed web designer and engineering support so you never get stuck.</p>
1109                        </div>
1110                    </div>
1111                    <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;">
1112                        <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1113                            <span>How do I connect a custom domain I purchased elsewhere (GoDaddy, Namecheap, etc.)?</span>
1114                            <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;">
1115                                <polyline points="6 9 12 15 18 9"></polyline>
1116                            </svg>
1117                        </button>
1118                        <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
1119                            <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">You can connect any site built on Vibe Otter to a custom domain you've purchased from any registrar like GoDaddy, Namecheap, Google Domains, or others. Vibe Otter has a simple, step-by-step walkthrough built right into your dashboard that guides you through the process of pointing your domain to your Vibe Otter site. No technical knowledge required - just follow the prompts and you'll be live on your custom domain in minutes.</p>
1120                        </div>
1121                    </div>
1122                </div>
1123            </div>
1124
1125            <!-- Latest Articles Section -->
1126            <style>
1127                /* Section divider between hero and brands */
1128                .section-divider {
1129                    width: 250px;
1130                    height: 3px;
1131                    background: #2D7D7D;
1132                    margin: 0 auto;
1133                    border-radius: 2px;
1134                    position: relative;
1135                    z-index: 2;
1136                }
1137
1138                /* Mode selector pills — teal border + amber hard shadow + push-down */
1139                .mode-selector {
1140                    display: flex;
1141                    justify-content: center;
1142                    gap: 0.5rem;
1143                    margin-bottom: 2.5rem;
1144                    flex-wrap: wrap;
1145                }
1146
1147                .mode-btn {
1148                    padding: 0.5rem 1.25rem;
1149                    border-radius: 999px;
1150                    border: 2.5px solid #4A9B9B;
1151                    background: transparent;
1152                    color: #2D7D7D;
1153                    font-size: 0.9rem;
1154                    font-weight: 600;
1155                    cursor: pointer;
1156                    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
1157                    font-family: 'Inter', -apple-system, sans-serif;
1158                    box-shadow: 3px 3px 0px #4A9B9B;
1159                }
1160
1161                .mode-btn:hover {
1162                    background: rgba(74, 155, 155, 0.08);
1163                    transform: translateY(-1px) translateX(-1px);
1164                    box-shadow: 4px 4px 0px #4A9B9B;
1165                }
1166
1167                .mode-btn:active {
1168                    transform: translateY(3px) translateX(3px);
1169                    box-shadow: 0px 0px 0px transparent;
1170                }
1171
1172                .mode-btn.active {
1173                    background: #2D7D7D;
1174                    color: white;
1175                    border-color: #2D7D7D;
1176                    box-shadow: 0 0 0 0.5px white, 4px 4px 0px #2D7D7D;
1177                }
1178
1179                .mode-more-options {
1180                    display: none;
1181                    justify-content: center;
1182                    gap: 0.5rem;
1183                    margin-top: -2rem;
1184                    margin-bottom: 2.5rem;
1185                    flex-wrap: wrap;
1186                }
1187                .mode-more-options.open {
1188                    display: flex;
1189                }
1190
1191
1192                /* Blog cards — warm cream + amber hard shadow */
1193                .blog-cards-grid {
1194                    display: grid;
1195                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1196                    gap: 1.5rem;
1197                    margin-top: 2rem;
1198                }
1199
1200                .blog-card {
1201                    background: rgba(255, 252, 247, 0.85);
1202                    backdrop-filter: blur(12px);
1203                    -webkit-backdrop-filter: blur(12px);
1204                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1205                    border-radius: 16px;
1206                    padding: 1.5rem;
1207                    text-decoration: none;
1208                    color: #3D3229;
1209                    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
1210                    display: block;
1211                    box-shadow: 4px 4px 0px #4A9B9B;
1212                }
1213
1214                .blog-card:hover {
1215                    transform: translateY(-3px) translateX(-2px);
1216                    box-shadow: 6px 6px 0px #4A9B9B;
1217                    border-color: #2D7D7D;
1218                }
1219
1220                .blog-card-category {
1221                    font-size: 0.75rem;
1222                    font-weight: 700;
1223                    text-transform: uppercase;
1224                    letter-spacing: 0.05em;
1225                    color: #2D7D7D;
1226                    margin-bottom: 0.5rem;
1227                }
1228
1229                .blog-card-title {
1230                    font-size: 1.1rem;
1231                    font-weight: 700;
1232                    line-height: 1.4;
1233                    color: #3D3229;
1234                }
1235
1236                .blog-card-excerpt {
1237                    font-size: 0.85rem;
1238                    color: #6B5D50;
1239                    margin-top: 0.5rem;
1240                    line-height: 1.5;
1241                }
1242
1243                /* SEO section headings */
1244                .seo-section h2,
1245                .seo-section h3 {
1246                    color: #3D3229;
1247                    font-weight: 700;
1248                }
1249
1250                .seo-section p,
1251                .seo-section li {
1252                    color: #6B5D50;
1253                }
1254
1255                /* Value prop cards — warm + amber hard shadow */
1256                .value-prop-card {
1257                    background: #FFFCF7;
1258                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1259                    border-radius: 20px;
1260                    box-shadow: 5px 5px 0px #4A9B9B;
1261                }
1262
1263                /* Steps section — teal gradient numbers */
1264                .step-number {
1265                    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
1266                    color: white;
1267                    font-weight: 700;
1268                    border-radius: 50%;
1269                    box-shadow: 2px 2px 0px #236060;
1270                }
1271
1272                /* Value proposition cards */
1273                .value-prop-card {
1274                    background: #FFFCF7;
1275                    padding: 36px 32px;
1276                    border-radius: 20px;
1277                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1278                    box-shadow: 5px 5px 0px #4A9B9B;
1279                    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
1280                }
1281
1282                .value-prop-card:hover {
1283                    transform: translate(-2px, -2px);
1284                    box-shadow: 7px 7px 0px #4A9B9B;
1285                }
1286
1287                .value-prop-icon-badge {
1288                    width: 64px;
1289                    height: 64px;
1290                    margin: 0 auto 22px;
1291                    display: flex;
1292                    align-items: center;
1293                    justify-content: center;
1294                    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
1295                    color: white;
1296                    border-radius: 16px;
1297                    box-shadow: 2px 2px 0px #236060;
1298                }
1299
1300                .value-prop-icon-badge svg {
1301                    width: 34px;
1302                    height: 34px;
1303                }
1304
1305                .value-prop-card h3 {
1306                    font-size: 1.5rem;
1307                    margin-bottom: 18px;
1308                    color: var(--text-primary);
1309                    text-align: center;
1310                }
1311
1312                .value-prop-list {
1313                    list-style: none;
1314                    padding: 0;
1315                    margin: 0;
1316                    text-align: left;
1317                }
1318
1319                .value-prop-list li {
1320                    color: var(--text-secondary);
1321                    line-height: 1.65;
1322                    margin-bottom: 14px;
1323                    padding-left: 30px;
1324                    position: relative;
1325                }
1326
1327                .value-prop-list li:last-child {
1328                    margin-bottom: 0;
1329                }
1330
1331                .value-prop-list li::before {
1332                    content: '';
1333                    position: absolute;
1334                    left: 0;
1335                    top: 3px;
1336                    width: 19px;
1337                    height: 19px;
1338                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7D7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9.5'/%3E%3C/svg%3E") no-repeat center / contain;
1339                }
1340
1341                /* FAQ section — brutalist cards */
1342                .faq-item {
1343                    background: #FFFCF7;
1344                    border: 2.5px solid rgba(45, 125, 125, 0.15) !important;
1345                    border-radius: 14px;
1346                    box-shadow: 4px 4px 0px #4A9B9B;
1347                    margin-bottom: 18px !important;
1348                    overflow: hidden;
1349                    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
1350                }
1351
1352                .faq-item:hover {
1353                    transform: translate(-1px, -1px);
1354                    box-shadow: 6px 6px 0px #4A9B9B;
1355                }
1356
1357                .faq-question {
1358                    color: #3D3229;
1359                    font-weight: 600;
1360                    padding: 18px 22px !important;
1361                    transition: background 0.2s ease;
1362                }
1363
1364                .faq-question:hover,
1365                .faq-question[aria-expanded="true"] {
1366                    background: rgba(45, 125, 125, 0.06);
1367                }
1368
1369                .faq-question .faq-icon {
1370                    color: var(--accent-primary);
1371                    flex-shrink: 0;
1372                    margin-left: 14px;
1373                }
1374
1375                .faq-answer {
1376                    color: #6B5D50;
1377                }
1378
1379                .faq-answer p {
1380                    padding: 4px 22px 20px !important;
1381                }
1382
1383                .faq-answer div p {
1384                    padding: 0 !important;
1385                }
1386
1387                /* Comparison sections */
1388                .compare-eyebrow {
1389                    text-transform: uppercase;
1390                    letter-spacing: 0.08em;
1391                    font-size: 0.85rem;
1392                    font-weight: 700;
1393                    color: var(--accent-primary);
1394                    margin-bottom: 12px;
1395                }
1396
1397                .compare-card {
1398                    max-width: 1100px;
1399                    margin: 0 auto;
1400                    background: #FFFCF7;
1401                    border: 2.5px solid rgba(45, 125, 125, 0.25);
1402                    border-radius: 18px;
1403                    box-shadow: 6px 6px 0px #4A9B9B;
1404                    overflow: hidden;
1405                }
1406
1407                .compare-table-wrap {
1408                    overflow-x: auto;
1409                }
1410
1411                .compare-table {
1412                    width: 100%;
1413                    border-collapse: separate;
1414                    border-spacing: 0;
1415                }
1416
1417                .compare-caption {
1418                    caption-side: top;
1419                    text-align: left;
1420                    font-size: 0.85rem;
1421                    color: var(--text-secondary);
1422                    padding: 16px 20px 12px;
1423                }
1424
1425                .compare-table th,
1426                .compare-table td {
1427                    padding: 14px 16px;
1428                    text-align: left;
1429                    font-size: 0.95rem;
1430                    line-height: 1.5;
1431                    border-bottom: 1.5px solid rgba(45, 125, 125, 0.14);
1432                    vertical-align: top;
1433                }
1434
1435                .compare-table thead th {
1436                    background: var(--accent-primary);
1437                    color: white;
1438                    font-weight: 700;
1439                    white-space: nowrap;
1440                    padding: 16px;
1441                    font-size: 1rem;
1442                    border-bottom: 2.5px solid #236060;
1443                }
1444
1445                .compare-table thead th.compare-best-col {
1446                    background: #D95B3E;
1447                    color: #fff;
1448                    border-left: 2.5px solid #B94C31;
1449                    border-right: 2.5px solid #B94C31;
1450                    border-bottom: 2.5px solid #B94C31;
1451                }
1452
1453                .compare-table thead th:not(:first-child) {
1454                    text-align: center;
1455                }
1456
1457                .compare-table tbody th[scope="row"] {
1458                    color: var(--text-primary);
1459                    font-weight: 600;
1460                    max-width: 220px;
1461                    background: rgba(45, 125, 125, 0.05);
1462                    vertical-align: middle;
1463                }
1464
1465                .compare-problems-row td { vertical-align: top; }
1466
1467                .compare-table td {
1468                    color: var(--text-secondary);
1469                    text-align: center;
1470                    vertical-align: middle;
1471                }
1472
1473                .compare-table tbody tr:not(.compare-total-row):hover th,
1474                .compare-table tbody tr:not(.compare-total-row)
1474:hover td:not(.compare-best-col) {
1475                    background: rgba(45, 125, 125, 0.07);
1476                }
1477
1478                .compare-table tbody tr:last-child th,
1479                .compare-table tbody tr:last-child td {
1480                    border-bottom: none;
1481                }
1482
1483                .compare-table .compare-best-col {
1484                    background: rgba(217, 91, 62, 0.08);
1485                    color: var(--text-primary);
1486                    font-weight: 600;
1487                    border-left: 2.5px solid #D95B3E;
1488                    border-right: 2.5px solid #D95B3E;
1489                }
1490
1491                .compare-table .compare-total-row th,
1492                .compare-table .compare-total-row td {
1493                    font-weight: 700;
1494                    font-size: 1.05rem;
1495                    color: var(--text-primary);
1496                    background: rgba(217, 91, 62, 0.08);
1497                    border-top: 2.5px solid rgba(61, 50, 41, 0.2);
1498                }
1499
1500                @media (max-width: 768px) {
1501                    .compare-card {
1502                        background: none;
1503                        border: none;
1504                        border-radius: 0;
1505                        box-shadow: none;
1506                        overflow: visible;
1507                    }
1508                    .compare-table thead {
1509                        display: none;
1510                    }
1511                    .compare-table,
1512                    .compare-table tbody,
1513                    .compare-table tr,
1514                    .compare-table th[scope="row"],
1515                    .compare-table td {
1516                        display: block;
1517                        width: 100%;
1518                        max-width: none;
1519                    }
1520                    .compare-caption {
1521                        display: block;
1522                        padding: 0 4px 14px;
1523                    }
1524                    .compare-table tbody tr {
1525                        background: #FFFCF7;
1526                        border: 2.5px solid rgba(45, 125, 125, 0.2);
1527                        border-radius: 14px;
1528                        box-shadow: 4px 4px 0px #4A9B9B;
1529                        margin-bottom: 18px;
1530                        overflow: hidden;
1531                    }
1532                    .compare-table tbody th[scope="row"] {
1533                        background: var(--accent-primary);
1534                        color: white;
1535                        font-weight: 700;
1536                        max-width: none;
1537                        border-bottom: none;
1538                        padding: 12px 16px;
1539                    }
1540                    .compare-table tbody tr.compare-total-row {
1541                        border-color: rgba(61, 50, 41, 0.3);
1542                    }
1543                    .compare-table td {
1544                        display: flex;
1545                        justify-content: space-between;
1546                        gap: 12px;
1547                        text-align: left;
1548                        border-bottom: 1px solid rgba(45, 125, 125, 0.08);
1549                    }
1550                    .compare-table td::before {
1551                        content: attr(data-label);
1552                        font-weight: 700;
1553                        color: var(--text-primary);
1554                        flex-shrink: 0;
1555                    }
1556                    .compare-table .compare-total-row th,
1557                    .compare-table .compare-total-row td {
1558                        border-top: none;
1559                    }
1560                    .compare-table .compare-best-col {
1561                        border-left: none;
1562                        border-right: none;
1563                    }
1564                }
1565
1566                /* Rating words + detail lines inside chart cells */
1567                .compare-rating {
1568                    display: block;
1569                    font-weight: 800;
1570                    font-size: 1.05rem;
1571                    letter-spacing: 0.02em;
1572                }
1573
1574                .rating-good { color: #1E7A52; }
1575                .rating-mid { color: #8A6410; }
1576                .rating-warn { color: #B3552E; }
1577                .rating-bad { color: #B02E23; }
1578
1579                .compare-cell-detail {
1580                    display: block;
1581                    margin-top: 8px;
1582                    font-size: 0.88rem;
1583                    font-weight: 400;
1584                    color: var(--text-secondary);
1585                    line-height: 1.5;
1586                }
1587
1588                .compare-src {
1589                    display: inline;
1590                    margin-left: 4px;
1591                    padding: 0;
1592                    border: none;
1593                    background: transparent;
1594                    color: var(--accent-primary);
1595                    font: inherit;
1596                    font-size: 0.82rem;
1597                    font-weight: 600;
1598                    text-decoration: underline;
1599                    cursor: pointer;
1600                    white-space: nowrap;
1601                }
1602
1603                .compare-src:hover { color: #236060; }
1604
1605                /* Chart source links sit on their own centered line below the cell/bullet text */
1606                .compare-table .compare-src { display: block; margin: 4px auto 0; }
1607
1608                /* Hero footnote superscript: plain footnote look in the surrounding text color */
1609                .hero-subtitle sup .compare-src { font-size: 0.75em; margin-left: 2px; color: inherit; text-decoration: none; }
1610                .hero-subtitle sup .compare-src:hover { color: inherit; }
1611
1612                .compare-bullets {
1613                    list-style: disc;
1614                    margin: 0;
1615                    padding-left: 18px;
1616                    text-align: left;
1617                    font-size: 0.88rem;
1618                    font-weight: 400;
1619                    color: var(--text-secondary);
1620                    line-height: 1.5;
1621                    display: grid;
1622                    gap: 6px;
1623                }
1624
1625                .compare-bullets li::marker { color: var(--accent-primary); }
1626
1627                /* Source popup cards (re-parented to <body> at init) */
1628                .compare-pop {
1629                    display: none;
1630                    position: absolute;
1631                    z-index: 2100;
1632                    width: 320px;
1633                    max-width: calc(100vw - 24px);
1634                    background: var(--bg-primary);
1635                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1636                    border-radius: 8px;
1637                    padding: 16px 18px;
1638                    box-shadow: 4px 4px 0px #4A9B9B;
1639                    text-align: left;
1640                    animation: modalFadeIn 0.2s ease;
1641                }
1642
1643                .compare-pop.show { display: block; }
1644
1645                .compare-pop-title {
1646                    font-size: 0.95rem;
1647                    font-weight: 700;
1648                    color: var(--text-primary);
1649                    margin: 0 0 6px;
1650                }
1651
1652                .compare-pop-body {
1653                    font-size: 0.85rem;
1654                    color: var(--text-secondary);
1655                    line-height: 1.55;
1656                    margin: 0;
1657                }
1658
1659                .compare-pop-link {
1660                    display: inline-block;
1661                    margin-top: 8px;
1662                    font-size: 0.85rem;
1663                    font-weight: 600;
1664                    color: var(--accent-primary);
1665                    text-decoration: underline;
1666                }
1667
1668                .compare-pop-link:hover { color: #236060; }
1669
1670                .compare-pop-close {
1671                    position: absolute;
1672                    top: 6px;
1673                    right: 10px;
1674                    padding: 4px;
1675                    background: none;
1676                    border: none;
1677                    font-size: 1.25rem;
1678                    line-height: 1;
1679                    color: var(--text-secondary);
1680                    cursor: pointer;
1681                }
1682
1683                .compare-pop-close:hover { color: var(--text-primary); }
1684
1685                .compare-pop-bullets {
1686                    list-style: disc;
1687                    margin: 0;
1688                    padding-left: 18px;
1689                    font-size: 0.85rem;
1690                    color: var(--text-secondary);
1691                    line-height: 1.55;
1692                    display: grid;
1693                    gap: 6px;
1694                }
1695
1696                .compare-pop-bullets li::marker { color: var(--accent-primary); }
1697
1698                /* Wide variant for the guarantee card */
1699                .compare-pop-wide {
1700                    width: 720px;
1701                    padding: 24px 26px;
1702                }
1703
1704                .guarantee-pop-heading {
1705                    font-size: 1.4rem;
1706                    color: var(--text-primary);
1707                    text-align: center;
1708                    margin: 0 0 12px;
1709                }
1710
1711                /* Stacked mobile cells: label above badge/detail instead of the flex row used by the old one-line cells */
1712                @media (max-width: 768px) {
1713                    .compare-table td { display: block; }
1714                    .compare-table td::before { display: block; margin-bottom: 6px; }
1715                }
1716
1717                /* Build Your Site Guarantee card (opened from the chart'
1717s Failure Risk source link) */
1718                .guarantee-modal-note {
1719                    text-align: center;
1720                    color: var(--text-secondary);
1721                    line-height: 1.6;
1722                    margin-bottom: 20px;
1723                }
1724
1725                .guarantee-modal-grid {
1726                    display: grid;
1727                    grid-template-columns: 1fr 1fr;
1728                    gap: 16px;
1729                    margin-bottom: 24px;
1730                }
1731
1732                @media (max-width: 640px) {
1733                    .guarantee-modal-grid { grid-template-columns: 1fr; }
1734                }
1735
1736                .guarantee-modal-card {
1737                    background: var(--bg-secondary);
1738                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1739                    border-radius: 8px;
1740                    padding: 18px 20px;
1741                    box-shadow: 4px 4px 0px #4A9B9B;
1742                }
1743
1744                .guarantee-modal-card h3 {
1745                    color: var(--text-primary);
1746                    font-size: 1.05rem;
1747                    margin-bottom: 10px;
1748                }
1749
1750                .guarantee-modal-card ul {
1751                    list-style: none;
1752                    margin: 0;
1753                    padding: 0;
1754                }
1755
1756                .guarantee-modal-card li {
1757                    color: var(--text-secondary);
1758                    line-height: 1.6;
1759                    margin-bottom: 6px;
1760                    padding-left: 24px;
1761                    position: relative;
1762                }
1763
1764                .guarantee-modal-card li::before {
1765                    content: '\2713';
1766                    position: absolute;
1767                    left: 0;
1768                    color: var(--accent-primary);
1769                    font-weight: 700;
1770                }
1771
1772                .guarantee-modal-cta-row { text-align: center; }
1773
1774                .guarantee-modal-cta {
1775                    display: inline-block;
1776                    padding: 12px 26px;
1777                    background: var(--accent-primary);
1778                    color: white;
1779                    border: none;
1780                    border-radius: 8px;
1781                    font-weight: 700;
1782                    font-size: 1rem;
1783                    cursor: pointer;
1784                    box-shadow: 3px 3px 0px #236060;
1785                    transition: transform 0.15s ease, box-shadow 0.15s ease;
1786                }
1787
1788                .guarantee-modal-cta:hover {
1789                    transform: translate(-1px, -1px);
1790                    box-shadow: 4px 4px 0px #236060;
1791                }
1792
1793                .compare-panel-grid {
1794                    display: grid;
1795                    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
1796                    gap: 32px;
1797                    max-width: 1000px;
1798                    margin: 50px auto 0;
1799                }
1800
1801                .compare-panel {
1802                    background: #FFFCF7;
1803                    border-radius: 16px;
1804                    padding: 32px;
1805                    border: 2.5px solid rgba(45, 125, 125, 0.15);
1806                }
1807
1808                .compare-panel-us {
1809                    box-shadow: 5px 5px 0px #4A9B9B;
1810                }
1811
1812                .compare-panel-them {
1813                    box-shadow: 5px 5px 0px rgba(107, 93, 80, 0.35);
1814                    opacity: 0.92;
1815                }
1816
1817                .compare-check-list,
1818                .compare-x-list {
1819                    list-style: none;
1820                    padding: 0;
1821                    margin: 0;
1822                }
1823
1824                .compare-check-list li,
1825                .compare-x-list li {
1826                    color: var(--text-secondary);
1827                    line-height: 1.7;
1828                    margin-bottom: 8px;
1829                    padding-left: 26px;
1830                    position: relative;
1831                }
1832
1833                .compare-check-list li::before {
1834                    content: '\2713';
1835                    position: absolute;
1836                    left: 0;
1837                    color: var(--accent-primary);
1838                    font-weight: 700;
1839                }
1840
1841                .compare-x-list li::before {
1842                    content: '\2717';
1843                    position: absolute;
1844                    left: 0;
1845                    color: #b3552e;
1846                    font-weight: 700;
1847                }
1848
1849                .compare-callout {
1850                    max-width: 900px;
1851                    margin: 50px auto 0;
1852                }
1853
1854                .compare-quote {
1855                    max-width: 700px;
1856                    margin: 0 auto;
1857                    padding: 18px 24px;
1858                    border-left: 4px solid var(--accent-primary);
1859                    background: rgba(45, 125, 125, 0.06);
1860                    border-radius: 0 12px 12px 0;
1861                    font-size: 1.15rem;
1862                    font-style: italic;
1863                    color: var(--text-primary);
1864                    line-height: 1.6;
1865                }
1866            </style>
1867            <div class="latest-articles-section" style="margin-bottom: 80px;">
1868                <h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; text-align: center; color: var(--text-primary);">Latest Articles</h2>
1869                <p style="font-size: 1.2rem; text-align: center; color: var(--text-secondary); margin-bottom: 48px;">Insights and guides to help you build your online presence</p>
1870
1871                <div class="blog-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto;">
1872                    <!-- Article: Small-Business Website Launch Checklist -->
1873                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1874                        <a href="/blog/launch-promote-small-business-website.html" style="text-decoration: none; color: inherit;">
1875                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1876                                <img src="/images/blog/small-business.webp" alt="Small-business owner preparing a website for launch and promotion" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1877                            </div>
1878                        </a>
1879                        <div style="padding: 24px;">
1880                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">From Launch to Discovery: A Practical Small-Business Website Checklist</h3>
1881                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Plan the essentials, explore a <a href="https://freewebdesignservice.com/" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free web design service</a>, and learn where to <a href="https://showcaseyourwebsite.com/" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">showcase your website</a> after launch.</p>
1882                            <a href="/blog/launch-promote-small-business-website.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1883                                Read more
1884                                <span style="transition: transform 0.2s ease;">→</span>
1885                            </a>
1886                        </div>
1887                    </article>
1888
1889                    <!-- Article: Best Free Contractor Calculators -->
1890                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1891                        <a href="/blog/best-free-contractor-calculators.html" style="text-decoration: none; color: inherit;">
1892                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1893                                <img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=800&q=80" alt="Free contractor calculators and tools featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1894                            </div>
1895                        </a>
1896                        <div style="padding: 24px;">
1897                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Free Calculators & Tools for Contractors (2026)</h3>
1898                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Cover every job with these <a href="https://contractorcalcs.pro" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free calculators and tools for contractors</a> — electrical, materials, estimating, structural, and business documents.</p>
1899                            <a href="/blog/best-free-contractor-calculators.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1900                                Read more
1901                                <span style="transition: transform 0.2s ease;">→</span>
1902                            </a>
1903                        </div>
1904                    </article>
1905
1906                    <!-- Article 0: Soul India & Taj Mahal Seattle -->
1907                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1908                        <a href="/blog/soul-india-seattle-indian-culture.html" style="text-decoration: none; color: inherit;">
1909                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1910                                <img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da?w=800&q=80" alt="Soul India Seattle and Taj Mahal Seattle featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1911                            </div>
1912                        </a>
1913                        <div style="padding: 24px;">
1914                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Soul India Seattle & Taj Mahal Seattle: Indian Culture in the Pacific Northwest</h3>
1915                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">How Soul India Seattle and Taj Mahal Seattle share authentic Indian culture — from <a href="https://soulindiaseattle.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">Indian cultural tours</a> to <a href="https://tajmahalseattle.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">Indian clothing and jewelry at Pike Place Market</a>.</p>
1916                            <a href="/blog/soul-india-seattle-indian-culture.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1917                                Read more
1918                                <span style="transition: transform 0.2s ease;">→</span>
1919                            </a>
1920                        </div>
1921                    </article>
1922
1923                    <!-- Article 1: QuotesForMoms Featured Site -->
1924                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1925                        <a href="/blog/quotesformoms-inspirational-mom-quotes-website.html" style="text-decoration: none; color: inherit;">
1926                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1927                                <img src="https://images.unsplash.com/photo-1491013516836-7db643ee125a?w=800&q=80" alt="Inspirational mom quotes website built on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1928                            </div>
1929                        </a>
1930                        <div style="padding: 24px;">
1931                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">QuotesForMoms.com: Inspirational Mom Quotes for Every Kind of Mother</h3>
1932                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">How QuotesForMoms.com became a go-to home for <a href="https://quotesformoms.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">inspirational mom quotes</a>, funny mom quotes, and encouraging words — built on Vibe Otter.</p>
1933                            <a href="/blog/quotesformoms-inspirational-mom-quotes-website.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1934                                Read more
1935                                <span style="transition: transform 0.2s ease;">→</span>
1936                            </a>
1937                        </div>
1938                    </article>
1939
1940                    <!-- Article 2: Two Passports One Planet -->
1941                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1942                        <a href="https://twopassportsoneplanet.com" target="_blank" rel="noopener" style="text-decoration: none; color: inherit;">
1943                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1944                                <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&q=80" alt="Two Passports One Planet travel inspiration featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1945                            </div>
1946                        </a>
1947                        <div style="padding: 24px;">
1948                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Two Passports One Planet: Travel Inspiration for Global Adventures</h3>
1949                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Browse <a href="https://twopassportsoneplanet.com/unique-places-to-visit-in-nairobi.html" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">unique places to visit in Nairobi</a> and practical travel inspiration from Two Passports One Planet.</p>
1950                            <a href="https://twopassportsoneplanet.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1951                                Explore travel guides
1952                                <span style="transition: transform 0.2s ease;">→</span>
1953                            </a>
1954                        </div>
1955                    </article>
1956
1957                    <!-- Article 3: Tree Removal Cost Calculators -->
1958                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1959                        <a href="/blog/best-tree-removal-calculators.html" style="text-decoration: none; color: inherit;">
1960                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1961                                <img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?w=800&q=80" alt="Tree removal cost calculator resources featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1962                            </div>
1963                        </a>
1964                        <div style="padding: 24px;">
1965                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Tree Removal Cost Calculators & Resources (2026)</h3>
1966                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Get a location-adjusted estimate with this <a href="https://treeremovalcostcalculator.app" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">tree removal cost calculator</a> before your next tree project.</p>
1967                            <a href="/blog/best-tree-removal-calculators.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1968                                Read more
1969                                <span style="transition: transform 0.2s ease;">→</span>
1970                            </a>
1971                        </div>
1972                    </article>
1973
1974                    <!-- Article 4: Small Business Tool Comparisons -->
1975                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1976                        <a href="/blog/best-small-business-tool-comparisons.html" style="text-decoration: none; color: inherit;">
1977                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1978                                <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&q=80" alt="Business owners comparing tools and software for their small business" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1979                            </div>
1980                        </a>
1981                        <div style="padding: 24px;">
1982                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">How to Pick the Right Tools for Your Business (Without the Headache)</h3>
1983                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">One site compares everything — payments, accounting, POS, banking, and websites — so you don't have to. Start with these <a href="https://runsmartguide.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">small business software reviews and comparisons</a>.</p>
1984                            <a href="/blog/best-small-business-tool-comparisons.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
1985                                Read more
1986                                <span style="transition: transform 0.2s ease;">→</span>
1987                            </a>
1988                        </div>
1989                    </article>
1990
1991                    <!-- Article 5: Stretching & Workout Resources -->
1992                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
1993                        <a href="/blog/best-stretching-workout-resources.html" style="text-decoration: none; color: inherit;">
1994                            <div style="aspect-ratio: 16/9; overflow: hidden;">
1995                                <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800&q=80" alt="Best free stretching and workout resources online" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
1996                            </div>
1997                        </a>
1998                        <div style="padding: 24px;">
1999                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Free Stretching & Workout Resources Online (2026)</h3>
2000                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Explore <a href="https://stretchworkouts.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free stretching and workout resources</a>: dumbbell workouts, stretching routines, recovery programs, and interactive anatomy tools.</p>
2001                            <a href="/blog/best-stretching-workout-resources.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
2002                                Read more
2003                                <span style="transition: transform 0.2s ease;">→</span>
2004                            </a>
2005                        </div>
2006                    </article>
2007
2008                    <!-- Article 6: Bible Verses Faith Guide -->
2009                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
2010                        <a href="/blog/bible-verses-faith-guide.html" style="text-decoration: none; color: inherit;">
2011                            <div style="aspect-ratio: 16/9; overflow: hidden;">
2012                                <img src="https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=800&q=80" alt="Bible verses for every season of life" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
2013                            </div>
2014                        </a>
2015                        <div style="padding: 24px;">
2016                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Bible Verses for Every Season of Life (2026)</h3>
2017                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Curated scripture for marriage, courage, and heaven — plus a meaningful <a href="https://thankgoditsmonday.org/thanksgiving.html" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">prayer of thanksgiving</a> for meals, gatherings, and daily gratitude.</p>
2018                            <a href="/blog/bible-verses-faith-guide.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
2019                                Read more
2020                                <span style="transition: transform 0.2s ease;">→</span>
2021                            </a>
2022                        </div>
2023                    </article>
2024
2025                    <!-- Article: Puppy Weight Predictors -->
2026                    <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);">
2027                        <a href="/blog/best-puppy-weight-predictors.html" style="text-decoration: none; color: inherit;">
2028                            <div style="aspect-ratio: 16/9; overflow: hidden;">
2029                                <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=800&q=80" alt="Puppy weight calculator and growth tools featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy">
2030                            </div>
2031                        </a>
2032                        <div style="padding: 24px;">
2033                            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Puppy Weight Predictors & Growth Tools (2026)</h3>
2034                            <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Estimate your dog's adult size with this <a href="https://puppyweightpredictor.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">puppy weight calculator</a> — plus growth charts and breed tools.</p>
2035                            <a href="/blog/best-puppy-weight-predictors.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;">
2036                                Read more
2037                                <span style="transition: transform 0.2s ease;">→</span>
2038                            </a>
2039                        </div>
2040                    </article>
2041
2042                </div>
2043
2044                <div style="text-align: center; margin-top: 48px;">
2045                    <a href="/blog" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--accent-primary); color: white; text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(45, 125, 125, 0.25);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(45, 125, 125, 0.35)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(45, 125, 125, 0.25)';">
2046                        View All Articles
2047                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2048                            <line x1="5" y1="12" x2="19" y2="12"></line>
2049                            <polyline points="12 5 19 12 12 19"></polyline>
2050                        </svg>
2051                    </a>
2052                </div>
2053            </div>
2054        </div>
2055    </section>
2056
2057
2058    <footer class="footer">
2059        <div class="footer-container">
2060            <div class="footer-grid">
2061                <div class="footer-column">
2062                    <h4>Company</h4>
2063                    <a href="/about.html">About</a>
2064                    <a href="mailto:[email protected]">Careers</a>
2065                    <a href="/blog">Blog</a>
2066                    <a href="mailto:[email protected]">Press</a>
2067                </div>
2068                <div class="footer-column">
2069                    <h4>Product</h4>
2070                    <a href="#discover">Discover</a>
2071                    <a href="/pricing.html">Pricing</a>
2072                    <a href="/apps.html">Apps</a>
2073                    <a href="#support">Support</a>
2074                </div>
2075                <div class="footer-column">
2076                    <h4>Legal</h4>
2077                    <a href="/privacy.html">Privacy</a>
2078                    <a href="/terms.html">Terms</a>
2079                </div>
2080            </div>
2081            <div class="footer-bottom">
2082                <a href="/" class="footer-logo" style="text-decoration: none; color: inherit;">
2083                    <img src="images/otter-relaxed.svg" alt="Vibe Otter footer logo - website builder platform for professional websites" class="logo-emoji" width="32" height="32">
2084                    <span>© 2025 VibeOtter</span>
2085                </a>
2086                <div class="social-links">
2087                    <a href="#" aria-label="X">𝕏</a>
2088                    <a href="#" aria-label="GitHub">GitHub</a>
2089                    <a href="#" aria-label="LinkedIn">LinkedIn</a>
2090                </div>
2091                <div data-vo-lang-toggle></div>
2092            </div>
2093        </div>
2094    </footer>
2095
2096    <!-- Support Modal -->
2097        <div id="supportModal" class="modal vo-support-modal"></div>
2098        <button type="button" id="vo-support-lite-btn" data-vo-support-modal aria-label="Open support options">
2099            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
2100                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
2101            </svg>
2102        </button>
2103
2104    <!-- Authentication Modal -->
2105    <div id="authModal" class="modal">
2106        <div class="modal-content auth-modal-content">
2107            <span class="modal-close" onclick="document.getElementById('authModal').classList.remove('show'); document.body.style.overflow='';">&times;</span>
2108            
2109            <!-- Login Form -->
2110            <div id="loginForm" class="auth-form">
2111                <h2>Welcome Back</h2>
2112                <p class="auth-subtitle">Sign in to continue building amazing things</p>
2113
2114                <form id="loginFormElement">
2115                    <div class="form-group">
2116                        <input type="email" id="loginEmail" class="form-input" placeholder="Email address" required>
2117                    </div>
2118                    <div class="form-group">
2119                        <input type="password" id="loginPassword" class="form-input" placeholder="Password" required>
2120                    </div>
2121                    <button type="submit" class="btn-primary auth-submit" data-analytics-event="login">Sign In</button>
2122                </form>
2123                
2124                <div class="auth-divider">
2125                    <span>or</span>
2126                </div>
2127                
2128                <button class="btn-google" id="googleSignInBtn">
2129                    <svg width="20" height="20" viewBox="0 0 24 24">
2130                        <path fill="#4285F4" d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/>
2131                        <path fill="#34A853" d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24z"/>
2132                        <path fill="#FBBC05" d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 000 10.76l3.98-3.09z"/>
2133                        <path fill="#EA4335" d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z"/>
2134                    </svg>
2135                    Continue with Google
2136                </button>
2137                
2138                <p class="auth-switch">
2139                    Don't have an account? 
2140                    <a href="#" onclick="switchToSignup(); return false;">Sign up</a>
2141                </p>
2142            </div>
2143            
2144            <!-- Signup Form -->
2145            <div id="signupForm" class="auth-form" style="display: none;">
2146                <h2>Create Your Account</h2>
2147                <p class="auth-subtitle">Start building amazing websites today</p>
2148                
2149                <form id="signupFormElement">
2150                    <div class="form-group">
2151                        <input type="email" id="signupEmail" class="form-input" placeholder="Email address" required>
2152                    </div>
2153                    <div class="form-group">
2154                        <input type="password" id="signupPassword" class="form-input" placeholder="Password (6+ characters)" required>
2155                    </div>
2156                    <div class="form-group">
2157                        <input type="password" id="signupPasswordConfirm" class="form-input" placeholder="Confirm password" required>
2158                    </div>
2159                    <button type="submit" class="btn-primary auth-submit" data-analytics-event="signup">Create Account</button>
2160                </form>
2161                
2162                <div class="auth-divider">
2163                    <span>or</span>
2164                </div>
2165                
2166                <button class="btn-google" id="googleSignUpBtn">
2167                    <svg width="20" height="20" viewBox="0 0 24 24">
2168                        <path fill="#4285F4" d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/>
2169                        <path fill="#34A853" d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24z"/>
2170                        <path fill="#FBBC05" d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 000 10.76l3.98-3.09z"/>
2171                        <path fill="#EA4335" d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z"/>
2172                    </svg>
2173                    Continue with Google
2174                </button>
2175                
2176                <p class="auth-switch">
2177                    Already have an account?
2178                    <a href="#" onclick="switchToLogin(); return false;">Sign in</a>
2179                </p>
2180
2181                <div class="designer-signup-option">
2182                    <button class="designer-signup-link" onclick="handleDesignerSignup(); return false;">Designer Sign Up</button>
2183                </div>
2184            </div>
2185        </div>
2186    </div>
2187
2188    <!-- FAQ Functionality -->
2189    
2189<script>
2190        function toggleFaq(button) {
2191            const answer = button.nextElementSibling;
2192            const icon = button.querySelector('.faq-icon');
2193            const isOpen = button.getAttribute('aria-expanded') === 'true';
2194            
2195            if (isOpen) {
2196                answer.style.maxHeight = '0';
2197                button.setAttribute('aria-expanded', 'false');
2198                icon.style.transform = 'rotate(0deg)';
2199            } else {
2200                answer.style.maxHeight = answer.scrollHeight + 'px';
2201                button.setAttribute('aria-expanded', 'true');
2202                icon.style.transform = 'rotate(180deg)';
2203            }
2204        }
2205
2206        // Comparison-chart source popups: chips with data-pop open the matching
2207        // .compare-pop card anchored under the chip. Cards are re-parented to
2208        // <body> so position:absolute uses page coordinates (the compare section
2209        // has positioned ancestors that would otherwise offset them).
2210        (function() {
2211            var openPop = null;
2212            document.querySelectorAll('.compare-pop').forEach(function(pop) { document.body.appendChild(pop); });
2213            function closePop() { if (openPop) { openPop.classList.remove('show'); openPop = null; } }
2214            document.querySelectorAll('.compare-src[data-pop]').forEach(function(btn) {
2215                btn.addEventListener('click', function(e) {
2216                    e.stopPropagation();
2217                    var pop = document.getElementById(btn.getAttribute('data-pop'));
2218                    if (!pop) return;
2219                    if (openPop === pop) { closePop(); return; }
2220                    closePop();
2221                    pop.classList.add('show');
2222                    var r = btn.getBoundingClientRect();
2223                    var left = r.left + r.width / 2 - pop.offsetWidth / 2;
2224                    left = Math.max(12, Math.min(left, window.innerWidth - pop.offsetWidth - 12));
2225                    pop.style.left = (left + window.scrollX) + 'px';
2226                    pop.style.top = (r.bottom + 10 + window.scrollY) + 'px';
2227                    openPop = pop;
2228                });
2229            });
2230            document.querySelectorAll('.compare-pop-close').forEach(function(btn) {
2231                btn.addEventListener('click', function(e) { e.stopPropagation(); closePop(); });
2232            });
2233            document.addEventListener('click', function(e) { if (openPop && !openPop.contains(e.target)) closePop(); });
2234            document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePop(); });
2235        })();
2236
2237        // Comparison-section disclosures (same pattern as the paywall)
2238        function toggleFeature(button) {
2239            const item = button.closest('.feature-expandable');
2240            if (!item) return;
2241            const isExpanded = item.classList.toggle('expanded');
2242            button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
2243        }
2244    </script>
2244
2245    
2246    
2246<script src="js/config.js?v=1790948744" defer></script>
2246
2247    
2247<script>
2248    (function() {
2249        var authLoadPromise = null;
2250        var authScriptVersion = '?v=1790948744';
2251
2252        function loadScript(src) {
2253            return new Promise(function(resolve, reject) {
2254                var target = new URL(src, window.location.href).href.split('?')[0];
2255                var scripts = document.querySelectorAll('script[src]');
2256                for (var i = 0; i < scripts.length; i++) {
2257                    if (scripts[i].src.split('?')[0] === target) {
2258                        if (scripts[i].dataset.loaded === 'true') {
2259                            resolve();
2260                        } else {
2261                            scripts[i].addEventListener('load', resolve, { once: true });
2262                            scripts[i].addEventListener('error', reject, { once: true });
2263                        }
2264                        return;
2265                    }
2266                }
2267
2268                var script = document.createElement('script');
2269                script.src = src;
2270                script.async = true;
2271                script.onload = function() {
2272                    script.dataset.loaded = 'true';
2273                    resolve();
2274                };
2275                script.onerror = reject;
2276                document.head.appendChild(script);
2277            });
2278        }
2279
2280        function waitForInitialAuth() {
2281            return new Promise(function(resolve) {
2282                if (!window.firebaseAuth || typeof window.firebaseAuth.onAuthStateChanged !== 'function') {
2283                    resolve();
2284                    return;
2285                }
2286
2287                var settled = false;
2288                var timeout = setTimeout(done, 1500);
2289                var unsubscribe = window.firebaseAuth.onAuthStateChanged(done);
2290
2291                function done() {
2292                    if (settled) return;
2293                    settled = true;
2294                    clearTimeout(timeout);
2295                    if (typeof unsubscribe === 'function') unsubscribe();
2296                    resolve();
2297                }
2298            });
2299        }
2300
2301        function loadVibeOtterAuth() {
2302            if (window.firebaseAuth && typeof window.initializeAuth === 'function') {
2303                window.initializeAuth();
2304                return waitForInitialAuth();
2305            }
2306
2307            if (!authLoadPromise) {
2308                authLoadPromise = loadScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js')
2309                    .then(function() {
2310                        return loadScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js');
2311                    })
2312                    .then(function() {
2313                        return loadScript('/js/firebase-config.js' + authScriptVersion);
2314                    })
2315                    .then(function() {
2316                        return loadScript('/js/auth.js' + authScriptVersion);
2317                    })
2318                    .then(function() {
2319                        if (typeof window.initializeAuth === 'function') {
2320                            window.initializeAuth();
2321                        }
2322                        return waitForInitialAuth();
2323                    })
2324                    .catch(function(error) {
2325                        authLoadPromise = null;
2326                        throw error;
2327                    });
2328            }
2329
2330            return authLoadPromise;
2331        }
2332
2333        // Signed-in hint left by auth.js/dashboard: relabel the static Login buttons
2334        // without loading Firebase. Stale hint self-heals — the click still loads
2335        // auth, which shows the login modal and clears the hint.
2336        if (localStorage.getItem('vibeotter_authed') === '1' && window.voI18n) {
2337            document.querySelectorAll('.btn-secondary, .mobile-login').forEach(function(btn) {
2338                btn.textContent = window.voI18n.t('auth.btn.dashboard');
2339            });
2340        }
2341
2342        document.addEventListener('click', function(e) {
2343            var loginButton = e.target && e.target.closest && e.target.closest('.btn-secondary, .mobile-login');
2344            if (!loginButton || window.firebaseAuth) return;
2345
2346            e.preventDefault();
2347            e.stopImmediatePropagation();
2348            loadVibeOtterAuth().then(function() {
2349                // Already signed in: go to the dashboard, same as the eager-auth pages
2350                if (window.firebaseAuth && window.firebaseAuth.currentUser) {
2351                    window.location.href = '/dashboard.html';
2352                    return;
2353                }
2354                if (typeof window.handleLoginButtonClick === 'function') {
2355                    window.handleLoginButtonClick();
2356                }
2357            });
2358        }, true);
2359
2360        document.addEventListener('submit', function(e) {
2361            var form = e.target;
2362            if (!form || form.id !== 'otterChatForm' || window.firebaseAuth || form.dataset.voAuthReady === 'true') return;
2363
2364            e.preventDefault();
2365            e.stopImmediatePropagation();
2366            loadVibeOtterAuth().then(function() {
2367                form.dataset.voAuthReady = 'true';
2368                if (typeof form.requestSubmit === 'function') {
2369                    form.requestSubmit();
2370                } else {
2371                    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
2372                }
2373                setTimeout(function() {
2374                    delete form.dataset.voAuthReady;
2375                }, 0);
2376            });
2377        }, true);
2378
2379        window.loadVibeOtterAuth = loadVibeOtterAuth;
2380    })();
2381    </script>
2381
2382    
2382<script src="js/otter-input-bar.js?v=1790948744" defer></script>
2382
2383    
2383<script src="js/app.js?v=1790948744" defer></script>
2383
2384    
2384<script src="js/analytics-tracking.js?v=1790948744" defer></script>
2384
2385    
2385<script src="js/showcase-sites.js?v=1790948744" defer></script>
2385
2386    
2386<script src="js/showcase-filter.js?v=1790948744" defer></script>
2386
2387
2388    
2388<script>
2389// GA4 Event Tracking
2390(function() {
2391    if (typeof gtag === 'undefined') return;
2392
2393    // Track all button clicks
2394    document.addEventListener('click', function(e) {
2395        if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
2396            const btn = e.target.tagName === 'BUTTON' ? e.target : e.target.closest('button');
2397            gtag('event', 'button_click', {
2398                'button_text': btn.textContent.trim(),
2399                'button_class': btn.className
2400            });
2401        }
2402
2403        // Track link clicks
2404        if (e.target.tagName === 'A' || e.target.closest('a')) {
2405            const link = e.target.tagName === 'A' ? e.target : e.target.closest('a');
2406            const href = link.href;
2407
2408            if (href.startsWith('tel:')) {
2409                gtag('event', 'phone_click', {'phone_number': href.replace('tel:', '')});
2410            } else if (href.startsWith('mailto:')) {
2411                gtag('event', 'email_click', {'email': href.replace('mailto:', '')});
2412            } else if (href.includes('http') && !href.includes('vibeotter.com')) {
2413                gtag('event', 'external_link_click', {'url': href});
2414            }
2415        }
2416    });
2417
2418    // Track scroll depth
2419    let scrollDepths = {25: false, 50: false, 75: false, 100: false};
2420    window.addEventListener('scroll', function() {
2421        const scrollPercent = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight * 100;
2422
2423        Object.keys(scrollDepths).forEach(depth => {
2424            if (scrollPercent >= depth && !scrollDepths[depth]) {
2425                scrollDepths[depth] = true;
2426                gtag('event', 'scroll_depth', {'depth': depth + '%'});
2427            }
2428        });
2429    });
2430})();
2431</script>
vendor: 1 bytes, line 2431
2431
2432<script>
2433(function() {
2434    var supportLiteBtn = document.getElementById('vo-support-lite-btn');
2435    if (supportLiteBtn) {
2436        supportLiteBtn.addEventListener('click', function(e) {
2437            if (window.VibeOtterSupportModal && typeof window.VibeOtterSupportModal.open === 'function') {
2438                window.VibeOtterSupportModal.open(e);
2439            }
2440        });
2441        document.addEventListener('click', function(e) {
2442            if (e.target && e.target.closest && e.target.closest('[data-vo-chat-live]')) {
2443                supportLiteBtn.classList.add('vo-support-lite-hidden');
2444            }
2445        }, true);
2446    }
2447
2448    var pitchText = {
2449        website: '',
2450        app: voT('marketing.home.mode.pitch.app'),
2451        presentation: voT('marketing.home.mode.pitch.presentation'),
2452        proposal: voT('marketing.home.mode.pitch.proposal'),
2453        ebook: voT('marketing.home.mode.pitch.ebook'),
2454        flyer: voT('marketing.home.mode.pitch.flyer')
2455    };
2456
2457    var pitchEl = document.getElementById('modePitchText');
2458    var moreBtn = document.getElementById('modeMoreBtn');
2459    var moreOptions = document.getElementById('modeMoreOptions');
2460
2461    // Set Website as the default active pill and clear any stored build mode
2462    // so storage always matches the pill shown on a fresh load (a leftover
2463    // 'app' from a prior apps.html visit would otherwise silently flip a
2464    // homepage-started build into app mode).
2465    var defaultBtn = document.querySelector('.mode-btn[data-mode="website"]');
2466    if (defaultBtn) defaultBtn.classList.add('active');
2467    sessionStorage.removeItem('vibeotter_build_mode');
2468
2469    // More button toggles the expanded row
2470    moreBtn.addEventListener('click', function() {
2471        moreOptions.classList.toggle('open');
2472        moreBtn.textContent = moreOptions.classList.contains('open')
2473            ? voT('marketing.home.mode.more_expanded')
2474            : voT('marketing.home.mode.more_collapsed');
2475    });
2476
2477    document.querySelectorAll('.mode-btn[data-mode]').forEach(function(btn) {
2478        btn.addEventListener('click', function() {
2479            document.querySelectorAll('.mode-btn[data-mode]').forEach(function(b) { b.classList.remove('active'); });
2480            this.classList.add('active');
2481            var mode = this.dataset.mode;
2482
2483            // Only website clears build mode; all others (including app) store it
2484            if (mode === 'website') {
2485                sessionStorage.removeItem('vibeotter_build_mode');
2486            } else {
2487                sessionStorage.setItem('vibeotter_build_mode', mode);
2488            }
2489
2490            // Update input bar placeholders (app uses website mode)
2491            var inputBar = document.querySelector('#homepage-input-bar');
2492            if (inputBar && inputBar.__otterInstance && inputBar.__otterInstance.setMode) {
2493                inputBar.__otterInstance.setMode(mode === 'app' ? 'website' : mode);
2494            }
2495
2496
2497
2498            // Update pitch text below pills
2499            pitchEl.style.opacity = '0';
2500            setTimeout(function() {
2501                pitchEl.textContent = pitchText[mode] || '';
2502                pitchEl.style.opacity = '1';
2503            }, 150);
2504        });
2505    });
2506})();
2507</script>
2507
2508    
2508<script src="js/support-modal.js?v=support-hash-20260914" defer></script>
2508
2509</body>
2510</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.