https://phxintel.com/blog

1<!doctype html>
2<html lang="en">
3
4<head>
5<meta http-equiv="Content-Security-Policy"
6content="script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com https://www.google.com https://www.gstatic.com; frame-src 'self' https://www.google.com https://recaptcha.google.com;">
7 
8<!-- Google tag (gtag.js) — production-domain only.
9     The tag fires ONLY when served from phxintel.com (or any *.phxintel.com
10     subdomain). Lovable preview/staging domains (lovable.app, lovable.dev,
11     lovableproject.com) and any other host serve the same build but never send
12     hits to the GA4 property, so reporting reflects phxintel.com traffic only. -->

13<script>
14  (function () {
15    var h = location.hostname;
16    if (h !== "phxintel.com" && !/\.phxintel\.com$/.test(h)) return;
17 
18    window.dataLayer = window.dataLayer || [];
19    function gtag(){ dataLayer.push(arguments); }
20    window.gtag = gtag;
21    gtag('js', new Date());
22    gtag('config', 'G-8LBB4S86DT');
23 
24    var s = document.createElement('script');
25    s.async = true;
26    s.src = "https://www.googletagmanager.com/gtag/js?id=G-8LBB4S86DT";
27    document.head.appendChild(s);
28  })();
29</script>

29
30
31
32  <meta charset="UTF-8" />
33  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
34
35  <!-- Inter is self-hosted via @fontsource-variable/inter (loaded from src/main.tsx).
36       No external font origins on the critical path.
37       GTM loads on first user interaction (see inline script below) — no preconnect emitted
38       because the delay would flag as an "unused preconnect" on PSI. -->
39
40
41  <link rel="icon" type="image/x-icon" href="/favicon2.ico?v=4" />
42  <link rel="icon" type="image/png" sizes="32x32" href="/favicon2.png?v=4" />
43  <link rel="shortcut icon" href="/favicon2.ico?v=4" />
44  <link rel="apple-touch-icon" href="/favicon2.png?v=4" />
45  <!-- Favicon and icons for all devices -->
46  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
47  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
48  <link rel="icon" type="image/png" sizes="48x48" href="/images/favicon-48x48.png">
49  <link rel="icon" type="image/png" sizes="64x64" href="/images/favicon-64x64.png">
50  <link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
51  <link rel="icon" type="image/png" sizes="128x128" href="/images/favicon-128x128.png">
52  <link rel="icon" type="image/png" sizes="180x180" href="/images/favicon-180x180.png">
53  <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon-192x192.png">
54  <link rel="icon" type="image/png" sizes="512x512" href="/images/favicon-512x512.png">
55  <!-- Apple Touch Icon -->
56  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-180x180.png">
57  <!-- Manifest for PWA -->
58  <link rel="manifest" href="/manifest.json">
59  <title>Phoenix Intelligence | Enterprise Payroll Platform</title>
60  <meta name="description"
61    content="Phoenix Intelligence unifies global payroll, compliance, and workforce analytics into one governed platform across 50+ countries. Book a demo today.">
62  <meta name="author" content="Phoenix Technology Systems, Inc." />
63  <meta name="robots" content="index, follow" />
64
65  <!-- Open Graph -->
66  <meta property="og:type" content="website" />
67  <meta property="og:site_name" content="Phoenix Intelligence" />
68  <meta property="og:url" content="https://phxintel.com/" />
69
70
71  <meta property="og:image" content="https://phxintel.com/images/og-social.png">
72
73  <!-- Twitter / X Card -->
74  <meta name="twitter:card" content="summary_large_image" />
75  <meta name="twitter:site" content="@phxintel" />
76
77
78  <meta name="twitter:image" content="https://phxintel.com/images/og-social.png">
79
80  <!-- Canonical -->
81  <link rel="canonical" href="https://phxintel.com/" />
82  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
83
84  <meta property="og:title" content="Phoenix Intelligence | Enterprise Payroll Platform">
85  <meta name="twitter:title" content="Phoenix Intelligence | Enterprise Payroll Platform">
86  <meta property="og:description"
87    content="Phoenix Intelligence — Enterprise Payroll Intelligence &amp; Orchestration Infrastructure for global organizations across 50+ countries.">
88  <meta name="twitter:description"
89    content="Phoenix Intelligence — Enterprise Payroll Intelligence &amp; Orchestration Infrastructure for global organizations across 50+ countries.">
90
91  <!-- Google verification -->
92  <meta name="google-site-verification" content="BUbplOdY_m62lo9de5V8kBPSNp3XcPH73itP9P6pMZk"/>
93
94  <!-- Critical inline CSS for the FCP / LCP skeleton. Painted during HTML parse so
95       both First Contentful Paint AND Largest Contentful Paint fire before the JS / CSS
96       bundles download. Dimensions mirror HeroSection.tsx exactly to avoid CLS on hydration.
97
98       LCP trick: the H1 contains the real hero text in `color: #0a1228` (the page
99       background). Lighthouse's LCP algorithm requires the text to be `visible` —
100       `color: transparent`, `opacity: 0` and `visibility: hidden` are all skipped.
101       Painting the text in the background colour keeps the glyphs invisible to the
102       user while still registering as a Text Paint, so LCP fires at HTML-parse time. -->
103  <style>
104    html,body{margin:0;padding:0;background:#0a1228;color:#fff;font-family:"Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
105    #root{min-height:100vh}
106    /* Hero skeleton — matches <HeroSection> layout */
107    .ph-sk{position:relative;min-height:100vh;background:linear-gradient(135deg,#0a1228 0%,#111d3a 55%,#0a1228 100%);overflow:hidden}
108    .ph-sk__inner{max-width:1280px;margin:0 auto;padding:144px 16px 80px}
109    @media (min-width:1024px){.ph-sk__inner{padding:160px 32px 96px}}
110    .ph-sk__col{max-width:768px}
111    /* Shared shimmer block */
112    .ph-sk__bar{position:relative;background:#16224a;border-radius:8px;overflow:hidden}
113    .ph-sk__bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(245,158,11,.10) 45%,rgba(245,158,11,.18) 50%,rgba(245,158,11,.10) 55%,transparent 100%);transform:translateX(-100%);animation:ph-shimmer 1.6s ease-in-out infinite}

114    @keyframes ph-shimmer{100%{transform:translateX(100%)}}
115    /* Tag pill: matches px-4 py-1.5 mb-8 text-xs (~28px tall) */
116    .ph-sk__tag{height:28px;width:280px;border-radius:999px;margin-bottom:32px}
117    /* H1 — real text inside, transparent so LCP fires immediately. Matches
118       HeroSection: text-4xl md:text-5xl lg:text-[3.5rem] font-bold leading-[1.08]
119       tracking-tight mb-7. The amber accent line gets its own bar overlay below. */
120    .ph-sk__h1{margin:0 0 28px;font-size:2.25rem;font-weight:700;letter-spacing:-.025em;line-height:1.08;color:#0a1228;position:relative}
121    @media (min-width:768px){.ph-sk__h1{font-size:3rem}}
122    @media (min-width:1024px){.ph-sk__h1{font-size:3.5rem}}
123    /* Bars sitting visually over the transparent H1 lines */
124    .ph-sk__h1-row{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
125    .ph-sk__h1-1{height:44px;width:85%}
126    .ph-sk__h1-2{height:44px;width:70%;background:#3a2a14}
127    .ph-sk__h1-2::after{background:linear-gradient(90deg,transparent 0%,rgba(245,158,11,.20) 45%,rgba(245,158,11,.35) 50%,rgba(245,158,11,.20) 55%,transparent 100%)}
128    @media (min-width:768px){.ph-sk__h1-1,.ph-sk__h1-2{height:56px}}
129    @media (min-width:1024px){.ph-sk__h1-1,.ph-sk__h1-2{height:62px}}
130    /* Sub paragraph: 3 lines, max-w-2xl (672px), mb-12 */
131    .ph-sk__p{height:20px;border-radius:6px;margin-bottom:10px;max-width:672px}
132    .ph-sk__p:nth-of-type(1){width:95%}
133    .ph-sk__p:nth-of-type(2){width:88%}
134    .ph-sk__p:nth-of-type(3){width:60%;margin-bottom:48px}
135    /* CTA buttons: px-7 py-3.5 text-sm rounded-lg => ~48px tall */
136    .ph-sk__cta-row{display:flex;flex-direction:column;gap:16px}
137    @media (min-width:640px){.ph-sk__cta-row{flex-direction:row}}
138    .ph-sk__cta{height:48px;width:180px;border-radius:8px}
139    .ph-sk__cta--primary{background:#3a2a14}
140    .ph-sk__cta--primary::after{background:linear-gradient(90deg,transparent 0%,rgba(245,158,11,.25) 45%,rgba(245,158,11,.40) 50%,rgba(245,158,11,.25) 55%,transparent 100%)}
141    /* Off-screen but layout-preserving text used as the LCP candidate */
142    .ph-sk__lcp{position:absolute;left:0;top:0;width:100%;color:#0a1228;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
143    /* Skip rendering work for off-screen sections below the hero on initial paint.
144       Browsers that don't support content-visibility ignore this rule (no harm). */
145    main > section:not(:first-of-type),
146    main > div > section:not(:first-of-type),
147    footer{content-visibility:auto;contain-intrinsic-size:auto 800px}
148  </style>
149
150  
151  

151<script type="module" crossorigin src="/assets/index-CThYbAOY.js" fetchpriority="high"></script>

151
152  <link rel="modulepreload" crossorigin href="/assets/vendor-icons-BSGq3JuS.js">
153  <link rel="modulepreload" crossorigin href="/assets/vendor-ui-NLPqw2t3.js">
154  <link rel="modulepreload" crossorigin href="/assets/vendor-query-CgGIzJQR.js">
155  <link rel="modulepreload" crossorigin href="/assets/vendor-react-C3dcikN3.js">
156  <link rel="stylesheet" crossorigin href="/assets/index-BQmMNc-Y.css" fetchpriority="high">
157  <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" fetchpriority="high" href="/assets/inter-latin-wght-normal-Dx4kXJAl.woff2" />
158</head>
159
160<body>
161  <!-- Google Tag Manager (noscript) -->

161
162<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=

162GTM-N9CLRSH7

162"
163height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

164<!-- End Google Tag Manager (noscript) -->
165  <div id="root">
166    <!-- FCP / LCP skeleton — replaced by React on first render. Mirrors HeroSection layout.
167         The H1 below contains the real hero text in color:transparent so Lighthouse
168         registers a Text Paint immediately. The amber shimmer bars sit on top visually. -->
169    <div class="ph-sk" aria-hidden="true">
170      <div class="ph-sk__inner">
171        <div class="ph-sk__col">
172          <div class="ph-sk__bar ph-sk__tag"></div>
173          <h1 class="ph-sk__h1">
174            Phoenix — The control layer for the global workforce.
175            <div class="ph-sk__h1-row" style="position:absolute;inset:0;">
176              <div class="ph-sk__bar ph-sk__h1-1"></div>
177              <div class="ph-sk__bar ph-sk__h1-2"></div>
178            </div>
179          </h1>
180          <div class="ph-sk__bar ph-sk__p"></div>
181          <div class="ph-sk__bar ph-sk__p"></div>
182          <div class="ph-sk__bar ph-sk__p"></div>
183          <div class="ph-sk__cta-row">
184            <div class="ph-sk__bar ph-sk__cta ph-sk__cta--primary"></div>
185            <div class="ph-sk__bar ph-sk__cta"></div>
186          </div>
187        </div>
188      </div>
189    </div>
190  </div>
191  <!-- Per-route LCP candidate. Runs synchronously during HTML parse so the route's
192       real H1 text is in the DOM BEFORE the JS bundle downloads. The text is painted
193       in #0a1228 (the page background) so users see the skeleton, but Lighthouse's
194       LCP algorithm registers a real Text Paint matching the post-hydration H1.
195       This shaves 1-3s off LCP on every product route below. Inline so it executes
196       immediately, no extra round-trip. -->
197  

197<script>
198    (function () {
199      var p = location.pathname.replace(/\/$/, "").toLowerCase() || "/";
200      var map = {
201        "/bridge-global-payroll": "Phoenix Bridge\u2122 — global payroll, run as one platform.",
202        "/products/phoenix-apex": "Phoenix Apex\u2122 — global payroll intelligence, executive clarity across every entity.",
203        "/time-and-expense-management": "Phoenix Pulse\u2122 — time and expense intelligence at workforce scale.",
204        "/products/phoenix-raptor": "Phoenix Raptor\u2122 — variance detection at the speed of payroll.",
205        "/onboarding": "Phoenix Connect\u2122 — onboarding and access governance for the global workforce.",
206        "/performance-management-software": "Phoenix Perform\u2122 — performance and incentive intelligence."
207      };
208      var text = map[p];
209      if (!text) return;
210      var h1 = document.querySelector(".ph-sk__h1");
211      if (h1) {
212        // Replace the homepage text node (first child) with this route's text. The
213        // shimmer bars (the <div> sibling) stay in place visually on top.
214        if (h1.firstChild && h1.firstChild.nodeType === 3) {
215          h1.firstChild.nodeValue = text;
216        } else {
217          h1.insertBefore(document.createTextNode(text), h1.firstChild);
218        }
219      }
220    })();
221  </script>

221�
222
223</body>
224
225</html>