PageSourceSearch

https://bablic.com/about-us

html bablic.com collected 2026-10-02 03:37:10 UTC 97,525 bytes, 1,474 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>About Bablic | Backed by TransPerfect</title><meta name="description" content="Bablic is the self-serve website translation platform backed by TransPerfect. Thirty years of localization expertise, packaged for teams that ship."><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- Canonical --><link rel="canonical" href="https://bablic.com/about-us"><!-- Hreflang link set (LOCALES + x-default; EN-only until fan-out) --><link rel="alternate" hreflang="en" href="https://bablic.com/about-us"><link rel="alternate" hreflang="x-default" href="https://bablic.com/about-us"><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:title" content="About Bablic | Backed by TransPerfect"><meta property="og:description" content="Bablic is the self-serve website translation platform backed by TransPerfect. Thirty years of localization expertise, packaged for teams that ship."><meta property="og:url" content="https://bablic.com/about-us"><meta property="og:image" content="https://bablic.com/og-default.png"><meta property="og:site_name" content="Bablic"><meta property="og:locale" content="en"><!-- Twitter card --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="About Bablic | Backed by TransPerfect"><meta name="twitter:description" content="Bablic is the self-serve website translation platform backed by TransPerfect. Thirty years of localization expertise, packaged for teams that ship."><meta name="twitter:image" content="https://bablic.com/og-default.png"><!-- JSON-LD blob(s) -->
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://bablic.com/#organization","name":"Bablic","url":"https://bablic.com/","logo":"https://bablic.com/images/brand/bablic-logo.svg","foundingDate":"2012","description":"Bablic is TransPerfect's website translation and localization platform for SMBs. Part of the TransPerfect group.","sameAs":["https://www.linkedin.com/company/bablic","https://x.com/bablicapp","https://www.instagram.com/bablic.app/","https://www.youtube.com/@Bablicapp"],"parentOrganization":{"@type":"Organization","@id":"https://www.transperfect.com/#organization","name":"TransPerfect","url":"https://www.transperfect.com/","sameAs":["https://en.wikipedia.org/wiki/TransPerfect","https://www.wikidata.org/wiki/Q7833640"]}},{"@type":"WebSite","@id":"https://bablic.com/#website","name":"Bablic","url":"https://bablic.com/","publisher":{"@id":"https://bablic.com/#organization"},"inLanguage":"en"}]}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"AboutPage","@id":"https://bablic.com/about-us#webpage","url":"https://bablic.com/about-us","name":"About Bablic","isPartOf":{"@id":"https://bablic.com/#website"},"about":{"@id":"https://bablic.com/#organization"},"mainEntity":{"@id":"https://bablic.com/#organization"},"publisher":{"@id":"https://bablic.com/#organization"},"description":"Bablic is TransPerfect's website translation and localization platform for SMBs. Part of the TransPerfect group."}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://bablic.com/about-us#john-pakaluk","name":"John Pakaluk","jobTitle":"Head of Product","worksFor":{"@id":"https://bablic.com/#organization"},"image":"https://bablic.com/images/transitional/about-us/team/john-pakaluk.webp"}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://bablic.com/about-us#dan-marlett","name":"Dan Marlett","jobTitle":"Head of Engineering","worksFor":{"@id":"https://bablic.com/#organization"},"image":"https://bablic.com/images/transitional/about-us/team/dan-marlett.png"}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://bablic.com/about-us#josh-phelps","name":"Josh Phelps","jobTitle":"Head of Go-to-Market","worksFor":{"@id":"https://bablic.com/#organization"},"image":"https://bablic.com/images/transitional/about-us/team/josh-phelps.webp"}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://bablic.com/about-us#lonnie-dahm","name":"Lonnie Dahm","jobTitle":"Director of Client Services","worksFor":{"@id":"https://bablic.com/#organization"},"image":"https://bablic.com/images/transitional/about-us/team/lonnie-dahm.webp"}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","@id":"https://bablic.com/about-us#pete-mcnamara","name":"Pete McNamara","jobTitle":"Senior Director of Customer Success","worksFor":{"@id":"https://bablic.com/#organization"},"image":"https://bablic.com/images/transitional/about-us/team/pete-mcnamara.webp"}</script>
1 <style id="inlined-fonts">/* Bablic Cool Neutral — inlined webfonts (Geist, Geist Mono, Instrument Serif).
2   Base64 woff2, latin + latin-ext subsets. Self-contained: no network needed. */
3/* @font-face src rewritten to shared self-hosted fonts (public/fonts/transitional/, all OFL)
4       by scripts/extract-transitional.ts — embedded data URIs dropped. Do not edit by hand;
5       this file is regenerated from design-sources/transitional/raw/. */
6    @font-face {
7      font-family: 'Geist';
8      font-style: normal;
9      font-weight: 400;
10      font-display: swap;
11      src: url('/fonts/transitional/geist-400.woff2') format('woff2');
12    }
13
14@font-face {
15      font-family: 'Geist';
16      font-style: normal;
17      font-weight: 500;
18      font-display: swap;
19      src: url('/fonts/transitional/geist-500.woff2') format('woff2');
20    }
21
22@font-face {
23      font-family: 'Geist';
24      font-style: normal;
25      font-weight: 600;
26      font-display: swap;
27      src: url('/fonts/transitional/geist-600.woff2') format('woff2');
28    }
29
30@font-face {
31      font-family: 'Geist';
32      font-style: normal;
33      font-weight: 700;
34      font-display: swap;
35      src: url('/fonts/transitional/geist-700.woff2') format('woff2');
36    }
37
38@font-face {
39      font-family: 'Geist Mono';
40      font-style: normal;
41      font-weight: 400;
42      font-display: swap;
43      src: url('/fonts/transitional/geist-mono-400.woff2') format('woff2');
44    }
45
46@font-face {
47      font-family: 'Geist Mono';
48      font-style: normal;
49      font-weight: 500;
50      font-display: swap;
51      src: url('/fonts/transitional/geist-mono-500.woff2') format('woff2');
52    }
53
54@font-face {
55      font-family: 'Instrument Serif';
56      font-style: italic;
57      font-weight: 400;
58      font-display: swap;
59      src: url('/fonts/transitional/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
60      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
61    }
62@font-face {
63      font-family: 'Instrument Serif';
64      font-style: italic;
65      font-weight: 400;
66      font-display: swap;
67      src: url('/fonts/transitional/instrument-serif-400-italic-latin.woff2') format('woff2');
68      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
69    }
70@font-face {
71      font-family: 'Instrument Serif';
72      font-style: normal;
73      font-weight: 400;
74      font-display: swap;
75      src: url('/fonts/transitional/instrument-serif-400-normal-latin-ext.woff2') format('woff2');
76      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
77    }
78@font-face {
79      font-family: 'Instrument Serif';
80      font-style: normal;
81      font-weight: 400;
82      font-display: swap;
83      src: url('/fonts/transitional/instrument-serif-400-normal-latin.woff2') format('woff2');
84      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
85    }
86</style> <style>/* ========================================================================
87     PALETTE & DESIGN TOKENS - identical to the four approved exports
88     ======================================================================== */
89  :root {
90    /* Brand identifiers */
91    --color-brand-blue:      #1366B2;
92    --color-brand-blue-deep: #0E4E8A;
93
94    /* Accent - coral (NOT Twilight magenta) */
95    --color-coral:        #BF1F4B;
96    --color-coral-deep:   #C42E58;
97    --color-coral-soft:   rgba(224, 65, 108, 0.07);
98    --color-coral-line:   rgba(224, 65, 108, 0.32);
99    --color-coral-bright: #FF6E92;
100
101    /* Ink - the one contained dark moment */
102    --color-ink:          #0D2C4C;
103    --color-ink-elev:     #12395F;
104    --color-ink-line:     rgba(150, 178, 214, 0.16);
105    --color-on-ink:       #EEF3FA;
106    --color-on-ink-muted: #97AAC8;
107
108    /* Cool-neutral surfaces */
109    --color-canvas:       #F6F8FC;
110    --color-canvas-alt:   #E7ECF4;
111    --color-canvas-deep:  #DEE5F0;
112    --color-card:         #FFFFFF;
113    --color-card-warm:    #FFFDFB;
114    --color-card-chrome:  #E6EBF3;
115
116    /* Foreground */
117    --color-text:        #1C1C1E;
118    --color-text-muted:  #5A5A5F;
119
120    /* Hairlines */
121    --color-border-canvas: rgba(28, 42, 66, 0.08);
122    --color-border-card:   rgba(28, 42, 66, 0.11);
123
124    /* Radii */
125    --radius-card:    14px;
126    --radius-control: 8px;
127    --radius-pill:    9999px;
128
129    /* Shadows */
130    --shadow-card-lift:  0 20px 40px -30px rgba(22, 32, 56, 0.12);
131    --shadow-storefront: 0 34px 70px -28px rgba(22, 32, 56, 0.24);
132    --shadow-cta:        0 40px 80px -36px rgba(224, 65, 108, 0.24);
133
134    /* Type */
135    --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
136    --font-serif: 'Instrument Serif', 'Times New Roman', serif;
137    --font-mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
138
139    /* Rhythm */
140    --section-pad: 96px;
141    --content:     1280px;
142  }
143
144  /* ========================================================================
145     BASE
146     ======================================================================== */
147  *, *::before, *::after { box-sizing: border-box; }
148  html { scroll-behavior: smooth; }
149  body {
150    margin: 0;
151    background: var(--color-canvas);
152    color: var(--color-text);
153    font-family: var(--font-sans);
154    font-size: 16px;
155    line-height: 1.5;
156    -webkit-font-smoothing: antialiased;
157    -moz-osx-font-smoothing: grayscale;
158  }
159  h1, h2, h3, h4, p { margin: 0; }
160  a { color: inherit; text-decoration: none; }
161  button { font-family: inherit; cursor: pointer; }
162  img, svg { display: block; }
163
164  .wrap { max-width: var(--content); margin: 0 auto; padding: 0 64px; }
165
166  /* Visible focus (brief C8) */
167  a:focus-visible,
168  button:focus-visible {
169    outline: 2px solid var(--color-brand-blue);
170    outline-offset: 3px;
171    border-radius: 4px;
172  }
173
174  /* ---- Shared type ---- */
175  .eyebrow {
176    font-family: var(--font-mono);
177    font-size: 11.5px;
178    font-weight: 500;
179    letter-spacing: 0.14em;
180    text-transform: uppercase;
181    color: var(--color-coral);
182  }
183  .wink {
184    font-family: var(--font-serif);
185    font-style: italic;
186    font-weight: 400;
187    color: var(--color-coral);
188    letter-spacing: 0;
189  }
190  .display, .h-sec {
191    font-weight: 600;
192    letter-spacing: -0.02em;
193    line-height: 1.08;
194    color: var(--color-text);
195  }
196  .display { font-size: 54px; line-height: 1.06; }
197  .h-sec   { font-size: 40px; }
198  .lead    { font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
199
200  /* ---- Buttons ---- */
201  .btn {
202    display: inline-flex; align-items: center; gap: 7px;
203    border: 1px solid transparent;
204    border-radius: var(--radius-control);
205    font-size: 14.5px; font-weight: 500;
206    padding: 13px 22px;
207    transition: background .16s ease, color .16s ease, border-color .16s ease;
208    white-space: nowrap;
209  }
210  .btn--primary { background: var(--color-brand-blue); color: #fff; }
211  .btn--primary:hover { background: var(--color-brand-blue-deep); }
212  .btn--ghost { background: transparent; color: var(--color-text); border-color: rgba(28, 28, 30, 0.18); }
213  .btn--ghost:hover { border-color: rgba(28, 28, 30, 0.42); }
214  .btn--sm { padding: 10px 16px; font-size: 13.5px; }
215  .btn--lg { padding: 15px 28px; font-size: 15px; }
216
217  /* ========================================================================
218     CHROME - announcementBand (reproduced from the homepage export)
219     ======================================================================== */
220  .announce {
221    background: var(--color-canvas-alt);
222    border-bottom: 1px solid var(--color-border-canvas);
223    font-size: 13.5px;
224  }
225  .announce__inner {
226    max-width: var(--content); margin: 0 auto;
227    padding: 11px 64px;
228    display: flex; align-items: center; justify-content: center; gap: 12px;
229    position: relative;
230  }
231  .announce__chip {
232    display: inline-flex; align-items: center;
233    padding: 2px 9px; border-radius: var(--radius-pill);
234    background: var(--color-coral-soft); color: var(--color-coral-deep);
235    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
236    border: 1px solid var(--color-coral-line);
237  }
238  .announce__text { color: var(--color-text-muted); }
239  .announce__link { font-weight: 500; color: var(--color-text); border-bottom: 1px solid rgba(28,28,30,0.32); padding-bottom: 1px; }
240  .announce__link:hover { color: var(--color-brand-blue); border-color: var(--color-brand-blue); }
241  .announce__close {
242    position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
243    background: none; border: none; color: var(--color-text-muted);
244    font-size: 18px; line-height: 1; padding: 4px;
245  }
246  .announce__close:hover { color: var(--color-text); }
247
248  /* ========================================================================
249     CHROME - nav
250     ======================================================================== */
251  .nav {
252    position: sticky; top: 0; z-index: 50;
253    background: rgba(246, 248, 252, 0.82);
254    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
255    border-bottom: 1px solid var(--color-border-canvas);
256  }
257  .nav__inner {
258    max-width: var(--content); margin: 0 auto;
259    padding: 16px 64px;
260    display: flex; align-items: center; justify-content: space-between;
261  }
262  .nav__left { display: flex; align-items: center; gap: 38px; }
263  .wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--color-brand-blue); }
264  .wordmark span { color: var(--color-coral); }
265  .nav__links { display: flex; gap: 26px; font-size: 14px; color: var(--color-text-muted); }
266  .nav__links a:hover { color: var(--color-text); }
267  .nav__right { display: flex; align-items: center; gap: 18px; }
268  .nav__login { font-size: 14px; color: var(--color-text-muted); }
269  .nav__login:hover { color: var(--color-text); }
270
271  /* ========================================================================
272     Block 2 - hero
273     ======================================================================== */
274  .hero { position: relative; overflow: hidden; }
275  .hero__glow-cool, .hero__glow-coral, .hero__grid { position: absolute; pointer-events: none; }
276  .hero__glow-cool {
277    width: 760px; height: 760px; right: -120px; top: -260px;
278    background: radial-gradient(closest-side, rgba(120,176,224,0.20), transparent 70%);
279    filter: blur(8px);
280  }
281  .hero__glow-coral {
282    width: 620px; height: 620px;
282 left: -180px; bottom: -320px;
283    background: radial-gradient(closest-side, rgba(224,65,108,0.13), transparent 70%);
284    filter: blur(8px);
285  }
286  .hero__grid {
287    inset: 0;
288    background-image:
289      repeating-linear-gradient(0deg, transparent, transparent 55px, rgba(28,28,30,0.045) 55px, rgba(28,28,30,0.045) 56px),
290      repeating-linear-gradient(90deg, transparent, transparent 55px, rgba(28,28,30,0.045) 55px, rgba(28,28,30,0.045) 56px);
291    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 12%, #000 18%, transparent 72%);
292    mask-image: radial-gradient(ellipse 80% 70% at 85% 12%, #000 18%, transparent 72%);
293  }
294  .hero__inner {
295    position: relative; z-index: 2;
296    max-width: 1440px; margin: 0 auto;
297    padding: 72px 64px 104px;
298    display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center;
299  }
300  .hero__inner > div { min-width: 0; }
301  .hero__h1 { margin: 18px 0 0; max-width: 22ch; }
302  .hero__sub { margin: 26px 0 30px; max-width: 32em; }
303  .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
304  .hero__caption { margin-top: 16px; font-size: 13px; color: var(--color-text-muted); }
305
306  /* ---- Hero vignette: the layered stack (static; brief block 2) ----
307     Three offset cards, back to front: TransPerfect plate at the base,
308     Bablic plate, and the faux-browser mini-page in front. Same polish
309     register as the homepage storefront card: hairline borders, soft
310     elevation, brand-blue active chip on the top layer. No SVG, no JS. */
311  .stack { position: relative; width: 100%; max-width: 560px; margin-left: auto; }
312  .stack__img { display: block; width: 100%; max-width: 620px; height: auto; margin-left: auto; }
313  .layer--site {
314    position: relative; z-index: 3; width: 88%;
315    background: var(--color-card);
316    border: 1px solid var(--color-border-card);
317    border-radius: 16px;
318    overflow: hidden;
319    box-shadow: var(--shadow-storefront);
320  }
321  .site__chrome {
322    display: flex; align-items: center; gap: 8px;
323    padding: 11px 14px;
324    background: var(--color-card-chrome);
325    border-bottom: 1px solid var(--color-border-card);
326  }
327  .site__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); opacity: .38; }
328  .site__tab {
329    flex: 1; margin-left: 8px; height: 24px; border-radius: 6px;
330    background: var(--color-card); border: 1px solid var(--color-border-card);
331    display: flex; align-items: center; padding: 0 11px;
332    font-size: 11.5px; color: var(--color-text-muted);
333  }
334  .site__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
335  .site__chips { display: flex; gap: 5px; }
336  .loc-chip {
337    padding: 4px 11px; border-radius: 6px;
338    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
339    color: var(--color-text-muted);
340    background: var(--color-card); border: 1px solid var(--color-border-card);
341  }
342  .loc-chip.is-active { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #fff; font-weight: 600; }
343  .site__h { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; }
344  .site__src { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
345  .site__srctag {
346    flex-shrink: 0; transform: translateY(-1px);
347    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
348    padding: 1px 6px; border-radius: 4px;
349    border: 1px solid var(--color-border-canvas); color: var(--color-text-muted);
350  }
351  .site__wells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
352  .site__wells div { height: 40px; border-radius: 8px; background: var(--color-card-chrome); border: 1px solid var(--color-border-canvas); }
353  .layer--plate {
354    position: relative;
355    display: flex; align-items: baseline; gap: 14px;
356    width: 88%;
357    background: var(--color-card);
358    border: 1px solid var(--color-border-card);
359    border-radius: var(--radius-card);
360    padding: 30px 22px 17px;
361  }
362  .layer--bablic { z-index: 2; margin: -16px 0 0 6%;
362 border-color: rgba(19,102,178,0.30); box-shadow: var(--shadow-card-lift); }
363  .layer--tp { z-index: 1; margin: -16px 0 0 12%; }
364  .layer__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
365  .layer__sub { margin-left: auto; text-align: right; font-size: 12px; line-height: 1.45; color: var(--color-text-muted); }
366
367  /* ========================================================================
368     Sections
369     ======================================================================== */
370  .section { padding: var(--section-pad) 0; }
371  .section--alt { background: var(--color-canvas-alt); }
372  .sec-head { max-width: 760px; margin-bottom: 52px; }
373  .sec-head .h-sec { margin: 14px 0 14px; }
374  .sec-head--tight { margin-bottom: 40px; }
375
376  .story-head { display: grid; grid-template-columns: 1fr 320px; gap: 72px; align-items: start; margin-bottom: 52px; }
377  .story-head .sec-head { margin-bottom: 0; }
378  .story-head__mark { justify-self: start; width: 220px; height: auto; }
379
380  .prose { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
381  .prose p { font-size: 17px; line-height: 1.7; color: var(--color-text-muted); text-wrap: pretty; }
382
383  /* ========================================================================
384     Block 3 - what bablic is (heading | prose split)
385     ======================================================================== */
386  .about-split { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
387  .about-split .sec-head { margin-bottom: 0; }
388  .about-split .sec-head .h-sec { margin-bottom: 0; }
389
390  /* ========================================================================
391     Block 4 - backed by transperfect (prose + timeline tiles)
392     ======================================================================== */
393  .backing { display: grid; grid-template-columns: 1fr 320px; gap: 72px; align-items: start; }
394
395  /* ========================================================================
396     Block 5 - how we operate (2x2 commitment cards)
397     ======================================================================== */
398  .ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
399  .feature {
400    background: var(--color-card); border: 1px solid var(--color-border-card);
401    border-radius: var(--radius-card); padding: 30px 28px;
402    box-shadow: var(--shadow-card-lift);
403  }
404  .feature__title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; }
405  .feature__title .wink { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--color-coral); }
406  .feature__body { font-size: 15px; color: var(--color-text-muted); line-height: 1.62; text-wrap: pretty; }
407
408  /* ========================================================================
409     Block 6 - our team
410     ======================================================================== */
411  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
412  .team-member {
413    display: flex; flex-direction: column; align-items: center; text-align: center;
414    background: var(--color-card);
415    border: 1px solid var(--color-border-card);
416    border-radius: var(--radius-card);
417    padding: 40px 36px;
418    box-shadow: var(--shadow-card-lift);
419  }
420  .team-member__avatar {
421    width: 140px; height: 140px; border-radius: 50%;
422    background: var(--color-card-chrome);
423    box-shadow: 6px 8px 18px rgba(28, 42, 66, 0.22);
424    display: flex; align-items: center; justify-content: center;
425    color: var(--color-text-muted);
426    margin-bottom: 22px;
427    overflow: hidden;
428  }
429  .team-member__avatar--no-border { border: none; }
430  .team-member__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
431  .team-member__avatar-img--zoom { transform: scale(1.18); }
432  .team-member__avatar--placeholder { border-style: dashed; border-color: var(--color-border-card); background: var(--color-canvas-alt); }
433  .team-member__initials { font-family: var(--font-mono); font-size: 30px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-text-muted); }
434  .team-member__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
435  .team-member__bio { align-self: stretch; text-align: left; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
436  /* Bruno mascot card — subtle paper-blue tint from Transitional canvas */
437  .team-member--bruno {
438    background: var(--color-canvas-alt); /* #E7ECF4 cool paper blue */
439    grid-column: 1 / -1; /* full row: spans all team-grid columns at every breakpoint */
440  }
441  /* Full-row layout: portrait on the left, name + bio on the right. The
442     avatar spans both text rows; the text column is capped at a readable
443     measure. Collapses back to the stacked, centered card on phones. */
444  .team-member--bruno {
445    display: grid;
446    grid-template-columns: auto minmax(0, 720px);
447    grid-template-rows: auto auto;
448    justify-content: center;
449    align-items: center;
450    column-gap: 56px;
451    text-align: left;
452  }
453  .team-member--bruno .team-member__avatar { grid-row: 1 / 3; width: 184px; height: 184px; margin-bottom: 0; }
454  .team-member--bruno .team-member__name { align-self: end; }
455  .team-member--bruno .team-member__bio { align-self: start; }
456  /* Bruno's artwork deliberately breaks its frame: the ear, thumb and whiskers
457     sit outside the blue circle, so this avatar must not clip them. The circle
458     is baked into the image at 76.4% of its width, so a 183px image renders a
459     140px circle — matching the photographic avatars beside it. */
460  .team-member--bruno .team-member__avatar {
461    overflow: visible;
462    background: none;
463  }
464  .team-member--bruno .team-member__avatar img {
465    width: 241px; height: 241px; max-width: none; object-fit: contain; /* 76.4% circle → 184px */
466  }
467
468  /* ========================================================================
469     Company facts (exactly four tiles; brief Q3) - merged into Block 4
470     ======================================================================== */
471  .facts-grid { display: flex; flex-direction: column; gap: 10px; position: relative; }
472  .facts-grid::before {
473    content: ''; position: absolute; top: 36px; bottom: 36px; left: 4px;
474    width: 2px; background: var(--color-border-card);
475  }
476  .fact-row { display: flex; align-items: center; gap: 14px; }
477  .fact-dot {
478    flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
479    background: var(--color-coral); box-shadow: 0 0 0 3px var(--color-canvas);
480    position: relative; z-index: 1;
481  }
482  .fact {
483    flex: 1; min-width: 0;
484    display: flex; flex-direction: column;
485    background: var(--color-card);
486    border: 1px solid var(--color-border-card);
487    border-radius: var(--radius-card);
488    padding: 10px 16px 10px;
489    box-shadow: var(--shadow-card-lift);
490  }
491  .fact__label {
492    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
493    letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3;
494    color: var(--color-text-muted);
495    min-height: 2.6em;
496  }
497  .fact__value {
498    margin-top: auto; padding-top: 4px;
499    font-family: var(--font-mono);
500    font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
501    color: var(--color-text);
502  }
503
504  /* ========================================================================
505     Block 8 - cta (cream-hairline inset, per the four exports)
506     ======================================================================== */
507  .cta-section { padding: 40px 0 var(--section-pad); }
508  .cta__card {
509    position: relative; overflow: hidden;
510    max-width: 1120px; margin: 0 auto;
511    background: var(--color-card-warm);
512    border: 1.5px solid var(--color-coral-line);
513    border-radius: 20px; padding: 60px 56px;
514    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
515    box-shadow: var(--shadow-cta);
516  }
517  .cta__glow { position: absolute; width: 460px; height: 460px; right: -120px; top: 50%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(224,65,108,0.15), transparent 70%); filter: blur(8px); pointer-events: none; }
518  .cta__body { position: relative; z-index: 2; }
519  .cta__body h2 { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 16px; }
520  .cta__body h2 .wink { font-size: 1em; }
521  .cta__body .lead { max-width: 28em; margin-bottom: 28px; }
522  .cta__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
523  .cta__caption { margin-top: 16px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
524  .cta__bullets { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
525  .bullet {
526    display: flex; align-items: flex-start; gap: 12px;
527    padding: 14px 18px; border-radius: 12px;
528    background: var(--color-card); border: 1px solid var(--color-border-canvas);
529    font-size: 14px; line-height: 1.5;
530  }
531  .check { flex-shrink: 0;
531 margin-top: 1px; display: inline-flex; }
532
533  /* ========================================================================
534     CHROME - footer
535     ======================================================================== */
536  .footer { background: var(--color-canvas-deep); border-top: 1px solid var(--color-border-canvas); padding: 72px 0 36px; }
537  .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
538  .footer__brand .wordmark { font-size: 23px; margin-bottom: 14px; }
539  .footer__tag { font-size: 13.5px; color: var(--color-text-muted); max-width: 260px; line-height: 1.55; }
540  .footer__col .footer__heading { font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
541  .footer__col a { display: block; font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 9px; }
542  .footer__col a:hover { color: var(--color-text); }
543  .footer__bottom {
544    padding-top: 24px; border-top: 1px solid var(--color-border-canvas);
545    display: flex; align-items: center; justify-content: space-between;
546    font-size: 12.5px; color: var(--color-text-muted);
547  }
548  .footer__legal { display: flex; gap: 20px; align-items: center; }
549  .lang-select {
550    display: inline-flex; align-items: center; gap: 7px;
551    border: 1px solid var(--color-border-card); border-radius: var(--radius-control);
552    padding: 6px 11px; font-size: 12.5px; color: var(--color-text);
553    background: var(--color-card);
554  }
555
556  /* ========================================================================
557     REDUCED MOTION (brief C8) - the page carries no motion of its own
558     ======================================================================== */
559  @media (prefers-reduced-motion: reduce) {
560    html { scroll-behavior: auto; }
561    .btn { transition: none; }
562  }
563
564  /* ========================================================================
565     RESPONSIVE - simple single-column collapse
566     ======================================================================== */
567  @media (max-width: 1120px) {
568    .about-split { gap: 48px; }
569    .story-head { grid-template-columns: 1fr 280px; gap: 48px; }
570    .backing { grid-template-columns: 1fr 280px; gap: 48px; }
571    .team-grid { row-gap: 40px; }
572  }
573  @media (max-width: 980px) {
574    .wrap, .nav__inner, .announce__inner, .footer__inner { padding-left: 28px; padding-right: 28px; }
575    .nav__links { display: none; }
576    .nav__inner { padding: 14px 28px; }
577    .hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 52px 28px 64px; max-width: 680px; }
578    .display { font-size: 42px; line-height: 1.08; }
579    .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; max-width: 360px; }
580    .hero__ctas .btn { justify-content: center; width: 100%; }
581    .hero__ctas .btn--ghost { display: none; }
582    .h-sec { font-size: 31px; }
583    .hero__h1 { max-width: none; }
584    .stack { margin: 0 auto; }
585    .section { padding: 72px 0; }
586    .sec-head { margin-bottom: 40px; }
587    .sec-head--tight { margin-bottom: 32px; }
588    .story-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
589    .story-head__mark { width: 157px; }
590    .about-split { grid-template-columns: 1fr; gap: 28px; }
591    .backing { grid-template-columns: 1fr; gap: 32px; }
592    .ops-grid { grid-template-columns: 1fr; }
593    .team-grid { grid-template-columns: repeat(2, 1fr); }
594    .cta__card { grid-template-columns: 1fr; padding: 44px 32px; gap: 36px; }
595    .cta__body h2 { font-size: 34px; }
596    .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
597    .announce__close { right: 20px; }
598  }
599  @media (max-width: 560px) {
600    .cta__caption { white-space: normal; }
601    .wrap, .nav__inner, .announce__inner, .footer__inner { padding-left: 20px; padding-right: 20px; }
602    .announce { font-size: 12px; }
603    .announce__inner { justify-content: flex-start; gap: 8px; padding: 10px 40px 10px 20px; }
604    .announce__link { display: none; }
605    .announce__close { right: 14px; }
606    .nav__inner { padding: 12px 20px; }
607    .nav__login { display: none; }
608    .hero__inner {
609      padding: 36px 20px 44px;
610      gap: 36px;
611      max-width: none;
612      text-align: center;
613    }
614    .hero__h1 { max-width: none; margin-top: 12px; }
615    .display { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
616    .h-sec { font-size: 26px; }
617    .lead, .hero__sub {
618      font-size: 16px;
619      line-height: 1.55;
620      margin-left: auto;
621      margin-right: auto;
622      max-width: 28em;
623    }
624    .hero__ctas {
625      flex-direction: column;
626      align-items: stretch;
627      gap: 0;
628      max-width: none;
629      margin-left: auto;
630      margin-right: auto;
631    }
632    .hero__ctas .btn--primary {
633      width: 100%;
634      justify-content: center;
635      padding: 16px 24px;
636      font-size: 16px;
637      border-radius: 10px;
638    }
639    .hero__ctas .btn--ghost { display: none; }
640    .btn--lg { padding: 16px 24px; font-size: 16px; }
641    .hero__caption { margin-top: 14px; }
642    .section { padding: 60px 0; }
643    .layer--plate { flex-direction: column; align-items: flex-start; gap: 5px; padding: 28px 18px 15px; }
644    .layer__sub { margin-left: 0; text-align: left; }
645    .team-grid { grid-template-columns: 1fr; row-gap: 32px; }
646    .team-member--bruno { display: flex; text-align: center; }
647    .team-member--bruno .team-member__avatar { margin-bottom: 22px; }
648    .team-member--bruno .team-member__bio { text-align: left; }
649    .fact__value { padding-top: 14px; }
650    .cta__card { padding: 34px 24px; }
651    .cta__body h2 { font-size: 28px; }
652    .footer { padding: 52px 0 30px; }
653    .footer__top { gap: 28px 24px; }
654    .footer__bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
655  }
656</style> 
656<script id="datalayer-init">
657      window.dataLayer = window.dataLayer || [];
658      function gtag() {
659        dataLayer.push(arguments);
660      }
661      // Consent Mode v2 defaults — deny until Usercentrics updates.
662      // Caps Ads/analytics third-party cookies before consent (LH Best Practices).
663      // UC US auto-grant remains a CMP-side setting; do not override here.
664      gtag('consent', 'default', {
665        ad_storage: 'denied',
666        ad_user_data: 'denied',
667        ad_personalization: 'denied',
668        analytics_storage: 'denied',
669        functionality_storage: 'granted',
670        security_storage: 'granted',
671        wait_for_update: 2000,
672      });
673      gtag('set', 'ads_data_redaction', true);
674      gtag('set', 'url_passthrough', true);
675    </script>
675<script id="bablic-attribution">(function () {
676  try {
677    var COOKIE = 'bablic_attribution';
678    function readCookie(name) {
679      var m = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]+)'));
680      return m ? m[1] : null;
681    }
682    function parseExisting() {
683      try {
684        var raw = readCookie(COOKIE);
685        return raw ? JSON.parse(decodeURIComponent(raw)) : {};
686      } catch (e) { return {}; }
687    }
688    function write(obj) {
689      var v = encodeURIComponent(JSON.stringify(obj));
690      var attrs = ';path=/;max-age=7776000;SameSite=Lax' +
691        (location.protocol === 'https:' ? ';Secure' : '');
692      document.cookie = COOKIE + '=' + v + ';domain=.bablic.com' + attrs;
693      if (readCookie(COOKIE) !== v) {
694        document.cookie = COOKIE + '=' + v + attrs;
695      }
696    }
697    window.__bablicAttributionPatch = function (fields) {
698      try {
699        var cur = parseExisting();
700        for (var k in fields) cur[k] = fields[k];
701        write(cur);
702      } catch (e) {}
703    };
704    function gaClientId() {
705      var ga = readCookie('_ga');
706      if (!ga) return undefined;
707      var p = ga.split('.');
708      return p.length >= 4 ? p[2] + '.' + p[3] : undefined;
709    }
710    function gclFromLinker() {
711      var v = readCookie('_gcl_aw');
712      if (!v) return undefined;
713      var p = v.split('.');
714      return p.length >= 3 ? p.slice(2).join('.') : undefined;
715    }
716    var params = new URLSearchParams(location.search);
717    var a = parseExisting();
718    var firstWrite = !a.first_touch_utc;
719    function fill(key, val) { if (val && !a[key]) a[key] = val; }
720    fill('gclid', params.get('gclid') || gclFromLinker());
721    fill('gbraid', params.get('gbraid'));
722    fill('wbraid', params.get('wbraid'));
723    fill('ga_client_id', gaClientId());
724    ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
725      .forEach(function (k) { fill(k, params.get(k)); });
726    if (firstWrite) {
727      a.first_touch_utc = new Date().toISOString();
728      if (document.referrer) a.first_touch_referrer = document.referrer;
729      a.first_touch_landing_page = location.href;
730    }
731    write(a);
732    var tries = 0;
733    var t = setInterval(function () {
734      tries++;
735      var changed = false;
736      var cur = parseExisting();
737      if (!cur.ga_client_id) {
738        var g = gaClientId();
739        if (g) { cur.ga_client_id = g; changed = true; }
740      }
741      if (!cur.gclid && !cur.gbraid && !cur.wbraid) {
742        var c = gclFromLinker();
743        if (c) { cur.gclid = c; changed = true; }
744      }
745      try {
746        var ics = window.google_tag_data && window.google_tag_data.ics;
747        if (ics && ics.getConsentState) {
748          var map = { 1: 'CONSENT_GRANTED', 2: 'CONSENT_DENIED' };
749          var ud = map[ics.getConsentState('ad_user_data')];
750          var pz = map[ics.getConsentState('ad_personalization')];
751          if (ud && cur.ad_user_data_consent !== ud) {
752            cur.ad_user_data_consent = ud; changed = true;
753          }
754          if (pz && cur.ad_personalization_consent !== pz) {
755            cur.ad_personalization_consent = pz; changed = true;
756          }
757        }
758      } catch (e2) {}
759      if (changed) write(cur);
760      if (tries >= 6) clearInterval(t);
761    }, 2000);
762  } catch (e) {}
763})();
764</script>
764<script>(function(){const UC_RULESET_ID = "bQzCKxrfNyrRez";
765
766      (function (w, d) {
767        function injectUc() {
768          if (d.getElementById('usercentrics-cmp')) return;
769          var s = d.createElement('script');
770          s.id = 'usercentrics-cmp';
771          s.src = 'https://web.cmp.usercentrics.eu/ui/loader.js';
772          s.async = true;
773          s.setAttribute('data-ruleset-id', UC_RULESET_ID);
774          (d.head || d.documentElement).appendChild(s);
775        }
776        function schedule() {
777          var run = function () {
778            if ('requestIdleCallback' in w) {
779              requestIdleCallback(injectUc, { timeout: 1500 });
780            } else {
781              setTimeout(injectUc, 0);
782            }
783          };
784          if (d.readyState === 'complete') run();
785          else w.addEventListener('load', run);
786        }
787        schedule();
788      })(window, document);
789    })();</script>
789<style>
790      .skip-to-content {
791        position: absolute;
792        width: 1px;
793        height: 1px;
794        padding: 0;
795        margin: -1px;
796        overflow: hidden;
797        clip: rect(0, 0, 0, 0);
798        white-space: nowrap;
799        border: 0;
800      }
801      .skip-to-content:focus,
802      .skip-to-content:focus-visible {
803        position: fixed;
804        left: 12px;
805        top: 12px;
806        z-index: 1000;
807        width: auto;
808        height: auto;
809        margin: 0;
810        clip: auto;
811        overflow: visible;
812        padding: 10px 16px;
813        background: #0d2c4c;
814        color: #eef3fa;
815        border-radius: 8px;
816        font: 500 14px/1.2 Geist, system-ui, sans-serif;
817        text-decoration: none;
818      }
819    </style></head> <body>  <a class="skip-to-content" href="#main-content">Skip to content</a>   <style>
820  /* Design tokens pinned on the chrome roots (_ds "Cool Neutral"), so the meganav
821     renders in the exact palette regardless of page-side token drift. */
822  .nav {
823    --color-brand-blue:#1366B2; --color-brand-blue-deep:#0E4E8A;
824    --color-coral:#BF1F4B; --color-coral-deep:#C42E58;
825    --color-coral-soft:rgba(224,65,108,0.07); --color-coral-line:rgba(224,65,108,0.32);
826    --color-coral-bright:#FF6E92;
827    --color-ink:#0D2C4C; --color-on-ink:#EEF3FA; --color-on-ink-muted:#97AAC8;
828    --color-canvas:#F6F8FC; --color-canvas-alt:#E7ECF4; --color-card:#FFFFFF;
829    --color-text:#1C1C1E; --color-text-muted:#5A5A5F;
830    --color-border-canvas:rgba(28,42,66,0.08); --color-border-card:rgba(28,42,66,0.11);
831    --font-serif:'Instrument Serif','Times New Roman',serif;
832    --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',monospace;
833    --shadow-panel:0 24px 60px -24px rgba(22,32,56,0.35);
834    --radius-control:8px; --radius-pill:9999px; --content:1280px;
835  }
836  /* Nav shell (_ds chrome.css) */
837  .nav { position:sticky; top:0; z-index:50; background:rgba(246,248,252,0.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--color-border-canvas); }
838  .nav .nav__inner { max-width:var(--content); margin:0 auto; padding:16px 64px; display:flex; align-items:center; justify-content:space-between; }
839  .nav .nav__left { display:flex; align-items:center; gap:38px; }
840  .nav .wordmark { font-size:21px; font-weight:700; letter-spacing:-0.03em; color:var(--color-brand-blue); text-decoration:none; }
841  .nav .wordmark span { color:var(--color-coral); }
842  .nav .nav__links { display:flex; gap:26px; font-size:14px; align-items:center; }
843  .nav .nav__links > a { color:var(--color-text-muted); text-decoration:none; }
844  .nav .nav__links > a:hover { color:var(--color-text); }
845  .nav .nav__links > a.is-active { color:var(--color-text); font-weight:500; }
846  .nav .nav__trigger { color:var(--color-text-muted); text-decoration:none; }
847  .nav .nav__item:hover > .nav__trigger, .nav .nav__item:focus-within > .nav__trigger, .nav .nav__item.is-open > .nav__trigger { color:var(--color-text); }
848  .nav .nav__trigger.is-active { color:var(--color-text); font-weight:500; }
849  .nav .nav__right { display:flex; align-items:center; gap:18px; }
850  .nav .nav__login { font-size:14px; color:var(--color-text-muted); text-decoration:none; }
851  .nav .nav__login:hover { color:var(--color-text); }
852  /* Buttons (_ds buttons.css subset) */
853  .nav .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:var(--radius-control); font-size:14.5px; font-weight:500; padding:13px 22px; transition:background .16s,color .16s,border-color .16s; white-space:nowrap; text-decoration:none; cursor:pointer; }
854  .nav .btn--primary { background:var(--color-brand-blue); color:#fff; }
855  .nav .btn--primary:hover { background:var(--color-brand-blue-deep); color:#fff; }
856  .nav .btn--ghost { background:transparent; color:var(--color-text); border-color:rgba(28,42,66,0.20); }
857  .nav .btn--ghost:hover { border-color:rgba(28,42,66,0.42); }
858  .nav .btn--sm { padding:10px 16px; font-size:13.5px; }
859  /* Non-interactive mega/drawer items (FRONTLOAD gates): look identical, not clickable */
860  .nav [data-noroute] { cursor:default; }
861  /* Meganav + mobile drawer (_ds components/meganav.css, verbatim) */
862  /* Mega menu + mobile drawer — Bablic Transitional. Self-sufficient: token fallbacks included. */
863  .nav__item { position: relative; }
864  .nav__trigger { display: inline-flex; align-items: center; gap: 5px; }
865  .nav__trigger svg { transition: transform 0.18s ease-out; }
866  .nav__item:hover .nav__trigger svg, .nav__item:focus-within .nav__trigger svg { transform: rotate(180deg); }
867  
868  .mega { position: absolute; top: 100%; left: -24px; padding-top: 20px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s; }
869  .mega--resources { left: -260px; }
870  .nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
871  
872  .mega__card { background: var(--color-card, #FFFFFF); border: 1px solid var(--color-border-card, rgba(28,42,66,0.12)); border-radius: 14px; box-shadow: var(--shadow-panel, 0 24px 60px -24px rgba(22,32,56,0.35)); overflow: hidden; display: flex; max-width: calc(100vw - 48px); }
873  .mega--product .mega__card { width: 820px; }
874  .mega--solutions .mega__card { width: 560px; }
875  .mega--resources .mega__card { width: 820px; }
876  
877  .mega__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 26px; flex: 1; }
878  .mega__group { display: flex; flex-direction: column; gap: 2px; }
879  .mega__label { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted, #5B6B84); margin-bottom: 10px; font-weight: 500; }
880  .mega__item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; text-decoration: none; }
881  .mega__item:hover { background: var(--color-canvas-alt, #EEF2F8); color: inherit; }
882  .mega__icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: rgba(19,102,178,0.08); border: 1px solid rgba(19,102,178,0.16); display: flex; align-items: center; justify-content: center; color: var(--color-brand-blue, #1366B2); }
883  .mega__title { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text, #1C2A42); line-height: 1.3; }
884  .mega__desc { display: block; font-size: 12.5px; color: var(--color-text-muted, #5B6B84); line-height: 1.45; margin-top: 2px; font-weight: 400; }
885  
886  /* Product: contained ink CTA column */
887  .mega__ink { position: relative; width: 260px; flex-shrink: 0; background: var(--color-ink, #0D2C4C); background-image: radial-gradient(420px 260px at 110% -20%, rgba(224,65,108,0.28), transparent 65%), radial-gradient(380px 240px at -20% 120%, rgba(58,124,193,0.3), transparent 65%); padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; }
888  .mega__ink-eyebrow { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-coral-bright, #F06287); font-weight: 600; }
889  .mega__ink-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--color-on-ink, #F3EDE4); margin-top: 10px; }
890  .mega__ink-title .wink { font-family: var(--font-serif, serif); font-style: italic; font-weight: 400; color: var(--color-coral-bright, #F06287); }
891  .mega__ink-copy { font-size: 13px; color: var(--color-on-ink-muted, #96B2D6); line-height: 1.55; margin-top: 8px; }
892  .mega__ink .btn { margin-top: 16px; align-self: flex-start; }
893  .mega__ink-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: var(--color-on-ink, #F3EDE4); color: var(--color-ink, #0D2C4C); font-size: 13.5px; font-weight: 600; text-decoration: none; margin-top: 16px; align-self: flex-start; font-family: inherit; border: none; cursor: pointer; }
894  .mega__ink-btn:hover { background: #FFFFFF; color: var(--color-ink, #0D2C4C); }
895  
896  /* Resources: featured article column */
897  .mega__feat { width: 250px; flex-shrink: 0; border-left: 1px solid var(--color-border-canvas, rgba(28,42,66,0.08)); background: var(--color-canvas-alt, #EEF2F8); padding: 24px; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
898  .mega__feat:hover .mega__feat-title { color: var(--color-brand-blue, #1366B2); }
899  .mega__feat-label { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-coral, #E0416C); font-weight: 600; }
900  .mega__feat-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--color-text, #1C2A42); }
901  .mega__feat-meta { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--color-text-muted, #5B6B84); margin-top: auto; }
902  
903  /* Mobile drawer — must live OUTSIDE .nav (backdrop-filter on sticky .nav
904     creates a containing block that traps position:fixed to the nav bar height).
905     Full-viewport overlay, slides in from the right. */
906  .nav__burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-border-card, rgba(28,42,66,0.14)); border-radius: 8px; background: transparent; color: var(--color-text, #1C2A42); cursor: pointer; padding: 0; }
907  .drawer {
908    position: fixed;
909    inset: 0;
910    z-index: 80;
911    width: 100%;
912    height: 100%;
913    height: 100dvh;
914    background: var(--color-canvas, #F6F8FC);
915    overflow-y: auto;
916    overscroll-behavior: contain;
917    -webkit-overflow-scrolling: touch;
918    display: block;
919    visibility: hidden;
920    pointer-events: none;
921    transform: translateX(100%);
922    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
923  }
924  body.nav-open .drawer {
925    visibility: visible;
926    pointer-events: auto;
927    transform: translateX(0);
928  }
929  body.nav-open { overflow: hidden; }
930  .drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--color-border-canvas, rgba(28,42,66,0.08)); position: sticky; top: 0; background: var(--color-canvas, #F6F8FC); z-index: 1; }
931  .drawer__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-card, rgba(28,42,66,0.14)); border-radius: 8px; background: transparent; color: var(--color-text, #1C2A42); cursor: pointer; padding: 0; }
932  .drawer__body { padding: 8px 20px 36px; display: flex; flex-direction: column; min-height: calc(100% - 69px); }
933  .drawer__sec { border-bottom: 1px solid var(--color-border-canvas, rgba(28,42,66,0.08)); }
934  .drawer__sec summary { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; color: var(--color-text, #1C2A42); }
935  .drawer__sec summary::-webkit-details-marker { display: none; }
936  .drawer__sec summary svg { transition: transform 0.18s ease-out; color: var(--color-text-muted, #5B6B84); }
937  .drawer__sec[open] summary svg { transform: rotate(180deg); }
938  .drawer__list { display: flex; flex-direction: column; padding: 0 0 16px; }
939  .drawer__item { padding: 9px 0; font-size: 14.5px; font-weight: 500; color: var(--color-text-muted, #5B6B84); text-decoration: none; }
940  .drawer__item:hover { color: var(--color-text, #1C2A42); }
941  .drawer__link { display: block; padding: 17px 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; border-bottom: 1px solid var(--color-border-canvas, rgba(28,42,66,0.08)); color: var(--color-text, #1C2A42); text-decoration: none; }
942  .drawer__cta { display: flex; gap: 10px; margin-top: 24px; }
943  .drawer__cta .btn { flex: 1; justify-content: center; }
944  
945  @media (max-width: 1000px) { .nav__burger { display: inline-flex; } }
946  @media (min-width: 1001px) { .drawer { display: none !important; } }
947  @media (prefers-reduced-motion: reduce) {
948    .mega, .nav__trigger svg, .drawer__sec summary svg { transition: none; }
949    .drawer { transition: none; }
950  }
951  /* a11y: JS-toggled desktop mega open state mirrors the CSS hover/focus-within rules */
952  .nav .nav__item.is-open > .mega { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
953  .nav .nav__item.is-open .nav__trigger svg { transform:rotate(180deg); }
954  .nav a:focus-visible, .nav button:focus-visible, .nav summary:focus-visible { outline:2px solid var(--color-brand-blue); outline-offset:2px; border-radius:var(--radius-control); }
955  /* Mobile: hide desktop links, show burger (_ds chrome.css breakpoints) */
956  @media (max-width:1000px) {
957    .nav .nav__links { display:none; }
958    .nav .nav__inner { padding:14px 28px; }
959    /* Mobile composition: logo + burger only (primary CTA lives in the hero) */
960    .nav .nav__right > .btn { display:none; }
961  }
962  @media (max-width:560px) { .nav .nav__inner { padding:12px 20px; } .nav .nav__login { display:none; } }
963</style><nav class="nav" id="transitional-nav"><div class="nav__inner"><div class="nav__left"><a class="wordmark" href="/">bablic<span>.</span></a><div class="nav__links"><div class="nav__item"><a class="nav__trigger" aria-haspopup="true" aria-expanded="false" href="/how-it-works">Product <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></a><div class="mega mega--product"><div class="mega__card"><div class="mega__groups"><div class="mega__group"><div class="mega__label">Platform</div><a class="mega__item" href="/how-it-works"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"></path></svg></span><span><b class="mega__title">How It Works</b><span class="mega__desc">From snippet to live translated site in minutes</span></span></a><a class="mega__item" href="/website-localization"><span class="mega__icon">
963<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18"></path></svg></span><span><b class="mega__title">Website Localization</b><span class="mega__desc">Translate, edit, and publish visually</span></span></a></div><div class="mega__group"><div class="mega__label">Connect</div><a class="mega__item" href="/integrations/shopify"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7h12l1 13H5L6 7z"></path><path d="M9 10V6a3 3 0 0 1 6 0v4"></path></svg></span><span><b class="mega__title">Bablic for Shopify</b><span class="mega__desc">Localize your storefront, no code</span></span></a><a class="mega__item" href="/integrations"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="3" width="7" height="7" rx="1.5"></rect><rect x="3" y="14" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect></svg></span><span><b class="mega__title">All Integrations</b><span class="mega__desc">WordPress, Wix, Squarespace, and more</span></span></a><a class="mega__item" href="/about-us"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></svg></span><span><b class="mega__title">About Us</b><span class="mega__desc">Who we are and why we built Bablic</span></span></a></div></div><div class="mega__ink"><div class="mega__ink-eyebrow">Get started</div><div class="mega__ink-title">Your site, translated in a <span class="wink">minute</span>.</div><p class="mega__ink-copy">Paste one snippet, pick a language, done. No credit card.</p><a class="mega__ink-btn" href="https://dashboard.bablic.com/create-account">Start free &rarr;</a></div></div></div></div><div class="nav__item"><a class="nav__trigger" aria-haspopup="true" aria-expanded="false" href="/industries">Solutions <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></a><div class="mega mega--solutions"><div class="mega__card"><div class="mega__groups"><div class="mega__group"><div class="mega__label">Industries</div><a class="mega__item" href="/industries"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9Z"></path><path d="M4 7.5l8 4.5 8-4.5"></path><path d="M12 12v9"></path></svg></span><span><b class="mega__title">All Industries</b><span class="mega__desc">Where Bablic fits, sector by sector</span></span></a><a class="mega__item" href="/industries/ecommerce"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle><path d="M3 4h2l2.6 12h11l2-8H7"></path></svg></span><span><b class="mega__title">Ecommerce Stores</b><span class="mega__desc">Localized storefronts that convert</span></span></a><a class="mega__item" href="/industries/saas"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"></rect><path d="M8 21h8M12 17v4"></path></svg></span><span><b class="mega__title">SaaS Products</b><span class="mega__desc">Docs, funnels, and marketing pages</span></span></a></div><div class="mega__group"><div class="mega__label">Customers</div><a class="mega__item" href="/contact"><span class="mega__icon">
963<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z"></path></svg></span><span><b class="mega__title">Talk to Sales</b><span class="mega__desc">Scope a rollout with our team</span></span></a></div></div></div></div></div><a href="/pricing">Pricing</a><div class="nav__item"><a class="nav__trigger" aria-haspopup="true" aria-expanded="false" href="/blog">Resources <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></a><div class="mega mega--resources"><div class="mega__card"><div class="mega__groups"><div class="mega__group"><div class="mega__label">Learn</div><a class="mega__item" href="/blog"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></span><span><b class="mega__title">Blog</b><span class="mega__desc">Guides on multilingual SEO and localization</span></span></a><a class="mega__item" href="https://support.bablic.com"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.5-3 4"></path><path d="M12 17.5h.01"></path></svg></span><span><b class="mega__title">Help Center</b><span class="mega__desc">Setup, billing, and troubleshooting</span></span></a></div><div class="mega__group"><div class="mega__label">Compare</div><a class="mega__item" href="/compare"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3L4 7l4 4"></path><path d="M4 7h16"></path><path d="M16 21l4-4-4-4"></path><path d="M20 17H4"></path></svg></span><span><b class="mega__title">All Comparisons</b><span class="mega__desc">How Bablic compares, at a glance</span></span></a><a class="mega__item" href="/compare/weglot"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3L4 7l4 4"></path><path d="M4 7h16"></path><path d="M16 21l4-4-4-4"></path><path d="M20 17H4"></path></svg></span><span><b class="mega__title">Bablic vs Weglot</b><span class="mega__desc">Pricing and workflow, side by side</span></span></a><a class="mega__item" href="/compare/wpml"><span class="mega__icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3L4 7l4 4"></path><path d="M4 7h16"></path><path d="M16 21l4-4-4-4"></path><path d="M20 17H4"></path></svg></span><span><b class="mega__title">Bablic vs WPML</b><span class="mega__desc">The no-plugin migration path</span></span></a></div></div><a class="mega__feat" href="/blog/dynamic-rendering-vs-cloaking-in-2026-a-complete-guide"><span class="mega__feat-label">Featured</span><span class="mega__feat-title">Dynamic Rendering vs. Cloaking: Getting It Right in 2026</span><span class="mega__feat-meta">Multilingual SEO &middot; 9 min</span></a></div></div></div><a href="/blog">Blog</a></div></div><div class="nav__right"><a class="nav__login" href="https://dashboard.bablic.com">Log in</a><a class="btn btn--primary btn--sm" href="https://dashboard.bablic.com/create-account">Start free</a><button class="nav__burger" type="button" aria-label="Open menu" data-nav-toggle=""><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"></path></svg></button></div></div></nav> <div class="drawer" id="transitional-drawer"><div class="drawer__head"><a class="wordmark" href="/">bablic<span>.</span></a><button class="drawer__close" type="button" aria-label="Close menu" data-nav-close=""><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><div class="drawer__body"><details class="drawer__sec"><summary>Product <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></summary><div class="drawer__list"><a class="drawer__item" href="/how-it-works">How It Works</a><a class="drawer__item" href="/website-localization">Website Localization</a><a class="drawer__item" href="/integrations/shopify">Bablic for Shopify</a><a class="drawer__item" href="/integrations">All Integrations</a><a class="drawer__item" href="/about-us">About Us</a></div></details>
963<details class="drawer__sec"><summary>Solutions <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></summary><div class="drawer__list"><a class="drawer__item" href="/industries">All Industries</a><a class="drawer__item" href="/industries/ecommerce">Ecommerce Stores</a><a class="drawer__item" href="/industries/saas">SaaS Products</a><a class="drawer__item" href="/contact">Talk to Sales</a></div></details><a class="drawer__link" href="/pricing">Pricing</a><details class="drawer__sec"><summary>Resources <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></summary><div class="drawer__list"><a class="drawer__item" href="/blog">Blog</a><a class="drawer__item" href="https://support.bablic.com">Help Center</a><a class="drawer__item" href="/compare">All Comparisons</a><a class="drawer__item" href="/compare/weglot">Bablic vs Weglot</a><a class="drawer__item" href="/compare/wpml">Bablic vs WPML</a></div></details><a class="drawer__link" href="/blog">Blog</a><div class="drawer__cta"><a class="btn btn--ghost" href="https://dashboard.bablic.com">Log in</a><a class="btn btn--primary" href="https://dashboard.bablic.com/create-account">Start free</a></div></div></div> 
963<script>
964  (function () {
965    var nav = document.getElementById('transitional-nav');
966    if (!nav) return;
967    /* active-state: mark the top-level link/trigger matching the current route */
968    var here = (location.pathname.replace(/\/+$/, '') || '/');
969    nav.querySelectorAll('.nav__links > a, .nav__trigger').forEach(function (el) {
970      var href = (el.getAttribute('href') || '').replace(/\/+$/, '');
971      var on = href && href !== '/' && (here === href || here.indexOf(href + '/') === 0);
972      el.classList.toggle('is-active', !!on);
973    });
974    /* Desktop mega: links navigate; the panel opens on hover/focus-within (CSS). JS keeps
975       aria-expanded in sync and adds Escape-to-close so keyboard users are not trapped. */
976    var items = nav.querySelectorAll('.nav__item');
977    items.forEach(function (item) {
978      var trigger = item.querySelector('.nav__trigger');
979      if (!trigger || !item.querySelector('.mega')) return;
980      function sync(open) { trigger.setAttribute('aria-expanded', String(open)); item.classList.toggle('is-open', open); }
981      item.addEventListener('focusin', function () { sync(true); });
982      item.addEventListener('mouseenter', function () { trigger.setAttribute('aria-expanded', 'true'); });
983      item.addEventListener('mouseleave', function () { if (!item.contains(document.activeElement)) trigger.setAttribute('aria-expanded', 'false'); });
984      item.addEventListener('focusout', function () { if (!item.contains(document.activeElement)) sync(false); });
985      item.addEventListener('keydown', function (e) { if (e.key === 'Escape') { sync(false); trigger.focus(); } });
986    });
987    /* Mobile drawer: aria-expanded, focus trap, Escape-to-close, focus-return to burger. */
988    var burger = nav.querySelector('[data-nav-toggle]');
989    var drawer = document.getElementById('transitional-drawer');
990    var closeBtn = drawer.querySelector('[data-nav-close]');
991    if (!burger || !drawer) return;
992    burger.setAttribute('aria-expanded', 'false');
993    burger.setAttribute('aria-controls', 'transitional-drawer');
994    function focusables() { return drawer.querySelectorAll('a[href], button, summary, [tabindex]:not([tabindex="-1"])'); }
995    function setOpen(open) {
996      document.body.classList.toggle('nav-open', open);
997      burger.setAttribute('aria-expanded', String(open));
998      if (open) { var f = focusables(); if (f.length) f[0].focus(); } else { burger.focus(); }
999    }
1000    burger.addEventListener('click', function () { setOpen(!document.body.classList.contains('nav-open')); });
1001    if (closeBtn) closeBtn.addEventListener('click', function () { setOpen(false); });
1002    drawer.addEventListener('click', function (e) { if (e.target.closest('a[href]')) setOpen(false); });
1003    document.addEventListener('keydown', function (e) {
1004      if (!document.body.classList.contains('nav-open')) return;
1005      if (e.key === 'Escape') { setOpen(false); return; }
1006      if (e.key === 'Tab') {
1007        var f = focusables(); if (!f.length) return;
1008        var first = f[0], last = f[f.length - 1];
1009        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
1010        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
1011      }
1012    });
1013  })();
1014</script>
1014  <main id="main-content">    <!-- ===================================================================== -->
1015<!-- Block 2: hero                                                         -->
1016<!-- ===================================================================== -->
1017<section class="hero" data-screen-label="hero">
1018  <div class="hero__glow-cool" aria-hidden="true"></div>
1019  <div class="hero__glow-coral" aria-hidden="true"></div>
1020  <div class="hero__grid" aria-hidden="true"></div>
1021  <div class="hero__inner">
1022    <div>
1023      <div class="eyebrow">ABOUT BABLIC</div>
1024      <h1 class="display hero__h1">Made&nbsp;for&nbsp;businesses<br>that&nbsp;care&nbsp;about<br><span class="wink">customer&nbsp;experience</span>.</h1>
1025      <p class="lead hero__sub">Launch in minutes and experience the simplicity and power of Bablic's industry-leading website translation platform.</p>
1026      <div class="hero__ctas">
1027        <a class="btn btn--primary btn--lg" href="https://dashboard.bablic.com/create-account">Start Free Trial →</a>
1028        <a class="btn btn--ghost btn--lg" href="/contact">Talk to a localization expert</a>
1029      </div>
1030      <div class="hero__caption">No credit card required · 30 days free · Concierge migration on us</div>
1031    </div>
1032
1033    <!-- Hero vignette: static layered stack (brief block 2). Back to front:
1034         TransPerfect plate at the base, Bablic plate, faux-browser mini-page
1035         in front. All strings are HTML text; the TransPerfect label is plain
1036         text in Bablic's own type, no logo, no brand color (Q8 / P1). The
1037         headline pair reuses the approved homepage strings (flag D). -->
1038    <img fetchpriority="high" class="stack__img" alt="Layered vignette: a storefront homepage in English behind the same page translated into French, with the Bablic language switcher open showing English, Espanol, Francais, Polski, Portugues and Russian."
1039         src="/images/transitional/about-us/hero-vignette.webp" loading="eager" decoding="async">
1040  </div>
1041</section>
1042
1043<!-- ===================================================================== -->
1044<!-- Block 3: what bablic is                                               -->
1045<!-- ===================================================================== -->
1046<section class="section section--alt" data-screen-label="what bablic is">
1047  <div class="wrap">
1048    <div class="about-split">
1049      <div class="sec-head">
1050        <div class="eyebrow">OUR MISSION</div>
1051        <h2 class="h-sec">Website localization for <span class="wink">every business</span>.</h2>
1052      </div>
1053      <div class="prose">
1054        <p>We created Bablic because we believe that every business, great and small, should have a beautifully translated website, even without the budget for designers, developers, or translators.</p>
1055        <p>We’ve packaged enterprise-grade tools like translation memory, glossary rules, multilingual SEO, and human post-edits so teams of any size can start today and keep their multilingual site running with no dev work.</p>
1056        <p>With just one line of code, Bablic can make any website accessible worldwide.</p>
1057      </div>
1058    </div>
1059  </div>
1060</section>
1061
1062<!-- ===================================================================== -->
1063<!-- Block 4: backed by transperfect                                       -->
1064<!-- ===================================================================== -->
1065<section class="section" data-screen-label="backed by transperfect">
1066  <div class="wrap">
1067    <div class="story-head">
1068      <div class="sec-head">
1069        <div class="eyebrow">OUR STORY</div>
1070        <h2 class="h-sec">Backed by TransPerfect, 30+ years of <span class="wink">localization</span>.</h2>
1071      </div>
1072      <img class="story-head__mark" src="/images/transitional/about-us/badger-with-logo.webp" alt="The Bablic badger mascot leaning on the TransPerfect logo." width="660" height="590" loading="lazy" decoding="async">
1073    </div>
1074    <div class="backing">
1075      <div class="prose">
1076        <p>Bablic started in 2012 with a simple belief: a business shouldn't need a development team to speak its customers' language.</p>
1077        <p>In 2023, Bablic joined Unbabel, and in 2025, Unbabel became part of TransPerfect, the world's largest provider of language and AI solutions for global business. That merger gave us access to enterprise-grade localization technology, and we used it to rebuild Bablic from the ground up.</p>
1078        <p>We're backed by an organization with over 30 years of localization expertise across industries from legal to pharmaceutical to e-commerce. That expertise now lives inside every feature we build, so businesses of any size c
1078an access tools that used to be reserved for the Fortune 500.</p>
1079      </div>
1080      <!-- Company timeline: founding through relaunch. Replaces the former
1081           stat-rail (1992/130+/1) and company-facts tiles (Founded/TransPerfect
1082           group/Team/Built in). -->
1083      <div class="facts-grid">
1084        <div class="fact-row">
1085          <span class="fact-dot"></span>
1086          <div class="fact">
1087            <div class="fact__label">Bablic was founded</div>
1088            <div class="fact__value">2012</div>
1089          </div>
1090        </div>
1091        <div class="fact-row">
1092          <span class="fact-dot"></span>
1093          <div class="fact">
1094            <div class="fact__label">Unbabel acquires Bablic</div>
1095            <div class="fact__value">2023</div>
1096          </div>
1097        </div>
1098        <div class="fact-row">
1099          <span class="fact-dot"></span>
1100          <div class="fact">
1101            <div class="fact__label">TransPerfect acquires Unbabel</div>
1102            <div class="fact__value">2025</div>
1103          </div>
1104        </div>
1105        <div class="fact-row">
1106          <span class="fact-dot"></span>
1107          <div class="fact">
1108            <div class="fact__label">TransPerfect relaunches Bablic</div>
1109            <div class="fact__value">2026</div>
1110          </div>
1111        </div>
1112      </div>
1113    </div>
1114  </div>
1115</section>
1116
1117<!-- ===================================================================== -->
1118<!-- Block 5: how we operate                                               -->
1119<!-- ===================================================================== -->
1120<section class="section section--alt" data-screen-label="how we operate">
1121  <div class="wrap">
1122    <div class="sec-head">
1123      <div class="eyebrow">OUR VALUES</div>
1124      <h2 class="h-sec">The commitments behind <span class="wink">our mission</span>.</h2>
1125    </div>
1126    <div class="ops-grid">
1127      <div class="feature">
1128        <h3 class="feature__title"><span class="wink">X</span>enia</h3>
1129        <p class="feature__body">The ancient Greek word for the sacred bond of hospitality between host and stranger. At Bablic, it's the belief that every visitor to a translated website deserves to feel genuinely welcomed.</p>
1130      </div>
1131      <div class="feature">
1132        <h3 class="feature__title">E<span class="wink">X</span>ceptional Service</h3>
1133        <p class="feature__body">We measure ourselves not by the transactions we complete but by the outcomes we help create. Exceptional service at Bablic means being present at every step, from onboarding through ongoing growth.</p>
1134      </div>
1135      <div class="feature">
1136        <h3 class="feature__title">Effortless E<span class="wink">X</span>perience</h3>
1137        <p class="feature__body">Complexity is a barrier to opportunity. We believe going global should feel achievable and not overwhelming, so we remove every unnecessary step, technical hurdle, and moment of friction standing between a business and its international audience.</p>
1138      </div>
1139      <div class="feature">
1140        <h3 class="feature__title">Unparalleled E<span class="wink">X</span>pertise</h3>
1141        <p class="feature__body">Bablic is backed by TransPerfect, the world's largest provider of translation and localization technology, with over 30 years of experience across industries from legal to pharmaceutical to e-commerce. That depth of knowledge lives inside every feature we build and every recommendation we make.</p>
1142      </div>
1143    </div>
1144  </div>
1145</section>
1146
1147<!-- ===================================================================== -->
1148<!-- Block 6: our team                                                     -->
1149<!-- ===================================================================== -->
1150<section class="section" data-screen-label="our team">
1151  <div class="wrap">
1152    <div class="sec-head sec-head--tight">
1153      <div class="eyebrow">OUR CORE TEAM</div>
1154      <h2 class="h-sec">Meet the dedicated people behind <span class="wink">Bablic</span>.</h2>
1155    </div>
1156    <!-- PLACEHOLDER: avatars and bios pending — names confirmed by Olivia. -->
1157    <div class="team-grid">
1158      <div class="team-member">
1159        <div class="team-member__avatar">
1160          <img src="/images/transitional/about-us/team/noah-bacon.webp" alt="Noah Bacon" width="96" height="96" loading="lazy" decoding="async">
1161        </div>
1162        <h3 class="team-member__name">Noah Bacon</h3>
1163        <p class="team-member__bio">An empath, Noah is a Solutions Engineer at Bablic, working hands on with clients to translate technical requirements into working solutions. Noah balances rigorous study of Computer Science with a host of hobbies that include rugby, scuba, video games, and traveling.</p>
1164      </div>
1165      <div class="team-member">
1166        <div class="team-member__avatar">
1167          <img src="/images/transitional/about-us/team/pat-cross.png" alt="Pat Cross" width="96" height="96" loading="lazy" decoding="async">
1168        </div>
1169        <h3 class="team-member__name">Pat Cross</h3>
1170        <p class="team-member__bio">Pat is the Principal UX Designer at Bablic. A man of few words, he lets his work speak for itself. In his free time, he is a prolific illustrator.</p>
1171      </div>
1172      <div class="team-member">
1173        <div class="team-member__avatar">
1174          <img class="team-member__avatar-img--zoom" src="/images/transitional/about-us/team/lonnie-dahm.webp" alt="Lonnie Dahm" width="96" height="96" loading="lazy" decoding="async">
1175        </div>
1176        <h3 class="team-member__name">Lonnie Dahm</h3>
1177        <p class="team-member__bio">Lonnie is the Director of Solutions Engineering for Bablic. In addition to helping clients create the best possible localized websites, he enjoys working on his cars in his spare time.</p>
1178      </div>
1179      <div class="team-member">
1180        <div class="team-member__avatar">
1181          <img src="/images/transitional/about-us/team/olivia-dooley.webp" alt="Olivia Dooley" width="96" height="96" loading="lazy" decoding="async">
1182        </div>
1183        <h3 class="team-member__name">Olivia Dooley</h3>
1184        <p class="team-member__bio">Olivia is the Global Marketing Strategist for Bablic. In addition to creating the content and campaigns that help businesses discover the power of website localization, she enjoys exploring museums or writing at her local coffee shop.</p>
1185      </div>
1186      <div class="team-member">
1187        <div class="team-member__avatar">
1188          <img src="/images/transitional/about-us/team/christian-francis.webp" alt="Christian Francis" width="96" height="96" loading="lazy" decoding="async">
1189        </div>
1190        <h3 class="team-member__name">Christian Francis</h3>
1191        <p class="team-member__bio">Christian is a Solutions Engineer at Bablic, helping customers with smooth and seamless customer support. In his free time, he enjoys hiking, fishing, and helping Pete find his golf balls.</p>
1192      </div>
1193      <div class="team-member">
1194        <div class="team-member__avatar">
1195          <img src="/images/transitional/about-us/team/dave-gordon.webp" alt="Dave Gordon" width="96" height="96" loading="lazy" decoding="async">
1196        </div>
1197        <h3 class="team-member__name">Dave Gordon</h3>
1198        <p class="team-member__bio">Dave is a Solutions Engineering Manager at Bablic. He focuses on delivering clear, reliable support by bridging the gap between what customers (except Civil War reenactors) need and what Bablic can do. A history buff at heart, you will find him on the weekends in his Revolutionary War attire, reenacting the greatest battles in our nation's history.</p>
1199      </div>
1200      <div class="team-member">
1201        <div class="team-member__avatar">
1202          <img src="/images/transitional/about-us/team/mark-henderson.webp" alt="Mark Henderson" width="96" height="96" loading="lazy" decoding="async">
1203        </div>
1204        <h3 class="team-member__name">Mark Henderson</h3>
1205        <p class="team-member__bio">
1205Mark is Senior Software Architect for Bablic and focuses on solving our most interesting challenges. When he’s not working, you can find Mark patiently teaching his colleagues how to improve their chess game or enjoying his new role as doting uncle.</p>
1206      </div>
1207      <div class="team-member">
1208        <div class="team-member__avatar">
1209          <img src="/images/transitional/about-us/team/kasia-intrieri.webp" alt="Kasia Intrieri" width="96" height="96" loading="lazy" decoding="async">
1210        </div>
1211        <h3 class="team-member__name">Kasia Intrieri</h3>
1212        <p class="team-member__bio">Kasia is a UX/UI Designer at Bablic, turning complex localization workflows into interfaces that feel effortless. In her free time, she brings that same creative energy to growing her podcast on building community and encouraging others with messages of hope.</p>
1213      </div>
1214      <div class="team-member">
1215        <div class="team-member__avatar">
1216          <img src="/images/transitional/about-us/team/sam-kaulbach.webp" alt="Sam Kaulbach" width="96" height="96" loading="lazy" decoding="async">
1217        </div>
1218        <h3 class="team-member__name">Sam Kaulbach</h3>
1219        <p class="team-member__bio">Sam is a Senior Product Manager at Bablic with a focus on user experience. He has a wide set of interests ranging from the French Revolution and Leo Tolstoy to geography puzzles and Notre Dame football. Coincidentally, he's decent at pub trivia but doesn't get to do it much now that he has five boys.</p>
1220      </div>
1221      <div class="team-member">
1222        <div class="team-member__avatar">
1223          <img src="/images/transitional/about-us/team/dan-marlett.png" alt="Dan Marlett" width="96" height="96" loading="lazy" decoding="async">
1224        </div>
1225        <h3 class="team-member__name">Dan Marlett</h3>
1226        <p class="team-member__bio">Dan is the Head of Engineering at Bablic, where he builds the systems and infrastructure behind Bablic's enterprise-grade product. Outside of the office, you will catch Dan roll tacking with his kids at the local lake.</p>
1227      </div>
1228      <div class="team-member">
1229        <div class="team-member__avatar team-member__avatar--no-border">
1230          <img src="/images/transitional/about-us/team/pete-mcnamara.webp" alt="Pete McNamara" width="96" height="96" loading="lazy" decoding="async">
1231        </div>
1232        <h3 class="team-member__name">Pete McNamara</h3>
1233        <p class="team-member__bio">Pete is the Senior Director of Customer Success at Bablic and specializes in helping all clients large and small execute flawless multilingual deployments. Although he's a problem-solver at heart, Pete has yet to apply his solutions-oriented philosophy to his golf swing.</p>
1234      </div>
1235      <div class="team-member">
1236        <div class="team-member__avatar">
1237          <img src="/images/transitional/about-us/team/john-pakaluk.webp" alt="John Pakaluk" width="96" height="96" loading="lazy" decoding="async">
1238        </div>
1239        <h3 class="team-member__name">John Pakaluk</h3>
1240        <p class="team-member__bio">John is the Head of Product at Bablic. His focus is on building the strongest localization platform available today. In his free time, John enjoys practicing Liszt's transcriptions of Beethoven's nine symphonies.</p>
1241      </div>
1242      <div class="team-member">
1243        <div class="team-member__avatar">
1244          <img src="/images/transitional/about-us/team/michael-perreault.webp" alt="Michael Perreault" width="96" height="96" loading="lazy" decoding="async">
1245        </div>
1246        <h3 class="team-member__name">Michael Perreault</h3>
1247        <p class="team-member__bio">Mike is a Software Engineer at Bablic, working with his team to build exciting new features and make the Bablic experience as easy as possible. Mike spends his evenings on the volleyball court, but during winter you will catch him out on the ski slopes every weekend.</p>
1248      </div>
1249      <div class="team-member">
1250        <div class="team-member__avatar">
1251          <img src="/images/transitional/about-us/team/josh-phelps.webp" alt="Josh Phelps" width="96" height="96" loading="lazy" decoding="async">
1252        </div>
1253        <h3 class="team-member__name">Josh Phelps</h3>
1254        <p class="team-member__bio">Josh is the Head of Go-to-Market for Bablic, specializing in global SEO and AI to help businesses unlock international growth through smarter localization. When he’s not driving product vision, you can find him trying new recipes and spending quality time with his family.</p>
1255      </div>
1256      <div class="team-member">
1257        <div class="team-member__avatar">
1258          <img src="/images/transitional/about-us/team/cassandra-rano.webp" alt="Cassandra Rano" width="96" height="96" loading="lazy" decoding="async">
1259        </div>
1260        <h3 class="team-member__name">Cassandra Rano</h3>
1261        <p class="team-member__bio">Cassandra is a Senior UX/UI Designer at Bablic. She focuses on bringing beauty and functionality to the product experience. When she's not designing, Cassandra can be found spending time with her family and pets, chasing high scores on the pinball machine or plotting her next move in Catan!</p>
1262      </div>
1263      <div class="team-member team-member--bruno">
1264        <div class="team-member__avatar">
1265          <img src="/images/transitional/about-us/team/bruno-thumbs-up.webp" alt="Bruno" width="420" height="420" loading="lazy" decoding="async">
1266        </div>
1267        <h3 class="team-member__name">Bruno</h3>
1268        <p class="team-member__bio">Mr. Bruno first discovered his knack for languages under the tutelage of the late Dr. Dolittle. Several years later, Mr. Bruno studied under the renowned philologist, Dr. Tolkien. After learning the tongues of animals, men, elves, and dwarves, Mr. Bruno now works as a marketing specialist for Bablic and lovingly accepts the title of company mascot.</p>
1269      </div>
1270    </div>
1271  </div>
1272</section>
1273
1274<!-- ===================================================================== -->
1275<!-- Block 8: cta (inset treatment per the four exports)                   -->
1276<!-- ===================================================================== -->
1277<section class="cta-section" data-screen-label="cta">
1278  <div class="wrap">
1279    <div class="cta__card">
1280      <div class="cta__glow" aria-hidden="true"></div>
1281      <div class="cta__body">
1282        <div class="eyebrow">YOU’VE MET THE COMPANY</div>
1283        <h2>Now meet <span class="wink">the product</span>.</h2>
1284        <p class="lead">The fastest way to understand Bablic is to watch it translate your own site.</p>
1285        <div class="cta__ctas">
1286          <a class="btn btn--primary btn--lg" href="https://dashboard.bablic.com/create-account">Start Free Trial →</a>
1287          <a class="btn btn--ghost btn--lg" href="/contact">Talk to a localization expert</a>
1288        </div>
1289        <div class="cta__caption">No credit card required · 30 days free · Concierge&nbsp;migration&nbsp;on&nbsp;us</div>
1290      </div>
1291      <div class="cta__bullets">
1292        <div class="bullet"><span class="check" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="8" fill="#BF1F4B"></circle><path d="M4.5 8.2l2.2 2.2 4.8-4.8" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span>One line of JavaScript, live in an afternoon</span></div>
1293        <div class="bullet"><span class="check" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="8" fill="#BF1F4B"></circle><path d="M4.5 8.2l2.2 2.2 4.8-4.8" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span>Priced on visits, not words</span></div>
1294        <div class="bullet"><span class="check" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="8" fill="#BF1F4B"></circle><path d="M4.5 8.2l2.2 2.2 4.8-4.8" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span>Multilingual SEO</span></div>
1295      </div>
1296    </div>
1297  </div>
1298</section>
1299
1300<!-- ===================================================================== -->
1301<!-- Block 9: chrome - footer (homepage export, verbatim)                  -->
1302<!-- ===================================================================== -->
1303   </main>  <style>
1304  .footer {
1305    --color-brand-blue: #1366B2;
1306    --color-brand-blue-deep: #0E4E8A;
1307    --color-coral: #BF1F4B;
1308    --color-coral-deep: #C42E58;
1309    --color-coral-soft: rgba(224, 65, 108, 0.07);
1310    --color-coral-line: rgba(224, 65, 108, 0.32);
1311    --color-canvas-alt: #E7ECF4;
1312    --color-canvas-deep: #DEE5F0;
1313    --color-card: #FFFFFF;
1314    --color-text: #1C1C1E;
1315    --color-text-muted: #5A5A5F;
1316    --color-border-canvas: rgba(28, 42, 66, 0.08);
1317    --color-border-card: rgba(28, 42, 66, 0.11);
1318    --radius-control: 8px;
1319    --radius-pill: 9999px;
1320    --content: 1280px;
1321  }
1322  .footer .wrap { max-width: var(--content); margin: 0 auto; padding: 0 64px; }
1323  .footer { background: var(--color-canvas-deep); border-top: 1px solid var(--color-border-canvas); padding: 72px 0 36px; }
1324  .footer .wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--color-brand-blue); }
1325  .footer .wordmark span { color: var(--color-coral); }
1326  .footer .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
1327  .footer .footer__brand .wordmark { font-size: 23px; margin-bottom: 14px; }
1328  .footer .footer__tag { font-size: 13.5px; color: var(--color-text-muted); max-width: 260px; line-height: 1.55; }
1329  .footer .footer__col .footer__heading { font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
1330  .footer .footer__col a { display: block; font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 9px; }
1331  .footer .footer__col a:hover { color: var(--color-text); }
1332  .footer .footer__bottom {
1333    padding-top: 24px; border-top: 1px solid var(--color-border-canvas);
1334    display: flex; align-items: center; justify-content: space-between;
1335    font-size: 12.5px; color: var(--color-text-muted);
1336  }
1337  /* a11y bar (dispatch A4.3) — visible only on keyboard focus */
1338  .footer a:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; border-radius: var(--radius-control); }
1339  @media (max-width: 980px) {
1340    .footer .wrap, .footer .footer__inner { padding-left: 28px; padding-right: 28px; }
1341    .footer .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
1342  }
1343  @media (max-width: 560px) {
1344    .footer .wrap, .footer .footer__inner { padding-left: 20px; padding-right: 20px; }
1345    .footer { padding: 52px 0 30px; }
1346    .footer .footer__top { gap: 28px 24px; }
1347    .footer .footer__bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
1348  }
1349</style><!-- ===================================================================== --><!-- Block 9: Footer (site chrome)                                         --><!-- ===================================================================== --><footer class="footer"> <div class="wrap footer__inner"> <div class="footer__top"> <div class="footer__brand"> <div class="wordmark">bablic<span>.</span></div> <p class="footer__tag">Website translation made easy.<br>A TransPerfect company.</p> </div> <div class="footer__col"> <p class="footer__heading">Product</p> <a href="/website-localization">Features</a><a href="/how-it-works">How It Works</a><a href="/pricing">Pricing</a><a href="/integrations">Integrations</a><a href="/about-us">About Us</a> </div><div class="footer__col"> <p class="footer__heading">Resources</p> <a href="/blog">Blog</a><a href="/sitemap-explore">Explore</a><a href="https://support.bablic.com">Help Center</a> </div><div class="footer__col"> <p class="footer__heading">Company</p> <a href="/contact">Contact</a><a href="https://dashboard.bablic.com">Sign in</a> </div><div class="footer__col"> <p class="footer__heading">Legal</p> <a href="/privacy">Privacy</a><a href="/terms">Terms</a> </div> </div> <div class="footer__bottom"> <div>© 2026 Bablic, a TransPerfect company.</div> </div> </div> </footer> 
1349<script>/* =========================================================================
1350   Vanilla JS. In-memory state only (no localStorage, no sessionStorage).
1351   The announce dismiss (click or Escape) is the ONLY behavior on this page
1352   (brief C6 delta). The hero vignette is static; nothing injects copy.
1353   ========================================================================= */
1354(function () {
1355  'use strict';
1356  var announce = document.getElementById('announce');
1357  var closeBtn = document.getElementById('announce-close');
1358  function dismissAnnounce() { if (announce) announce.style.display = 'none'; }
1359  if (closeBtn) closeBtn.addEventListener('click', dismissAnnounce);
1360  document.addEventListener('keydown', function (e) {
1361    if (e.key === 'Escape') dismissAnnounce();
1362  });
1363})();
1364</script>
1364   
1364<script id="marketing-gtag-init">(function(){const GA4_ID = "G-WERSEHJY3Z";
1365const AW_ID = "AW-16483048707";
1366const SST_URL = "https://sst.bablic.com";
1367
1368    (function (w, d) {
1369      // Phase B: slim gtag → SST for GA4; Ads only after first click.
1370      // No gtm.js / GTM-MQLDZSTW. Consent Mode defaults already set in head.
1371      w.dataLayer = w.dataLayer || [];
1372      w.gtag =
1373        w.gtag ||
1374        function () {
1375          w.dataLayer.push(arguments);
1376        };
1377      var FLOOR_MS = 4000;
1378      var GTAG_SRC =
1379        'https://www.googletagmanager.com/gtag/js?id=' + GA4_ID;
1380
1381      function ensureGtagJs(cb) {
1382        if (w.__bablicGtagJsReady) {
1383          cb();
1384          return;
1385        }
1386        w.__bablicGtagJsQueue = w.__bablicGtagJsQueue || [];
1387        w.__bablicGtagJsQueue.push(cb);
1388        if (w.__bablicGtagJsStarted) return;
1389        w.__bablicGtagJsStarted = true;
1390        var s = d.createElement('script');
1391        s.async = true;
1392        s.src = GTAG_SRC;
1393        s.onload = function () {
1394          w.__bablicGtagJsReady = true;
1395          if (typeof w.gtag === 'function') {
1396            w.gtag('js', new Date());
1397          }
1398          var q = w.__bablicGtagJsQueue || [];
1399          w.__bablicGtagJsQueue = [];
1400          for (var i = 0; i < q.length; i++) q[i]();
1401        };
1402        var f = d.getElementsByTagName('script')[0];
1403        f.parentNode.insertBefore(s, f);
1404      }
1405
1406      function loadGa4() {
1407        if (w.__bablicGa4Started) return;
1408        w.__bablicGa4Started = true;
1409        ensureGtagJs(function () {
1410          w.gtag('config', GA4_ID, {
1411            server_container_url: SST_URL,
1412          });
1413        });
1414      }
1415
1416      function loadAds() {
1417        if (w.__bablicAdsStarted) return;
1418        w.__bablicAdsStarted = true;
1419        ensureGtagJs(function () {
1420          // AW config enables Conversion Linker / remarketing under Consent Mode.
1421          w.gtag('config', AW_ID);
1422        });
1423      }
1424
1425      // Marketing rarely fires these (dashboard/XAPIS owned); forward if pushed.
1426      (function hookSignUpEvents() {
1427        var dl = (w.dataLayer = w.dataLayer || []);
1428        var orig = dl.push;
1429        dl.push = function () {
1430          for (var i = 0; i < arguments.length; i++) {
1431            var item = arguments[i];
1432            if (
1433              item &&
1434              typeof item === 'object' &&
1435              !item.length &&
1436              (item.event === 'sign_up' || item.event === 'trial_started')
1437            ) {
1438              (function (ev, payload) {
1439                ensureGtagJs(function () {
1440                  var params = {};
1441                  for (var k in payload) {
1442                    if (k !== 'event' && Object.prototype.hasOwnProperty.call(payload, k)) {
1443                      params[k] = payload[k];
1444                    }
1445                  }
1446                  params.send_to = GA4_ID;
1447                  w.gtag('event', ev, params);
1448                });
1449              })(item.event, item);
1450            }
1451          }
1452          return orig.apply(dl, arguments);
1453        };
1454      })();
1455
1456      function scheduleGa4() {
1457        if (w.__bablicGa4Started) return;
1458        setTimeout(loadGa4, FLOOR_MS);
1459      }
1460
1461      if (d.readyState === 'complete') scheduleGa4();
1462      else w.addEventListener('load', scheduleGa4);
1463
1464      // Tag 65 replacement: Ads only on first user click (capture once).
1465      d.addEventListener(
1466        'click',
1467        function onFirstClick() {
1468          d.removeEventListener('click', onFirstClick, true);
1469          loadAds();
1470        },
1471        true,
1472      );
1473    })(window, document);
1474  })();</script>
1474 </body></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.