PageSourceSearch

https://pawtul.com/

html pawtul.com collected 2026-10-02 01:38:45 UTC 26,015 bytes, 854 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Pawtul - Pet Care Business Management</title>
8
9    <!-- Bootstrap 5 CSS -->
10    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
11    <!-- Inter Font -->
12    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13    <!-- Feather Icons -->
14    <link href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.css" rel="stylesheet">
15
16    <link href="/static/css/pawtul_new.css" rel="stylesheet">
17</head>
18
19<body>
20    <!-- Navigation -->
21    <nav class="navbar navbar-expand-lg">
22        <div class="container">
23            <a class="navbar-brand" href="/">
24                <img src="/static/images/logos/png/pawtul_logo.png" class="img-fluid" style="max-width: 200px;">
25            </a>
26
27            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
28                <span class="navbar-toggler-icon"></span>
29            </button>
30
31            <div class="collapse navbar-collapse" id="navbarNav">
32                <ul class="navbar-nav ms-auto">
33                    <li class="nav-item">
34                        <a class="nav-link" href="/">Home</a>
35                    </li>
36                    <li class="nav-item">
37                        <a class="nav-link" href="/#features">Features</a>
38                    </li>
39                    <li class="nav-item">
40                        <a class="nav-link" href="/#pricing">Pricing</a>
41                    </li>
42                    <li class="nav-item">
43                        <a class="nav-link" href="/contact">Contact</a>
44                    </li>
45                    <li class="nav-item ms-2">
46                        <a class="btn btn-outline-primary" href="/login">Login</a>
47                    </li>
48                    <li class="nav-item ms-2">
49                        <a class="btn btn-primary" href="/signup">Get Started</a>
50                    </li>
51                </ul>
52            </div>
53        </div>
54    </nav>
55
56    <!-- Main Content -->
57    <main>
58        
59<!-- Hero Section -->
60<section class="hero-section">
61	<div class="botanical-decoration botanical-1"></div>
62	<div class="botanical-decoration botanical-2"></div>
63
64	<div class="container">
65		<div class="row align-items-center">
66			<div class="col-lg-6">
67				<div class="hero-content fade-in">
68					<h1>Manage your business</h1>
69					<p class="lead">with effortless control, and modern elegance</p>
70					<p>Take back control of your pet care business with our redesigned, refined, and rebuilt platform.
71						Everything you need in one beautiful, intuitive app.</p>
72
73					<div class="d-flex flex-wrap gap-3 mt-4">
74						<a href="/signup" class="btn btn-primary btn-lg">
75							Get Started Free
76							<i data-feather="arrow-right" class="ms-2"></i>
77						</a>
78						<button type="button" class="btn btn-outline-primary btn-lg" id="watchDemoBtn">
79							Watch Demo
80							<i data-feather="play" class="ms-2"></i>
81						</button>
82					</div>
83					<div class="d-flex flex-wrap gap-3 mt-4">
84						<a href="https://api.pawtul.com/magic/download">
85							<img src="/static/images/app-store-badge.png" alt="Download on the App Store"
86								style="height: 60px; margin-top:11px;">
87						</a>
88						<a href="https://api.pawtul.com/magic/download">
89							<img src="/static/images/google-play-badge.png" alt="Get it on Google Play"
90								style="height: 80px;">
91						</a>
92					</div>
93
94					<!-- <div class="mt-4">
95						<small class="text-muted">✨ Free forever for up to 20 clients • No credit card required</small>
96					</div> -->
97				</div>
98			</div>
99			<div class="col-lg-6">
100				<div class="app-showcase fade-in">
101					<div class="app-images-container">
102						<!-- Primary App Image -->
103						<div class="app-image-primary">
104							<div class="phone-frame">
105								<img src="/static/images/landing/pawtul_calander.jpg"
106									alt="Pawtul App - Appointment Management" class="app-screenshot">
107								<div class="phone-overlay"></div>
108							</div>
109						</div>
110
111						<!-- Secondary App Image -->
112						<div class="app-image-secondary">
113							<div class="phone-frame">
114								<img src="/static/images/landing/pawtul_pet_profile.jpg" alt="Pawtul App - Pet Profiles"
115									class="app-screenshot">
116								<div class="phone-overlay"></div>
117							</div>
118						</div>
119
120						<!-- Floating Elements -->
121						<div class="floating-element floating-1">
122							<div class="feature-badge">
123								<span class="badge-icon">📅</span>
124								<span class="badge-text">Smart Scheduling</span>
125							</div>
126						</div>
127
128						<div class="floating-element floating-2">
129							<div class="feature-badge">
130								<span class="badge-icon">🐕</span>
131								<span class="badge-text">Pet Profiles</span>
132							</div>
133						</div>
134
135						<div class="floating-element floating-3">
136							<div class="feature-badge">
137								<span class="badge-icon">💰</span>
138								<span class="badge-text">Easy Invoicing</span>
139							</div>
140						</div>
141					</div>
142				</div>
143			</div>
144		</div>
145	</div>
146</section>
147
148<!-- Features Section -->
149<section class="py-5 mt-5" id="features">
150	<div class="container">
151		<div class="text-center mb-5 fade-in">
152			<h2 class="section-title">Everything you need to thrive</h2>
153			<p class="section-subtitle">Powerful features designed specifically for pet care professionals, all in one
154				beautiful platform.</p>
155		</div>
156
157		<div class="row g-4">
158			<div class="col-lg-4 col-md-6 fade-in">
159				<div class="feature-card">
160					<div class="feature-icon">
161						📅
162					</div>
163					<h4>Organised appointments</h4>
164					<p class="text-muted">Take back control of your time with intelligent scheduling, booking
165						management, and automated reminders.</p>
166				</div>
167			</div>
168
169			<div class="col-lg-4 col-md-6 fade-in">
170				<div class="feature-card">
171					<div class="feature-icon">
172						📸
173					</div>
174					<h4>Profiles made easy</h4>
175					<p class="text-muted">Beautiful pet profiles with tailored info and treasured photos. Keep
176						everything organized and accessible.</p>
177				</div>
178			</div>
179
180			<div class="col-lg-4 col-md-6 fade-in">
181				<div class="feature-card">
182					<div class="feature-icon">
183						💰
184					</div>
185					<h4>Focus on your finances</h4>
186					<p class="text-muted">Smart invoicing and better business management. Track payments, generate
187						reports, and grow your revenue.</p>
188				</div>
189			</div>
190
191			<div class="col-lg-4 col-md-6 fade-in">
192				<div class="feature-card">
193					<div class="feature-icon">
194						👥
195					</div>
196					<h4>Client Management</h4>
197					<p class="text-muted">Securely store customer information with self-service portals. Keep admin down
198						and information accurate.</p>
199				</div>
200			</div>
201
202			<div class="col-lg-4 col-md-6 fade-in">
203				<div class="feature-card">
204					<div class="feature-icon">
205						🏥
206					</div>
207					<h4>Health Records</h4>
208					<p class="text-muted">Digital storage for microchip numbers, vaccination records, and emergency
209						contacts. Everything you need covered.</p>
210				</div>
211			</div>
212
213			<div class="col-lg-4 col-md-6 fade-in">
214				<div class="feature-card">
215					<div class="feature-icon">
216						📱
217					</div>
218					<h4>Mobile Ready</h4>
219					<p class="text-muted">Access your business anywhere with our beautiful mobile-first design. Work on
220						the go with ease.</p>
221				</div>
222			</div>
223		</div>
224	</div>
225</section>
226
227<!-- Testimonials Section -->
228<section id="reviews" class="py-5 mt-5" style="background: var(--gradient-light);">
229	<div class="container">
230		<div class="text-center mb-5 fade-in">
231			<h2 class="section-title">Loved by pet professionals</h2>
232			<p class="section-subtitle">Join thousands of happy pet care businesses who've made the switch to Pawtul.
233			</p>
234		</div>
235
236		<div class="row g-4">
237			<div class="col-lg-4 fade-in">
238				<div class="feature-card">
239					<div class="mb-3">
240						<div class="text-warning mb-2">★★★★★</div>
241						<p>"PAWTUL has been so helpful for keeping all my documents in one place including all of my
242							finances, invoices, diary, client details... Making everyday feel like payday!"</p>
243					</div>
244					<div class="d-flex align-items-center">
245						<div
246							style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;">
247							P</div>
248						<div>
249							<strong>Pettitt Pet Services</strong>
250							<div class="text-muted small">Dog Walking & Care</div>
251						</div>
252					</div>
253				</div>
254			</div>
255
256			<div class="col-lg-4 fade-in">
257				<div class="feature-card">
258					<div class="mb-3">
259						<div class="text-warning mb-2">★★★★★</div>
260						<p>"Having looked at a number of similar products, none really matched what we needed. Then
261							along came Pawtul. We couldn't be more pleased!"</p>
262					</div>
263					<div class="d-flex align-items-center">
264						<div
265							style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;">
266							J</div>
267						<div>
268							<strong>Jangles Home Boarding</strong>
269							<div class="text-muted small">Walking and Day Care</div>
270						</div>
271					</div>
272				</div>
273			</div>
274
275			<div class="col-lg-4 fade-in">
276				<div class="feature-card">
277					<div class="mb-3">
278						<div class="text-warning mb-2">★★★★★</div>
279						<p>"This app absolutely goes above and beyond the other pet care apps currently on the market.
280							You won't regret switching to Pawtul!"</p>
281					</div>
282					<div class="d-flex align-items-center">
283						<div
284							style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;">
285							B</div>
286						<div>
287							<strong>Bella Boo's of Newport</strong>
288							<div class="text-muted small">Pet Care Services</div>
289						</div>
290					</div>
291				</div>
292			</div>
293		</div>
294	</div>
295</section>
296
297<!-- Pricing Section -->
298<!-- Pricing Section -->
299<section class="py-5 mt-5" id="pricing">
300	<div class="container">
301		<div class="text-center mb-5 fade-in">
302			<h2 class="section-title">Simple, transparent pricing</h2>
303			<p class="section-subtitle">
304				Start with a free trial, then choose the plan that fits your business.
305			</p>
306		</div>
307
308		<div class="row justify-content-center g-4">
309			<!-- Trial -->
310			<div class="col-lg-4 col-md-6 fade-in">
311				<div class="feature-card text-center">
312					<h4>7 Day Free Trial</h4>
313					<div class="display-4 fw-bold text-primary mb-3">
314						Free
315					</div>
316					<p class="text-muted mb-4">
317						Full Pro access for 7 days — no card required
318					</p>
319					<ul class="list-unstyled text-start mb-4">
320						<li class="mb-2">✅ Full Pro features</li>
321						<li class="mb-2">✅ Mobile & desktop access</li>
322						<li class="mb-2">✅ Scheduling & bookings</li>
323						<li class="mb-2">✅ Invoicing & payments</li>
324						<li class="mb-2">✅ Vaccination tracking</li>
325					</ul>
326					<a href="/signup" class="btn btn-outline-primary w-100">
327						Start Free Trial
328					</a>
329				</div>
330			</div>
331
332			<!-- Pro -->
333			<div class="col-lg-4 col-md-6 fade-in">
334				<div class="feature-card text-center position-relative" style="border: 2px solid var(--primary-color);">
335					<div class="badge bg-primary position-absolute top-0 start-50 translate-middle px-3 py-2">
336						Most Popular
337					</div>
338					<h4>Pro</h4>
339					<div class="display-4 fw-bold text-primary mb-3">
340						£12.99<small class="fs-6 text-muted">/month</small>
341					</div>
342					<p class="text-muted mb-4">
343						Mobile app access only
344					</p>
345					<ul class="list-unstyled text-start mb-4">
346						<li class="mb-2">✅ Unlimited clients & pets</li>
347						<li class="mb-2">✅ Advanced scheduling</li>
348						<li class="mb-2">✅ Full invoicing system</li>
349						<li class="mb-2">✅ Limited storage</li>
350						<li class="mb-2">✅ Customer portals</li>
351						<li class="mb-2">✅ 1 Employee</li>
352						<li class="mb-2">✅ 100 Clients</li>
353						<li class="mb-2">✅ 100 Pets</li>
354						<li class="mb-2">❌ Desktop & web access</li>
355					</ul>
356					<a href="/signup" class="btn btn-primary w-100">
357						Start Pro
358					</a>
359				</div>
360			</div>
361
362			<!-- Enterprise -->
363			<div class="col-lg-4 col-md-6 fade-in">
364				<div class="feature-card text-center">
365					<h4>Enterprise</h4>
366					<div class="display-4 fw-bold text-primary mb-3">
367						£39.99<small class="fs-6 text-muted">/month</small>
368					</div>
369					<p class="text-muted mb-4">
370						Full desktop & web access <br><small>(Coming soon)</small>
371					</p>
372					<ul class="list-unstyled text-start mb-4">
373						<li class="mb-2">✅ Everything in Pro</li>
374						<li class="mb-2">✅ Desktop & web dashboard</li>
375						<li class="mb-2">✅ Advanced reporting</li>
376						<li class="mb-2">✅ Multi-account support</li>
377						<li class="mb-2">✅ Dedicated support</li>
378						<li class="mb-2">✅ Multiple Employees</li>
379						<li class="mb-2">✅ Unlimited Clients</li>
380						<li class="mb-2">✅ Unlimited Pets</li>
381						<li class="mb-2">✅ Unlimited Storage</li>
382
383					</ul>
384					<a href="/contact" class="btn btn-outline-primary w-100">
385						Join Waitlist
386					</a>
387				</div>
388			</div>
389		</div>
390
391		<!-- Legacy notice -->
392		<div class="text-center mt-5 text-muted small">
393			Existing customers and existing enterprise customer will retain access to legacy platform whilst Enterprise
394			is redeveloped.
395		</div>
396	</div>
397</section>
398
399
400<!-- CTA Section -->
401<section class="py-5 mt-5" style="background: var(--text-dark);">
402	<div class="container text-center">
403		<div class="row justify-content-center fade-in">
404			<div class="col-lg-8">
405				<h2 class="text-white mb-3">Ready to transform your pet business?</h2>
406				<p class="text-white opacity-90 fs-5 mb-4">Join thousands of pet professionals who've already made the
407					switch to effortless business management.</p>
408				<div class="d-flex flex-wrap justify-content-center gap-3">
409					<a href="/signup" class="btn btn-light btn-lg px-4">
410						Start Free Today
411						<i data-feather="arrow-right" class="ms-2"></i>
412					</a>
413					<a href="#demo" class="btn btn-outline-light btn-lg px-4">
414						Schedule Demo
415					</a>
416				</div>
417				<!-- <div class="mt-3">
418					<small class="text-white opacity-75">✨ No credit card required • Setup in under 5 minutes</small>
419				</div> -->
420			</div>
421		</div>
422	</div>
423</section>
424
425<!-- Video Overlay -->
426<div id="videoOverlay" class="video-overlay">
427	<div class="video-container">
428		<button class="close-btn" id="closeVideoBtn">&times;</button>
429		<video id="demoVideo" controls autoplay>
430			<source src="/static/video/pawtul_demo_v3.mp4" type="video/mp4">
431			Your browser does not support the video tag.
432		</video>
433	</div>
434</div>
435
436
437    </main>
438
439    <!-- Footer -->
440    <footer class="footer">
441        <div class="container">
442            <div class="row">
443                <div class="col-lg-4 mb-4">
444                    <div class="d-flex align-items-center mb-3">
445                        <img src="/static/images/logos/png/pawtul_logo_white.png" class="img-fluid"
446                            style="max-width: 180px;">
447                    </div>
448                    <p class="text-muted">Redesigned, refined, rebuilt. The ultimate pet care business management
449                        platform.</p>
450                </div>
451                <div class="col-lg-2 col-md-6 mb-4">
452                    <h5>Product</h5>
453                    <ul class="list-unstyled">
454                        <li><a href="/#features">Features</a></li>
455                        <li><a href="/#pricing">Pricing</a></li>
456                        <li><a href="/#reviews">Reviews</a></li>
457                        <!-- <li><a href="#security">Security</a></li> -->
458                        <!-- <li><a href="#integrations">Integrations</a></li> -->
459                    </ul>
460                </div>
461                <div class="col-lg-2 col-md-6 mb-4">
462                    <h5>Company</h5>
463                    <ul class="list-unstyled">
464                        <li><a href="#about">About</a></li>
465                        <!-- <li><a href="#careers">Careers</a></li>
466                        <li><a href="#press">Press</a></li>
467                        <li><a href="#blog">Blog</a></li> -->
468                    </ul>
469                </div>
470                <div class="col-lg-2 col-md-6 mb-4">
471                    <h5>Support</h5>
472                    <ul class="list-unstyled">
473                        <!-- <li><a href="#help">Help Center</a></li> -->
474                        <li><a href="/contact">Contact</a></li>
475                        <!-- <a class="" href="#" target="_blank"
476                            onclick="window.location.href = 'https://api.whatsapp.com/send?phone=447418605429'"><i
477                                class="fa-brands fa-whatsapp text-success me-2"></i>Contact</a> -->
478                        <!-- <li><a href="#status">Status</a></li>
479                        <li><a href="#updates">Updates</a></li> -->
480                    </ul>
481                </div>
482                <div class="col-lg-2 col-md-6 mb-4">
483                    <h5>Legal</h5>
484                    <ul class="list-unstyled">
485                        <li><a href="/privacy_policy">Privacy</a></li>
486                        <li><a href="/terms_and_conditions">Terms</a></li>
487                        <li><a href="/eula">END-USER LICENSE AGREEMENT</a></li>
488                        <li><a href="/gdpr">GDPR</a></li>
489                    </ul>
490                </div>
491            </div>
492            <hr class="my-4" style="border-color: #374151;">
493            <div class="row align-items-center">
494                <div class="col-md-6">
495                    <p class="text-muted mb-0">&copy; 2026 Pawtul. All rights reserved.</p>
496                </div>
497                <div class="col-md-6 text-md-end">
498                    <p class="text-muted mb-0">Made with ❤️ for pet professionals</p>
499                </div>
500            </div>
501        </div>
502    </footer>
503
504    <!-- Bootstrap 5 JS -->
505    
505<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
505
506
507    
507<script>
508        // Fade in animation on scroll
509        const observerOptions = {
510            threshold: 0.1,
511            rootMargin: '0px 0px -50px 0px'
512        };
513
514        const observer = new IntersectionObserver((entries) => {
515            entries.forEach(entry => {
516                if (entry.isIntersecting) {
517                    entry.target.classList.add('visible');
518                }
519            });
520        }, observerOptions);
521
522        document.addEventListener('DOMContentLoaded', () => {
523            const fadeElements = document.querySelectorAll('.fade-in');
524            fadeElements.forEach(el => observer.observe(el));
525        });
526
527        // Smooth scrolling for navigation links
528        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
529            anchor.addEventListener('click', function (e) {
530                e.preventDefault();
531                const target = document.querySelector(this.getAttribute('href'));
532                if (target) {
533                    target.scrollIntoView({
534                        behavior: 'smooth',
535                        block: 'start'
536                    });
537                }
538            });
539        });
540    </script>
540
541
542    
543<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
vendor: 1 bytes, line 543
543
544<script>
545	feather.replace();
546
547	// Add some interactive hover effects
548	document.querySelectorAll('.feature-card').forEach(card => {
549		card.addEventListener('mouseenter', function () {
550			this.style.transform = 'translateY(-8px)';
551		});
552
553		card.addEventListener('mouseleave', function () {
554			this.style.transform = 'translateY(0)';
555		});
556	});
557
558	// Parallax effect for app images
559	window.addEventListener('scroll', function () {
560		const scrolled = window.pageYOffset;
561		const parallax1 = document.querySelector('.app-image-primary');
562		const parallax2 = document.querySelector('.app-image-secondary');
563
564		if (parallax1 && parallax2) {
565			const speed1 = scrolled * 0.1;
566			const speed2 = scrolled * 0.15;
567
568			parallax1.style.transform = `translateY(${speed1}px) perspective(1000px) rotateY(-15deg) rotateX(5deg)`;
569			parallax2.style.transform = `translateY(${speed2}px) perspective(1000px) rotateY(10deg) rotateX(-3deg)`;
570		}
571	});
572
573	// Floating elements animation
574	document.querySelectorAll('.floating-element').forEach((element, index) => {
575		const delay = index * 0.5;
576		element.style.animationDelay = `${delay}s`;
577	});
578
579	// Video overlay functionality
580	const watchDemoBtn = document.getElementById('watchDemoBtn');
581	const videoOverlay = document.getElementById('videoOverlay');
582	const closeVideoBtn = document.getElementById('closeVideoBtn');
583	const demoVideo = document.getElementById('demoVideo');
584
585	watchDemoBtn.addEventListener('click', function () {
586		videoOverlay.style.display = 'flex';
587		demoVideo.play();
588	});
589
590	closeVideoBtn.addEventListener('click', function () {
591		videoOverlay.style.display = 'none';
592		demoVideo.pause();
593		demoVideo.currentTime = 0;
594	});
595
596	// Close overlay when clicking outside the video
597	videoOverlay.addEventListener('click', function (e) {
598		if (e.target === videoOverlay) {
599			videoOverlay.style.display = 'none';
600			demoVideo.pause();
601			demoVideo.currentTime = 0;
602		}
603	});
604</script>
604
605
606<style>
607	.app-showcase {
608		position: relative;
609		min-height: 500px;
610		display: flex;
611		align-items: center;
612		justify-content: center;
613	}
614
615	.app-images-container {
616		position: relative;
617		width: 100%;
618		max-width: 500px;
619		height: 600px;
620	}
621
622	.app-image-primary {
623		position: absolute;
624		top: 0;
625		left: 50%;
626		transform: translateX(-50%) perspective(1000px) rotateY(-15deg) rotateX(5deg);
627		width: 280px;
628		height: auto;
629		z-index: 2;
630		transition: all 0.6s ease;
631	}
632
633	.app-image-secondary {
634		position: absolute;
635		top: 80px;
636		right: -20px;
637		transform: perspective(1000px) rotateY(10deg) rotateX(-3deg);
638		width: 240px;
639		height: auto;
640		z-index: 1;
641		transition: all 0.6s ease;
642	}
643
644	.phone-frame {
645		position: relative;
646		background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
647		border-radius: 25px;
648		padding: 6px;
649		box-shadow:
650			0 20px 40px rgba(0, 0, 0, 0.3),
651			0 10px 20px rgba(0, 0, 0, 0.2),
652			inset 0 1px 0 rgba(255, 255, 255, 0.1);
653		transition: all 0.4s ease;
654	}
655
656	.phone-frame:hover {
657		transform: translateY(-5px);
658		box-shadow:
659			0 30px 60px rgba(0, 0, 0, 0.4),
660			0 15px 30px rgba(0, 0, 0, 0.3),
661			inset 0 1px 0 rgba(255, 255, 255, 0.1);
662	}
663
664	.app-screenshot {
665		width: 100%;
666		height: auto;
667		border-radius: 20px;
668		display: block;
669		object-fit: cover;
670	}
671
672	.phone-overlay {
673		position: absolute;
674		top: 6px;
675		left: 6px;
676		right: 6px;
677		bottom: 6px;
678		border-radius: 20px;
679		background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(94, 234, 212, 0.05) 100%);
680		pointer-events: none;
681	}
682
683	/* Floating Elements */
684	.floating-element {
685		position: absolute;
686		z-index: 3;
687		animation: float 6s ease-in-out infinite;
688	}
689
690	.floating-1 {
691		top: 50px;
692		left: -30px;
693		animation-delay: 0s;
694	}
695
696	.floating-2 {
697		top: 200px;
698		right: -40px;
699		animation-delay: 2s;
700	}
701
702	.floating-3 {
703		bottom: 100px;
704		left: -20px;
705		animation-delay: 4s;
706	}
707
708	.feature-badge {
709		background: white;
710		border-radius: 50px;
711		padding: 12px 20px;
712		box-shadow:
713			0 10px 30px rgba(0, 0, 0, 0.15),
714			0 4px 10px rgba(0, 0, 0, 0.1);
715		display: flex;
716		align-items: center;
717		gap: 8px;
718		border: 1px solid rgba(20, 184, 166, 0.2);
719		transition: all 0.3s ease;
720		white-space: nowrap;
721	}
722
723	.feature-badge:hover {
724		transform: translateY(-2px);
725		box-shadow:
726			0 15px 40px rgba(0, 0, 0, 0.2),
727			0 6px 15px rgba(0, 0, 0, 0.15);
728		border-color: var(--primary-color);
729	}
730
731	.badge-icon {
732		font-size: 1.2rem;
733	}
734
735	.badge-text {
736		font-size: 0.85rem;
737		font-weight: 600;
738		color: var(--text-dark);
739	}
740
741	@keyframes float {
742
743		0%,
744		100% {
745			transform: translateY(0px);
746		}
747
748		50% {
749			transform: translateY(-20px);
750		}
751	}
752
753	/* Responsive Design */
754	@media (max-width: 768px) {
755		.app-images-container {
756			height: 450px;
757			max-width: 350px;
758		}
759
760		.app-image-primary {
761			width: 220px;
762			transform: translateX(-50%) perspective(800px) rotateY(-10deg) rotateX(3deg);
763		}
764
765		.app-image-secondary {
766			width: 180px;
767			top: 60px;
768			right: -10px;
769			transform: perspective(800px) rotateY(8deg) rotateX(-2deg);
770		}
771
772		.floating-element {
773			display: none;
774			/* Hide floating elements on mobile for cleaner look */
775		}
776	}
777
778	@media (max-width: 576px) {
779		.app-images-container {
780			height: 350px;
781			max-width: 280px;
782		}
783
784		.app-image-primary {
785			width: 180px;
786		}
787
788		.app-image-secondary {
789			width: 150px;
790			top: 50px;
791		}
792	}
793
794	/* Load animation */
795	.app-showcase.fade-in {
796		opacity: 0;
797		transform: translateY(30px);
798		transition: all 0.8s ease;
799	}
800
801	.app-showcase.fade-in.visible {
802		opacity: 1;
803		transform: translateY(0);
804	}
805
806	/* Video Overlay Styles */
807	.video-overlay {
808		position: fixed;
809		top: 0;
810		left: 0;
811		width: 100%;
812		height: 100%;
813		background: rgba(0, 0, 0, 0.9);
814		display: none;
815		z-index: 9999;
816		justify-content: center;
817		align-items: center;
818	}
819
820	.video-container {
821		position: relative;
822		max-width: 90%;
823		max-height: 90%;
824	}
825
826	.video-container video {
827		width: 100%;
828		height: auto;
829		max-height: 80vh;
830		border-radius: 10px;
831		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
832	}
833
834	.close-btn {
835		position: absolute;
836		top: -50px;
837		right: 0;
838		background: none;
839		border: none;
840		color: white;
841		font-size: 40px;
842		cursor: pointer;
843		z-index: 10000;
844		transition: color 0.3s ease;
845	}
846
847	.close-btn:hover {
848		color: var(--primary-color);
849	}
850</style>
851
852</body>
853
854</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.