PageSourceSearch

https://agratix.com/

html agratix.com collected 2026-10-03 21:15:18 UTC 112,159 bytes, 1,885 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
7    <!-- Primary Meta Tags -->
8    <title>Agratix - IT Partnership, Perfected | Technology Solutions Provider</title>
9    <meta name="title" content="Agratix - IT Partnership, Perfected | Technology Solutions Provider" />
10    <meta name="description" content="Agratix is your long-term technology partner: custom software, web and mobile apps, cloud migration, AI solutions, and ongoing IT support. One team, end to end." />
11    <meta name="keywords" content="web development, mobile apps, cloud migration, IT support, technology solutions, digital transformation, systems integration" />
12    <meta name="author" content="Agratix" />
13    <meta name="robots" content="index, follow" />
14
15    <!-- Open Graph / Facebook -->
16    <meta property="og:type" content="website" />
17    <meta property="og:url" content="https://agratix.com/" />
18    <meta property="og:title" content="Agratix - IT Partnership, Perfected" />
19    <meta property="og:description" content="Your long-term technology partner: custom software, web and mobile apps, cloud migration, AI solutions, and IT support. One team, end to end." />
20    <meta property="og:image" content="https://agratix.com/og-image.jpg" />
21    <meta property="og:image:width" content="1200" />
22    <meta property="og:image:height" content="630" />
23
24    <!-- Twitter -->
25    <meta property="twitter:card" content="summary_large_image" />
26    <meta property="twitter:url" content="https://agratix.com/" />
27    <meta property="twitter:title" content="Agratix - IT Partnership, Perfected" />
28    <meta property="twitter:description" content="Your long-term technology partner: custom software, cloud, AI, and IT support. One team, end to end." />
29    <meta property="twitter:image" content="https://agratix.com/og-image.jpg" />
30
31    <!-- PWA / App Meta Tags -->
32    <meta name="theme-color" content="#489156" />
33    <meta name="apple-mobile-web-app-capable" content="yes" />
34    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
35    <meta name="apple-mobile-web-app-title" content="Agratix" />
36    <link rel="manifest" href="/manifest.json" />
37
38    <!-- Favicons -->
39    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
40    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png" />
41    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png" />
42    <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
43
44    <!-- Performance Optimization -->
45    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
46    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />
47    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
48    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
49    <link rel="preconnect" href="https://unpkg.com" crossorigin />
50    <link rel="preload" as="image" href="assets/agratix_logo.webp" fetchpriority="high" />
51
52    <!-- Fonts -->
53    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
54
55    <!-- Font Awesome with defer for better performance -->
56    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'" />
57    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /></noscript>
58
59
60    <!-- CSS Files -->
61    <link rel="stylesheet" href="css/variables.css">
62    <link rel="stylesheet" href="css/reset.css">
63    <link rel="stylesheet" href="css/common.css">
64    <link rel="stylesheet" href="css/navigation.css">
65    <link rel="stylesheet" href="css/hero.css">
66    <link rel="stylesheet" href="css/concept.css">
67    <link rel="stylesheet" href="css/case-studies.css">
68    <link rel="stylesheet" href="css/testimonials.css">
69    <link rel="stylesheet" href="css/services-new.css">
70    <link rel="stylesheet" href="css/approach.css">
71    <link rel="stylesheet" href="css/faq.css">
72    <link rel="stylesheet" href="css/cta.css">
73    <link rel="stylesheet" href="css/ending-section.css">
74    <link rel="stylesheet" href="css/footer.css">
75    <link rel="stylesheet" href="css/responsive.css">
76    <link rel="stylesheet" href="css/mobile.css">
77    <link rel="stylesheet" href="css/enhance.css">
78
79    <!-- FAQ + WebSite Structured Data (rich results + AI answer engines) -->
80    
80<script type="application/ld+json">
81    {
82      "@context": "https://schema.org",
83      "@type": "FAQPage",
84      "mainEntity": [
85        { "@type": "Question", "name": "How much does it cost?", "acceptedAnswer": { "@type": "Answer", "text": "Every project is unique, so we provide custom quotes based on your specific needs and goals. Pricing is transparent and competitive, with flexible engagement models from fixed-price projects to monthly retainers. Most small business projects start in the $5K-$25K range, while enterprise solutions are custom-scoped." } },
86        { "@type": "Question", "name": "Do you work with small businesses?", "acceptedAnswer": { "@type": "Answer", "text": "Absolutely. We partner with businesses of all sizes, from startups to enterprises. Many of our clients are small and medium-sized businesses who need enterprise-quality solutions without enterprise overhead, and we tailor our approach to your challenges and budget." } },
87        { "@type": "Question", "name": "How long will it take?", "acceptedAnswer": { "@type": "Answer", "text": "Timeline depends on scope and complexity. A typical website or application takes 6-12 weeks from kickoff to launch. We break projects into phases with weekly milestones, and provide a detailed timeline during the discovery call." } },
88        { "@type": "Question", "name": "Can you work within our budget?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. We're experienced at maximizing value within budget constraints, prioritizing features to balance functionality, quality and cost. We can also use phased approaches where you launch core features first, then expand over time." } },
89        { "@type": "Question", "name": "What if I need changes after launch?", "acceptedAnswer": { "@type": "Answer", "text": "We include a warranty period for bug fixes, plus ongoing support and maintenance packages for updates, enhancements and new features. Most clients choose a monthly retainer for predictable costs and priority access to our team." } },
90        { "@type": "Question", "name": "Do I own the code and designs?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, 100%. Once the project is completed and paid for, you own all the code, designs and intellectual property we create, with full source code access and documentation. You're never locked in." } },
91        { "@type": "Question", "name": "What technologies do you use?", "acceptedAnswer": { "@type": "Answer", "text": "We use proven technologies chosen for your needs, not trends. Web: React, Vue.js, Node.js, PHP, Python. Mobile: React Native, Flutter, native iOS/Android. Cloud: AWS, Azure and Google Cloud, where we hold partner status with all three. AI: Python, OpenCV and current LLM tooling. We'll recommend the right stack for your requirements, your scale, and what it costs to maintain later." } },
92        { "@type": "Question", "name": "How do we get started?", "acceptedAnswer": { "@type": "Answer", "text": "Book a free 30-minute discovery call and we'll talk through your goals, challenges and constraints. If we're a good fit you'll have a detailed proposal within 3 to 5 business days. If you'd rather start with a number, use the instant estimator for a ballpark in about a minute. No pressure either way." } }
93      ]
94    }
95    </script>
95
96    
96<script type="application/ld+json">
97    { "@context": "https://schema.org", "@type": "WebSite", "name": "Agratix", "url": "https://agratix.com/", "publisher": { "@type": "Organization", "name": "Agratix" } }
98    </script>
98
99
100    <!-- Structured Data (Schema.org) -->
101    
101<script type="application/ld+json">
102    {
103        "@context": "https://schema.org",
104        "@type": "Organization",
105        "name": "Agratix",
106        "url": "https://agratix.com",
107        "logo": "https://agratix.com/logo.png",
108        "description": "IT partnership and technology solutions provider specializing in web development, mobile apps, cloud migration, and IT support.",
109        "email": "[email protected]",
110        "sameAs": [
111            "https://www.linkedin.com/company/agratix",
112            "https://twitter.com/agratix"
113        ],
114        "address": {
115            "@type": "PostalAddress",
116            "addressCountry": "US"
117        },
118        "contactPoint": {
119            "@type": "ContactPoint",
120            "email": "[email protected]",
121            "contactType": "Sales"
122        },
123        "offers": {
124            "@type": "AggregateOffer",
125            "offerCount": "3",
126            "offers": [
127                {
128                    "@type": "Offer",
129                    "itemOffered": {
130                        "@type": "Service",
131                        "name": "Systems Integration",
132                        "description": "API development, legacy system modernization, and enterprise resource planning"
133                    }
134                },
135                {
136                    "@type": "Offer",
137                    "itemOffered": {
138                        "@type": "Service",
139                        "name": "Cloud Solutions",
140                        "description": "AWS, Azure & Google Cloud Platform migration and management"
141                    }
142                },
143                {
144                    "@type": "Offer",
145                    "itemOffered": {
146                        "@type": "Service",
147                        "name": "Mobile Applications",
148                        "description": "Native iOS & Android and cross-platform mobile app development"
149                    }
150                }
151            ]
152        }
153    }
154    </script>
154
155    <link rel="stylesheet" href="css/lead-engine.css">
156    <link rel="canonical" href="https://agratix.com/" />
157</head>
158<body>
159    <!-- Wave Canvas Background -->
160
161    <!-- Skip to main content for accessibility -->
162    <a href="#main-content" class="skip-link" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip to main content</a>
163
164    <!-- Scroll to Top -->
165    <button class="scroll-top" id="scrollTop" aria-label="Scroll to top" style="position: fixed; bottom: 6.5rem; right: 2rem; z-index: 999; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #5da86a 0%, #489156 100%); border: none; color: white; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(72,145,86,0.4); transition: all 0.3s; opacity: 0;">
166        <i class="fas fa-arrow-up" aria-hidden="true"></i>
167    </button>
168    <!-- Navigation -->
169    <nav id="nav" role="navigation" aria-label="Main navigation">
170        <div class="logo" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" role="button" tabindex="0" aria-label="Agratix home">
171            <img src="assets/agratix_logo.webp" alt="Agratix" class="logo-full" width="1040" height="300" fetchpriority="high" decoding="async">
172            <img src="assets/AG_Logo.svg" alt="Agratix" class="logo-short" width="300" height="300" decoding="async">
173        </div>
174        <button class="menu-toggle" id="menuToggle" aria-label="Toggle menu" aria-expanded="false">
175            <i class="fas fa-bars" aria-hidden="true"></i>
176        </button>
177        <ul class="nav-menu" id="navMenu" role="menubar">
178            <li class="nav-item">
179                <a href="#services">Services <i class="fas fa-chevron-down dropdown-arrow"></i></a>
180                <div class="dropdown">
181                    <a href="services/design-build/" class="dropdown-item-1" data-gradient="1">
182                        <i class="fas fa-drafting-compass"></i>
183                        <div class="dropdown-content">
184                            <span class="dropdown-label">Design & Build</span>
185                            <span class="dropdown-desc">Custom software & application development</span>
186                        </div>
187                    </a>
188                    <a href="services/modernize-migrate/" class="dropdown-item-2" data-gradient="2">
189                        <i class="fas fa-rocket"></i>
190                        <div class="dropdown-content">
191                            <span class="dropdown-label">Modernize & Migrate</span>
192                            <span class="dropdown-desc">Legacy system upgrades & cloud migration</span>
193                        </div>
194                    </a>
195                    <a href="services/manage-support/" class="dropdown-item-3" data-gradient="3">
196                        <i class="fas fa-cogs"></i>
197                        <div class="dropdown-content">
198                            <span class="dropdown-label">Manage & Support</span>
199                            <span class="dropdown-desc">Ongoing maintenance & technical support</span>
200                        </div>
201                    </a>
202                    <a href="services/growth-scale/" class="dropdown-item-4" data-gradient="4">
203                        <i class="fas fa-shield-halved"></i>
204                        <div class="dropdown-content">
205                            <span class="dropdown-label">Growth & Scale</span>
206                            <span class="dropdown-desc">
206Performance optimization & infrastructure scaling</span>
207                        </div>
208                    </a>
209                    <a href="services/ai-solutions/" class="dropdown-item-5" data-gradient="5">
210                        <i class="fas fa-brain"></i>
211                        <div class="dropdown-content">
212                            <span class="dropdown-label">AI Solutions</span>
213                            <span class="dropdown-desc">ML integration, AI agents &amp; chatbots</span>
214                        </div>
215                    </a>
216                </div>
217            </li>
218            <li class="nav-item"><a href="case-studies.html">Case Studies</a></li>
219            <li class="nav-item"><a href="insights.html">Insights</a></li>
220            <li class="nav-item"><a href="approach.html">Our Approach</a></li>
221            <li class="nav-item"><a href="about.html">About</a></li>
222        </ul>
223        <button class="contact-btn" onclick="window.location.href='contact.html'">Contact Us</button>
224    </nav>
225
226    <!-- Theme Toggle -->
227    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
228        <i class="fas fa-moon"></i>
229    </button>
230
231    <!-- Mobile Menu (Independent) -->
232    <div class="mobile-menu" id="mobileMenu">
233        <div class="mobile-menu-header">
234            <img src="assets/agratix_logo.webp" alt="Agratix" class="mobile-menu-logo" width="1040" height="300" loading="lazy" decoding="async">
235            <button class="mobile-menu-close" id="mobileMenuClose" aria-label="Close menu">
236                <i class="fas fa-times"></i>
237            </button>
238        </div>
239        <ul class="mobile-menu-list">
240            <li class="mobile-menu-item">
241                <a href="#services" class="mobile-menu-link">Services <i class="fas fa-chevron-down"></i></a>
242                <div class="mobile-submenu">
243                    <a href="services/design-build/" class="mobile-submenu-link">
244                        <i class="fas fa-drafting-compass"></i>
245                        <div>
246                            <span class="mobile-submenu-label">Design & Build</span>
247                            <span class="mobile-submenu-desc">Custom software & application development</span>
248                        </div>
249                    </a>
250                    <a href="services/modernize-migrate/" class="mobile-submenu-link">
251                        <i class="fas fa-rocket"></i>
252                        <div>
253                            <span class="mobile-submenu-label">Modernize & Migrate</span>
254                            <span class="mobile-submenu-desc">Legacy system upgrades & cloud migration</span>
255                        </div>
256                    </a>
257                    <a href="services/manage-support/" class="mobile-submenu-link">
258                        <i class="fas fa-cogs"></i>
259                        <div>
260                            <span class="mobile-submenu-label">Manage & Support</span>
261                            <span class="mobile-submenu-desc">Ongoing maintenance & technical support</span>
262                        </div>
263                    </a>
264                    <a href="services/growth-scale/" class="mobile-submenu-link">
265                        <i class="fas fa-chart-line"></i>
266                        <div>
267                            <span class="mobile-submenu-label">Growth & Scale</span>
268                            <span class="mobile-submenu-desc">
268Performance optimization & infrastructure scaling</span>
269                        </div>
270                    </a>
271                    <a href="services/ai-solutions/" class="mobile-submenu-link">
272                        <i class="fas fa-brain"></i>
273                        <div>
274                            <span class="mobile-submenu-label">AI Solutions</span>
275                            <span class="mobile-submenu-desc">ML integration, AI agents &amp; chatbots</span>
276                        </div>
277                    </a>
278                </div>
279            </li>
280            <li class="mobile-menu-item"><a href="case-studies.html" class="mobile-menu-link">Case Studies</a></li>
281            <li class="mobile-menu-item"><a href="approach.html" class="mobile-menu-link">Our Approach</a></li>
282            <li class="mobile-menu-item"><a href="about.html" class="mobile-menu-link">About</a></li>
283        </ul>
284        <div class="mobile-menu-footer">
285            <button class="mobile-cta-btn" onclick="openModal()">
286                <i class="fas fa-rocket" style="font-size: 18px;"></i>
287                Get Started
288            </button>
289        </div>
290    </div>
291
292    <!-- Floating Get Started Widget -->
293    <div class="floating-cta">
294        <button class="floating-cta-btn" onclick="openModal()" aria-label="Get Started">
295            <span class="floating-cta-text">Get Started</span>
296            <i class="fas fa-rocket" style="font-size: 18px;"></i>
297        </button>
298    </div>
299
300    <!-- Main Content -->
301    <main id="main-content">
302        <!-- Hero Section -->
303        <section class="hero" id="hero" data-bgcolor="#ffffff">
304        <div class="hero-orb hero-orb-1"></div>
305        <div class="hero-orb hero-orb-2"></div>
306        <div class="hero-orb hero-orb-3"></div>
307
308        <div class="hero-content">
309            <div class="hero-subtitle">Technology Accelerated</div>
310            <h1 class="hero-title">Software &amp; Systems That Power Your<br><span class="rotating-text">Growth</span></h1>
311            <p class="hero-description">From custom software and cloud migration to marketing and ongoing support, <strong>Agratix</strong> helps ambitious businesses ship faster, cut costs, and scale with confidence — enterprise-grade quality without the enterprise overhead. One partner, end to end.</p>
312            <div class="hero-cta">
313                <button class="hero-button primary-btn" onclick="openModal()">
314                    Schedule Free Consultation <i class="fas fa-calendar-check"></i>
315                </button>
316                <button class="hero-button secondary-btn" onclick="document.getElementById('services').scrollIntoView({behavior: 'smooth'})">
317                    View Our Services <i class="fas fa-arrow-down"></i>
318                </button>
319            </div>
320            <p class="hero-reassure"><i class="fas fa-circle-check"></i> Free 30-min strategy call &nbsp;•&nbsp; <i class="fas fa-circle-check"></i> No obligation &nbsp;•&nbsp; <i class="fas fa-circle-check"></i> Reply within 24 hours</p>
321
322            <div class="hero-stats">
323                <div class="stat">
324                    <div class="stat-number" data-target="25" data-suffix="+">0+</div>
325                    <div class="stat-label">Projects Delivered</div>
326                </div>
327                <div class="stat">
328                    <div class="stat-number" data-target="2000" data-suffix="+">0+</div>
329                    <div class="stat-label">People on our platforms</div>
330                </div>
331                <div class="stat">
332                    <div class="stat-number" data-target="100" data-suffix="%">0%</div>
333                    <div class="stat-label">Code &amp; IP you own</div>
334                </div>
335            </div>
336        </div>
337    </section>
338
339    <!-- Trust Band -->
340    <section class="trust-band" aria-label="Why clients trust Agratix">
341        <div class="trust-band-inner">
342            <div class="trust-item"><i class="fas fa-code-branch"></i><span><strong>100%</strong> Code &amp; IP ownership</span></div>
343            <div class="trust-item"><i class="fas fa-shield-halved"></i><span><strong>NDA-backed</strong> confidentiality</span></div>
344            <div class="trust-item"><i class="fas fa-bolt"></i><span><strong>24-hour</strong> response time</span></div>
345            <div class="trust-item"><i class="fas fa-handshake-angle"></i><span><strong>Flexible</strong> fixed-price or retainer</span></div>
346            <div class="trust-item"><i class="fas fa-rotate"></i><span><strong>Post-launch</strong> warranty &amp; support</span></div>
347        </div>
348    </section>
349
350
351    <!-- Technology Partners -->
352    <section class="partners-band" aria-label="Technology partners and certifications">
353        <p class="partners-eyebrow">Technology Partners &amp; Certifications</p>
354        <div class="partners-logos">
355            <div class="partner-chip">
356                <span class="partner-fallback"><i class="fab fa-aws" aria-hidden="true"></i><span>AWS</span></span>
357            </div>
358            <div class="partner-chip">
359                <span class="partner-fallback"><i class="fab fa-microsoft" aria-hidden="true"></i><span>Microsoft</span></span>
360            </div>
361            <div class="partner-chip">
362                <span class="partner-fallback"><i class="fab fa-google" aria-hidden="true"></i><span>Google Cloud</span></span>
363            </div>
364            <span class="partner-divider" aria-hidden="true"></span>
365            <span class="partner-text">+ leading hardware &amp; software distributors</span>
366        </div>
367    </section>
368
369    <!-- Partnership Section -->
370    <section class="partnership-section" data-bgcolor="#ffffff" aria-labelledby="partnership-heading">
371        <div class="section-header">
372            <div class="static-illus partnership-illus" aria-hidden="true"><i class="fas fa-handshake"></i></div>
373            <div class="section-subtitle" role="doc-subtitle">Partnership Philosophy</div>
374            <h2 class="section-title" id="partnership-heading">Stop Settling for IT Vendors</h2>
375            <p>Most IT vendors hand you a ticket queue and disappear. We work as an extension of your team: one partner that designs, builds, runs, and improves the systems your business depends on, and stays accountable for the outcome.</p>
376        </div>
377    </section>
378
379    <!-- Services Section - Split Scroll (DARK BACKGROUND) -->
380    <section class="services-section" id="services" data-bgcolor="#0a0a0a" data-theme="dark" aria-labelledby="services-heading">
381        <div class="services-sticky-container">
382            <!-- Left Panel - Sticky Header -->
383            <div class="services-visual-panel">
384                <div class="services-visual-content">
385                    <div class="services-visual-header">
386                        <h2 id="services-heading">Our Services</h2>
387                        <p>Five practices, one team. Whether you're building something new, modernizing what you have, keeping it running, or growing it, you work with the same people throughout.</p>
388                    </div>
389                </div>
390            </div>
391
392            <!-- Right Panel - Scrolling Service Cards -->
393            <div class="services-content-panel" role="region" aria-label="Service details">
394                <!-- Service 1: Design & Build -->
395                <div class="service-content-item" role="article" aria-labelledby="service-1-title">
396                    <div class="service-icon-badge" aria-hidden="true">
397                        <i class="fas fa-drafting-compass"></i>
398                    </div>
399                    <i class="fas fa-drafting-compass service-item-icon" aria-hidden="true"></i>
400                    <h2 class="service-title" id="service-1-title">Design & Build</h2>
401                    <p class="service-description">
402                        Custom software, web, and mobile, built from scratch. One team designs and engineers it, so what ships matches what was planned: web apps, mobile apps, portals, and the UX behind them.
403                    </p>
404                    <ul class="service-features-list">
405                        <li class="service-feature-item">
406                            <a href="services/design-build/ui-ux-design.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
407                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin-right: 12px; flex-shrink: 0;">
408                                    <i class="fas fa-palette" style="color: white; font-size: 20px;"></i>
409                                </span>
410                                <span class="service-feature-text">UI/UX Design</span>
411                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
412                            </a>
413                        </li>
414                        <li class="service-feature-item">
415                            <a href="services/design-build/web-development.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
416                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); margin-right: 12px; flex-shrink: 0;">
417                                    <i class="fas fa-code" style="color: white; font-size: 20px;"></i>
418                                </span>
419                                <span class="service-feature-text">Web Development</span>
420                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
421                            </a>
422                        </li>
423                        <li class="service-feature-item">
424                            <a href="services/design-build/mobile-app-development.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
425                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); margin-right: 12px; flex-shrink: 0;">
426                                    <i class="fas fa-mobile-alt" style="color: white; font-size: 20px;"></i>
427                                </span>
428                                <span class="service-feature-text">Mobile App Development</span>
429                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
430                            </a>
431                        </li>
432                        <li class="service-feature-item">
433                            <a href="services/design-build/full-stack-development.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
434                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); margin-right: 12px; flex-shrink: 0;">
435                                    <i class="fas fa-layer-group" style="color: white; font-size: 20px;"></i>
436                                </span>
437                                <span class="service-feature-text">Full Stack Development</span>
438                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
439                            </a>
440                        </li>
441                        <li class="service-feature-item">
442                            <a href="services/design-build/custom-portal-development.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
443                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); margin-right: 12px; flex-shrink: 0;">
444                                    <i class="fas fa-window-maximize" style="color: white; font-size: 20px;"></i>
445                                </span>
446                                <span class="service-feature-text">Custom Portal Development</span>
447                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
448                            </a>
449                        </li>
450                        <li class="service-feature-item">
451                            <a href="services/design-build/systems-integration.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
452                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); margin-right: 12px; flex-shrink: 0;">
453                                    <i class="fas fa-plug" style="color: white; font-size: 20px;"></i>
454                                </span>
455                                <span class="service-feature-text">Systems Integration &amp; APIs</span>
456                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
457                            </a>
458                        </li>
459                    </ul>
460                    <a href="services/design-build/" class="service-cta-button" style="margin-top: 1.5rem;">
461                        <span>View All Design & Build Services</span>
462                        <i class="fas fa-arrow-right"></i>
463                    </a>
464                </div>
465
466                <!-- Service 2: Modernize & Migrate -->
467                <div class="service-content-item" role="article" aria-labelledby="service-2-title">
468                    <div class="service-icon-badge" aria-hidden="true">
469                        <i class="fas fa-rocket"></i>
470                    </div>
471                    <i class="fas fa-rocket service-item-icon" aria-hidden="true"></i>
472                    <h2 class="service-title" id="service-2-title">Modernize & Migrate</h2>
473                    <p class="service-description">
474                        Move off aging systems without the downtime. We migrate applications and data to the cloud, modernize legacy code, and update databases and platforms while your business keeps running.
475                    </p>
476                    <ul class="service-features-list">
477                        <li class="service-feature-item">
478                            <a href="services/modernize-migrate/application-modernization.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
479                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-right: 12px; flex-shrink: 0;">
480                                    <i class="fas fa-sync-alt" style="color: white; font-size: 20px;"></i>
481                                </span>
482                                <span class="service-feature-text">Application Modernization</span>
483                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
484                            </a>
485                        </li>
486                        <li class="service-feature-item">
487                            <a href="services/modernize-migrate/cloud-migration.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
488                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); margin-right: 12px; flex-shrink: 0;">
489                                    <i class="fas fa-cloud-upload-alt" style="color: white; font-size: 20px;"></i>
490                                </span>
491                                <span class="service-feature-text">Cloud Migration Services</span>
492                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
493                            </a>
494                        </li>
495                        <li class="service-feature-item">
496                            <a href="services/modernize-migrate/database-modernization.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
497                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); margin-right: 12px; flex-shrink: 0;">
498                                    <i class="fas fa-database" style="color: white; font-size: 20px;"></i>
499                                </span>
500                                <span class="service-feature-text">Database Modernization</span>
501                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
502                            </a>
503                        </li>
504                        <li class="service-feature-item">
505                            <a href="services/modernize-migrate/platform-migration.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
506                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); margin-right: 12px; flex-shrink: 0;">
507                                    <i class="fas fa-server" style="color: white; font-size: 20px;"></i>
508                                </span>
509                                <span class="service-feature-text">Platform Migration</span>
510                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
511                            </a>
512                        </li>
513                        <li class="service-feature-item">
514                            <a href="services/modernize-migrate/ui-ux-modernization-services.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
515                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%); margin-right: 12px; flex-shrink: 0;">
516                                    <i class="fas fa-paint-brush" style="color: white; font-size: 20px;"></i>
517                                </span>
518                                <span class="service-feature-text">UI/UX Modernization</span>
519                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
520                            </a>
521                        </li>
522                    </ul>
523                    <a href="services/modernize-migrate/" class="service-cta-button" style="margin-top: 1.5rem;">
524                        <span>View All Modernize & Migrate Services</span>
525                        <i class="fas fa-arrow-right"></i>
526                    </a>
527                </div>
528
529                <!-- Service 3: Manage & Support -->
530                <div class="service-content-item" role="article" aria-labelledby="service-3-title">
531                    <div class="service-icon-badge" aria-hidden="true">
532                        <i class="fas fa-cogs"></i>
533                    </div>
534                    <i class="fas fa-cogs service-item-icon" aria-hidden="true"></i>
535                    <h2 class="service-title" id="service-3-title">Manage & Support</h2>
536                    <p class="service-description">
537                        Someone who answers when something breaks, and catches problems before they do. Application support, performance monitoring, and security management that keep what you've built dependable.
538                    </p>
539                    <ul class="service-features-list">
540                        <li class="service-feature-item">
541                            <a href="services/manage-support/application-support.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
542                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); margin-right: 12px; flex-shrink: 0;">
543                                    <i class="fas fa-headset" style="color: white; font-size: 20px;"></i>
544                                </span>
545                                <span class="service-feature-text">Application Support & Maintenance</span>
546                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
547                            </a>
548                        </li>
549                        <li class="service-feature-item">
550                            <a href="services/manage-support/performance-monitoring.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
551                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin-right: 12px; flex-shrink: 0;">
552                                    <i class="fas fa-tachometer-alt" style="color: white; font-size: 20px;"></i>
553                                </span>
554                                <span class="service-feature-text">Performance Monitoring & Optimization</span>
555                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
556                            </a>
557                        </li>
558                        <li class="service-feature-item">
559                            <a href="services/manage-support/" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
560                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); margin-right: 12px; flex-shrink: 0;">
561                                    <i class="fas fa-tools" style="color: white; font-size: 20px;"></i>
562                                </span>
563                                <span class="service-feature-text">IT Management & Support</span>
564                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
565                            </a>
566                        </li>
567                        <li class="service-feature-item">
568                            <a href="services/manage-support/security-management.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
569                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); margin-right: 12px; flex-shrink: 0;">
570                                    <i class="fas fa-shield-alt" style="color: white; font-size: 20px;"></i>
571                                </span>
572                                <span class="service-feature-text">Security Management</span>
573                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
574                            </a>
575                        </li>
576                        <li class="service-feature-item">
577                            <a href="services/manage-support/licensing-procurement.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
578                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); margin-right: 12px; flex-shrink: 0;">
579                                    <i class="fas fa-file-invoice-dollar" style="color: white; font-size: 20px;"></i>
580                                </span>
581                                <span class="service-feature-text">Licensing &amp; Procurement</span>
582                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
583                            </a>
584                        </li>
585                    </ul>
586                    <a href="services/manage-support/" class="service-cta-button" style="margin-top: 1.5rem;">
587                        <span>View All Manage & Support Services</span>
588                        <i class="fas fa-arrow-right"></i>
589                    </a>
590                </div>
591
592                <!-- Service 4: Growth & Scale -->
593                <div class="service-content-item" role="article" aria-labelledby="service-4-title">
594                    <div class="service-icon-badge" aria-hidden="true">
595                        <i class="fas fa-chart-line"></i>
596                    </div>
597                    <i class="fas fa-chart-line service-item-icon" aria-hidden="true"></i>
598                    <h2 class="service-title" id="service-4-title">Growth & Scale</h2>
599                    <p class="service-description">
600                        Get found, convert more, and keep customers. SEO, paid campaigns, conversion optimization, and analytics, run by the same team that built your product so marketing and tech line up.
601                    </p>
602                    <ul class="service-features-list">
603                        <li class="service-feature-item">
604                            <a href="services/growth-scale/visibility-seo-strategy.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
605                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%); margin-right: 12px; flex-shrink: 0;">
606                                    <i class="fas fa-search" style="color: white; font-size: 20px;"></i>
607                                </span>
608                                <span class="service-feature-text">Visibility & SEO Strategy</span>
609                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
610                            </a>
611                        </li>
612                        <li class="service-feature-item">
613                            <a href="services/growth-scale/engagement-social-marketing.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
614                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #ff6a88 0%, #ff99ac 100%); margin-right: 12px; flex-shrink: 0;">
615                                    <i class="fas fa-users" style="color: white; font-size: 20px;"></i>
616                                </span>
617                                <span class="service-feature-text">Engagement & Social Marketing</span>
618                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
619                            </a>
620                        </li>
621                        <li class="service-feature-item">
622                            <a href="services/growth-scale/ppc-conversion-optimization.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
623                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); margin-right: 12px; flex-shrink: 0;">
624                                    <i class="fas fa-bullseye" style="color: white; font-size: 20px;"></i>
625                                </span>
626                                <span class="service-feature-text">PPC & Conversion Optimization</span>
627                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
628                            </a>
629                        </li>
630                        <li class="service-feature-item">
631                            <a href="services/growth-scale/nurture-retention.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
632                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); margin-right: 12px; flex-shrink: 0;">
633                                    <i class="fas fa-heart" style="color: white; font-size: 20px;"></i>
634                                </span>
635                                <span class="service-feature-text">Nurture & Retention</span>
636                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
637                            </a>
638                        </li>
639                        <li class="service-feature-item">
640                            <a href="services/growth-scale/marketing-intelligence-analytics.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
641                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin-right: 12px; flex-shrink: 0;">
642                                    <i class="fas fa-chart-bar" style="color: white; font-size: 20px;"></i>
643                                </span>
644                                <span class="service-feature-text">Intelligence & Analytics</span>
645                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
646                            </a>
647                        </li>
648                    </ul>
649                    <a href="services/growth-scale/" class="service-cta-button" style="margin-top: 1.5rem;">
650                        <span>View All Growth & Scale Services</span>
651                        <i class="fas fa-arrow-right"></i>
652                    </a>
653                </div>
654
655                <!-- Service 5: AI Solutions -->
656                <div class="service-content-item" role="article" aria-labelledby="service-5-title">
657                    <div class="service-icon-badge" aria-hidden="true">
658                        <i class="fas fa-brain"></i>
659                    </div>
660                    <i class="fas fa-brain service-item-icon" aria-hidden="true"></i>
661                    <h2 class="service-title" id="service-5-title">AI Solutions</h2>
662                    <p class="service-description">
663                        AI that does real work, not demos. We build machine learning into the systems you already run, agents that take busywork off your team, and chatbots that answer from your own content instead of guessing.
664                    </p>
665                    <ul class="service-features-list">
666                        <li class="service-feature-item">
667                            <a href="services/ai-solutions/#what-we-build" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
668                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); margin-right: 12px; flex-shrink: 0;">
669                                    <i class="fas fa-microchip" style="color: white; font-size: 20px;"></i>
670                                </span>
671                                <span class="service-feature-text">ML Integration &amp; Custom Models</span>
672                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
673                            </a>
674                        </li>
675                        <li class="service-feature-item">
676                            <a href="services/ai-solutions/#what-we-build" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
677                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-right: 12px; flex-shrink: 0;">
678                                    <i class="fas fa-robot" style="color: white; font-size: 20px;"></i>
679                                </span>
680                                <span class="service-feature-text">AI Agents &amp; Workflow Automation</span>
681                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
682                            </a>
683                        </li>
684                        <li class="service-feature-item">
685                            <a href="services/ai-solutions/#what-we-build" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
686                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); margin-right: 12px; flex-shrink: 0;">
687                                    <i class="fas fa-comments" style="color: white; font-size: 20px;"></i>
688                                </span>
689                                <span class="service-feature-text">Generative AI &amp; Chatbots</span>
690                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
691                            </a>
692                        </li>
693                        <li class="service-feature-item">
694                            <a href="services/ai-solutions/ai-localization.html" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
695                                <span style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); margin-right: 12px; flex-shrink: 0;">
696                                    <i class="fas fa-language" style="color: white; font-size: 20px;"></i>
697                                </span>
698                                <span class="service-feature-text">AI Localization &amp; Multilingual</span>
699                                <i class="fas fa-arrow-right" style="color: #5da86a; opacity: 0.6; font-size: 14px; margin-left: 8px; transition: all 0.3s ease;"></i>
700                            </a>
701                        </li>
702                    </ul>
703                    <a href="services/ai-solutions/" class="service-cta-button" style="margin-top: 1.5rem;">
704                        <span>Explore AI Solutions</span>
705                        <i class="fas fa-arrow-right"></i>
706                    </a>
707                </div>
708            </div>
709        </div>
710    </section>
711
712    <!-- Spacer Section -->
713    <div class="section-spacer"></div>
714
715    <!-- Concept Section (MOVED BELOW SERVICES) -->
716    <section class="concept-section" data-bgcolor="#ffffff" aria-labelledby="concept-heading">
717        <div class="concept-text" id="conceptText" role="heading" aria-level="2">
718            <span class="word">We</span> <span class="word">don't</span> <span class="word">believe</span> <span class="word">in</span> <span class="word">impossible.</span> <span class="word">Tight</span> <span class="word">budgets,</span> <span class="word">ambitious</span> <span class="word">timelines,</span> <span class="word">complex</span> <span class="word">challenges—we</span> <span class="word">explore</span> <span class="word">every</span> <span class="word">possibility</span> <span class="word">to</span> <span class="word">make</span> <span class="word">it</span> <span class="word">work</span> <span class="word">for</span> <span class="word">your</span> <span class="word">business.</span>
719        </div>
720
721        <div class="concept-grid" role="list">
722            <div class="concept-item" role="listitem">
723                <div class="concept-item-icon-badge" aria-hidden="true">
724                    <i class="fas fa-heart"></i>
725                </div>
726                <div class="concept-item-number" aria-hidden="true">01</div>
727                <h3 class="concept-item-title" id="concept-heading">Honest & Transparent</h3>
728                <p class="concept-item-text">Clear pricing, no hidden costs, no surprises. We maximize your budget and always keep you in the loop.</p>
729            </div>
730            <div class="concept-item">
731                <div class="concept-item-icon-badge">
732                    <i class="fas fa-lightbulb"></i>
733                </div>
734                <div class="concept-item-number">
73402</div>
735                <h3 class="concept-item-title">Creative Problem Solvers</h3>
736                <p class="concept-item-text">No cookie-cutter solutions. We explore all possibilities and find innovative ways to deliver exactly what you need.</p>
737            </div>
738            <div class="concept-item">
739                <div class="concept-item-icon-badge">
740                    <i class="fas fa-comments"></i>
741                </div>
742                <div class="concept-item-number">03</div>
743                <h3 class="concept-item-title">Always Within Reach</h3>
744                <p class="concept-item-text">Quick responses, clear communication, real support when you need it. No waiting days for answers or getting lost in ticket queues.</p>
745            </div>
746        </div>
747    </section>
748
749    <!-- Case Studies Section -->
750    <section class="case-studies-section" data-bgcolor="#ffffff" aria-labelledby="case-studies-heading">
751        <div class="section-header">
752            <div class="section-subtitle" role="doc-subtitle">Our Work</div>
753            <h2 class="section-title" id="case-studies-heading">Featured Case Studies</h2>
754        </div>
755
756        <div class="case-studies-grid" role="list">
757            <div class="case-study-card" role="listitem" aria-labelledby="case-study-1-title">
758                <div class="case-study-image" aria-hidden="true">
759                    <i class="fas fa-plane-departure"></i>
760                </div>
761                <div class="case-study-content">
762                    <span class="case-study-category">Travel &mdash; B2B</span>
763                    <h3 class="case-study-title" id="case-study-1-title">B2B Travel Platform</h3>
764                    <p class="case-study-description">Replaced Excel and email with a custom platform built in under 45 days. Two years on it handles around 1,700 requests a month, with live regional tracking and GST reconciliation.</p>
765                    <div class="case-study-tags">
766                        <span class="case-study-tag">Node.js</span>
767                        <span class="case-study-tag">Nginx</span>
768                    </div>
769                    <a href="case-study-travel-crm.html" class="case-study-link">
770                        View Case Study <i class="fas fa-arrow-right"></i>
771                    </a>
772                </div>
773            </div>
774
775            <div class="case-study-card">
776                <div class="case-study-image">
777                    <i class="fas fa-user-check"></i>
778                </div>
779                <div class="case-study-content">
780                    <span class="case-study-category">Computer Vision</span>
781                    <h3 class="case-study-title">Offline Face Recognition Attendance</h3>
782                    <p class="case-study-description">Automatic attendance for 2,000+ people across multiple institutes, read from cameras already installed. Runs entirely on-premise with no internet, so face data never leaves the site.</p>
783                    <div class="case-study-tags">
784                        <span class="case-study-tag">Python</span>
785                        <span class="case-study-tag">OpenCV</span>
786                        <span class="case-study-tag">MariaDB</span>
787                    </div>
788                    <a href="case-study-face-recognition.html" class="case-study-link">
789                        View Case Study <i class="fas fa-arrow-right"></i>
790                    </a>
791                </div>
792            </div>
793
794            <div class="case-study-card">
795                <div class="case-study-image">
796                    <i class="fas fa-chart-line"></i>
797                </div>
798                <div class="case-study-content">
799                    <span class="case-study-category">Cybersecurity</span>
800                    <h3 class="case-study-title">Audit Remediation to Compliance</h3>
801                    <p class="case-study-description">A financial services firm came out of a cyber audit with gaps and a deadline. We prioritised by risk, implemented the controls, and took them through to compliance.</p>
802                    <div class="case-study-tags">
803                        <span class="case-study-tag">Security Controls</span>
804                        <span class="case-study-tag">Compliance</span>
805                    </div>
806                    <a href="case-study-security-compliance.html" class="case-study-link">
807                        View Case Study <i class="fas fa-arrow-right"></i>
808                    </a>
809                </div>
810            </div>
811        </div>
812    </section>
813
814    <!-- Testimonials Section -->
815    <!-- How We Work (replaces placeholder testimonials until real ones are collected) -->
816    <section class="testimonials-section ag-process-section" id="testimonials" data-bgcolor="#ffffff" aria-labelledby="process-heading">
817        <div class="section-header">
818            <div class="section-subtitle" role="doc-subtitle">How We Work</div>
819            <h2 class="section-title" id="process-heading">A Partnership Built Around Your Goals</h2>
820            <p class="ag-process-intro">No jargon, no surprises &mdash; just a clear, collaborative path from first conversation to launch and beyond.</p>
821        </div>
822
823        <div class="ag-process">
824            <div class="ag-step">
825                <div class="ag-step-num">01</div>
826                <div class="ag-step-ico"><i class="fas fa-comments"></i></div>
827                <h3>Discovery Call</h3>
828                <p>A free 30-minute conversation to understand your goals, challenges and vision &mdash; no pressure, no obligation.</p>
829            </div>
830            <div class="ag-step">
831                <div class="ag-step-num">02</div>
832                <div class="ag-step-ico"><i class="fas fa-file-lines"></i></div>
833                <h3>Clear Proposal</h3>
834                <p>Within 3&ndash;5 days you get a detailed plan with scope, timeline and transparent pricing &mdash; fixed-price or retainer, your choice.</p>
835            </div>
836            <div class="ag-step">
837                <div class="ag-step-num">03</div>
838                <div class="ag-step-ico"><i class="fas fa-laptop-code"></i></div>
839                <h3>Build &amp; Iterate</h3>
840                <p>We deliver in phases with weekly milestones, so you see progress every step and stay in control throughout.</p>
841            </div>
842            <div class="ag-step">
843                <div class="ag-step-num">04</div>
844                <div class="ag-step-ico"><i class="fas fa-life-ring"></i></div>
845                <h3>Launch &amp; Support</h3>
846                <p>We launch with a warranty period and ongoing support &mdash; and you own 100% of the code and IP, with no lock-in.</p>
847            </div>
848        </div>
849
850        <div class="ag-process-cta">
851            <button class="hero-button primary-btn">Schedule Free Consultation <i class="fas fa-arrow-right"></i></button>
852        </div>
853    </section>
854
855    <!-- Approach Section -->
856    <section class="approach-section" id="approach" data-bgcolor="#ffffff" aria-labelledby="approach-heading">
857        <div class="section-header">
858            <div class="section-subtitle" role="doc-subtitle">Our Approach</div>
859            <h2 class="section-title" id="approach-heading">Built for Business Impact</h2>
860        </div>
861
862        <div class="approach-grid" role="list">
863            <div class="approach-item">
864                <div class="approach-icon">
865                    <i class="fas fa-lightbulb" style="font-size: 32px;"></i>
866                </div>
867                <h3 class="approach-item-title">Strategy</h3>
868                <p class="approach-text">We start by understanding how your business actually makes money and where technology is getting in the way. That shapes the plan, not a template.</p>
869            </div>
870            <div class="approach-item">
871                <div class="approach-icon">
872                    <i class="fas fa-trophy" style="font-size: 32px;"></i>
873                </div>
874                <h3 class="approach-item-title">Success</h3>
875                <p class="approach-text">We measure our work by what it does for you: revenue, time saved, fewer fires to fight. Not hours billed or tickets closed.</p>
876            </div>
877            <div class="approach-item">
878                <div class="approach-icon">
879                    <i class="fas fa-handshake" style="font-size: 32px;"></i>
880                </div>
881                <h3 class="approach-item-title">Collaboration</h3>
882                <p class="approach-text">Most of our work comes from clients we've had for years. We'd rather be the team you call next time than a one-off project that ends at handover.</p>
883            </div>
884        </div>
885    </section>
886
887    <!-- FAQ Section -->
888    <!-- FAQ Section - Redesigned with native details/summary -->
889    <section class="faq-section" id="faq" data-bgcolor="#ffffff">
890        <div class="faq-content">
891            <div class="faq-header">
892                <h2>Questions? We've got answers.</h2>
893                <p>Everything you need to know about working with us.</p>
894            </div>
895
896            <div class="faq-list">
897                <details class="faq-item">
898                    <summary>
899                        <span>How much does it cost?</span>
900                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
901                            <line x1="12" y1="5" x2="12" y2="19"/>
902                            <line x1="5" y1="12" x2="19" y2="12"/>
903                        </svg>
904                    </summary>
905                    <div class="faq-answer">
906                        <p>Every project is unique, so we provide custom quotes based on your specific needs and goals. Our pricing is transparent and competitive. We offer flexible engagement models—from fixed-price projects to monthly retainers—designed to fit your budget. Most small business projects start in the $5K-$25K range, while enterprise solutions are custom-scoped.</p>
907                    </div>
908                </details>
909
910                <details class="faq-item">
911                    <summary>
912                        <span>Do you work with small businesses?</span>
913                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
914                            <line x1="12" y1="5" x2="12" y2="19"/>
915                            <line x1="5" y1="12" x2="19" y2="12"/>
916                        </svg>
917                    </summary>
918                    <div class="faq-answer">
919                        <p>Absolutely! We partner with businesses of all sizes, from startups to enterprises. Many of our clients are small and medium-sized businesses who need enterprise-quality solutions without enterprise overhead. We understand your challenges and budget constraints, and we tailor our approach accordingly.</p>
920                    </div>
921                </details>
922
923                <details class="faq-item">
924                    <summary>
925                        <span>How long will it take?</span>
926                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
927                            <line x1="12" y1="5" x2="12" y2="19"/>
928                            <line x1="5" y1="12" x2="19" y2="12"/>
929                        </svg>
930                    </summary>
931                    <div class="faq-answer">
932                        <p>Timeline depends on project scope and complexity. A typical website or application takes 6-12 weeks from kickoff to launch. We break projects into phases with regular milestones, so you see progress every week. During our discovery call, we'll provide a detailed timeline built around your project and deadlines.</p>
933                    </div>
934                </details>
935
936                <details class="faq-item">
937                    <summary>
938                        <span>Can you work within our budget?</span>
939                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
940                            <line x1="12" y1="5" x2="12" y2="19"/>
941                            <line x1="5" y1="12" x2="19" y2="12"/>
942                        </svg>
943                    </summary>
944                    <div class="faq-answer">
945                        <p>Yes! We're experienced at maximizing value within budget constraints. We'll work with you to prioritize features and find the right balance between functionality, quality, and cost. We can also suggest phased approaches where you launch with core features first, then expand over time as budget allows.</p>
946                    </div>
947                </details>
948
949                <details class="faq-item">
950                    <summary>
951                        <span>What if I need changes after launch?</span>
952                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
953                            <line x1="12" y1="5" x2="12" y2="19"/>
954                            <line x1="5" y1="12" x2="19" y2="12"/>
955                        </svg>
956                    </summary>
957                    <div class="faq-answer">
958                        <p>We include a warranty period for bug fixes, and we offer ongoing support and maintenance packages for updates, enhancements, and new features. As your technology partner, we're here for the long term. Most clients choose a monthly retainer for ongoing support, giving you predictable costs and priority access to our team.</p>
959                    </div>
960                </details>
961
962                <details class="faq-item">
963                    <summary>
964                        <span>Do I own the code and designs?</span>
965                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
966                            <line x1="12" y1="5" x2="12" y2="19"/>
967                            <line x1="5" y1="12" x2="19" y2="12"/>
968                        </svg>
969                    </summary>
970                    <div class="faq-answer">
971                        <p>Yes, 100%. Once the project is completed and paid for, you own all the code, designs, and intellectual property we create for you. We provide full source code access and documentation. You're never locked in—though most clients choose to continue working with us because of the partnership value we provide.</p>
972                    </div>
973                </details>
974
975                <details class="faq-item">
976                    <summary>
977                        <span>What technologies do you use?</span>
978                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
979                            <line x1="12" y1="5" x2="12" y2="19"/>
980                            <line x1="5" y1="12" x2="19" y2="12"/>
981                        </svg>
982                    </summary>
983                    <div class="faq-answer">
984                        <p>We use proven technologies chosen for your needs, not trends. Web: React, Vue.js, Node.js, PHP, Python. Mobile: React Native, Flutter, native iOS/Android. Cloud: AWS, Azure and Google Cloud, where we hold partner status with all three. AI: Python, OpenCV and current LLM tooling. We'll recommend the right stack for your requirements, your scale, and what it costs to maintain later.</p>
985                    </div>
986                </details>
987
988                <details class="faq-item">
989                    <summary>
990                        <span>How do we get started?</span>
991                        <svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
992                            <line x1="12" y1="5" x2="12" y2="19"/>
993                            <line x1="5" y1="12" x2="19" y2="12"/>
994                        </svg>
995                    </summary>
996                    <div class="faq-answer">
997                        <p>Book a free 30-minute discovery call and we'll talk through your goals, challenges and constraints. If we're a good fit you'll have a detailed proposal within 3 to 5 business days. If you'd rather start with a number, use the instant estimator for a ballpark in about a minute. No pressure either way.</p>
998                    </div>
999                </details>
1000            </div>
1001        </div>
1002    </section>
1003
1004    <!-- CTA Section - Redesigned Minimal -->
1005    <section class="cta-section" data-bgcolor="#ffffff">
1006        <div class="cta-container">
1007            <div class="static-illus cta-illus" aria-hidden="true"><i class="fas fa-rocket"></i></div>
1008            <h2 class="cta-title">Let's talk about what you're building</h2>
1009            <p class="cta-subtitle">A 30-minute call, no pitch. Just a straight conversation about your project and whether we're a good fit.</p>
1010            <button class="cta-button" onclick="openModal()">
1011                Book Discovery Call
1012            </button>
1013        </div>
1014    </section>
1015    </main><!-- End main content -->
1016
1017    <!-- Footer - Redesigned -->
1018    <footer role="contentinfo">
1019        <div class="backdrop"></div>
1020        <div class="footer-container">
1021            <div class="footer-grid">
1022                <!-- Company Info -->
1023                <div class="footer-col footer-brand">
1024                    <img src="assets/agratix_logo.webp" alt="Agratix Logo" class="footer-logo-img" width="1040" height="300" loading="lazy" decoding="async">
1025                    <p class="footer-tagline">We partner with ambitious businesses to deliver technology solutions that drive measurable growth and competitive advantage.</p>
1026                    <button class="footer-cta-button" onclick="openModal()">
1027                        <i class="fas fa-calendar-alt"></i>
1028                        <span>Schedule a Consultation</span>
1029                    </button>
1030                </div>
1031
1032                <!-- Services -->
1033                <div class="footer-col">
1034                    <h4>Services</h4>
1035                    <ul class="footer-links">
1036                        <li><a href="services/design-build/">Design & Build</a></li>
1037                        <li><a href="services/modernize-migrate/">Modernize & Migrate</a></li>
1038                        <li><a href="services/manage-support/">Manage & Support</a></li>
1039                        <li><a href="services/growth-scale/">Growth & Scale</a></li>
1040                        <li><a href="services/ai-solutions/">AI Solutions</a></li>
1041                    </ul>
1042                </div>
1043
1044                <!-- Company -->
1045                <div class="footer-col">
1046                    <h4>Company</h4>
1047                    <ul class="footer-links">
1048                        <li><a href="about.html">About</a></li>
1049                        <li><a href="case-studies.html">Case Studies</a></li>
1050                        <li><a href="insights.html">Insights</a></li>
1051                        <li><a href="#testimonials">How We Work</a></li>
1052                        <li><a href="#faq">FAQ</a></li>
1053                    </ul>
1054                </div>
1055
1056                <!-- Contact -->
1057                <div class="footer-col">
1058                    <h4>Get in Touch</h4>
1059                    <ul class="footer-links">
1060                        <li><a href="mailto:[email protected]">[email protected]</a></li>
1061                        <li><a href="tel:+919739776554">+91 97397 76554</a></li>
1062                        <li><a href="https://wa.me/919739776554" target="_blank" rel="noopener">Message us on WhatsApp</a></li>
1063                    </ul>
1064                    <p class="footer-address">
1065                        <i class="fas fa-location-dot" aria-hidden="true"></i>
1066                        Bengaluru, India
1067                    </p>
1068                    <div class="footer-social">
1069                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
1070                        <a href="https://x.com/AgratixTech" target="_blank" rel="noopener" aria-label="Agratix on X"><i class="fab fa-x-twitter"></i></a>
1071                        <a href="https://wa.me/919739776554" target="_blank" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
1072                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
1073                    </div>
1074                </div>
1075            </div>
1076
1077            <div class="footer-bottom">
1078                <p>&copy; 2026 Agratix. All rights reserved.</p>
1079                <div class="footer-legal">
1080                    <a href="privacy-policy.html">Privacy Policy</a>
1081                    <a href="terms-of-service.html">Terms of Service</a>
1082                    <a href="cookie-policy.html">Cookie Policy</a>
1083                </div>
1084            </div>
1085        </div>
1086    </footer>
1087
1088    <!-- Contact Modal -->
1089    <div class="modal-backdrop" id="modalBackdrop" onclick="closeModal(event)" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 9999; padding: 2rem 1rem; overflow-y: auto;">
1090        <div class="modal" onclick="event.stopPropagation()" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 20px; padding: 2.5rem; max-width: 500px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); margin: auto;">
1091            <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
1092                <div style="display: flex; align-items: center; gap: 1rem;">
1093                    <div class="modal-icon" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5da86a 0%, #489156 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
1094                        <i class="fas fa-rocket"></i>
1095                    </div>
1096                    <h3 class="modal-title" style="color: white; font-size: 1.5rem; margin: 0;">Get Started</h3>
1097                </div>
1098                <button class="modal-close" onclick="closeModal()" style="background: rgba(255,255,255,0.1); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s;" aria-label="Close modal">
1099                    <i class="fas fa-times"></i>
1100                </button>
1101            </div>
1102            <form id="contactForm" onsubmit="handleSubmit(event)" action="https://api.web3forms.com/submit" method="POST" style="display: flex; flex-direction: column; gap: 1rem;">
1103                <!-- Web3Forms Access Key -->
1104                <input type="hidden" name="access_key" value="128b554c-686e-476c-9653-0795165e2a3f">
1105                <!-- Hidden fields for lead tracking -->
1106                <input type="hidden" name="subject" value="New Lead from Agratix Website">
1107                <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
1108                <input type="hidden" id="leadSource" name="lead_source" value="">
1109                <input type="hidden" id="pageUrl" name="page_url" value="">
1110
1111                <input type="text" name="name" placeholder="Your Name *" required aria-label="Your name" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1112                <input type="email" name="email" placeholder="Email Address *" required aria-label="Email address" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1113                <input type="tel" name="phone" placeholder="Phone Number (Optional)" aria-label="Phone number" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1114                <input type="text" name="company" placeholder="Company Name" aria-label="Company name" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1115
1116                <!-- Service Interest Dropdown -->
1117                <select name="service_interest" aria-label="Service interested in" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1118                    <option value="" style="background: #1a1a2e; color: white;">What service are you interested in?</option>
1119                    <option value="systems-integration" style="background: #1a1a2e; color: white;">Systems Integration</option>
1120                    <option value="cloud-solutions" style="background: #1a1a2e; color: white;">Cloud Solutions</option>
1121                    <option value="mobile-apps" style="background: #1a1a2e; color: white;">Mobile Applications</option>
1122                    <option value="custom-software" style="background: #1a1a2e; color: white;">Custom Software Development</option>
1123                    <option value="it-support" style="background: #1a1a2e; color: white;">IT Support</option>
1124                    <option value="consultation" style="background: #1a1a2e; color: white;">General Consultation</option>
1125                </select>
1126
1127                <!-- Budget Range -->
1128                <select name="budget_range" aria-label="Budget range" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s;">
1129                    <option value="" style="background: #1a1a2e; color: white;">Estimated Budget (Optional)</option>
1130                    <option value="under-10k" style="background: #1a1a2e; color: white;">Under $10,000</option>
1131                    <option value="10k-25k" style="background: #1a1a2e; color: white;">$10,000 - $25,000</option>
1132                    <option value="25k-50k" style="background: #1a1a2e; color: white;">
1132$25,000 - $50,000</option>
1133                    <option value="50k-100k" style="background: #1a1a2e; color: white;">$50,000 - $100,000</option>
1134                    <option value="100k-plus" style="background: #1a1a2e; color: white;">$100,000+</option>
1135                </select>
1136
1137                <textarea name="message" placeholder="Tell us about your project..." aria-label="Project details" style="width: 100%; padding: 0.9rem 1.2rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 0.95rem; outline: none; transition: all 0.3s; min-height: 120px; resize: vertical;"></textarea>
1138
1139                <button type="submit" class="submit-btn" style="width: 100%; padding: 1rem; background: linear-gradient(135deg, #5da86a 0%, #489156 100%); border: none; border-radius: 12px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px rgba(72,145,86,0.3);">Send Message</button>
1140
1141                <p style="font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; text-align: center;">
1142                    We'll respond within 24 hours. Your information is secure.
1143                </p>
1144            </form>
1145        </div>
1146    </div>
1147
1148
1149    <!-- GSAP and ScrollTrigger -->
1150    
1150<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
1150
1151    
1151<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
1151
1152    
1152<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
1152
1153
1154    <!-- Background Transitions - DISABLED (causing loading flicker) -->
1155    <!-- 
1155<script src="js/background-transitions.js"></script>
1155 -->
1156
1157    <!-- Main JavaScript with all initialization -->
1158    
1158<script src="js/main.js"></script>
1158
1159
1160    <!-- Ending Section Interactivity -->
1161    
1161<script src="js/ending-section.js"></script>
1161
1162
1163    <!-- Exit Intent Popup -->
1164    
1164<script src="js/exit-intent.js"></script>
1164
1165
1166    
1166<script>
1167        // Animate stats counter on page load
1168        document.addEventListener('DOMContentLoaded', function() {
1169            const stats = document.querySelectorAll('.stat-number');
1170
1171            stats.forEach(stat => {
1172                const target = parseFloat(stat.dataset.target);
1173                const suffix = stat.dataset.suffix || '';
1174                const prefix = stat.dataset.prefix || '';
1175                const duration = 2000; // 2 seconds
1176                const increment = target / (duration / 16); // 60fps
1177                let current = 0;
1178
1179                // Determine if decimal or integer
1180                const isDecimal = target % 1 !== 0;
1181                const decimalPlaces = isDecimal ? 1 : 0;
1182
1183                const formatNumber = (num) => {
1184                    // Format with commas for numbers >= 1000
1185                    if (num >= 1000 && !isDecimal) {
1186                        return Math.ceil(num).toLocaleString('en-GB');
1187                    }
1188                    return isDecimal ? num.toFixed(decimalPlaces) : Math.ceil(num);
1189                };
1190
1191                const updateCounter = () => {
1192                    current += increment;
1193                    if (current < target) {
1194                        stat.textContent = prefix + formatNumber(current) + suffix;
1195                        requestAnimationFrame(updateCounter);
1196                    } else {
1197                        stat.textContent = prefix + formatNumber(target) + suffix;
1198                    }
1199                };
1200
1201                // Start animation after a short delay
1202                setTimeout(updateCounter, 500);
1203            });
1204        });
1205
1206        // Modal functions
1207        function openModal() {
1208            const modal = document.getElementById('modalBackdrop');
1209            if (modal) {
1210                modal.style.display = 'flex';
1211                document.body.style.overflow = 'hidden';
1212
1213                // Track lead source
1214                const leadSource = document.referrer || 'Direct';
1215                const pageUrl = window.location.href;
1216                document.getElementById('leadSource').value = leadSource;
1217                document.getElementById('pageUrl').value = pageUrl;
1218            }
1219        }
1220
1221        function closeModal(event) {
1222            const modal = document.getElementById('modalBackdrop');
1223            if (modal && (!event || event.target === modal || event.type === 'click')) {
1224                modal.style.display = 'none';
1225                document.body.style.overflow = '';
1226            }
1227        }
1228
1229        function handleSubmit(event) {
1230            event.preventDefault();
1231            const form = event.target;
1232            const btn = form.querySelector('.submit-btn');
1233            const originalBtnText = btn ? btn.innerHTML : '';
1234            if (btn) { btn.disabled = true; btn.innerHTML = 'Sending…'; btn.style.opacity = '0.7'; }
1235
1236            fetch(form.action, {
1237                method: form.method,
1238                body: new FormData(form),
1239                headers: { 'Accept': 'application/json' }
1240            }).then(async (response) => {
1241                let ok = response.ok;
1242                try { const json = await response.json(); ok = json.success === true; } catch (e) {}
1243                if (ok) {
1244                    showFormMessage(form, 'success', '✅ Thank you! Your message is in — we\'ll be in touch within 24 hours.');
1245                    form.reset();
1246                    if (window.gtag) gtag('event', 'generate_lead', { form_location: 'homepage_modal' });
1247                    setTimeout(() => { closeModal(); }, 2600);
1248                } else {
1249                    showFormMessage(form, 'error', '⚠️ Something went wrong. Please try again or email [email protected]');
1250                }
1251            }).catch(() => {
1252                showFormMessage(form, 'error', '⚠️ Something went wrong. Please try again or email [email protected]');
1253            }).finally(() => {
1254                if (btn) { btn.disabled = false; btn.innerHTML = originalBtnText; btn.style.opacity = '1'; }
1255            });
1256        }
1257
1258        function showFormMessage(form, type, text) {
1259            let box = form.querySelector('.form-message');
1260            if (!box) {
1261                box = document.createElement('div');
1262                box.className = 'form-message';
1263                box.style.cssText = 'padding:0.9rem 1.2rem;border-radius:12px;font-size:0.9rem;text-align:center;margin-top:0.25rem;';
1264                form.appendChild(box);
1265            }
1266            box.style.background = type === 'success' ? 'rgba(72,145,86,0.18)' : 'rgba(220,53,69,0.18)';
1267            box.style.border = type === 'success' ? '1px solid rgba(93,168,106,0.5)' : '1px solid rgba(220,53,69,0.5)';
1268            box.style.color = type === 'success' ? '#a7e0b2' : '#f4b6bc';
1269            box.textContent = text;
1270        }
1271
1272        // Close modal on ESC key
1273        document.addEventListener('keydown', function(e) {
1274            if (e.key === 'Escape') {
1275                closeModal();
1276            }
1277        });
1278
1279        // Rotating Text Animation
1280        const rotatingText = document.querySelector('.rotating-text');
1281        if (rotatingText) {
1282            const words = [
1283                'Growth',
1284                'Revenue',
1285                'Efficiency',
1286                'Innovation',
1287                'Scale'
1288            ];
1289            let currentIndex = 0;
1290
1291            function rotateText() {
1292                // Fade out
1293                rotatingText.style.opacity = '0';
1294                rotatingText.style.transform = 'translateY(-20px)';
1295
1296                setTimeout(() => {
1297                    // Change text
1298                    currentIndex = (currentIndex + 1) % words.length;
1299                    rotatingText.textContent = words[currentIndex];
1300
1301                    // Fade in
1302                    rotatingText.style.opacity = '1';
1303                    rotatingText.style.transform = 'translateY(0)';
1304                }, 500);
1305            }
1306
1307            // Set initial style
1308            rotatingText.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
1309            rotatingText.style.display = 'inline-block';
1310
1311            // Start rotation after 3 seconds, then every 3 seconds
1312            setInterval(rotateText, 3000);
1313        }
1314
1315        // Concept Text Word Highlighting on Scroll
1316        window.addEventListener('scroll', function() {
1317            const conceptText = document.getElementById('conceptText');
1318            if (!conceptText) return;
1319
1320            const words = conceptText.querySelectorAll('.word');
1321            const conceptTextRect = conceptText.getBoundingClientRect();
1322            const windowHeight = window.innerHeight;
1323
1324            // Check if section is in viewport
1325            if (conceptTextRect.top < windowHeight && conceptTextRect.bottom > 0) {
1326                // Calculate scroll progress through the section
1327                const sectionTop = conceptTextRect.top;
1328                const sectionHeight = conceptTextRect.height;
1329                const scrollProgress = 1 - (sectionTop / windowHeight);
1330
1331                // Determine how many words should be active based on scroll progress
1332                const totalWords = words.length;
1333                const activeWordCount = Math.floor(scrollProgress * totalWords * 1.5);
1334
1335                // Apply active class to words based on progress
1336                words.forEach((word, index) => {
1337                    if (index < activeWordCount) {
1338                        word.classList.add('active');
1339                    } else {
1340                        word.classList.remove('active');
1341                    }
1342                });
1343            } else if (conceptTextRect.top >= windowHeight) {
1344                // Section is below viewport (scrolled up) - deactivate all words
1345                words.forEach((word) => {
1346                    word.classList.remove('active');
1347                });
1348            } else if (conceptTextRect.bottom <= 0) {
1349                // Section is above viewport (scrolled down past) - activate all words
1350                words.forEach((word) => {
1351                    word.classList.add('active');
1352                });
1353            }
1354        });
1355
1356        // Testimonials Carousel
1357        document.addEventListener('DOMContentLoaded', function() {
1358            const track = document.querySelector('.testimonials-track');
1359            const dots = document.querySelectorAll('.carousel-dot');
1360            const cards = document.querySelectorAll('.testimonial-card');
1361
1362            if (!track || !dots.length || !cards.length) return;
1363
1364            let currentIndex = 0;
1365            const totalPages = dots.length;
1366
1367            function getCardsPerPage() {
1368                const width = window.innerWidth;
1369                if (width <= 768) return 1;      // Mobile: 1 card
1370                if (width <= 1024) return 2;     // Tablet: 2 cards
1371                return 3;                         // Desktop: 3 cards
1372            }
1373
1374            function updateCarousel(index) {
1375                currentIndex = index;
1376                const cardsPerPage = getCardsPerPage();
1377
1378                // Calculate the offset - recalculate width each time for responsiveness
1379                const cardWidth = cards[0].offsetWidth;
1380                const gap = window.innerWidth <= 768 ? 24 : 32; // Smaller gap on mobile
1381                const offset = -(currentIndex * cardsPerPage * (cardWidth + gap));
1382
1383                track.style.transform = `translateX(${offset}px)`;
1384
1385                // Update dots
1386                dots.forEach((dot, i) => {
1387                    dot.classList.toggle('active', i === currentIndex);
1388                });
1389            }
1390
1391            // Dot navigation
1392            dots.forEach((dot, index) => {
1393                dot.addEventListener('click', () => {
1394                    updateCarousel(index);
1395                });
1396            });
1397
1398            // Initialize carousel after a delay to ensure GSAP animations are done
1399            setTimeout(() => {
1400                updateCarousel(0);
1401            }, 200);
1402
1403            // Auto-scroll every 5 seconds
1404            setInterval(() => {
1405                const nextIndex = (currentIndex + 1) % totalPages;
1406                updateCarousel(nextIndex);
1407            }, 5000);
1408
1409            // Recalculate on window resize
1410            let resizeTimer;
1411            window.addEventListener('resize', () => {
1412                clearTimeout(resizeTimer);
1413                resizeTimer = setTimeout(() => {
1414                    updateCarousel(currentIndex);
1415                }, 250);
1416            });
1417        });
1418
1419        // Lottie Animation Hover Effects
1420        document.addEventListener('DOMContentLoaded', function() {
1421            const lottieIcons = document.querySelectorAll('.lottie-icon');
1422
1423            lottieIcons.forEach((icon) => {
1424                const parent = icon.closest('.approach-item');
1425
1426                if (parent) {
1427                    // Loop animations on load
1428                    icon.setLooping(true);
1429                    icon.play();
1430
1431                    // Play on hover
1432                    parent.addEventListener('mouseenter', () => {
1433                        icon.setSpeed(1.5);
1434                        icon.play();
1435                    });
1436
1437                    parent.addEventListener('mouseleave', () => {
1438                        icon.setSpeed(1);
1439                    });
1440                }
1441            });
1442        });
1443
1444        // Services Split Scroll with GSAP ScrollTrigger
1445        gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
1446
1447        // Pin the left panel while right panel scrolls (only on desktop)
1448        ScrollTrigger.matchMedia({
1449            // Desktop and larger tablets (> 1024px) - enable pinning
1450            "(min-width: 1025px)": function() {
1451                ScrollTrigger.create({
1452                    trigger: ".services-section",
1453                    pin: ".services-visual-panel",
1454                    start: "top top",
1455                    end: "bottom bottom",
1456                    pinSpacing: false
1457                });
1458            },
1459            // Mobile and tablets (≤ 1024px) - disable pinning, normal scroll
1460            "(max-width: 1024px)": function() {
1461                // No pinning on mobile/tablet - normal scroll behavior
1462            }
1463        });
1464
1465        // Background color transitions (disabled in dark mode)
1466        let bgTransitionToBlack, bgTransitionToWhite;
1467
1468        function initBackgroundTransitions() {
1469            // Only run background transitions if NOT in dark mode
1470            if (!document.body.classList.contains('dark-mode')) {
1471                // Ultra-smooth background color transition to black - similar to um.marketing
1472                bgTransitionToBlack = gsap.to("body", {
1473                    backgroundColor: "#0a0a0a",
1474                    scrollTrigger: {
1475                        trigger: ".services-section",
1476                        start: "top 80%",           // Start earlier for smoother transition
1477                        end: "top 20%",             // Longer transition duration
1478                        scrub: 0.5,                 // Slower, smoother scrub
1479                        ease: "none"
1480                    }
1481                });
1482
1483                // Ultra-smooth transition back to white
1484                bgTransitionToWhite = gsap.to("body", {
1485                    backgroundColor: "#ffffff",
1486                    scrollTrigger: {
1487                        trigger: ".concept-section",
1488                        start: "top 60%",           // Start earlier
1489                        end: "top 20%",             // Longer transition
1490                        scrub: 0.5,                 // Slower, smoother scrub
1491                        ease: "none",
1492                        immediateRender: false
1493                    }
1494                });
1495            }
1496        }
1497
1498        function killBackgroundTransitions() {
1499            if (bgTransitionToBlack) {
1500                bgTransitionToBlack.scrollTrigger.kill();
1501                bgTransitionToBlack.kill();
1502            }
1503            if (bgTransitionToWhite) {
1504                bgTransitionToWhite.scrollTrigger.kill();
1505                bgTransitionToWhite.kill();
1506            }
1507        }
1508
1509        // Initialize background transitions if not in dark mode
1510        initBackgroundTransitions();
1511
1512        // ============================================
1513        // TEXT REVEAL ANIMATIONS (um.marketing style)
1514        // ============================================
1515
1516        // Check if mobile - disable scroll animations on mobile for immediate visibility
1517        const isMobile = window.innerWidth <= 968;
1518
1519        // Animate all section titles
1520        if (!isMobile) {
1521            gsap.utils.toArray('.section-title').forEach(title => {
1522            gsap.from(title, {
1523                scrollTrigger: {
1524                    trigger: title,
1525                    start: "top 85%",
1526                    toggleActions: "play none none none"
1527                },
1528                opacity: 0,
1529                y: 40,
1530                duration: 1,
1531                ease: "power3.out",
1532                immediateRender: false
1533            });
1534        });
1535
1536        // Animate all section subtitles
1537        gsap.utils.toArray('.section-subtitle').forEach(subtitle => {
1538            gsap.from(subtitle, {
1539                scrollTrigger: {
1540                    trigger: subtitle,
1541                    start: "top 85%",
1542                    toggleActions: "play none none none"
1543                },
1544                opacity: 0,
1545                y: 30,
1546                duration: 0.8,
1547                ease: "power3.out",
1548                delay: 0.1,
1549                immediateRender: false
1550            });
1551        });
1552
1553        // Animate hero title with split effect
1554        const heroTitle = document.querySelector('.hero-title');
1555        if (heroTitle) {
1556            gsap.from(heroTitle, {
1557                opacity: 0,
1558                y: 50,
1559                duration: 1.2,
1560                ease: "power3.out",
1561                delay: 0.3
1562            });
1563        }
1564
1565        // Animate hero description
1566        const heroDesc = document.querySelector('.hero-description');
1567        if (heroDesc) {
1568            gsap.from(heroDesc, {
1569                opacity: 0,
1570                y: 30,
1571                duration: 1,
1572                ease: "power3.out",
1573                delay: 0.5
1574            });
1575        }
1576
1577        // Animate hero buttons
1578        const heroButtons = document.querySelectorAll('.hero-button');
1579        if (heroButtons.length) {
1580            gsap.from(heroButtons, {
1581                opacity: 0,
1582                y: 20,
1583                duration: 0.8,
1584                stagger: 0.15,
1585                ease: "power3.out",
1586                delay: 0.7
1587            });
1588        }
1589
1590        // Animate hero stats
1591        const heroStats = document.querySelectorAll('.stat');
1592        if (heroStats.length) {
1593            gsap.from(heroStats, {
1594                opacity: 0,
1595                y: 20,
1596                duration: 0.8,
1597                stagger: 0.1,
1598                ease: "power3.out",
1599                delay: 0.9
1600            });
1601        }
1602
1603        // Animate service items with stagger
1604        // Note: Services use pinned scroll, so they should only play once and stay visible
1605        gsap.utils.toArray('.service-content-item').forEach((item, index) => {
1606            gsap.from(item, {
1607                scrollTrigger: {
1608                    trigger: item,
1609                    start: "top 80%",
1610                    toggleActions: "play none none none"
1611                },
1612                opacity: 0,
1613                y: 50,
1614                duration: 1,
1615                ease: "power3.out"
1616            });
1617
1618            // Animate service features list items
1619            const features = item.querySelectorAll('.service-feature-item');
1620            if (features.length) {
1621                gsap.from(features, {
1622                    scrollTrigger: {
1623                        trigger: item,
1624                        start: "top 75%",
1625                        toggleActions: "play none none none"
1626                    },
1627                    x: -20,
1628                    duration: 0.6,
1629                    stagger: 0.08,
1630                    ease: "power2.out",
1631                    delay: 0.3
1632                });
1633            }
1634        });
1635
1636        // Animate concept items
1637        // Note: Staggered items play once to avoid animation conflicts
1638        const conceptItems = document.querySelectorAll('.concept-item');
1639        if (conceptItems.length) {
1640            gsap.from(conceptItems, {
1641                scrollTrigger: {
1642                    trigger: '.concept-grid',
1643                    start: "top 80%",
1644                    toggleActions: "play none none none"
1645                },
1646                opacity: 0,
1647                y: 40,
1648                duration: 0.8,
1649                stagger: 0.15,
1650                ease: "power3.out",
1651                immediateRender: false
1652            });
1653        }
1654
1655        // Animate concept text words
1656        const conceptText = document.getElementById('conceptText');
1657        if (conceptText) {
1658            gsap.from(conceptText, {
1659                scrollTrigger: {
1660                    trigger: conceptText,
1661                    start: "top 85%",
1662                    toggleActions: "play none none none"
1663                },
1664                opacity: 0,
1665                y: 30,
1666                duration: 1,
1667                ease: "power3.out",
1668                immediateRender: false
1669            });
1670        }
1671
1672        // Animate case study cards
1673        // Note: Staggered items play once to avoid animation conflicts
1674        const caseStudyCards = document.querySelectorAll('.case-study-card');
1675        if (caseStudyCards.length) {
1676            gsap.from(caseStudyCards, {
1677                scrollTrigger: {
1678                    trigger: '.case-studies-grid',
1679                    start: "top 80%",
1680                    toggleActions: "play none none none"
1681                },
1682                opacity: 0,
1683                y: 50,
1684                duration: 0.9,
1685                stagger: 0.2,
1686                ease: "power3.out",
1687                immediateRender: false
1688            });
1689        }
1690
1691        // Animate testimonial cards
1692        // Note: Staggered items play once to avoid animation conflicts
1693        const testimonialCards = document.querySelectorAll('.testimonial-card');
1694        if (testimonialCards.length) {
1695            gsap.from(testimonialCards, {
1696                scrollTrigger: {
1697                    trigger: '.testimonials-carousel',
1698                    start: "top 80%",
1699                    toggleActions: "play none none none"
1700                },
1701                opacity: 0,
1702                y: 40,
1703                duration: 0.8,
1704                stagger: 0.1,
1705                ease: "power3.out",
1706                clearProps: "all",
1707                immediateRender: false
1708            });
1709        }
1710
1711        // Animate approach items
1712        // Note: Staggered items play once to avoid animation conflicts
1713        const approachItems = document.querySelectorAll('.approach-item');
1714        if (approachItems.length) {
1715            gsap.from(approachItems, {
1716                scrollTrigger: {
1717                    trigger: '.approach-grid',
1718                    start: "top 80%",
1719                    toggleActions: "play none none none"
1720                },
1721                opacity: 0,
1722                y: 50,
1723                duration: 0.9,
1724                stagger: 0.15,
1725                ease: "power3.out",
1726                immediateRender: false
1727            });
1728        }
1729
1730        // Animate FAQ items
1731        // Note: Staggered items play once to avoid animation conflicts
1732        const faqItemsAnim = document.querySelectorAll('.faq-item');
1733        if (faqItemsAnim.length) {
1734            gsap.from(faqItemsAnim, {
1735                scrollTrigger: {
1736                    trigger: '.faq-content',
1737                    start: "top 80%",
1738                    toggleActions: "play none none none"
1739                },
1740                opacity: 0,
1741                y: 20,
1742                duration: 0.7,
1743                stagger: 0.1,
1744                ease: "power3.out",
1745                clearProps: "all",
1746                immediateRender: false
1747            });
1748        }
1749
1750        // Animate CTA section
1751        const ctaTitle = document.querySelector('.cta-title');
1752        if (ctaTitle) {
1753            gsap.from(ctaTitle, {
1754                scrollTrigger: {
1755                    trigger: '.cta-section',
1756                    start: "top 80%",
1757                    toggleActions: "play none none none"
1758                },
1759                opacity: 0,
1760                y: 40,
1761                duration: 1,
1762                ease: "power3.out",
1763                immediateRender: false
1764            });
1765        }
1766
1767        const ctaSubtitle = document.querySelector('.cta-subtitle');
1768        if (ctaSubtitle) {
1769            gsap.from(ctaSubtitle, {
1770                scrollTrigger: {
1771                    trigger: '.cta-section',
1772                    start: "top 80%",
1773                    toggleActions: "play none none none"
1774                },
1775                opacity: 0,
1776                y: 30,
1777                duration: 0.9,
1778                ease: "power3.out",
1779                delay: 0.2,
1780                immediateRender: false
1781            });
1782        }
1783
1784        // Note: CTA buttons use stagger, so play once to avoid animation conflicts
1785        const ctaButtons = document.querySelectorAll('.cta-button');
1786        if (ctaButtons.length) {
1787            gsap.from(ctaButtons, {
1788                scrollTrigger: {
1789                    trigger: '.cta-section',
1790                    start: "top 80%",
1791                    toggleActions: "play none none none"
1792                },
1793                opacity: 0,
1794                y: 20,
1795                duration: 0.8,
1796                stagger: 0.1,
1797                ease: "power3.out",
1798                delay: 0.4,
1799                immediateRender: false
1800            });
1801        }
1802
1803        // Animate footer columns with stagger
1804        // Note: Staggered items play once to avoid animation conflicts
1805        const footerCols = document.querySelectorAll('.footer-col');
1806        if (footerCols.length) {
1807            gsap.from(footerCols, {
1808                scrollTrigger: {
1809                    trigger: 'footer',
1810                    start: "top 85%",
1811                    toggleActions: "play none none none"
1812                },
1813                opacity: 0,
1814                y: 30,
1815                duration: 0.8,
1816                stagger: 0.1,
1817                ease: "power3.out",
1818                immediateRender: false
1819            });
1820        }
1821
1822        } // End if (!isMobile) - close animation block
1823
1824        // END TEXT REVEAL ANIMATIONS
1825        // ============================================
1826
1827        // Scroll to Top Button
1828        const scrollTopBtn = document.getElementById('scrollTop');
1829        if (scrollTopBtn) {
1830            window.addEventListener('scroll', function() {
1831                if (window.scrollY > 500) {
1832                    scrollTopBtn.style.display = 'flex';
1833                    setTimeout(() => scrollTopBtn.style.opacity = '1', 10);
1834                } else {
1835                    scrollTopBtn.style.opacity = '0';
1836                    setTimeout(() => scrollTopBtn.style.display = 'none', 300);
1837                }
1838            });
1839
1840            scrollTopBtn.addEventListener('click', function() {
1841                window.scrollTo({
1842                    top: 0,
1843                    behavior: 'smooth'
1844                });
1845            });
1846        }
1847
1848        // Navigation behavior is now handled by js/navigation.js
1849        // Theme toggle is now handled by js/main.js
1850
1851        // Performance tracking
1852        window.addEventListener('load', function() {
1853            // Log page load time for performance monitoring
1854            if (window.performance && window.performance.timing) {
1855                const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
1856                console.log('Page load time:', loadTime, 'ms');
1857            }
1858        });
1859    </script>
1859
1860
1861    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 1861-1862
1861
1862    <script async src="https://www.googletagmanager.com/gtag/js?id=
1862G-TCW0S14MXF
vendor: 16 bytes, lines 1862-1863
1862"></script>
1863    
1863<script>
1864      
vendor: 146 bytes, lines 1864-1868
1864window.dataLayer = window.dataLayer || [];
1865      function gtag(){dataLayer.push(arguments);}
1866      gtag('js', new Date());
1867
1868      gtag('config', '
1868G-TCW0S14MXF
vendor: 8 bytes, lines 1868-1869
1868');
1869    
1869</script>
1869
1870
1871    <!-- Alternative: Privacy-friendly analytics (Plausible, Fathom, etc.) -->
1872    <!-- 
1872<script defer data-domain="agratix.com" src="https://plausible.io/js/script.js"></script>
1872 -->
1873
1874    <!-- Navigation JavaScript -->
1875    
1875<script src="js/navigation.js"></script>
1875
1876
1877<!-- Noscript fallback for users without JavaScript -->
1878    <noscript>
1879        <div style="position: fixed; top: 0; left: 0; right: 0; background: #ff6b6b; color: white; padding: 1rem; text-align: center; z-index: 99999; font-family: system-ui, -apple-system, sans-serif;">
1880            For the best experience, please enable JavaScript in your browser.
1881        </div>
1882    </noscript>
1883    
1883<script src="js/lead-engine.js" defer></script>
1883
1884</body>
1885</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.