PageSourceSearch

https://qompyl-0dd1b4.webflow.io/about

html qompyl-0dd1b4.webflow.io collected 2026-10-03 13:37:57 UTC 162,726 bytes, 3,337 lines download raw bytes

1<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Wed Sep 02 2026 19:15:43 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="qompyl-0dd1b4.webflow.io" data-wf-page="6a201b9b33514a2e01c842dc" data-wf-site="6a1ddb7b75b500063615e83b" lang="en"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>About Qompyl - Our Mission to Democratize Trading</title><meta content="Learn about Qompyl&#x27;s mission to bring institutional-grade trading tools to self-directed traders. Meet our global team and discover our core values." name="description"/><meta content="About Qompyl - Our Mission to Democratize Trading" property="og:title"/><meta content="Learn about Qompyl&#x27;s mission to bring institutional-grade trading tools to self-directed traders. Meet our global team and discover our core values." property="og:description"/><meta content="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a50f51e497e15dd1367f640_qompy-OG(1).png" property="og:image"/><meta content="About Qompyl - Our Mission to Democratize Trading" name="twitter:title"/><meta content="Learn about Qompyl&#x27;s mission to bring institutional-grade trading tools to self-directed traders. Meet our global team and discover our core values." name="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="2seXPzfqQpK1ivWTzjEJ4Dy_Ldpp_8Ck8g95CEC2m78" name="google-site-verification"/><meta content="Webflow" name="generator"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/css/qompyl-0dd1b4.webflow.shared.580430ea3.css" rel="stylesheet" type="text/css" integrity="sha384-WAQw6j+yiVv7k9B38eI27tBfAfxt7E36Jj7/qoD38LREkWtER8QTwouDCuSe5slV" crossorigin="anonymous"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({  google: {    families: ["Inter:100,200,300,400,500","Manrope:400,500,600,700"]  }});</script>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23c2482d9f44d54ca9a_qompyl-fav.png" rel="icon" type="image/png" sizes="32x32" media="(prefers-color-scheme: light)"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23c2482d9f44d54ca9a_qompyl-fav.png" rel="icon" type="image/png" sizes="32x32" media="(prefers-color-scheme: dark)"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23c57228b985ead2b3c_qompyl-fav.png" rel="icon" type="image/png" sizes="48x48"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23caa36827e3de61c11_qompyl-fav.png" rel="apple-touch-icon" sizes="180x180"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23c3aadb9129f9d2956_qompyl-fav.png" rel="icon" type="image/png" sizes="192x192"/><link href="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a47f23c4aca139aaf1d7a36_qompyl-fav.png" rel="icon" type="image/png" sizes="512x512"/>
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "AboutPage",
5  "name": "About Qompyl - Our Mission to Democratize Trading",
6  "url": "/about",
7  "inLanguage": "en",
8  "description": "Learn about Qompyl's mission to bring institutional-grade trading tools to self-directed traders. Meet our global team and discover our core values.",
9  "about": {
10    "@type": "Organization",
11    "@id": "https://schema.org/Organization/Qompyl",
12    "name": "Qompyl",
13    "description": "Institutional-grade trading tools for the modern, self-directed trader. Built for clarity, security, and performance.",
14    "url": "/",
15    "logo": {
16      "@type": "ImageObject",
17      "url": "https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a50d01a7eecdfb4b63c0137_Qompyl-logo.svg"
18    },
19    "slogan": "Build with clarity. Trade with confidence.",
20    "founder": {
21      "@type": "Person",
22      "name": "Tyler Charton",
23      "jobTitle": "Chief Executive Officer",
24      "description": "Founder of Qompyl, dedicated to modernizing institutional trading interfaces.",
25      "sameAs": "https://www.linkedin.com/in/tyler-charton"
26    },
27    "employee": [
28      {
29        "@type": "Person",
30        "name": "Tyler Charton",
31        "jobTitle": "CEO & Founder"
32      },
33      {
34        "@type": "Person",
35        "name": "Katie Milburn",
36        "jobTitle": "VP, Growth & Business Strategy"
37      },
38      {
39        "@type": "Person",
40        "name": "Clark VanScoder",
41        "jobTitle": "Strategic Advisor"
42      },
43      {
44        "@type": "Person",
45        "name": "Romina Lo Schiavo",
46        "jobTitle": "Head of Human Resources"
47      },
48      {
49        "@type": "Person",
50        "name": "Matt Milburn",
51        "jobTitle": "Strategic Advisor"
52      },
53      {
54        "@type": "Person",
55        "name": "Zifri Baharudin",
56        "jobTitle": "Strategic Advisor"
57      },
58      {
59        "@type": "Person",
60        "name": "Luis Cecatto",
61        "jobTitle": "Marketing & Strategy Coordinator"
62      },
63      {
64        "@type": "Person",
65        "name": "Nicolás Vrhovski",
66        "jobTitle": "Quality Control Engineer"
67      },
68      {
69        "@type": "Person",
70        "name": "Vince Capuano",
71        "jobTitle": "Lead Trading Strategist"
72      },
73      {
74        "@type": "Person",
75        "name": "Claudia Ioana Mureșan",
76        "jobTitle": "QC Lead"
77      },
78      {
79        "@type": "Person",
80        "name": "Kai Richardson",
81        "jobTitle": "UX & Front-End Quality Lead"
82      },
83      {
84        "@type": "Person",
85        "name": "Ridvan Gyundogan",
86        "jobTitle": "Back-End Software Engineer"
87      },
88      {
89        "@type": "Person",
90        "name": "Matt Andrews",
91        "jobTitle": "Cloud Infrastructure Engineer"
92      },
93      {
94        "@type": "Person",
95        "name": "Facundo Escobar",
96        "jobTitle": "Full-Stack Software Engineer"
97      },
98      {
99        "@type": "Person",
100        "name": "Miruna Spineanu",
101        "jobTitle": "Software Engineer"
102      },
103      {
104        "@type": "Person",
105        "name": "Dale Augustyn",
106        "jobTitle": "Product Analyst"
107      }
108    ],
109    "email": "[email protected]",
110    "sameAs": [
111      "https://www.linkedin.com/company/qompyl/"
112    ]
113  }
114}
115</script>
115<!-- Google Tag Manager -->
116<script>
vendor: 327 bytes, lines 116-120
116(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
117new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
118j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
119'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
120})(window,document,'script','dataLayer','
120GTM-ND4344C8
vendor: 3 bytes, line 120
120');
120</script>
120
121<!-- End Google Tag Manager -->
122<!-- Custom Mouse Cursor + Glow Effect - FULL WORKING VERSION -->
123<meta name="google-site-verification" content="2seXPzfqQpK1ivWTzjEJ4Dy_Ldpp_8Ck8g95CEC2m78" />
124<style>
125
126  /* إخفاء المؤشر الافتراضي */
127  body,
128  html {
129    cursor: none !important;
130  }
131	.w-richtext a {
132	color: var(--_qcolors---colors--teal--normal);
133}
134  	.w-richtext a:hover {
135	color: var(--_qcolors---colors--teal--normal-hover);
136}
137  /* the text alignment */
138  /* ============================================
139   Q-Framework: Text Alignment
140   ============================================ */
141
142/* Base Text Alignment */
143.q-text-start { text-align: left !important; }
144.q-text-center { text-align: center !important; }
145.q-text-end { text-align: right !important; }
146
147/* Responsive Text Alignment */
148
149/* Small (sm) - min-width: 576px */
150@media (min-width: 576px) {
151  .q-text-sm-start { text-align: left !important; }
152  .q-text-sm-center { text-align: center !important; }
153  .q-text-sm-end { text-align: right !important; }
154}
155
156/* Medium (md) - min-width: 768px */
157@media (min-width: 768px) {
158  .q-text-md-start { text-align: left !important; }
159  .q-text-md-center { text-align: center !important; }
160  .q-text-md-end { text-align: right !important; }
161}
162
163/* Large (lg) - min-width: 992px */
164@media (min-width: 992px) {
165  .q-text-lg-start { text-align: left !important; }
166  .q-text-lg-center { text-align: center !important; }
167  .q-text-lg-end { text-align: right !important; }
168}
169
170/* Extra Large (xl) - min-width: 1200px */
171@media (min-width: 1200px) {
172  .q-text-xl-start { text-align: left !important; }
173  .q-text-xl-center { text-align: center !important; }
174  .q-text-xl-end { text-align: right !important; }
175}
176
177/* 2XL (xxl) - min-width: 1400px */
178@media (min-width: 1400px) {
179  .q-text-xxl-start { text-align: left !important; }
180  .q-text-xxl-center { text-align: center !important; }
181  .q-text-xxl-end { text-align: right !important; }
182}
183
184  /* End of text alignment*/
185  .w-nav-button.w--open {
186    background-color: var(--_qcolors---colors--teal--normal);
187  }
188  .glass-bg {
189    background: rgba(255, 255, 255, 0.45);
190    border-radius: 16px;
191    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
192    backdrop-filter: blur(13.2px);
193    -webkit-backdrop-filter: blur(13.2px);
194    border: 1px solid rgba(255, 255, 255, 1);
195  }
196  #backToTop {
197    position: fixed;
198    left: 24px;
199    bottom: 80px;
200    width: 52px;
201    height: 52px;
202
203    display: flex;
204    align-items: center;
205    justify-content: center;
206
207    border: none;
208    border-radius: 999px;
209
210    cursor: pointer;
211
212    background: rgba(17, 17, 17, 0.85);
213    color: #ffffff;
214
215    backdrop-filter: blur(12px);
216    -webkit-backdrop-filter: blur(12px);
217
218    box-shadow:
219      0 8px 24px rgba(0, 0, 0, 0.15),
220      0 2px 8px rgba(0, 0, 0, 0.08);
221
222    opacity: 0;
223    visibility: hidden;
224    transform: translateY(16px);
225
226    transition:
227      opacity 0.25s ease,
228      transform 0.25s ease,
229      background-color 0.25s ease,
230      box-shadow 0.25s ease;
231
232    z-index: 9999;
233  }
234
235  #backToTop.is-visible {
236    opacity: 1;
237    visibility: visible;
238    transform: translateY(0);
239  }
240
241  #backToTop:hover {
242    background: rgba(17, 17, 17, 1);
243    transform: translateY(-3px);
244
245    box-shadow:
246      0 14px 32px rgba(0, 0, 0, 0.18),
247      0 4px 12px rgba(0, 0, 0, 0.12);
248  }
249
250  #backToTop:active {
251    transform: translateY(0) scale(0.96);
252  }
253
254  #backToTop svg {
255    transition: transform 0.25s ease;
256  }
257
258  #backToTop:hover svg {
259    transform: translateY(-2px);
260  }
261  .centeral-postion {
262    position: absolute;
263    top: 50%;
264    left: 50%;
265    transform: translateY(-50%) translateX(-50%);
266  }
267  @media (max-width: 767px) {
268    #backToTop {
269      right: 16px;
270      bottom: 16px;
271      width: 48px;
272      height: 48px;
273    }
274    #cursor-dot,
275    #cursor-outline {
276      display: none;
277    }
278    html,
279    body {
280      cursor: auto !important;
281    }
282    .md-hiddn {
283      display: none !important;
284    }
285    .md-full  {
286      width: 100% !important;
287    }
288
289
290    .md-text-center {
291      text-align: center;
292    }
293  }
294
295  .nav-list-items {
296    border-radius: var(--space-8, 8px);
297    background: rgba(255, 255, 255, 0.03);
298    box-shadow: 0 40px 70px 0 rgba(0, 0, 0, 0.36);
299    backdrop-filter: blur(32px);
300    border: 1px solid rgba(255, 255, 255, 0.1);
301  }
302  .swiper-slide {
303    min-height: 100%;
304    max-height: 100%;
305    height: 100%;
306  }
307  .subtitle {
308    width: auto;
309    height: auto;
310  }
311  .q-grid-pattern-bg {
312    background-color: #000;
313    background-image: linear-gradient(rgba(6, 144, 249, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 144, 249, 0.2) 1px, transparent 1px);
314    background-size: 40px 40px;
315    position: relative;
316  }
317  .q-grid-pattern-bg:before {
318    content: '';
319    position: absolute;
320    top: 0;
321    left: 0;
322    right: 0;
323    bottom: 0;
324    background: radial-gradient(ellipse at center, #00000070 0%, #000 80%);
325    pointer-events: none;
326  }
327
328  .q-bg-dotted {
329    width: 100%;
330    height: 100%;
331    background: #000;
332    background-image: none;
333    background-size: auto;
334    background-image: radial-gradient(rgba(6, 144, 249, 0.3) 1px, transparent 1px);
335    background-size: 30px 30px;
336    position: relative;
337  }
338  .q-bg-dotted::before {
339    content: '';
340    position: absolute;
341    top: 0;
342    left: 0;
343    right: 0;
344    bottom: 0;
345    background: linear-gradient(180deg, #000 0%, transparent 40%, transparent 60%, #000 100%);
346    pointer-events: none;
347  }
348  .q-bg-dotted::after {
349    content: '';
350    position: absolute;
351    top: 0;
352    left: 0;
353    right: 0;
354    bottom: 0;
355    background-color: #00000078;
356  }
357  .q-radial-bg {
358    background-image: radial-gradient(circle closest-corner, #0690f940, #000 41%);
359  }
360  .q-gradient-h {
361    background: radial-gradient(ellipse 800px 220px at 50% 42%, rgba(0, 170, 255, 0.05), transparent 70%), radial-gradient(ellipse 500px 180px at 40% 55%, rgba(0, 90, 255, 0.04), transparent 70%), radial-gradient(ellipse 500px 180px at 60% 55%, rgba(0, 200, 255, 0.04), transparent 70%), radial-gradient(ellipse 250px 120px at 50% 50%, rgba(255, 255, 255, 0.02), transparent 80%), #000;
362  }
363  .gradient-option-1 {
364    background: radial-gradient(circle 600px at 35% 50%, rgba(0, 120, 255, 0.08), transparent 70%), radial-gradient(circle 700px at 65% 50%, rgba(0, 180, 255, 0.05), transparent 75%), #000;
365  } /* ========================= */
366  /* Option 2 */
367  /* ========================= */
368
369  .option-2 {
370    background: radial-gradient(ellipse 900px 300px at 50% 50%, rgba(0, 120, 255, 0.09), transparent 70%), radial-gradient(ellipse 500px 200px at 50% 50%, rgba(255, 255, 255, 0.02), transparent 80%), #000;
371  }
372
373  /* ========================= */
374  /* Option 3 */
375  /* ========================= */
376
377  .option-3 {
378    background: radial-gradient(circle 500px at 40% 45%, rgba(0, 140, 255, 0.06), transparent 75%), radial-gradient(circle 500px at 60% 55%, rgba(0, 80, 255, 0.05), transparent 75%), radial-gradient(circle 250px at 50% 50%, rgba(255, 255, 255, 0.02), transparent 80%), #000;
379  }
380
381  /* ========================= */
382  /* Option 4 */
383  /* ========================= */
384
385  .option-4 {
386    background: radial-gradient(ellipse 700px 250px at 30% 50%, rgba(0, 170, 255, 0.06), transparent 70%), radial-gradient(ellipse 700px 250px at 70% 50%, rgba(0, 100, 255, 0.06), transparent 70%), #000;
387  }
388
389  // member card animation
390     .member-card {
391    position: relative;
392    overflow: hidden;
393    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
394    will-change: transform;
395  }
396
397  .member-card::before {
398    content: '';
399    position: absolute;
400    inset: 0;
401    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
402    opacity: 0;
403    transition:
404      opacity 0.5s ease,
405      transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.2);
406    pointer-events: none;
407    will-change: opacity;
408  }
409
410  .member-card:hover {
411    transform: scale(1.02) translateY(-5px);
412  }
413
414  .member-card:hover::before {
415    opacity: 1;
416  }
417
418  .member-card {
419    transition:
420      background-size 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
421      background-position 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
422      transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
423    background-size: cover !important;
424    background-position: 50% 50% !important;
425  }
426
427  .member-card:hover {
428    background-size: 108% !important;
429    background-position: 55% 45% !important;
430  }
431
432  .member-card:hover .more-button .link {
433    transform: translateX(6px) scale(1.1);
434  }
435
436  .more-button .link {
437    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
438    display: inline-block;
439    will-change: transform;
440  }
441
442  /* ============================================ */
443  /* الاقتراح 1: ارتفاع الكارد + ظهور محتوى ناعم */
444  /* ============================================ */
445  .card.effect-1 {
446    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
447  }
448
449  .card.effect-1:hover {
450    transform: translateY(-8px);
451  }
452
453  .card.effect-1:hover .card-image img {
454    transform: scale(1.05);
455    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
456  }
457
458  .card.effect-1:hover .card-head {
459    transform: translateX(4px);
460    transition: transform 0.3s ease;
461  }
462
463  .card.effect-1:hover .card-describtion {
464    transform: translateY(-2px);
465    opacity: 0.9;
466    transition:
467      transform 0.3s ease 0.05s,
468      opacity 0.3s ease 0.05s;
469  }
470
471  .card.effect-1 .card-image img {
472    transition: transform 0.4s ease;
473  }
474
475  .card.effect-1 .card-head {
476    transition: transform 0.25s ease;
477  }
478
479  .card.effect-1 .card-describtion {
480    transition:
481      transform 0.25s ease,
482      opacity 0.25s ease;
483  }
484
485  /* ============================================ */
486  /* الاقتراح 2: زوم خفيف + إزالة الحدود المتحركة */
487  /* ============================================ */
488  .card.effect-2 {
489    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
490  }
491
492  .card.effect-2:hover {
493    transform: scale(1.02);
494  }
495
496  .card.effect-2:hover .card-image img {
497    transform: scale(1.04);
498    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
499  }
500
501  .card.effect-2:hover .card-subtitle {
502    transform: translateX(5px);
503    transition: transform 0.25s ease;
504  }
505
506  .card.effect-2:hover .heading-5 {
507    transform: translateY(-2px);
508    transition: transform 0.3s ease;
509  }
510
511  .card.effect-2:hover .card-describtion .text-23 {
512    letter-spacing: 0.3px;
513    transition: letter-spacing 0.25s ease;
514  }
515
516  .card.effect-2 .card-image img {
517    transition: transform 0.35s ease;
518  }
519
520  .card.effect-2 .card-subtitle {
521    transition: transform 0.2s ease;
522  }
523
524  .card.effect-2 .heading-5 {
525    transition: transform 0.25s ease;
526  }
527
528  .card.effect-2 .card-describtion .text-23 {
529    transition: letter-spacing 0.2s ease;
530  }
531
532  /* ============================================ */
533  /* الاقتراح 3: تأثير الانزلاق المتتالي (Staggered Slide) */
534  /* ============================================ */
535  .card.effect-3 {
536    transition:
537      box-shadow 0.35s ease,
538      transform 0.3s ease;
539  }
540
541  .card.effect-3:hover {
542    transform: translateY(-5px);
543    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
544  }
545
546  .card.effect-3:hover .card-image img {
547    transform: scale(1.03);
548    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);
549  }
550
551  .card.effect-3:hover .card-subtitle {
552    transform: translateX(6px);
553    transition: transform 0.2s ease 0.05s;
554  }
555
556  .card.effect-3:hover .heading-5 {
557    transform: translateX(4px);
558    transition: transform 0.2s ease 0.1s;
559  }
560
561  .card.effect-3:hover .card-describtion {
562    transform: translateX(3px);
563    transition: transform 0.2s ease 0.15s;
564  }
565
566  .card.effect-3 .card-image img {
567    transition: transform 0.35s ease;
568  }
569
570  .card.effect-3 .card-subtitle {
571    transition: transform 0.15s ease;
572  }
573
574  .card.effect-3 .heading-5 {
575    transition: transform 0.15s ease;
576  }
577
578  .card.effect-3 .card-describtion {
579    transition: transform 0.15s ease;
580  }
581
582  /* ============================================ */
583  /* الاقتراح 4: نبض خفيف مع إضاءة */
584  /* ============================================ */
585  .card.effect-4 {
586    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
587  }
588
589  .card.effect-4:hover {
590    transform: scale(1.01);
591    animation: cardPulse 0.5s ease;
592  }
593
594  @keyframes cardPulse {
595    0% {
596      transform: scale(1.01);
597    }
598    50% {
599      transform: scale(1.02);
600    }
601    100% {
602      transform: scale(1.01);
603    }
604  }
605
606  .card.effect-4:hover .card-image img {
607    transform: scale(1.04);
608    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
609  }
610
611  .card.effect-4:hover .card-subtitle .text-21 {
612    letter-spacing: 0.5px;
613    transition: letter-spacing 0.2s ease;
614  }
615
616  .card.effect-4:hover .heading-5 .text-22 {
617    background: linear-gradient(135deg, currentColor 0%, rgba(255, 255, 255, 0.7) 100%);
618    background-clip: text;
619    -webkit-background-clip: text;
620    transition: background 0.3s ease;
621  }
622
623  .card.effect-4 .card-image img {
624    transition: transform 0.35s ease;
625  }
626
627  .card.effect-4 .card-subtitle .text-21 {
628    transition: letter-spacing 0.15s ease;
629  }
630
631  .card.effect-4 .heading-5 .text-22 {
632    transition: background 0.25s ease;
633  }
634
635  /* ============================================ */
636  /* الاقتراح 5: تأثير الصورة الخلفية المتحركة */
637  /* ============================================ */
638  .card.effect-5 {
639    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
640  }
641
642  .card.effect-5:hover {
643    transform: translateY(-6px);
644  }
645
646  .card.effect-5:hover .card-image {
647    overflow: hidden;
648  }
649
650  .card.effect-5:hover .card-image img {
651    transform: scale(1.06);
652    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
653  }
654
655  .card.effect-5:hover .card-head {
656    transform: translateY(-3px);
657    transition: transform 0.25s ease;
658  }
659
660  .card.effect-5:hover .card-subtitle .background {
661    transform: rotate(90deg);
662    transition: transform 0.3s ease;
663  }
664
665  .card.effect-5:hover .card-describtion .text-23 {
666    transform: translateY(-1px);
667    opacity: 0.92;
668    transition:
669      transform 0.25s ease,
670      opacity 0.25s ease;
671  }
672
673  .card.effect-5 .card-image {
674    transition: overflow 0.2s ease;
675  }
676
677  .card.effect-5 .card-image img {
678    transition: transform 0.4s ease;
679  }
680
681  .card.effect-5 .card-head {
682    transition: transform 0.2s ease;
683  }
684
685  .card.effect-5 .card-subtitle .background {
686    transition: transform 0.25s ease;
687  }
688
689  .card.effect-5 .card-describtion .text-23 {
690    transition:
691      transform 0.2s ease,
692      opacity 0.2s ease;
693  }
694
695  /* ============================================ */
696  /* الاقتراح 6: تأثير الانحناء الخفيف (3D Tilt) */
697  /* ============================================ */
698  .card.effect-6 {
699    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
700    transform-style: preserve-3d;
701    perspective: 1000px;
702  }
703
704  .card.effect-6:hover {
705    transform: perspective(1000px) rotateX(2deg) rotateY(3deg) translateY(-5px);
706  }
707
708  .card.effect-6:hover .card-image img {
709    transform: translateZ(10px) scale(1.02);
710    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
711  }
712
713  .card.effect-6:hover .card-head {
714    transform: translateZ(6px) translateX(2px);
715    transition: transform 0.25s ease;
716  }
717
718  .card.effect-6:hover .card-describtion {
719    transform: translateZ(4px);
720    transition: transform 0.25s ease 0.05s;
721  }
722
723  .card.effect-6:hover .card-subtitle .background {
724    transform: translateZ(8px) rotate(90deg);
725    transition: transform 0.3s ease;
726  }
727
728  .card.effect-6 .card-image img {
729    transition: transform 0.35s ease;
730  }
731
732  .card.effect-6 .card-head {
733    transition: transform 0.2s ease;
734  }
735
736  .card.effect-6 .card-describtion {
737    transition: transform 0.2s ease;
738  }
739
740  .card.effect-6 .card-subtitle .background {
741    transition: transform 0.25s ease;
742  }
743
744  /* إظهار المؤشر الافتراضي على الأجهزة اللمسية فقط */
745  @media (hover: none) and (pointer: coarse) {
746    body,
747    html {
748      cursor: auto !important;
749    }
750    #custom-cursor,
751    #cursor-dot,
752    #cursor-outline,
753    #mouse-glow {
754      display: none !important;
755    }
756  }
757
758  /* طبقة التوهج الخلفية */
759  #mouse-glow {
760    position: fixed;
761    top: 0;
762    left: 0;
763    right: 0;
764    bottom: 0;
765    width: 100%;
766    height: 100%;
767    pointer-events: none;
768    z-index: 9998;
769    opacity: 1;
770    will-change: background;
771    background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 217, 207, 0.08), transparent 70%);
772  }
773
774  /* المؤشر المخصص - النقطة الداخلية */
775  #cursor-dot {
776    position: fixed;
777    width: 8px;
778    height: 8px;
779    background: #00d9cf;
780    border-radius: 50%;
781    pointer-events: none;
782    z-index: 10001;
783    transform: translate(-50%, -50%);
784    transition:
785      width 0.2s ease,
786      height 0.2s ease,
787      background 0.2s ease;
788    box-shadow: 0 0 10px rgba(0, 217, 207, 0.8);
789  }
790
791  /* المؤشر المخصص - الحلقة الخارجية */
792  #cursor-outline {
793    position: fixed;
794    width: 32px;
795    height: 32px;
796    border: 2px solid rgba(0, 217, 207, 0.8);
797    border-radius: 50%;
798    pointer-events: none;
799    z-index: 10000;
800    transform: translate(-50%, -50%);
801    transition:
802      width 0.3s cubic-bezier(0.2, 1, 0.3, 1),
803      height 0.3s cubic-bezier(0.2, 1, 0.3, 1),
804      border-color 0.2s ease,
805      background 0.2s ease;
806  }
807
808  /* حالة التفاعل عند المرور على العناصر القابلة للنقر */
809  #cursor-outline.hover-effect {
810    width: 52px;
811    height: 52px;
812    background: rgba(0, 217, 207, 0.15);
813    border-color: #00d9cf;
814  }
815
816  #cursor-dot.hover-effect {
817    width: 10px;
818    height: 10px;
819    background: #00d9cf;
820    box-shadow: 0 0 15px rgba(0, 217, 207, 1);
821  }
822
823  /* حالة النقر */
824  #cursor-outline.click-effect {
825    width: 24px;
826    height: 24px;
827    border-color: #ffffff;
828    background: rgba(0, 217, 207, 0.3);
829  }
830
831  #cursor-dot.click-effect {
832    width: 5px;
833    height: 5px;
834  }
835
836  /* تقليل الحركة */
837  @media (prefers-reduced-motion: reduce) {
838    #mouse-glow,
839    #cursor-dot,
840    #cursor-outline {
841      display: none;
842    }
843    body,
844    html {
845      cursor: auto !important;
846    }
847  }
848
849  /* الكلاس الرئيسي: الدائرة الأكبر وتغليف العنصر */
850  .glowing-circles-bg {
851    position: relative;
852    display: flex;
853    align-items: center;
854    justify-content: center;
855
856    /* الحجم متجاوب 100% مع أقصى عرض للحفاظ على التصميم */
857    width: 100%;
858    aspect-ratio: 1 / 1; /* يضمن أن يبقى العنصر دائرياً بشكل مثالي دائماً */
859    border-radius: 50%;
860
861    background: radial-gradient(50% 50% at 50% 50%, rgba(6, 144, 249, 0.02) 0%, rgba(4, 101, 174, 0.02) 77.88%);
862    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.25);
863
864    /* إعداد انتقال سلس جداً (Premium Easing) */
865    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
866    cursor: pointer;
867  }
868
869  /* إعدادات مشتركة للدوائر الداخلية */
870  .glowing-circles-bg::before,
871  .glowing-circles-bg::after {
872    content: '';
873    position: absolute;
874    border-radius: 50%;
875    transform-origin: center; /* لضمان أن التكبير يبدأ من المنتصف */
876    transition:
877      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
878      background 0.8s ease;
879    	z-index: -5;
880  }
881
882  /* الدائرة الوسطى */
883  .glowing-circles-bg::before {
884    /* الحجم كنسبة مئوية من الدائرة الأم (522/568 = ~92%) */
885    width: 310px;
886    height: 310px;
887    background: radial-gradient(50% 50% at 50% 50%, rgba(6, 144, 249, 0.04) 0%, rgba(4, 101, 174, 0.04) 66.83%);
888    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.25);
889  }
890
891  /* الدائرة الأصغر (العليا) */
892  .glowing-circles-bg::after {
893    /* الحجم كنسبة مئوية (476/568 = ~84%) */
894    width: 300px;
895    height: 300px;
896    background: linear-gradient(180deg, rgba(6, 144, 249, 0.06) 0%, rgba(4, 101, 174, 0.06) 100%);
897    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
898  }
899
900  /* =========================================
901     تأثيرات الهوفر (Hover Animations)
902     ========================================= */
903
904  /* حركة الدائرة الأساسية: تكبير خفيف مع زيادة الظل */
905  .glowing-circles-bg:hover {
906    transform: scale(1.02);
907    box-shadow: 0 16px 36px 0 rgba(0, 0, 0, 0.35);
908  }
909
910  /* حركة الدائرة الوسطى: تتوسع أكثر قليلاً مع حركة طفيفة للأعلى وزيادة الشفافية */
911  .glowing-circles-bg:hover::before {
912    transform: scale(1.04) translateY(-1%);
913    background: radial-gradient(50% 50% at 50% 50%, rgba(6, 144, 249, 0.06) 0%, rgba(4, 101, 174, 0.06) 66.83%);
914  }
915
916  /* حركة الدائرة العليا: تتوسع بشكل ملحوظ وتتحرك أكثر للأعلى (تأثير Parallax 3D) */
917  .glowing-circles-bg:hover::after {
918    transform: scale(1.07) translateY(-3%);
919    background: linear-gradient(180deg, rgba(6, 144, 249, 0.09) 0%, rgba(4, 101, 174, 0.09) 100%);
920  }
921
922  /* ============================================ */
923  /* تأثير 3D Tilt للكارت الجديد */
924  /* ============================================ */
925
926  .card-7.soluation-card {
927    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
928    transform-style: preserve-3d;
929    perspective: 1000px;
930  }
931
932  .card-7.soluation-card:hover {
933    transform: perspective(1000px) rotateX(2deg) rotateY(3deg) translateY(-5px);
934  }
935
936  /* تحريك الصورة أو الأيقونة لو موجودة */
937  .card-7.soluation-card:hover .head-10 {
938    transform: translateZ(8px);
939    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
940  }
941
942  /* تحريك العنوان الفرعي No-Code Strategy Builder */
943  .card-7.soluation-card:hover .so-uation-card-subtitle {
944    transform: translateZ(6px) translateX(2px);
945    transition: transform 0.3s ease;
946  }
947
948  /* تحريك الاسم الكبير Building trading strategies */
949  .card-7.soluation-card:hover .soluation-card-name .text-82 {
950    transform: translateZ(10px) translateY(-2px);
951    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
952  }
953
954  /* تحريك الاقتباس */
955  .card-7.soluation-card:hover .soluation-card-quote {
956    transform: translateZ(5px) translateY(-3px);
957    transition: transform 0.3s ease 0.05s;
958  }
959
960  /* تحريك الفوتر */
961  .card-7.soluation-card:hover .soluation-card-footer {
962    transform: translateZ(7px);
963    transition: transform 0.3s ease 0.1s;
964  }
965
966  /* تحريك اسم الشخص */
967  .card-7.soluation-card:hover .soluation-card-name .text-84 {
968    transform: translateX(3px);
969    transition: transform 0.25s ease 0.08s;
970  }
971
972  /* تحريك المسمى الوظيفي */
973  .card-7.soluation-card:hover .soluation-card-job-title {
974    transform: translateX(2px);
975    transition: transform 0.25s ease 0.12s;
976  }
977
978  /* ============================================ */
979  /* الانتقالات الأساسية (للسلاسة عند الدخول والخروج) */
980  /* ============================================ */
981
982  .card-7.soluation-card .head-10 {
983    transition: transform 0.3s ease;
984  }
985
986  .card-7.soluation-card .so-uation-card-subtitle {
987    transition: transform 0.25s ease;
988  }
989
990  .card-7.soluation-card .soluation-card-name .text-82 {
991    transition: transform 0.3s ease;
992  }
993
994  .card-7.soluation-card .soluation-card-quote {
995    transition: transform 0.25s ease;
996  }
997
998  .card-7.soluation-card .soluation-card-footer {
999    transition: transform 0.25s ease;
1000  }
1001
1002  .card-7.soluation-card .soluation-card-name .text-84 {
1003    transition: transform 0.2s ease;
1004  }
1005
1006  .card-7.soluation-card .soluation-card-job-title {
1007    transition: transform 0.2s ease;
1008  }
1009
1010  /* ============================================ */
1011  /* تأثير 3D Tilt لكارت how-card */
1012  /* ============================================ */
1013
1014  .how-card {
1015    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
1016    transform-style: preserve-3d;
1017    perspective: 1000px;
1018  }
1019
1020  .how-card:hover {
1021    transform: perspective(1000px) rotateX(2deg) rotateY(3deg) translateY(-5px);
1022  }
1023
1024  /* تحريك رأس الكارد (Build) */
1025  .how-card:hover .how-card-head {
1026    transform: translateZ(12px) translateX(2px);
1027    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
1028  }
1029
1030  /* تحريك الصورة */
1031  .how-card:hover .how-card-image {
1032    transform: translateZ(15px) scale(1.03);
1033    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
1034  }
1035
1036  /* تحريك المحتوى النصي */
1037  .how-card:hover .how-card-content {
1038    transform: translateZ(8px) translateY(-2px);
1039    transition: transform 0.3s ease 0.05s;
1040  }
1041
1042  /* تحريك الرقم */
1043  .how-card:hover .how-card-number {
1044    transform: translateZ(10px) translateX(3px);
1045    transition: transform 0.3s ease 0.08s;
1046  }
1047
1048  /* تحريك النص داخل الرقم بشكل منفصل */
1049  .how-card:hover .how-card-number .text-39 {
1050    transform: scale(1.05);
1051    transition: transform 0.25s ease 0.1s;
1052  }
1053
1054  /* ============================================ */
1055  /* الانتقالات الأساسية (للسلاسة عند الدخول والخروج) */
1056  /* ============================================ */
1057
1058  .how-card .how-card-head {
1059    transition: transform 0.3s ease;
1060  }
1061
1062  .how-card .how-card-image {
1063    transition: transform 0.35s ease;
1064  }
1065
1066  .how-card .how-card-content {
1067    transition: transform 0.25s ease;
1068  }
1069
1070  .how-card .how-card-number {
1071    transition: transform 0.25s ease;
1072  }
1073
1074  .how-card .how-card-number .text-39 {
1075    transition: transform 0.2s ease;
1076  }
1077
1078  /* ============================================ */
1079  /*---------------- feature card -------------------*/
1080  /* ============================================ */
1081
1082  .q-feature-card {
1083    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
1084    perspective: 1000px;
1085  }
1086  .q-feature-card:hover {
1087    transform: translateY(-2px);
1088  }
1089  .q-feature-card .feature-card-icon,
1090  .q-feature-card:hover .feature-card-head,
1091  .q-feature-card:hover .feature-card-describtion {
1092    transition: transform 0.3s ease;
1093  }
1094
1095  .q-feature-card:hover .feature-card-icon,
1096  .q-feature-card:hover .feature-card-head,
1097  .q-feature-card:hover .feature-card-describtion {
1098    transform: translateZ(12px) translateX(2px);
1099    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
1100  }
1101
1102  .q-feature-card .floating-1,
1103  .q-feature-card:hover .floating-2,
1104  .q-feature-card:hover .floating-3,
1105  .q-feature-card:hover .floating-4 {
1106    transition: transform 0.35s ease;
1107  }
1108  .q-feature-card:hover .floating-1,
1109  .q-feature-card:hover .floating-2,
1110  .q-feature-card:hover .floating-3,
1111  .q-feature-card:hover .floating-4 {
1112    transform: translateZ(15px) scale(1.03);
1113    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
1114  }
1115 
1116  /* Soluation  Section */
1117  @media (min-width: 768px) and (max-width: 1024px) {
1118    .soluation-content-2 {
1119      grid-column-gap: 5px;
1120    }
1121
1122    .qoute-line {
1123      display: none;
1124    }
1125  }
1126
1127  /* the product page hero section */
1128  .absoluate.circle1,
1129.absoluate.circle2,
1130.absoluate.circle3 {
1131    position: absolute !important;
1132    top: 50% !important;
1133    left: 50% !important;
1134    transform: translate(-50%, -50%)!important;
1135    border-radius: 50% !important;
1136  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
1137}
1138  /* 🔥 حركة الهوفر 🔥 */
1139.product-page-image-wrap:hover .circle1 {
1140    transform: translate(-50%, -50%) scale(1.3) rotate(45deg);
1141    opacity: 0.3;
1142    background: rgba(6, 144, 249, 0.12);
1143}
1144
1145.product-page-image-wrap:hover .circle2 {
1146    transform: translate(-50%, -50%) scale(1.4) rotate(-30deg);
1147    opacity: 0.3;
1148    background: rgba(6, 144, 249, 0.12);
1149}
1150
1151.product-page-image-wrap:hover .circle3 {
1152    transform: translate(-50%, -50%) scale(1.5) rotate(60deg);
1153    opacity: 0.3;
1154    background: rgba(6, 144, 249, 0.12);;
1155}
1156
1157/* تأخير الحركة لكل دائرة عشان تكون متتالية */
1158.product-page-image-wrap:hover .circle1 {
1159    transition-delay: 0s;
1160}
1161
1162.product-page-image-wrap:hover .circle2 {
1163    transition-delay: 0.1s;
1164}
1165
1166.product-page-image-wrap:hover .circle3 {
1167    transition-delay: 0.2s;
1168}
1169  .product-page-image-wrap .scale-rotate {
1170    transition: all 0.3s ease-in-out;
1171  }
1172  .product-page-image-wrap:hover .scale-rotate {
1173     transform: scale(1.05);
1174  }
1175.product-page-image-wrap .scale-down {
1176    transition: all 0.3s ease-in-out;
1177  }
1178  .product-page-image-wrap:hover .scale-down {
1179    transform: translate(-4%, -4%) scale(0.9);
1180  }
1181
1182  @media (min-width: 769px) {
1183  #timeline-scroll-container {
1184    min-height: 100vh !important;
1185    height: 100vh !important;
1186    overflow: hidden !important;
1187    position: relative !important;
1188  }
1189  
1190  #timeline-track {
1191    will-change: transform;
1192  }
1193  
1194  /* القسم اللي بعد التايملاين */
1195  #timeline-scroll-container + section,
1196  #timeline-scroll-container + div {
1197    position: relative !important;
1198    margin-top: 0 !important;
1199  }
1200
1201  
1202}
1203
1204  [data-wf--qtl-header--variant="larg-left"] .tilte-span {
1205   display: block;
1206}
1207  .qx9k-faq-vault-a {
1208	transition: all .35s ease;
1209}
1210  .qx9k-faq-vault-item.open, .qx9k-faq-vault-item:hover {
1211	border-color: var(--_qcolors---colors--blue--normal);
1212}
1213
1214  /* the FQA Styles */
1215    .qx9k-faq-vault-toggle-text {
1216  display: inline-block; /* مهم عشان الـ transform يشتغل */
1217  transition: transform 0.3s ease;
1218}
1219
1220/* لما العنصر مفتوح، الأيقونة تدور */
1221.qx9k-faq-vault-item.open .qx9k-faq-vault-toggle-text {
1222  transform: rotate(180deg); /* جرّب 135deg أو 180deg حسب شكل الأيقونة */
1223}
1224
1225
1226  /*--------- new card -----------------*/
1227    .q-security-card:hover {
1228	border-color: var(--_qcolors---colors--blue--normal);
1229	transform: translateY(-4px);
1230}
1231
1232  .q-security-card:hover .q-corner {
1233	opacity: .9;
1234}
1235</style>
1236
1237<div id="cursor-dot"></div>
1238<div id="cursor-outline"></div><style>
1239 
1240 /* ===== Card ===== */
1241  .team-card {
1242    position: relative;
1243    border-radius: var(--_radius---2xl);
1244    overflow: hidden;
1245    background: var(--_qcolors---card-bg);
1246    border: 1px solid var(--_qcolors---card-border);
1247    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
1248    cursor: pointer;
1249  }
1250
1251  .team-card:hover {
1252    border-color: var(--_qcolors---colors--blue--normal);
1253    transform: translateY(-6px);
1254    box-shadow: 0 20px 40px -20px rgba(6,144,249,.35);
1255  }
1256
1257  .team-card__media {
1258    position: relative;
1259    aspect-ratio: 4 / 5;
1260    overflow: hidden;
1261  }
1262
1263  .team-card__media img {
1264    width: 100%; height: 100%;
1265    object-fit: cover;
1266    display: block;
1267    filter: grayscale(35%) contrast(1.02);
1268    transform: scale(1.02);
1269    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
1270  }
1271
1272  .team-card:hover .team-card__media img {
1273    transform: scale(1.1);
1274    filter: grayscale(0%) contrast(1.05);
1275  }
1276
1277  .team-card__scrim {
1278    position: absolute; inset: 0;
1279    background: linear-gradient(180deg, transparent 45%, rgba(4,7,12,.55) 75%, rgba(4,7,12,.92) 100%);
1280    transition: opacity .4s ease;
1281  }
1282
1283  /* corner brackets, consistent with security cards */
1284  .corner {
1285    position: absolute;
1286    width: 16px; height: 16px;
1287    border-color: var(--_qcolors---colors--teal--normal);
1288    opacity: 0;
1289    transition: opacity .4s ease, transform .4s ease;
1290    z-index: 2;
1291  }
1292  .team-card:hover .corner { opacity: .9; }
1293  .corner.tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; transform: translate(-4px,-4px); }
1294  .team-card:hover .corner.tl { transform: translate(0,0); }
1295  .corner.tr { top: 12px; right: 12px; border-top: 1.5px solid; border-right: 1.5px solid; transform: translate(4px,-4px); }
1296  .team-card:hover .corner.tr { transform: translate(0,0); }
1297
1298  /* social icons */
1299  .team-card__social {
1300    position: absolute;
1301    top: var(--_qspace---space-16);
1302    right: var(--_qspace---space-16);
1303    display: flex;
1304    flex-direction: column;
1305    gap: 8px;
1306    z-index: 3;
1307    opacity: 0;
1308    transform: translateY(-8px);
1309    transition: opacity .35s ease .05s, transform .35s ease .05s;
1310  }
1311  .team-card:hover .team-card__social { opacity: 1; transform: translateY(0); }
1312
1313  .team-card__social a {
1314    width: 32px; height: 32px;
1315    border-radius: var(--_radius---md);
1316    background: rgba(6,144,249,.14);
1317    border: 1px solid rgba(6,144,249,.3);
1318    backdrop-filter: blur(6px);
1319    display: flex; align-items: center; justify-content: center;
1320    color: var(--_qcolors---colors--white--normal);
1321    transition: background .25s ease, transform .25s ease, border-color .25s ease;
1322  }
1323  .team-card__social a:hover {
1324    background: var(--_qcolors---colors--blue--normal);
1325    border-color: var(--_qcolors---colors--blue--normal);
1326    transform: scale(1.08);
1327  }
1328
1329  /* info panel */
1330  .team-card__info {
1331    position: absolute;
1332    left: var(--_qspace---space-16);
1333    right: var(--_qspace---space-16);
1334    bottom: var(--_qspace---space-16);
1335    background: rgba(10,15,26,.72);
1336    border: 1px solid var(--_qcolors---card-border);
1337    border-radius: var(--_radius---lg);
1338    padding: var(--_qspace---space-16) var(--_qspace---space-20);
1339    backdrop-filter: blur(10px);
1340    transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, background .4s ease;
1341    z-index: 2;
1342  }
1343  .team-card:hover .team-card__info {
1344    transform: translateY(-6px);
1345    border-color: rgba(6,144,249,.4);
1346    background: rgba(10,15,26,.88);
1347  }
1348
1349  .team-card__name {
1350    font-family: var(--_typography---family--primary);
1351    font-weight: 700;
1352    font-size: 17px;
1353    color: var(--_qcolors---colors--blue--normal);
1354    margin-bottom: 2px;
1355    display: flex; align-items: center; gap: 6px;
1356  }
1357
1358  .team-card__name .arrow {
1359    display: inline-flex;
1360    opacity: 0;
1361    transform: translateX(-4px);
1362    transition: opacity .3s ease, transform .3s ease;
1363  }
1364  .team-card:hover .team-card__name .arrow { opacity: 1; transform: translateX(0); }
1365
1366  .team-card__role {
1367    font-size: 13px;
1368    color: var(--_qcolors---colors--grey--normal);
1369  }
1370
1371  @media (max-width: 900px) {
1372    .team-grid { grid-template-columns: repeat(2, 1fr); }
1373  }
1374  @media (max-width: 560px) {
1375    .team-grid { grid-template-columns: 1fr; }
1376    .section { padding: var(--_qspace---space-64) 20px; }
1377  }
1378
1379  .team-card .member-link-wrap {
1380    display: block !important;
1381  }
1382
1383
1384      /* Comprehensive Responsive Fixes for Mobile */
1385    @media (max-width: 768px) {
1386      html, body {
1387        overflow-x: hidden !important;
1388        width: 100% !important;
1389        max-width: 100% !important;
1390      }
1391      
1392      .relative.min-h-screen {
1393        overflow-x: hidden !important;
1394        width: 100% !important;
1395        max-width: 100% !important;
1396      }
1397      
1398      /* Fix the scroll container completely */
1399      #timeline-scroll-container {
1400        overflow: hidden !important;
1401        overflow-x: hidden !important;
1402        overflow-y: hidden !important;
1403        cursor: default !important;
1404        width: 100% !important;
1405        max-width: 100vw !important;
1406      }
1407      
1408      /* Fix the timeline track */
1409      .timeline-container {
1410        flex-direction: column !important;
1411        min-width: 0 !important; /* Override min-w-max from HTML */
1412        max-width: 100% !important;
1413        width: 100% !important;
1414        gap: 1.5rem !important;
1415        padding-left: 1rem !important;
1416        padding-right: 1rem !important;
1417        align-items: center !important;
1418        margin: 0 !important;
1419      }
1420
1421      .md-d-mone {
1422        display: none !important;
1423      }
1424      
1425      .centrol-glowing-line {
1426        display: none !important;
1427      }
1428
1429      /* Fix all timeline items (cards wrappers) */
1430      .timeline-container > .relative {
1431        width: 100% !important;
1432        max-width: 100% !important;
1433        min-width: 0 !important;
1434        height: auto !important;
1435        padding-top: 0 !important;
1436        padding-bottom: 0 !important;
1437        justify-content: center !important;
1438        margin: 0 !important;
1439      }
1440
1441      /* Fix glass cards */
1442      .glass-card {
1443        width: 100% !important;
1444        max-width: 100% !important;
1445        margin-top: 0 !important;
1446        margin-bottom: 0 !important;
1447      }
1448
1449      /* Specifically fix the commercial card */
1450      .commercial-card {
1451        padding-top: 0 !important;
1452        width: 100% !important;
1453        max-width: 100% !important;
1454      }
1455
1456      .md-p0 {
1457        padding-top: 0 !important;
1458        padding-bottom: 0 !important;
1459      }
1460      
1461      .md-mt-0 {
1462        margin-top: 0 !important;
1463      }
1464      
1465      .md-mb-0 {
1466        margin-bottom: 0 !important;
1467      }
1468      
1469      .md-h2 {
1470        font-size: 28px !important;
1471        line-height: 36px !important;
1472      }
1473
1474      #timeline-track {
1475        padding-bottom: 0 !important;
1476      }
1477
1478      /* Adjust main content padding for mobile */
1479      main {
1480        padding-top: 5rem !important;
1481        padding-bottom: 3rem !important;
1482        overflow-x: hidden !important;
1483        width: 100% !important;
1484        max-width: 100vw !important;
1485      }
1486
1487      /* Adjust header text for mobile */
1488      .font-display-lg {
1489        font-size: 32px !important;
1490        line-height: 40px !important;
1491      }
1492
1493      .font-body-lg {
1494        font-size: 16px !important;
1495      }
1496      
1497      .member-card {
1498        background-size: cover !important;
1499      }
1500      
1501      .md-flex-col {
1502        flex-direction: column;
1503      }
1504    }
1505</style></head><body class="qompy-body-bg q-grid-pattern-bg"><div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav"><div class="container-131 w-container"><a href="/" class="brand w-nav-brand"><img loading="lazy" src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a50d01a7eecdfb4b63c0137_Qompyl-logo.svg" alt="" class="image-5"/></a><nav role="navigation" class="nav-menu-5 nav-list-items w-nav-menu"><a href="/" class="text-labellabel-1medium nav-item-link w-nav-link">Home</a><a href="/product" class="text-labellabel-1medium nav-item-link w-nav-link">Product</a><a href="/about" aria-current="page" class="text-labellabel-1medium nav-item-link w-nav-link w--current">About</a><a href="/careers" class="text-labellabel-1medium nav-item-link w-nav-link">Career</a></nav><div class="w-layout-hflex btn-wrap md-hiddn"><code-island data-loader="{&quot;tag&quot;:&quot;FEDERATION&quot;,&quot;val&quot;:{&quot;clientModuleUrl&quot;:&quot;https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2Fwf-manifest.json&quot;,&quot;moduleId&quot;:&quot;_6a97db73e2362242fed826bf&quot;,&quot;submoduleId&quot;:&quot;0b65951e-7945-a7f2-14b8-58b3fe4d9275&quot;,&quot;exportPath&quot;:&quot;default&quot;,&quot;serverModuleUrl&quot;:&quot;_&quot;}}" data-props="{&quot;label&quot;:&quot;Join Early Access&quot;,&quot;variant&quot;:&quot;Filled&quot;,&quot;size&quot;:&quot;Large&quot;,&quot;width&quot;:&quot;Auto&quot;,&quot;iconPosition&quot;:&quot;Right&quot;,&quot;iconName&quot;:&quot;arrow-right&quot;,&quot;iconStrokeWidth&quot;:2,&quot;disabled&quot;:false,&quot;link&quot;:{&quot;href&quot;:&quot;/early-access&quot;},&quot;openInNewTab&quot;:false}" data-slots="[]" data-hydrate="true" data-webflow-context="{&quot;mode&quot;:&quot;publish&quot;,&quot;interactive&quot;:true,&quot;locale&quot;:&quot;en&quot;}" data-interactive="true" style="display:contents" data-wf--button-2--style="filled" data-wf--button-2--size="large" data-wf--button-2--width="auto" data-wf--button-2--icon-position="right"><template shadowrootmode="open"><link rel="stylesheet" type="text/css" href="https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2F476b31a8d7459289.css"/><div data-root="true" style="display:contents"><!--$--><style>
1506        .ds-btn:focus-visible {
1507          outline: 2px solid #0690f9;
1508          outline-offset: 2px;
1509        }
1510        
1511    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover {
1512      transform: translateY(-2px) scale(1.02);
1513      filter: brightness(1.1);
1514      box-shadow: 0 8px 24px -4px rgba(6, 144, 249, 0.35), 0 2px 8px -2px rgba(6, 144, 249, 0.2);
1515    }
1516    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--right {
1517      transform: translateX(5px);
1518    }
1519    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--left {
1520      transform: translateX(-5px);
1521    }
1522  
1523        
1524    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover {
1525      background-color: #0690f9;
1526      color: #ffffff;
1527      border-color: #0690f9;
1528      transform: translateY(-2px);
1529      box-shadow: 0 4px 16px -4px rgba(6, 144, 249, 0.2), 0 1px 4px -1px rgba(6, 144, 249, 0.1);
1530    }
1531    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--right {
1532      transform: translateX(5px);
1533    }
1534    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--left {
1535      transform: translateX(-5px);
1536    }
1537  
1538        
1539    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover {
1540      opacity: 0.75;
1541      color: #2da3ff;
1542    }
1543    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--right {
1544      transform: translateX(5px);
1545    }
1546    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--left {
1547      transform: translateX(-5px);
1548    }
1549  
1550        .ds-btn:not([aria-disabled="true"]):active {
1551          transform: scale(0.98) translateY(0px) !important;
1552          box-shadow: none !important;
1553          filter: brightness(1) !important;
1554          transition-duration: 120ms;
1555        }
1556        .ds-btn:not([aria-disabled="true"]):active .ds-btn-icon {
1557          transform: translateX(0px) !important;
1558          transition-duration: 100ms;
1559        }
1560        @media screen and (max-width: 480px) {
1561          .ds-btn {
1562            width: 100% !important;
1563            display: flex;
1564          }
1565        }
1566        @media (prefers-reduced-motion: reduce) {
1567          .ds-btn,
1568          .ds-btn-icon {
1569            transition-duration: 0ms !important;
1570          }
1571          .ds-btn:not([aria-disabled="true"]):hover {
1572            transform: none !important;
1573          }
1574          .ds-btn:not([aria-disabled="true"]):active {
1575            transform: none !important;
1576          }
1577          .ds-btn:not([aria-disabled="true"]):hover .ds-btn-icon {
1578            transform: none !important;
1579          }
1580        }
1581      </style><a class="ds-btn ds-btn--filled" style="display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;font-size:16px;line-height:24px;font-family:&#x27;Inter&#x27;, sans-serif;font-weight:500;letter-spacing:-0.01em;border-radius:8px;
1581cursor:pointer;width:auto;transition-property:background-color, color, border-color, opacity, transform, box-shadow, filter;transition-duration:220ms;transition-timing-function:ease-out;text-decoration:none;border:none;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;box-sizing:border-box;box-shadow:0 0 0 0 transparent;background-color:#0690f9;color:#ffffff" aria-label="Join Early Access" tabindex="0" href="/early-access" target="_self"><span>Join Early Access</span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ds-btn-icon ds-btn-icon--right" aria-hidden="true" style="flex-shrink:0;will-change:transform;transition-property:transform;transition-duration:230ms;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><!--/$--></div></template></code-island></div><div class="menu-button-3 w-nav-button"><div class="burger-icon">menu</div></div></div></div><section class="section-8 q-grid-pattern-bg"><div class="section---1-mission-hero"><div class="container-77"><div class="braedcrumbs"><div class="breadcrumbs-3"><a href="/" class="q-breadcrumb">Home</a></div><div class="breadcrumbs-4"><div class="q-current-creambmrubs">/</div><div class="q-current-creambmrubs">About</div></div></div><div class="qtl-header larg-base-26 about-hero-head"><div class="qtl-eyebrow larg-base-27"><div class="qtl-eyebrow-dot larg-base-28"></div><div>Who We Are</div></div><h1 class="qtl-title larg-base-29">Empowering traders <span class="tilte-span">to build with confidence.</span></h1><p class="qtl-title-desc larg-base-30">We built Qompyl because institutional interfaces shouldn&#x27;t feel cumbersome. We are engineering the modernized standard for intuitive trading, prioritizing absolute clarity and structural dominance.</p></div></div></div></section><div class="section---2-founder-story option-2 sotry-section"><div class="frame-26 row"><div class="container-79"><div class="backgroundbordershadow-2"><div class="floating-accent"><img src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a2695c68d7ba7f925ffbb12_Floating-Accent%3Ashadow.svg" loading="lazy" width="174.4199981689453" height="54" alt="" class="floating-accentshadow"/><div class="container-80"><div class="container-81"><img src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a2695c6097fd0ade816111e_Icon.svg" loading="lazy" width="19.011764526367188" height="20" alt="" class="icon-2"/></div><div class="container-81"><div class="text-99">Tyler Charton</div></div></div></div><img src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a26986c9a7fa1d84257fc92_tyler-founder.png" loading="lazy" alt="" class="q-image"/></div></div><div class="story-content"><div class="story-content-body"><div class="qtl-header story-header"><div class="qtl-eyebrow"><div class="qtl-eyebrow-dot"></div><div>Founder&#x27;s Vision</div></div><h2 class="qtl-title">Born from the <span class="tilte-span">frustration of noise.</span></h2><p class="qtl-title-desc">Before Qompyl, navigating institutional trading meant wrestling with
1582legacy systems that looked like they hadn&#x27;t been updated since 2004.
1583Information density was prioritized over cognitive load, leading to
1584fatigue and execution errors.</p></div><div class="container-83"><div class="story-content-body"><div class="story-p">We realized the real edge wasn&#x27;t just data access - it was data consumption. The interface itself needed to become a tool for focus, not fatigue.</div></div></div><div class="blockquote-style"><div class="story-content-body"><div class="build-with-clarity-trade-with-confidence">&quot;Build with clarity.  Trade with confidence.&quot;</div></div></div></div><div class="horizontalborder-2"><div class="container-84"><div class="story-content-body"><div class="text-102">Tyler Charton</div></div><div class="story-content-body"><div class="text-103">Chief Executive Officer</div></div></div><div class="margin-10"><div class="container-85"><div class="link-style-3"><a href="https://www.linkedin.com/in/tyler-charton-a25181b9/" target="_blank" class="w-inline-block"><img src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a2695c6ee217a99c904747b_Linkedin--Streamline-Font-Awesome-1.svg" loading="lazy" width="24" height="24" alt="" class="linkedin--streamline-font-awesome-1"/></a></div></div></div></div></div></div></div><section id="timeline-section"><div class="code-embed-3 w-embed w-script"><link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css">
1585<style>
1586  :root {
1587    --_qcolors---colors--white--normal: #fff;
1588    --_qcolors---colors--blue--normal: #0690f9;
1589    --_qcolors---colors--grey--normal: #a1a1aa;
1590    --_qcolors---colors--grey--dark: #797980;
1591    --_qcolors---colors--teal--normal: #00d9cf;
1592    --_qcolors---colors--black--normal: #000;
1593    --_qcolors---card-border: #2a3142;
1594    --_qcolors---card-bg: #0a0f1a;
1595    --_typography---family--body: Inter, sans-serif;
1596    --_typography---family--primary: Manrope, sans-serif;
1597    --_typography---family--mono: 'JetBrains Mono', monospace;
1598    --_radius---md: 4px;
1599    --_radius---lg: 8px;
1600    --_radius---2xl: 16px;
1601    --_radius---full: 999px;
1602  }
1603
1604
1605
1606  /* ============ OUTER / PIN WRAPPER ============ */
1607  .qtl-outer { position: relative; }
1608
1609  .qtl-sticky {
1610    position: sticky;
1611    top: 0;
1612    height: 100vh;
1613    overflow: hidden;
1614    display: flex;
1615    flex-direction: column;
1616  }
1617
1618  .qtl-sticky::before {
1619    content: '';
1620    position: absolute;
1621    inset: 0;
1622    background-image: radial-gradient(rgba(6,144,249,.35) 1px, transparent 1px);
1623    background-size: 46px 46px;
1624    opacity: .3;
1625    pointer-events: none;
1626  }
1627
1628  /* ============ HEADER ============ */
1629  .qtl-header {
1630    position: relative;
1631    z-index: 3;
1632    text-align: center;
1633    padding: 64px 32px 0;
1634    flex-shrink: 0;
1635  }
1636  .qtl-header .qtl-eyebrow {
1637    display: inline-flex; align-items: center; gap: 8px;
1638    font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
1639    color: var(--_qcolors---colors--blue--normal);
1640    background: rgba(6,144,249,.1); border: 1px solid rgba(6,144,249,.25);
1641    padding: 6px 14px; border-radius: var(--_radius---full);
1642    margin-bottom: 20px;
1643  }
1644  .qtl-header .qtl-eyebrow .qtl-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_qcolors---colors--teal--normal); box-shadow: 0 0 0 3px rgba(0,217,207,.2); }
1645  .qtl-header h2 {
1646    font-family: var(--_typography---family--primary); font-weight: 700;
1647    font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; margin-bottom: 12px;
1648  }
1649  .qtl-header h2 span { background: linear-gradient(90deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
1650  .qtl-header p { color: var(--_qcolors---colors--grey--normal); font-size: 15px; }
1651
1652  .qtl-progress-track {
1653    position: relative; z-index: 3;
1654    max-width: 400px; margin: 28px auto 0;
1655    height: 2px; background: var(--_qcolors---card-border); border-radius: 2px; overflow: hidden;
1656  }
1657  .qtl-progress-fill {
1658    height: 100%; width: 0%;
1659    background: linear-gradient(90deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal));
1660  }
1661
1662  /* ============ VIEWPORT / TRACK (desktop: horizontal scroll-jack) ============ */
1663  .qtl-viewport { position: relative; flex: 1; overflow: hidden; z-index: 1; }
1664
1665  .qtl-track {
1666    position: absolute;
1667    top: 0; left: 0;
1668    height: 100%;
1669    display: flex;
1670    align-items: stretch;
1671    padding: 0 8vw;
1672    will-change: transform;
1673  }
1674
1675  .qtl-line {
1676    position: absolute;
1677    top: 50%;
1678    left: 0;
1679    height: 1px;
1680    background: linear-gradient(90deg, transparent, rgba(6,144,249,.5) 6%, rgba(0,217,207,.5) 94%, transparent);
1681  }
1682
1683  .qtl-item {
1684    position: relative;
1685    flex: 0 0 300px;
1686    margin-right: 64px;
1687    display: grid;
1688    grid-template-rows: 1fr 26px 1fr;
1689    justify-items: center;
1690  }
1691  .qtl-item:last-child { margin-right: 0; }
1692
1693  .qtl-dot-row { grid-row: 2; position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
1694  .qtl-dot {
1695    width: 10px; height: 10px; border-radius: 50%;
1696    background: var(--_qcolors---colors--teal--normal);
1697    box-shadow: 0 0 0 4px rgba(0,217,207,.15), 0 0 16px rgba(0,217,207,.5);
1698    z-index: 2;
1699    flex-shrink: 0;
1700  }
1701
1702  .qtl-card {
1703    position: relative;
1704    width: 280px;
1705    background: rgba(10,15,26,.8);
1706    border: 1px solid var(--_qcolors---card-border);
1707    border-radius: var(--_radius---2xl);
1708    padding: 22px 22px 24px;
1709    backdrop-filter: blur(6px);
1710    overflow: hidden;
1711    transition: border-color .3s ease;
1712  }
1713
1714  .qtl-card__corner {
1715    position: absolute;
1716    width: 14px; height: 14px;
1717    border-color: var(--_qcolors---colors--teal--normal);
1718    opacity: 0;
1719    transition: opacity .3s ease;
1720    pointer-events: none;
1721  }
1722  .qtl-card:hover .qtl-card__corner { opacity: .9; }
1723  .qtl-card__corner.is-tl { top: 8px; left: 8px; border-top: 1.5px solid; border-left: 1.5px solid; }
1724  .qtl-card__corner.is-br { bottom: 8px; right: 8px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
1725
1726  .qtl-card:hover { border-color: var(--_qcolors---colors--blue--normal); }
1727
1728  .qtl-item.is-top { grid-template-rows: 1fr 26px 1fr; }
1729  .qtl-item.is-top .qtl-card { grid-row: 1; align-self: end; }
1730  .qtl-item.is-bottom .qtl-card { grid-row: 3; align-self: start; }
1731
1732  .qtl-card__icon {
1733    width: 38px; height: 38px; border-radius: var(--_radius---lg);
1734    background: rgba(0,217,207,.1); border: 1px solid rgba(0,217,207,.25);
1735    display: flex; align-items: center; justify-content: center;
1736    color: var(--_qcolors---colors--teal--normal);
1737    margin-bottom: 16px;
1738    font-size: 18px;
1739  }
1740
1741  .qtl-card__date {
1742    font-family: var(--_typography---family--mono);
1743    font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
1744    color: var(--_qcolors---colors--grey--dark);
1745    margin-bottom: 8px;
1746  }
1747
1748  .qtl-card p { font-size: 14.5px; line-height: 1.5; color: var(--_qcolors---colors--white--normal); }
1749
1750  .qtl-item::before {
1751    content: '';
1752    position: absolute;
1753    left: 50%; width: 1px;
1754    background: var(--_qcolors---card-border);
1755    transform: translateX(-50%);
1756    z-index: 1;
1757  }
1758  .qtl-item.is-top::before { top: calc(50% - 13px);
1758 height: 26px; }
1759  .qtl-item.is-bottom::before { top: 50%; height: 26px; }
1760
1761  /* ============ FEATURED / FINAL CARD ============ */
1762  .qtl-item.is-featured {
1763    flex: 0 0 340px;
1764    grid-template-rows: none;
1765    display: flex;
1766    align-items: center;
1767  }
1768  .qtl-item.is-featured::before { display: none; }
1769  .qtl-item.is-featured .qtl-card {
1770    width: 320px;
1771    padding: 28px 26px 30px;
1772    border-color: rgba(0,217,207,.5);
1773    box-shadow: 0 0 0 1px rgba(0,217,207,.15), 0 20px 50px -20px rgba(0,217,207,.35);
1774  }
1775  .qtl-card__badge {
1776    display: inline-block;
1777    font-family: var(--_typography---family--mono);
1778    font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
1779    color: var(--_qcolors---colors--teal--normal);
1780    background: rgba(0,217,207,.1); border: 1px solid rgba(0,217,207,.3);
1781    padding: 4px 10px; border-radius: var(--_radius---full);
1782    margin-left: 10px;
1783  }
1784  .qtl-card__title {
1785    font-family: var(--_typography---family--primary); font-weight: 800;
1786    font-size: 22px; letter-spacing: -0.01em; line-height: 1.2;
1787    margin: 12px 0 10px;
1788  }
1789  .qtl-item.is-featured .qtl-card p { color: var(--_qcolors---colors--grey--normal); font-size: 14px; line-height: 1.6; }
1790
1791
1792  /* ======================================================================
1793     RESPONSIVE — below 768px the pin/horizontal-scroll behaviour is fully
1794     disabled by JS (see script), and this section becomes a normal,
1795     vertically stacked list that scrolls with the page like everything else.
1796  ====================================================================== */
1797  @media (max-width: 768px) {
1798
1799    .qtl-sticky {
1800      position: static;
1801      height: auto;
1802      overflow: visible;
1803    }
1804
1805    .qtl-header { padding: 56px 24px 0; }
1806
1807    .qtl-progress-track { display: none; } /* only meaningful for the horizontal-scroll mode */
1808
1809    .qtl-viewport {
1810      position: static;
1811      overflow: visible;
1812      flex: none;
1813      padding: 40px 24px 24px;
1814    }
1815
1816    .qtl-track {
1817      position: static;
1818      height: auto;
1819      display: flex;
1820      flex-direction: column;
1821      padding: 0 0 0 34px; /* room for the vertical line + dots */
1822      transform: none !important; /* overrides any inline transform left by JS */
1823    }
1824
1825    /* the single horizontal line becomes one continuous vertical line */
1826    .qtl-line {
1827      top: 6px;
1828      bottom: 6px;
1829      left: 9px;
1830      width: 1px !important; /* overrides the inline width JS sets for desktop */
1831      height: auto;
1832      background: linear-gradient(180deg, transparent, rgba(6,144,249,.5) 6%, rgba(0,217,207,.5) 94%, transparent);
1833    }
1834
1835    .qtl-item, .qtl-item.is-top, .qtl-item.is-featured {
1836      display: flex;
1837      align-items: flex-start;
1838      grid-template-rows: none;
1839      flex: none;
1840      width: 100%;
1841      margin-right: 0;
1842      margin-bottom: 28px;
1843      justify-items: initial;
1844    }
1845    .qtl-item:last-child { margin-bottom: 0; }
1846    .qtl-item::before { display: none; } /* per-item connector not needed, single line handles it */
1847
1848    .qtl-dot-row {
1849      grid-row: auto;
1850      position: absolute;
1851      left: -34px;
1852      top: 22px;
1853      width: 20px;
1854      height: 20px;
1855      flex: none;
1856    }
1857
1858    .qtl-item.is-top .qtl-card,
1859    .qtl-item.is-bottom .qtl-card {
1860      grid-row: auto;
1861      align-self: auto;
1862    }
1863
1864    .qtl-card, .qtl-item.is-featured .qtl-card {
1865      width: 100%;
1866      max-width: 420px;
1867    }
1868  }
1869</style>
1870
1871
1872<section class="qtl-outer" id="qtlOuter">
1873  <div class="qtl-sticky">
1874
1875    <div class="qtl-header">
1876      <div class="qtl-eyebrow"><span class="qtl-eyebrow-dot"></span>Key Moments </div>
1877      <h2>Milestones shaping <span>Qompyl</span></h2>
1878      <p>From idea to commercial launch, follow the milestones shaping Qompyl's evolution.</p>
1879      <div class="qtl-progress-track"><div class="qtl-progress-fill" id="qtlProgressFill"></div></div>
1880    </div>
1881
1882    <div class="qtl-viewport" id="qtlViewport">
1883      <div class="qtl-track" id="qtlTrack">
1884        <div class="qtl-line" id="qtlLine"></div>
1885
1886        <div class="qtl-item is-top">
1887          <div class="qtl-card">
1888            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1889            <div class="qtl-card__icon"><i class="icon-building-2"></i></div>
1890            <div class="qtl-card__date">December 2024</div>
1891            <p>Qompyl officially incorporated. First developer joins the team.</p>
1892          </div>
1893          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1894        </div>
1895
1896        <div class="qtl-item is-bottom">
1897          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1898          <div class="qtl-card">
1899            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1900            <div class="qtl-card__icon"><i class="icon-wallet"></i></div>
1901            <div class="qtl-card__date">March 2025</div>
1902            <p>A second investor group joins Qompyl.</p>
1903          </div>
1904        </div>
1905
1906        <div class="qtl-item is-top">
1907          <div class="qtl-card">
1908            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1909            <div class="qtl-card__icon"><i class="icon-users"></i></div>
1910            <div class="qtl-card__date">April 2025</div>
1911            <p>Team doubles in size.</p>
1912          </div>
1913          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1914        </div>
1915
1916        <div class="qtl-item is-bottom">
1917          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1918          <div class="qtl-card">
1919            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1920            <div class="qtl-card__icon"><i class="icon-globe"></i></div>
1921            <div class="qtl-card__date">September 2025</div>
1922            <p>First team workshop in Europe to refine roadmap and go-to-market strategy.</p>
1923          </div>
1924        </div>
1925
1926        <div class="qtl-item is-top">
1927          <div class="qtl-card">
1928            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1929            <div class="qtl-card__icon"><i class="icon-globe"></i></div>
1930            <div class="qtl-card__date">October 2025</div>
1931            <p>Qompyl website launches.</p>
1932          </div>
1933          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1934        </div>
1935
1936        <div class="qtl-item is-bottom">
1937          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1938          <div class="qtl-card">
1939            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1940            <div class="qtl-card__icon"><i class="icon-rocket"></i></div>
1941            <div class="qtl-card__date">March 2026</div>
1942            <p>Team grows to over 25 members.</p>
1943          </div>
1944        </div>
1945
1946        <div class="qtl-item is-top">
1947          <div class="qtl-card">
1948            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1949            <div class="qtl-card__icon"><i class="icon-bug"></i></div>
1950            <div class="qtl-card__date">Summer 2026</div>
1951            <p>
1951Beta testing begins.</p>
1952          </div>
1953          <div class="qtl-dot-row"><div class="qtl-dot"></div></div>
1954        </div>
1955
1956        <div class="qtl-item is-featured">
1957          <div class="qtl-card">
1958            <div class="qtl-card__corner is-tl"></div><div class="qtl-card__corner is-br"></div>
1959            <div style="display:flex;align-items:center;">
1960              <div class="qtl-card__icon" style="margin-bottom:0;"><i class="icon-sparkles"></i></div>
1961              <span class="qtl-card__badge">Destination locked</span>
1962            </div>
1963            <div class="qtl-card__date" style="margin-top:14px;">End of 2026</div>
1964            <div class="qtl-card__title">Estimated Commercial Launch</div>
1965            <p>The culmination of our journey. Qompyl becomes available to the market, setting a new standard for retail trading.</p>
1966          </div>
1967        </div>
1968
1969      </div>
1970    </div>
1971  </div>
1972</section>
1973
1974
1975<script>
1976(function(){
1977  const outer = document.getElementById('qtlOuter');
1978  const viewport = document.getElementById('qtlViewport');
1979  const track = document.getElementById('qtlTrack');
1980  const line = document.getElementById('qtlLine');
1981  const fill = document.getElementById('qtlProgressFill');
1982
1983  const BREAKPOINT = 768;
1984  const isMobile = () => window.innerWidth <= BREAKPOINT;
1985
1986  let maxTranslate = 0;
1987  let targetProgress = 0;
1988  let currentProgress = 0;
1989
1990  function measure(){
1991    if (isMobile()) {
1992      // vertical list mode: no pin, no scroll-jack, natural document height
1993      outer.style.height = 'auto';
1994      track.style.transform = 'none';
1995      maxTranslate = 0;
1996      return;
1997    }
1998    line.style.width = track.scrollWidth + 'px';
1999    maxTranslate = Math.max(track.scrollWidth - viewport.clientWidth, 0);
2000    outer.style.height = (window.innerHeight + maxTranslate) + 'px';
2001  }
2002
2003  function onScroll(){
2004    if (isMobile()) { targetProgress = 0; return; }
2005    const rect = outer.getBoundingClientRect();
2006    const scrollable = outer.offsetHeight - window.innerHeight;
2007    if (scrollable <= 0) { targetProgress = 0; return; }
2008    const scrolled = -rect.top;
2009    targetProgress = Math.min(Math.max(scrolled / scrollable, 0), 1);
2010  }
2011
2012  function raf(){
2013    if (isMobile()) {
2014      // keep it idle/reset on mobile — no transform, no rAF math needed
2015      currentProgress = 0;
2016      requestAnimationFrame(raf);
2017      return;
2018    }
2019    currentProgress += (targetProgress - currentProgress) * 0.09;
2020    if (Math.abs(targetProgress - currentProgress) < 0.0001) currentProgress = targetProgress;
2021    const x = -currentProgress * maxTranslate;
2022    track.style.transform = `translate3d(${x}px,0,0)`;
2023    fill.style.width = (currentProgress * 100) + '%';
2024    requestAnimationFrame(raf);
2025  }
2026
2027  window.addEventListener('scroll', onScroll, { passive: true });
2028  window.addEventListener('resize', () => { measure(); onScroll(); });
2029
2030  measure();
2031  onScroll();
2032  requestAnimationFrame(raf);
2033
2034  /* ---- Optional Lenis integration ----
2035  const lenis = new Lenis();
2036  lenis.on('scroll', onScroll);
2037  function lenisRaf(time){ lenis.raf(time); requestAnimationFrame(lenisRaf); }
2038  requestAnimationFrame(lenisRaf);
2039  ------------------------------------- */
2040})();
2041</script>
2041</div></section><section id="team" class="section radial-bg"><div data-wf--qtl-header--variant="base" class="qtl-header"><div class="qtl-eyebrow"><div class="qtl-eyebrow-dot"></div><div>Meet the Team</div></div><h2 class="qtl-title">The Team Behind <span class="tilte-span">Qompyl</span></h2><p class="qtl-title-desc">Builders, engineers, and user-experience experts dedicated to
2042crafting the ultimate trading environment.</p></div><div class="collection-list-wrapper-5 w-dyn-list"><div role="list" class="our-team-grid w-dyn-items"><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/tyler-charton" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a1ff1ad42508952dc5f57ee_Member%20Card(3).png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/tyler-charton-a25181b9" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2043</div></div><a href="/team/tyler-charton" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Tyler Charton</div></div><div class="team-card__role"><div>CEO &amp; Founder</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/clark-vanscoder" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a20093c39a05bf104bc4a28_Member%20Card-5.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/clark-vanscoder" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2044</div></div><a href="/team/clark-vanscoder" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Clark VanScoder</div></div><div class="team-card__role"><div>Chief Technology Officer/Chief Operations Officer</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/katie-milburn-mba" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab46a579341c600af6fa810_007-2sp-ihY3Fn8%20(1).jpeg" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab46a579341c600af6fa810_007-2sp-ihY3Fn8%20(1)-p-500.jpeg 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab46a579341c600af6fa810_007-2sp-ihY3Fn8%20(1)-p-800.jpeg 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab46a579341c600af6fa810_007-2sp-ihY3Fn8%20(1).jpeg 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/katie-milburn" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2045</div></div><a href="/team/katie-milburn-mba" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Katie Milburn, MBA</div></div><div class="team-card__role"><div>VP, Growth &amp; Business Strategy</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/masayuki-arai" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab15caea72b2264e3cb1092_Masayuki.png" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab15caea72b2264e3cb1092_Masayuki-p-500.png 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab15caea72b2264e3cb1092_Masayuki-p-800.png 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab15caea72b2264e3cb1092_Masayuki.png 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/masayuki-arai-0a5a5a11/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2046</div></div><a href="/team/masayuki-arai" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Masayuki Arai</div></div><div class="team-card__role"><div>VP, Strategy &amp; Market Development </div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/romina-lo-schiavo-ifdwn" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a20076be17201601b89eb91_Member%20Card-1.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/rominaloschi" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2047</div></div><a href="/team/romina-lo-schiavo-ifdwn" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Romina Lo Schiavo, PGD</div></div><div class="team-card__role"><div>Head of Human Resources</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/matt-milburn-mms" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a2008784586d2393f552c20_Member%20Card-3.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/mattmilburn" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2048</div></div><a href="/team/matt-milburn-mms" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Matt Milburn, MMS</div></div><div class="team-card__role"><div> Strategic Advisor</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/zifri-baharudin-fca" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a97dd3b91c3c6b5f19a3c9e_Zifri%20Baharudin%2C%20FCA.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/zifri" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2049</div></div><a href="/team/zifri-baharudin-fca" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Zifri Baharudin, FCA</div></div><div class="team-card__role"><div>Strategic Advisor</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/martin-pinasco" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a97dd4fbe572160233f36b4_Mart%C3%ADn%20Pinasco.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2050</div></div><a href="/team/martin-pinasco" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Martín Pinasco</div></div><div class="team-card__role"><div>Strategic Partnerships &amp; Market Expansion Manager</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/rebecca-menes" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6abaf699506cf66d0a6df23a_rebecca2.png" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6abaf699506cf66d0a6df23a_rebecca2-p-500.png 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6abaf699506cf66d0a6df23a_rebecca2-p-800.png 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6abaf699506cf66d0a6df23a_rebecca2.png 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2051</div></div><a href="/team/rebecca-menes" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Rebecca Menes, M.A.</div></div><div class="team-card__role"><div>Growth and Marketing Manager</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/luis-cecatto" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a2008defd5c9cb811c9863d_Member%20Card-4.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/luishenriqueassis" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2052</div></div><a href="/team/luis-cecatto" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Luis Cecatto, MBA</div></div><div class="team-card__role"><div>Marketing &amp; Strategy Coordinator</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/vince-capuano" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a2009f171abbaae69167d5a_Member%20Card-7.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2053</div></div><a href="/team/vince-capuano" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Vince Capuano</div></div><div class="team-card__role"><div>Lead Trading Strategist</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/nicolas-vrhovski" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200996095a454286f810ff_Member%20Card-6.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/nicolasvrhovski" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2054</div></div><a href="/team/nicolas-vrhovski" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Nicolás Vrhovski</div></div><div class="team-card__role"><div>Quality Control Engineer</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/kai-richardson" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200ae5fd5c9cb811cb47cb_Member%20Card-9.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/kai-richardson" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2
2054.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2055</div></div><a href="/team/kai-richardson" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Kai Richardson</div></div><div class="team-card__role"><div> UX &amp; Front-End Quality Lead</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/claudia-ioana-muresan" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200a4f42f6d221290033a9_Member%20Card-8.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://linkedin.com/in/ioana-claudia-muresan" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2056</div></div><a href="/team/claudia-ioana-muresan" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Claudia Ioana Mureșan</div></div><div class="team-card__role"><div>Quality Control Lead</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/ridvan-gyundogan" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200b3d81a556888b1c2f6f_Member%20Card-10.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/ridvangyundogan/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2057</div></div><a href="/team/ridvan-gyundogan" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Ridvan Gyundogan</div></div><div class="team-card__role"><div>Software Engineer, Back-End </div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/matt-andrews" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200b882c187370d68b0021_Member%20Card-11.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/matt-andrews-69645341/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2058</div></div><a href="/team/matt-andrews" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Matt Andrews</div></div><div class="team-card__role"><div> Cloud Infrastructure Engineer </div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/facundo-escobar" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200bf2d455202a8df67bc7_Member%20Card-12.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/facu-escobar/?locale=en" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2059</div></div><a href="/team/facundo-escobar" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>
2059Facundo Escobar</div></div><div class="team-card__role"><div>Software Engineer, Full Stack</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/miruna-spineanu" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200c5e33514a2e01bfa8b0_Member%20Card-13.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/miruna-spineanu-935570338/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2060</div></div><a href="/team/miruna-spineanu" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Miruna Spineanu</div></div><div class="team-card__role"><div> Software Engineer</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/dale-augustyn" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a200ca268cc73dd13b423ce_Member%20Card-14.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/dale-augustyn-4609422/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2061</div></div><a href="/team/dale-augustyn" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Dale Augustyn</div></div><div class="team-card__role"><div> Product Analyst</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/melquisedeque-megas-damasceno" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6a97dd611869d37294e8f9e7_Megas%20Damasceno.png" loading="lazy" alt="" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/melquesedeque-megas-damasceno-87b86632b/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2062</div></div><a href="/team/melquisedeque-megas-damasceno" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Melquisedeque (Megas) Damasceno</div></div><div class="team-card__role"><div>Software Engineer (Full Stack)</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/marcos-dantas-guimaraes-filho" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2e07243c08c912164a78f_marcos2.png" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2e07243c08c912164a78f_marcos2-p-500.png 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2e07243c08c912164a78f_marcos2-p-800.png 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2e07243c08c912164a78f_marcos2.png 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/marcosdgf/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2063</div></div><a href="/team/marcos-dantas-guimaraes-filho" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>
2063Marcos Dantas Guimarães Filho</div></div><div class="team-card__role"><div>Software Engineer, Full Stack</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/vincent-roy" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2dd38a9502556a33cbff0_vincent4.png" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2dd38a9502556a33cbff0_vincent4-p-500.png 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2dd38a9502556a33cbff0_vincent4-p-800.png 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2dd38a9502556a33cbff0_vincent4.png 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/vincent-roy-98062a24/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2064</div></div><a href="/team/vincent-roy" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Vincent Roy</div></div><div class="team-card__role"><div>Software Engineer, Full Stack</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/leandro-fravega" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2d4bc402a7c509a1d6eab_Leandro.jpeg" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2d4bc402a7c509a1d6eab_Leandro-p-500.jpeg 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2d4bc402a7c509a1d6eab_Leandro-p-800.jpeg 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2d4bc402a7c509a1d6eab_Leandro-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab2d4bc402a7c509a1d6eab_Leandro.jpeg 1254w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/leandro-fravega/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2065</div></div><a href="/team/leandro-fravega" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Leandro Fravega</div></div><div class="team-card__role"><div>Software Engineer, Full Stack</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/william-silva" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4664096bf257c2418d8c4_William.jpeg" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4664096bf257c2418d8c4_William-p-500.jpeg 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4664096bf257c2418d8c4_William-p-800.jpeg 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4664096bf257c2418d8c4_William.jpeg 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/william-silva-bb1a662b/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2066</div></div><a href="/team/william-silva" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>William Silva</div></div><div class="team-card__role"><div>
2066Cloud Infrastructure Engineer</div></div></div></a></div></div><div role="listitem" class="collection-item w-dyn-item"><div class="team-card"><a href="/team/edson-carlos" class="member-link-wrap w-inline-block"><div class="team-card__media"><img src="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4675d4097ae0b8f211cfb_Edson.jpeg" loading="lazy" alt="" sizes="100vw" srcset="https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4675d4097ae0b8f211cfb_Edson-p-500.jpeg 500w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4675d4097ae0b8f211cfb_Edson-p-800.jpeg 800w, https://cdn.prod.website-files.com/6a1fef974db6a41ac3121801/6ab4675d4097ae0b8f211cfb_Edson.jpeg 1024w" class="image-6"/><div class="team-card__scrim"></div></div></a><div class="corner tl"></div><div class="corner tr"></div><div class="team-card__social"><div class="w-embed"><a href="https://www.linkedin.com/in/edson-carlos/" aria-label="LinkedIn" target="_blank"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.11 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zM8.5 8h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.66 1.8-2.66 3.65V23h-4V8z"/></svg></a>
2067</div></div><a href="/team/edson-carlos" class="member-link-wrap w-inline-block"><div class="team-card__info"><div class="team-card__name"><div>Edson Carlos</div></div><div class="team-card__role"><div>Cloud Engineer</div></div></div></a></div></div></div></div><div class="w-embed w-script"> <link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css">
2068  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
2069  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
2070  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
2071  
2072  <style>
2073    .team-map-section {
2074      max-width: 1180px;
2075      margin: 0 auto;
2076      padding: 100px 32px;
2077      position: relative;
2078    }
2079
2080    .qval-bg-grid {
2081      position: absolute;
2082      inset: 0;
2083      background-image:
2084        linear-gradient(rgba(6,144,249,.04) 1px, transparent 1px),
2085        linear-gradient(90deg, rgba(6,144,249,.04) 1px, transparent 1px);
2086      background-size: 64px 64px;
2087      mask-image: radial-gradient(ellipse 60% 50% at 50% 10%, #000 30%, transparent 75%);
2088      pointer-events: none;
2089    }
2090
2091    .map-header {
2092      text-align: center;
2093      max-width: 560px;
2094      margin: 0 auto 56px;
2095      position: relative;
2096      z-index: 1;
2097    }
2098
2099    .qval-eyebrow {
2100      display: inline-flex;
2101      align-items: center;
2102      gap: 8px;
2103      font-size: 12px;
2104      font-weight: 500;
2105      letter-spacing: 0.12em;
2106      text-transform: uppercase;
2107      color: var(--_qcolors---colors--blue--normal);
2108      background: rgba(6,144,249,.1);
2109      border: 1px solid rgba(6,144,249,.25);
2110      padding: 6px 14px;
2111      border-radius: var(--_radius---full);
2112      margin-bottom: 24px;
2113    }
2114
2115    .qval-eyebrow .qval-eyebrow-dot {
2116      width: 6px;
2117      height: 6px;
2118      border-radius: 50%;
2119      background: var(--_qcolors---colors--teal--normal);
2120      box-shadow: 0 0 0 3px rgba(0,217,207,.2);
2121    }
2122
2123    .map-header h2 {
2124      font-family: var(--_typography---family--primary);
2125      font-weight: 700;
2126      font-size: clamp(30px, 4vw, 44px);
2127      letter-spacing: -0.02em;
2128      line-height: 1.1;
2129      margin-bottom: 16px;
2130    }
2131
2132    .map-header h2 span {
2133      background: linear-gradient(90deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal));
2134      -webkit-background-clip: text;
2135      background-clip: text;
2136      color: transparent;
2137    }
2138
2139    .map-header p {
2140      color: var(--_qcolors---colors--grey--normal);
2141      font-size: 16px;
2142      line-height: 1.6;
2143    }
2144
2145    .map-container {
2146      position: relative;
2147      border-radius: var(--_radius---2xl);
2148      overflow: hidden;
2149      border: 1px solid var(--_qcolors---card-border);
2150      background: var(--_qcolors---card-bg);
2151      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
2152      z-index: 1;
2153      transition: border-color .3s ease, transform .3s ease;
2154    }
2155
2156    .map-container:hover {
2157      border-color: var(--_qcolors---colors--blue--normal);
2158    }
2159
2160    #team-map {
2161      width: 100%;
2162      height: 520px;
2163      background: var(--_qcolors---card-bg);
2164    }
2165
2166    /* Custom Marker with ripple */
2167    .custom-marker {
2168      position: relative;
2169      width: 16px;
2170      height: 16px;
2171      background: linear-gradient(135deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal));
2172      border-radius: 50%;
2173      border: 3px solid var(--_qcolors---colors--white--normal);
2174      box-shadow: 0 4px 20px rgba(6, 144, 249, 0.5);
2175      z-index: 2;
2176    }
2177
2178    .custom-marker::after {
2179      content: '';
2180      position: absolute;
2181      top: 50%;
2182      left: 50%;
2183      transform: translate(-50%, -50%);
2184      width: 16px;
2185      height: 16px;
2186      border-radius: 50%;
2187      border: 2px solid var(--_qcolors---colors--teal--normal);
2188      animation: ripple 2s ease-out infinite;
2189      opacity: 0.6;
2190    }
2191
2192    @keyframes ripple {
2193      0% {
2194        width: 16px;
2195        height: 16px;
2196        opacity: 0.6;
2197      }
2198      100% {
2199        width: 48px;
2200        height: 48px;
2201        opacity: 0;
2202      }
2203    }
2204
2205    /* Marker cluster styling */
2206    .marker-cluster {
2207      background: rgba(6, 144, 249, 0.2) !important;
2208      border: 2px solid var(--_qcolors---colors--blue--normal) !important;
2209      border-radius: 50% !important;
2210      display: flex !important;
2211      align-items: center !important;
2212      justify-content: center !important;
2213    }
2214
2215    .marker-cluster div {
2216      background: linear-gradient(135deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal)) !important;
2217      color: white !important;
2218      font-family: var(--_typography---family--primary) !important;
2219      font-weight: 700 !important;
2220      font-size: 13px !important;
2221      border-radius: 50% !important;
2222      width: 32px !important;
2223      height: 32px !important;
2224      display: flex !important;
2225      align-items: center !important;
2226      justify-content: center !important;
2227      box-shadow: 0 4px 15px rgba(6, 144, 249, 0.4) !important;
2228     margin-left: 0 !important; 
2229	  margin-top: 0 !important;
2230    }
2231
2232    /* Popup Styles */
2233    .leaflet-popup-content-wrapper {
2234      background: rgba(10, 15, 26, 0.95) !important;
2235      color: var(--_qcolors---colors--white--normal) !important;
2236      border: 1px solid var(--_qcolors---card-border) !important;
2237      border-radius: var(--_radius---2xl) !important;
2238      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
2239      backdrop-filter: blur(20px);
2240      font-family: var(--_typography---family--body) !important;
2241    }
2242
2243    .leaflet-popup-content {
2244      margin: 16px 20px !important;
2245      font-family: var(--_typography---family--body) !important;
2246    }
2247
2248    .leaflet-popup-content strong {
2249      font-family: var(--_typography---family--primary);
2250      font-size: 16px;
2251      font-weight: 700;
2252      color: var(--_qcolors---colors--teal--normal) !important;
2253      display: block;
2254      margin-bottom: 4px;
2255      letter-spacing: -0.01em;
2256    }
2257
2258    .leaflet-popup-content p {
2259      font-size: 14px;
2260      color: var(--_qcolors---colors--grey--normal) !important;
2261      margin: 0 !important;
2262    }
2263
2264    .leaflet-popup-tip {
2265      background: rgba(10, 15, 26, 0.95) !important;
2266      border: 1px solid var(--_qcolors---card-border) !important;
2267    }
2268
2269    .leaflet-popup-close-button {
2270      color: var(--_qcolors---colors--grey--normal) !important;
2271      font-family: var(--_typography---family--body) !important;
2272    }
2273
2274    .leaflet-popup-close-button:hover {
2275      color: var(--_qcolors---colors--white--normal) !important;
2276    }
2277
2278    /* Location Counter Cards */
2279    .location-counter {
2280      display: grid;
2281      grid-template-columns: repeat(6, 1fr);
2282      gap: 20px;
2283      margin-top: 20px;
2284      position: relative;
2285      z-index: 1;
2286    }
2287
2288    .counter-item {
2289      grid-column: span 2;
2290      position: relative;
2291      background: radial-gradient(140% 140% at 0% 0%, rgba(6,144,249,.08), transparent 55%), var(--_qcolors---card-bg);
2292      border: 1px solid var(--_qcolors---card-border);
2293      border-radius: var(--_radius---2xl);
2294      padding: 32px;
2295      text-align: center;
2296      overflow: hidden;
2297      transition: border-color .3s ease, transform .3s ease;
2298    }
2299
2300    .counter-item:hover {
2301      border-color: var(--_qcolors---colors--blue--normal);
2302      transform: translateY(-4px);
2303    }
2304
2305    .counter-item__corner {
2306      position: absolute;
2307      width: 16px;
2308      height: 16px;
2309      border-color: var(--_qcolors---colors--teal--normal);
2310      opacity: 0;
2311      transition: opacity .3s ease;
2312      pointer-events: none;
2313    }
2314
2315    .counter-item:hover .counter-item__corner { opacity: .9; }
2316    .counter-item__corner.is-tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; }
2317    .counter-item__corner.is-br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
2318
2319    .counter-value {
2320      font-family: var(--_typography---family--primary);
2321      font-size: 32px;
2322      font-weight: 700;
2323      background: linear-gradient(90deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal));
2324      -webkit-background-clip: text;
2325      background-clip: text;
2326      color: transparent;
2327      display: block;
2328      letter-spacing: -0.02em;
2329      line-height: 1.4em;
2330    }
2331
2332    .counter-label {
2333      font-size: 14px;
2334      color: var(--_qcolors---colors--grey--normal);
2335      margin-top: 8px;
2336      font-weight: 500;
2337    }
2338
2339    @media (max-width: 900px) {
2340      .team-map-section { padding: 60px 24px; }
2341      .counter-item { grid-column: span 3; }
2342      #team-map { height: 420px; }
2343    }
2344
2345    @media (max-width: 600px) {
2346      .counter-item { grid-column: span 6; }
2347      #team-map { height: 340px; }
2348      .map-header h2 { font-size: 28px; }
2349    }
2350  </style>
2351
2352  <section class="team-map-section">
2353    <div class="qval-bg-grid"></div>
2354
2355    <div class="map-header">
2356      <div class="qval-eyebrow"><span class="qval-eyebrow-dot"></span>Global Presence</div>
2357      <h2>A <span>Global Team</span>, One Vision</h2>
2358      <p>Our diverse team spans 15 locations across 4 continents, bringing unique perspectives to build the future of trading.</p>
2359    </div>
2360
2361    <div class="map-container">
2362      <div id="team-map"></div>
2363    </div>
2364
2365    <div class="location-counter">
2366      <div class="counter-item">
2367        <div class="counter-item__corner is-tl"></div>
2368        <div class="counter-item__corner is-br"></div>
2369        <span class="counter-value">15</span>
2370        <span class="counter-label">Team Locations</span>
2371      </div>
2372      <div class="counter-item">
2373        <div class="counter-item__corner is-tl"></div>
2374        <div class="counter-item__corner is-br"></div>
2375        <span class="counter-value">9</span>
2376        <span class="counter-label">Countries</span>
2377      </div>
2378      <div class="counter-item">
2379        <div class="counter-item__corner is-tl"></div>
2380        <div class="counter-item__corner is-br"></div>
2381        <span class="counter-value">4</span>
2382        <span class="counter-label">Continents</span>
2383      </div>
2384    </div>
2385  </section>
2386
2387  
2387<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
2387
2388  
2388<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
2388
2389  
2390  
2390<script>
2391    // ── Base locations (each member = 1 spot) ──
2392    const baseLocations = [
2393      { city: 'Ohio', country: 'USA', coords: [40.4173, -82.9071], members: 2 },
2394      { city: 'Luxembourg City', country: 'Luxembourg', coords: [49.6116, 6.1319], members: 1 },
2395      { city: 'Trier', country: 'Germany', coords: [49.7490, 6.6371], members: 1 },
2396      { city: 'Timisoara', country: 'Romania', coords: [45.7489, 21.2087], members: 1 },
2397      { city: 'California', country: 'USA', coords: [36.7783, -119.4179], members: 1 },
2398      { city: 'Tokyo', country: 'Japan', coords: [35.6762, 139.6503], members: 1 },
2399      { city: 'Washington', country: 'USA', coords: [47.7511, -120.7401], members: 1 },
2400      { city: 'Sofia', country: 'Bulgaria', coords: [42.6977, 23.3219], members: 1 },
2401      { city: 'Cluj-Napoca', country: 'Romania', coords: [46.7712, 23.6236], members: 1 },
2402      { city: 'Buenos Aires', country: 'Argentina', coords: [-34.6037, -58.3816], members: 1 },
2403      { city: 'New Jersey', country: 'USA', coords: [40.0583, -74.4057], members: 1 },
2404      { city: 'Sao Paulo', country: 'Brazil', coords: [-23.5505, -46.6333], members: 1 },
2405       { city: 'British Columbia', country: 'Canada', coords: [49.2827, -123.1207], members: 1 }
2406    ];
2407
2408    // ── Expand: each member gets their own spot with slight offset ──
2409    const teamLocations = [];
2410    baseLocations.forEach((loc, idx) => {
2411      for (let i = 0; i < loc.members; i++) {
2412        // Slight offset for multiple members in same city (0.08° ≈ 8km)
2413        const offsetLat = (i === 0) ? 0 : (Math.random() - 0.5) * 0.12;
2414        const offsetLng = (i === 0) ? 0 : (Math.random() - 0.5) * 0.12;
2415        teamLocations.push({
2416          city: loc.city,
2417          country: loc.country,
2418          coords: [loc.coords[0] + offsetLat, loc.coords[1] + offsetLng],
2419          memberIndex: i + 1,
2420          totalMembers: loc.members
2421        });
2422      }
2423    });
2424
2425    // ── Initialize Map ──
2426    const map = L.map('team-map', {
2427      center: [25, -10],
2428      zoom: 3,
2429      minZoom: 2,
2430      maxZoom: 10,
2431      scrollWheelZoom: false,
2432      zoomControl: true
2433    });
2434
2435    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
2436      attribution: '© OpenStreetMap contributors © CARTO',
2437      subdomains: 'abcd',
2438      maxZoom: 19
2439    }).addTo(map);
2440
2441    // ── Custom Marker Icon ──
2442    const customIcon = L.divIcon({
2443      className: 'custom-marker',
2444      iconSize: [16, 16],
2445      iconAnchor: [8, 8],
2446      popupAnchor: [0, -12]
2447    });
2448
2449    // ── Marker Cluster Group ──
2450    const markers = L.markerClusterGroup({
2451      spiderfyOnMaxZoom: true,
2452      showCoverageOnHover: false,
2453      zoomToBoundsOnClick: true,
2454      maxClusterRadius: 60,
2455      iconCreateFunction: function(cluster) {
2456        return L.divIcon({
2457          html: '<div><span>' + cluster.getChildCount() + '</span></div>',
2458          className: 'marker-cluster',
2459          iconSize: L.point(40, 40)
2460        });
2461      }
2462    });
2463
2464    // ── Add Markers ──
2465    teamLocations.forEach(location => {
2466      const marker = L.marker(location.coords, { icon: customIcon });
2467      
2468      const popupContent = location.totalMembers > 1 
2469        ? `<strong>${location.city}, ${location.country}</strong><p>Qompyl Team Member #${location.memberIndex}</p>`
2470        : `<strong>${location.city}, ${location.country}</strong><p>Qompyl Team Member</p>`;
2471      
2472      marker.bindPopup(popupContent);
2473      
2474      marker.on('mouseover', function() {
2475        this.openPopup();
2476      });
2477      
2478      marker.on('mouseout', function() {
2479        this.closePopup();
2480      });
2481      
2482      markers.addLayer(marker);
2483    });
2484
2485    map.addLayer(markers);
2486
2487    // ── Fit bounds with padding ──
2488    const group = new L.featureGroup(
2489      teamLocations.map(loc => L.marker(loc.coords))
2490    );
2491    map.fitBounds(group.getBounds().pad(0.15));
2492
2493    // ── Enable scroll zoom after first click ──
2494    map.on('click', function() {
2495      map.scrollWheelZoom.enable();
2496    });
2497  </script>
2497</div><div class="row-13"><div class="cta-box q-bg-dotted team-growimg-cta-box"><div class="w-layout-vflex cta-box-inner"><div class="icon">rocket</div><div class="qtl-header team-growimg-cta"><h2 class="qtl-title">Our team is <span class="tilte-span">growing</span></h2><p class="qtl-title-desc">We are always looking for exceptional engineers, 
2498designers and user-focused professionals who understand institutional aesthetics and are passionate about building world-class financial products.</p></div><div class="cta-row"><div class="text-106">Interested in joining the team?</div><code-island data-loader="{&quot;tag&quot;:&quot;FEDERATION&quot;,&quot;val&quot;:{&quot;clientModuleUrl&quot;:&quot;https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2Fwf-manifest.json&quot;,&quot;moduleId&quot;:&quot;_6a97db73e2362242fed826bf&quot;,&quot;submoduleId&quot;:&quot;0b65951e-7945-a7f2-14b8-58b3fe4d9275&quot;,&quot;exportPath&quot;:&quot;default&quot;,&quot;serverModuleUrl&quot;:&quot;_&quot;}}" data-props="{&quot;label&quot;:&quot;View Open Positions&quot;,&quot;variant&quot;:&quot;Filled&quot;,&quot;size&quot;:&quot;Small&quot;,&quot;width&quot;:&quot;Auto&quot;,&quot;iconPosition&quot;:&quot;Right&quot;,&quot;iconName&quot;:&quot;arrow&quot;,&quot;iconStrokeWidth&quot;:2,&quot;disabled&quot;:false,&quot;link&quot;:{&quot;href&quot;:&quot;https://app.dover.com/jobs/qompyl&quot;,&quot;target&quot;:&quot;_blank&quot;},&quot;openInNewTab&quot;:false}" data-slots="[]" data-hydrate="true" data-webflow-context="{&quot;mode&quot;:&quot;publish&quot;,&quot;interactive&quot;:true,&quot;locale&quot;:&quot;en&quot;}" data-interactive="true" style="display:contents" data-wf--button-2--style="filled" data-wf--button-2--size="small" data-wf--button-2--width="auto" data-wf--button-2--icon-position="right"><template shadowrootmode="open"><link rel="stylesheet" type="text/css" href="https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2F476b31a8d7459289.css"/><div data-root="true" style="display:contents"><!--$--><style>
2499        .ds-btn:focus-visible {
2500          outline: 2px solid #0690f9;
2501          outline-offset: 2px;
2502        }
2503        
2504    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover {
2505      transform: translateY(-2px) scale(1.02);
2506      filter: brightness(1.1);
2507      box-shadow: 0 8px 24px -4px rgba(6, 144, 249, 0.35), 0 2px 8px -2px rgba(6, 144, 249, 0.2);
2508    }
2509    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2510      transform: translateX(5px);
2511    }
2512    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2513      transform: translateX(-5px);
2514    }
2515  
2516        
2517    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover {
2518      background-color: #0690f9;
2519      color: #ffffff;
2520      border-color: #0690f9;
2521      transform: translateY(-2px);
2522      box-shadow: 0 4px 16px -4px rgba(6, 144, 249, 0.2), 0 1px 4px -1px rgba(6, 144, 249, 0.1);
2523    }
2524    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2525      transform: translateX(5px);
2526    }
2527    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2528      transform: translateX(-5px);
2529    }
2530  
2531        
2532    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover {
2533      opacity: 0.75;
2534      color: #2da3ff;
2535    }
2536    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2537      transform: translateX(5px);
2538    }
2539    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2540      transform: translateX(-5px);
2541    }
2542  
2543        .ds-btn:not([aria-disabled="true"]):active {
2544          transform: scale(0.98) translateY(0px) !important;
2545          box-shadow: none !important;
2546          filter: brightness(1) !important;
2547          transition-duration: 120ms;
2548        }
2549        .ds-btn:not([aria-disabled="true"]):active .ds-btn-icon {
2550          transform: translateX(0px) !important;
2551          transition-duration: 100ms;
2552        }
2553        @media screen and (max-width: 480px) {
2554          .ds-btn {
2555            width: 100% !important;
2556            display: flex;
2557          }
2558        }
2559        @media (prefers-reduced-motion: reduce) {
2560          .ds-btn,
2561          .ds-btn-icon {
2562            transition-duration: 0ms !important;
2563          }
2564          .ds-btn:not([aria-disabled="true"]):hover {
2565            transform: none !important;
2566          }
2567          .ds-btn:not([aria-disabled="true"]):active {
2568            transform: none !important;
2569          }
2570          .ds-btn:not([aria-disabled="true"]):hover .ds-btn-icon {
2571            transform: none !important;
2572          }
2573        }
2574      </style><a class="ds-btn ds-btn--filled" style="display:inline-flex;align-items:center;justify-content:center;gap:6px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;font-size:14px;line-height:20px;font-family:&#x27;Inter&#x27;, sans-serif;font-weight:500;letter-spacing:-0.01em;border-radius:8px;
2574cursor:pointer;width:auto;transition-property:background-color, color, border-color, opacity, transform, box-shadow, filter;transition-duration:220ms;transition-timing-function:ease-out;text-decoration:none;border:none;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;box-sizing:border-box;box-shadow:0 0 0 0 transparent;background-color:#0690f9;color:#ffffff" aria-label="View Open Positions" tabindex="0" href="https://app.dover.com/jobs/qompyl" target="_blank"><span>View Open Positions</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ds-btn-icon ds-btn-icon--right" aria-hidden="true" style="flex-shrink:0;will-change:transform;transition-property:transform;transition-duration:230ms;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><!--/$--></div></template></code-island></div></div></div></div></section><div class="long-bg radial-bg option-3 values-section"><div class="code-embed-6 w-embed"><style>
2575
2576  .qval-section {
2577    max-width: 1180px;
2578    margin: 0 auto;
2579    padding: 100px 32px;
2580    position: relative;
2581  }
2582
2583  .qval-bg-grid {
2584    position: absolute;
2585    inset: 0;
2586    background-image:
2587      linear-gradient(rgba(6,144,249,.04) 1px, transparent 1px),
2588      linear-gradient(90deg, rgba(6,144,249,.04) 1px, transparent 1px);
2589    background-size: 64px 64px;
2590    mask-image: radial-gradient(ellipse 60% 50% at 50% 10%, #000 30%, transparent 75%);
2591    pointer-events: none;
2592  }
2593
2594  /* ===== Header ===== */
2595  .qval-header { text-align: center; max-width: 560px; margin: 0 auto 56px; position: relative; z-index: 1; }
2596  .qval-eyebrow {
2597    display: inline-flex; align-items: center; gap: 8px;
2598    font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
2599    color: var(--_qcolors---colors--blue--normal);
2600    background: rgba(6,144,249,.1); border: 1px solid rgba(6,144,249,.25);
2601    padding: 6px 14px; border-radius: var(--_radius---full);
2602    margin-bottom: 24px;
2603  }
2604  .qval-eyebrow .qval-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_qcolors---colors--teal--normal); box-shadow: 0 0 0 3px rgba(0,217,207,.2); }
2605  .qval-header h2 {
2606    font-family: var(--_typography---family--primary); font-weight: 700;
2607    font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.1;
2608    margin-bottom: 16px;
2609    color: var(--_colors---colors--white--normal);
2610  }
2611  .qval-header h2 span { background: linear-gradient(90deg, var(--_qcolors---colors--blue--normal), var(--_qcolors---colors--teal--normal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
2612  .qval-header p { color: var(--_qcolors---colors--grey--normal); font-size: 16px; line-height: 1.6; }
2613
2614  /* ===== Grid ===== */
2615  .qval-grid {
2616    display: grid;
2617    grid-template-columns: repeat(6, 1fr);
2618    gap: 20px;
2619    position: relative;
2620    z-index: 1;
2621  }
2622
2623  .qval-card {
2624    position: relative;
2625    grid-column: span 3;
2626    background: radial-gradient(140% 140% at 0% 0%, rgba(6,144,249,.08), transparent 55%), var(--_qcolors---card-bg);
2627    border: 1px solid var(--_qcolors---card-border);
2628    border-radius: var(--_radius---2xl);
2629    padding: 32px;
2630    overflow: hidden;
2631    transition: border-color .3s ease, transform .3s ease;
2632  }
2633  .qval-card.is-third { grid-column: span 2; }
2634
2635  .qval-card:hover { border-color: var(--_qcolors---colors--blue--normal); transform: translateY(-4px); }
2636
2637  .qval-card__corner {
2638    position: absolute; width: 16px; height: 16px;
2639    border-color: var(--_qcolors---colors--teal--normal);
2640    opacity: 0;
2641    transition: opacity .3s ease;
2642    pointer-events: none;
2643  }
2644  .qval-card:hover .qval-card__corner { opacity: .9; }
2645  .qval-card__corner.is-tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; }
2646  .qval-card__corner.is-br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
2647
2648  .qval-card h3 {
2649    font-family: var(--_typography---family--primary); font-weight: 700;
2650    font-size: 21px; letter-spacing: -0.01em;
2651    margin-bottom: 12px;
2652    color: var(--_colors---colors--white--normal);
2653  }
2654
2655  .qval-card__tagline {
2656    font-size: 14.5px; font-weight: 500;
2657    color: var(--_qcolors---colors--white--normal);
2658    opacity: .82;
2659    margin-bottom: 6px;
2660  }
2661
2662  .qval-card p.qval-card__desc {
2663    font-size: 14.5px; line-height: 1.6;
2664    color: var(--_qcolors---colors--grey--normal);
2665    margin-bottom: 28px;
2666  }
2667
2668  .qval-card__icon {
2669    width: 42px; height: 42px; border-radius: var(--_radius---lg);
2670    background: rgba(0,217,207,.1); border: 1px solid rgba(0,217,207,.25);
2671    display: flex; align-items: center; justify-content: center;
2672    color: var(--_qcolors---colors--teal--normal);
2673    font-size: 19px;
2674  }
2675
2676  @media (max-width: 900px) {
2677    .qval-card, .qval-card.is-third { grid-column: span 6; }
2678  }
2679</style>
2680<section class="qval-section">
2681  <div class="qval-bg-grid"></div>
2682
2683  <div class="qval-header">
2684    <div class="qval-eyebrow"><span class="qval-eyebrow-dot"></span>Our values</div>
2685    <h2>What drives us <span>forward</span></h2>
2686    <p>The principles that shape every product decision, every conversation, and every line of code we ship.</p>
2687  </div>
2688
2689  <div class="qval-grid">
2690
2691    <div class="qval-card">
2692      <div class="qval-card__corner is-tl"></div><div class="qval-card__corner is-br"></div>
2693      <h3>Inclusive Prosperity</h3>
2694      <div class="qval-card__tagline">Access to powerful tools for every trader.</div>
2695      <p class="qval-card__desc">We believe more people should be able to build, test, and refine strategies with confidence, regardless of background or location.</p>
2696      <div class="qval-card__icon"><i class="icon-globe"></i></div>
2697    </div>
2698
2699    <div class="qval-card">
2700      <div class="qval-card__corner is-tl"></div><div class="qval-card__corner is-br"></div>
2701      <h3>Innovative Growth</h3>
2702      <div class="qval-card__tagline">Building better ways to trade.</div>
2703      <p class="qval-card__desc">We create effective, intuitive tools by combining bold thinking, continuous learning, and innovation.</p>
2704      <div class="qval-card__icon"><i class="icon-rocket"></i></div>
2705    </div>
2706
2707    <div class="qval-card is-third">
2708      <div class="qval-card__corner is-tl"></div><div class="qval-card__corner is-br"></div>
2709      <h3>Excellence Every Day</h3>
2710      <div class="qval-card__tagline">Raising the bar with every detail.</div>
2711      <p class="qval-card__desc">From user experience to team execution, we are committed to continually raising the bar for our users, team, and shareholders.</p>
2712      <div class="qval-card__icon"><i class="icon-award"></i></div>
2713    </div>
2714
2715    <div class="qval-card is-third">
2716      <div class="qval-card__corner is-tl"></div><div class="qval-card__corner is-br"></div>
2717      <h3>Transparent Respect</h3>
2718      <div class="qval-card__tagline">Trust starts with clarity.</div>
2719      <p class="qval-card__desc">We communicate with honesty, act with accountability, and foster a culture grounded in respect.</p>
2720      <div class="qval-card__icon"><i class="icon-shield-check"></i></div>
2721    </div>
2722
2723    <div class="qval-card is-third">
2724      <div class="qval-card__corner is-tl"></div><div class="qval-card__corner is-br"></div>
2725      <h3>Balanced Teamwork</h3>
2726      <div class="qval-card__tagline">Great work is born of strong collaboration.</div>
2727      <p class="qval-card__desc">We believe great products are shaped by careful dialogue, accountability, and partnership with all our stakeholders.</p>
2728      <div class="qval-card__icon"><i class="icon-handshake"></i></div>
2729    </div>
2730
2731  </div>
2732</section></div></div><div class="section---section-5-investor-contact-path q-grid-pattern-bg"><div class="container-93"><div class="request-investor-deck"><div data-wf--qtl-header--variant="base" class="qtl-header"><div class="qtl-eyebrow"><div class="qtl-eyebrow-dot"></div><div>Investor Relations</div></div><h2 class="qtl-title">Request  <span class="tilte-span">Investor Deck</span></h2><p class="qtl-title-desc">If you represent an institutional investor or venture fund interested in learning
2733more about Qompyl&#x27;s vision and growth trajectory, we&#x27;d love to connect.</p></div><div class="frame-21">
2733<code-island data-loader="{&quot;tag&quot;:&quot;FEDERATION&quot;,&quot;val&quot;:{&quot;clientModuleUrl&quot;:&quot;https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2Fwf-manifest.json&quot;,&quot;moduleId&quot;:&quot;_6a97db73e2362242fed826bf&quot;,&quot;submoduleId&quot;:&quot;0b65951e-7945-a7f2-14b8-58b3fe4d9275&quot;,&quot;exportPath&quot;:&quot;default&quot;,&quot;serverModuleUrl&quot;:&quot;_&quot;}}" data-props="{&quot;label&quot;:&quot;Contact Investor Relations&quot;,&quot;variant&quot;:&quot;Filled&quot;,&quot;size&quot;:&quot;Large&quot;,&quot;width&quot;:&quot;Auto&quot;,&quot;iconPosition&quot;:&quot;Right&quot;,&quot;iconName&quot;:&quot;arrow-right&quot;,&quot;iconStrokeWidth&quot;:2,&quot;disabled&quot;:false,&quot;link&quot;:{&quot;href&quot;:&quot;mailto:[email protected]?subject=Request%20Investor%20Deck&quot;},&quot;openInNewTab&quot;:false}" data-slots="[]" data-hydrate="true" data-webflow-context="{&quot;mode&quot;:&quot;publish&quot;,&quot;interactive&quot;:true,&quot;locale&quot;:&quot;en&quot;}" data-interactive="true" style="display:contents" data-wf--button-2--style="filled" data-wf--button-2--size="large" data-wf--button-2--width="auto" data-wf--button-2--icon-position="right"><template shadowrootmode="open"><link rel="stylesheet" type="text/css" href="https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2F476b31a8d7459289.css"/><div data-root="true" style="display:contents"><!--$--><style>
2734        .ds-btn:focus-visible {
2735          outline: 2px solid #0690f9;
2736          outline-offset: 2px;
2737        }
2738        
2739    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover {
2740      transform: translateY(-2px) scale(1.02);
2741      filter: brightness(1.1);
2742      box-shadow: 0 8px 24px -4px rgba(6, 144, 249, 0.35), 0 2px 8px -2px rgba(6, 144, 249, 0.2);
2743    }
2744    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2745      transform: translateX(5px);
2746    }
2747    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2748      transform: translateX(-5px);
2749    }
2750  
2751        
2752    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover {
2753      background-color: #0690f9;
2754      color: #ffffff;
2755      border-color: #0690f9;
2756      transform: translateY(-2px);
2757      box-shadow: 0 4px 16px -4px rgba(6, 144, 249, 0.2), 0 1px 4px -1px rgba(6, 144, 249, 0.1);
2758    }
2759    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2760      transform: translateX(5px);
2761    }
2762    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2763      transform: translateX(-5px);
2764    }
2765  
2766        
2767    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover {
2768      opacity: 0.75;
2769      color: #2da3ff;
2770    }
2771    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2772      transform: translateX(5px);
2773    }
2774    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2775      transform: translateX(-5px);
2776    }
2777  
2778        .ds-btn:not([aria-disabled="true"]):active {
2779          transform: scale(0.98) translateY(0px) !important;
2780          box-shadow: none !important;
2781          filter: brightness(1) !important;
2782          transition-duration: 120ms;
2783        }
2784        .ds-btn:not([aria-disabled="true"]):active .ds-btn-icon {
2785          transform: translateX(0px) !important;
2786          transition-duration: 100ms;
2787        }
2788        @media screen and (max-width: 480px) {
2789          .ds-btn {
2790            width: 100% !important;
2791            display: flex;
2792          }
2793        }
2794        @media (prefers-reduced-motion: reduce) {
2795          .ds-btn,
2796          .ds-btn-icon {
2797            transition-duration: 0ms !important;
2798          }
2799          .ds-btn:not([aria-disabled="true"]):hover {
2800            transform: none !important;
2801          }
2802          .ds-btn:not([aria-disabled="true"]):active {
2803            transform: none !important;
2804          }
2805          .ds-btn:not([aria-disabled="true"]):hover .ds-btn-icon {
2806            transform: none !important;
2807          }
2808        }
2809      </style><a class="ds-btn ds-btn--filled" style="display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;font-size:16px;line-height:24px;font-family:&#x27;Inter&#x27;, sans-serif;font-weight:500;letter-spacing:-0.01em;border-radius:8px;
2809cursor:pointer;width:auto;transition-property:background-color, color, border-color, opacity, transform, box-shadow, filter;transition-duration:220ms;transition-timing-function:ease-out;text-decoration:none;border:none;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;box-sizing:border-box;box-shadow:0 0 0 0 transparent;background-color:#0690f9;color:#ffffff" aria-label="Contact Investor Relations" tabindex="0" href="mailto:[email protected]?subject=Request%20Investor%20Deck" target="_self"><span>Contact Investor Relations</span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ds-btn-icon ds-btn-icon--right" aria-hidden="true" style="flex-shrink:0;will-change:transform;transition-property:transform;transition-duration:230ms;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><!--/$--></div></template></code-island><div class="or"><div class="container-95"><div class="text-112">Or reach us directly:</div></div><a href="mailto:[email protected]?subject=investors" class="button-style-25"><div class="button-style-26">[email protected]</div></a><a href="https://www.linkedin.com/company/qompyl/" target="_blank" class="button-style-25"><div class="button-style-26">
2809LinkedIn Company Page</div></a><div class="container-96"><div class="text-112">All inquiries handled confidentially.</div></div></div></div></div></div></div><div class="final-cta"><div class="feature-image-area qomply-conatiner footer-video"><div class="footer-video-container"><div data-poster-url="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_poster.0000000.jpg" data-video-urls="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_mp4.mp4,https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="background-video footer-vodeo-inner w-background-video w-background-video-atom"><video id="867f7017-b2fe-7923-bfe9-c042a8e9b9fb-video" autoplay="" loop="" style="background-image:url(&quot;https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_poster.0000000.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_mp4.mp4" data-wf-ignore="true"/><source src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b%2F6a26904da70270fa09111ca0_f-cta-v-bg_webm.webm" data-wf-ignore="true"/></video></div><div class="stats-card-right-side"><div class="overlayborderoverlayblur"><div class="container-58"><div class="head-6"><h2 class="text-headingh2bold">Ready To Trade With Confidence?</h2></div><div class="description"><div class="text-56">Join our community of traders building institutional-grade strategies today.</div></div></div><code-island data-loader="{&quot;tag&quot;:&quot;FEDERATION&quot;,&quot;val&quot;:{&quot;clientModuleUrl&quot;:&quot;https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2Fwf-manifest.json&quot;,&quot;moduleId&quot;:&quot;_6a97db73e2362242fed826bf&quot;,&quot;submoduleId&quot;:&quot;0b65951e-7945-a7f2-14b8-58b3fe4d9275&quot;,&quot;exportPath&quot;:&quot;default&quot;,&quot;serverModuleUrl&quot;:&quot;_&quot;}}" data-props="{&quot;label&quot;:&quot;Get Started Free&quot;,&quot;variant&quot;:&quot;Filled&quot;,&quot;size&quot;:&quot;Large&quot;,&quot;width&quot;:&quot;Auto&quot;,&quot;iconPosition&quot;:&quot;Right&quot;,&quot;iconName&quot;:&quot;arrow-right&quot;,&quot;iconStrokeWidth&quot;:2,&quot;disabled&quot;:false,&quot;link&quot;:{&quot;href&quot;:&quot;/early-access&quot;},&quot;openInNewTab&quot;:false}" data-slots="[]" data-hydrate="true" data-webflow-context="{&quot;mode&quot;:&quot;publish&quot;,&quot;interactive&quot;:true,&quot;locale&quot;:&quot;en&quot;}" data-interactive="true" style="display:contents" data-wf--button-2--style="filled" data-wf--button-2--size="large" data-wf--button-2--width="auto" data-wf--button-2--icon-position="right"><template shadowrootmode="open"><link rel="stylesheet" type="text/css" href="https://code-components.website-files.com/6a97db73e2362242fed826bf%2Fmodule%2F476b31a8d7459289.css"/><div data-root="true" style="display:contents"><!--$--><style>
2810        .ds-btn:focus-visible {
2811          outline: 2px solid #0690f9;
2812          outline-offset: 2px;
2813        }
2814        
2815    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover {
2816      transform: translateY(-2px) scale(1.02);
2817      filter: brightness(1.1);
2818      box-shadow: 0 8px 24px -4px rgba(6, 144, 249, 0.35), 0 2px 8px -2px rgba(6, 144, 249, 0.2);
2819    }
2820    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2821      transform: translateX(5px);
2822    }
2823    .ds-btn.ds-btn--filled:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2824      transform: translateX(-5px);
2825    }
2826  
2827        
2828    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover {
2829      background-color: #0690f9;
2830      color: #ffffff;
2831      border-color: #0690f9;
2832      transform: translateY(-2px);
2833      box-shadow: 0 4px 16px -4px rgba(6, 144, 249, 0.2), 0 1px 4px -1px rgba(6, 144, 249, 0.1);
2834    }
2835    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2836      transform: translateX(5px);
2837    }
2838    .ds-btn.ds-btn--outlined:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2839      transform: translateX(-5px);
2840    }
2841  
2842        
2843    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover {
2844      opacity: 0.75;
2845      color: #2da3ff;
2846    }
2847    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--right {
2848      transform: translateX(5px);
2849    }
2850    .ds-btn.ds-btn--text:not([aria-disabled="true"]):hover .ds-btn-icon--left {
2851      transform: translateX(-5px);
2852    }
2853  
2854        .ds-btn:not([aria-disabled="true"]):active {
2855          transform: scale(0.98) translateY(0px) !important;
2856          box-shadow: none !important;
2857          filter: brightness(1) !important;
2858          transition-duration: 120ms;
2859        }
2860        .ds-btn:not([aria-disabled="true"]):active .ds-btn-icon {
2861          transform: translateX(0px) !important;
2862          transition-duration: 100ms;
2863        }
2864        @media screen and (max-width: 480px) {
2865          .ds-btn {
2866            width: 100% !important;
2867            display: flex;
2868          }
2869        }
2870        @media (prefers-reduced-motion: reduce) {
2871          .ds-btn,
2872          .ds-btn-icon {
2873            transition-duration: 0ms !important;
2874          }
2875          .ds-btn:not([aria-disabled="true"]):hover {
2876            transform: none !important;
2877          }
2878          .ds-btn:not([aria-disabled="true"]):active {
2879            transform: none !important;
2880          }
2881          .ds-btn:not([aria-disabled="true"]):hover .ds-btn-icon {
2882            transform: none !important;
2883          }
2884        }
2885      </style><a class="ds-btn ds-btn--filled" style="display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;font-size:16px;line-height:24px;font-family:&#x27;Inter&#x27;, sans-serif;font-weight:500;letter-spacing:-0.01em;border-radius:8px;
2885cursor:pointer;width:auto;transition-property:background-color, color, border-color, opacity, transform, box-shadow, filter;transition-duration:220ms;transition-timing-function:ease-out;text-decoration:none;border:none;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;box-sizing:border-box;box-shadow:0 0 0 0 transparent;background-color:#0690f9;color:#ffffff" aria-label="Get Started Free" tabindex="0" href="/early-access" target="_self"><span>Get Started Free</span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ds-btn-icon ds-btn-icon--right" aria-hidden="true" style="flex-shrink:0;will-change:transform;transition-property:transform;transition-duration:230ms;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><!--/$--></div></template></code-island></div></div></div></div></div><div class="footer---global-footer option-4"><div class="container-59 qo qompy-container"><div class="container-60"><div class="container-61"><div class="container-62"><img width="147.30447387695312" height="31.99997901916504" alt="" src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a50d01a7eecdfb4b63c0137_Qompyl-logo.svg" loading="lazy" class="logo"/></div><div class="container-62"><div class="footer-link">Institutional-Grade trading tools for the modern, self-directed trader.
2886Built for clarity, security, and performance.</div></div></div><div class="container-63"><div class="heading-9"><div class="text-57">Product</div></div><div class="list"><div class="item"><a href="/#features" class="footer-link">Features</a></div><div class="item"><a href="/product#security-section" class="footer-link">Security</a></div><div class="item"><a href="/coming-soon" class="footer-link">API Docs</a></div></div></div><div class="container-64"><div class="heading-9"><div class="text-57">Company</div></div><div class="list"><div class="item"><a href="/about" aria-current="page" class="footer-link w--current">About</a></div><div class="item"><a href="/about#team" class="footer-link">Team</a></div><div class="item"><a href="mailto:[email protected]?subject=Contatct" class="footer-link">Contact</a></div></div></div><div class="container-63"><div class="heading-9"><div class="text-57">Resources</div></div><div class="list"><div class="item"><a href="/coming-soon" class="footer-link">Blog</a></div><div class="item"><a href="/early-access#main-fqa" class="footer-link">FAQ</a></div><div class="item"><a href="/coming-soon" class="footer-link">Guides</a></div></div></div><div class="container-63"><div class="heading-9"><div class="text-57">Legal</div></div><div class="list"><div class="item"><a href="/terms-of-service" class="footer-link">Terms</a></div><div class="item"><a href="/privacy-policy" class="footer-link">Privacy</a></div><div class="item"><a href="/cookie-policy" class="footer-link">Cookies</a></div><div class="item"><a href="/risk-disclosure" class="footer-link">Risk Disclosure</a></div></div></div></div><div class="horizontalborder"><div class="container-65"><a href="https://www.linkedin.com/company/qompyl/" target="_blank" class="w-inline-block"><img width="24" height="24" alt="" src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/6a2047e7018e169a31051e72_Linkedin--Streamline-Font-Awesome-1.svg" loading="lazy" class="linkedin--streamline-font-awesome-1"/></a></div><div class="container-66"><div class="text-58">© 2026 Qompyl. All rights reserved.</div></div></div></div></div>
2886<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6a1ddb7b75b500063615e83b" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
2886<script src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/js/webflow.schunk.b8db4c422aa68aa0.js" type="text/javascript" integrity="sha384-GB97E3V9WURBYG9TmVNYwzPHEX/Bp/LhAymYMUoiDkJAbSOhs+E9yg2ILeX01ui7" crossorigin="anonymous"></script>
2886<script src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/js/webflow.schunk.4efffb93a7ed0bf8.js" type="text/javascript" integrity="sha384-V4gL/PDHJOWEZZK1/IzI1Xo+ZfUV+OdlCs/W54WCbr2s46DsdWsnyfJlRVnTyZev" crossorigin="anonymous"></script>
2886<script src="https://cdn.prod.website-files.com/6a1ddb7b75b500063615e83b/js/webflow.c562efb4.cb5f66382e6b7f38.js" type="text/javascript" integrity="sha384-wuOHoOHijnydhCarp9tGC3FxnSye+Y4g2eyLq4A3H4BGZJoRDji6tkelaQl4kVyw" crossorigin="anonymous"></script>
2886<button id="backToTop" aria-label="Back to top">
2887  <svg
2888    xmlns="http://www.w3.org/2000/svg"
2889    width="22"
2890    height="22"
2891    viewBox="0 0 24 24"
2892    fill="none"
2893    stroke="currentColor"
2894    stroke-width="2"
2895    stroke-linecap="round"
2896    stroke-linejoin="round"
2897  >
2898    <path d="m18 15-6-6-6 6"/>
2899  </svg>
2900</button>
2901<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
vendor: 1 bytes, line 2901
2901
2902<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
vendor: 1 bytes, line 2902
2902
2903<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
vendor: 1 bytes, line 2903
2903
2904<script>
2905  (function() {
2906    'use strict';
2907    
2908    // التأكد من أن الصفحة تحمّلت بالكامل
2909    function initCustomCursor() {
2910      
2911      // إنشاء عنصر التوهج
2912      let glow = document.getElementById('mouse-glow');
2913      if (!glow) {
2914        glow = document.createElement('div');
2915        glow.id = 'mouse-glow';
2916        document.body.appendChild(glow);
2917      }
2918      
2919      // إنشاء النقطة الداخلية
2920      let dot = document.getElementById('cursor-dot');
2921      if (!dot) {
2922        dot = document.createElement('div');
2923        dot.id = 'cursor-dot';
2924        document.body.appendChild(dot);
2925      }
2926      
2927      // إنشاء الحلقة الخارجية
2928      let outline = document.getElementById('cursor-outline');
2929      if (!outline) {
2930        outline = document.createElement('div');
2931        outline.id = 'cursor-outline';
2932        document.body.appendChild(outline);
2933      }
2934      
2935      // متغيرات الموضع
2936      let mouseX = window.innerWidth / 2;
2937      let mouseY = window.innerHeight / 2;
2938      let outlineX = mouseX;
2939      let outlineY = mouseY;
2940      let dotX = mouseX;
2941      let dotY = mouseY;
2942      let animationId = null;
2943      
2944      // سرعة المتابعة
2945      const OUTLINE_SPEED = 0.20;
2946      const DOT_SPEED = 1;
2947      
2948      // تحديث موضع المؤشر بحركة سلسة
2949      function updateCursorPosition() {
2950        outlineX += (mouseX - outlineX) * OUTLINE_SPEED;
2951        outlineY += (mouseY - outlineY) * OUTLINE_SPEED;
2952        dotX += (mouseX - dotX) * DOT_SPEED;
2953        dotY += (mouseY - dotY) * DOT_SPEED;
2954        
2955        outline.style.transform = 'translate3d(' + outlineX + 'px, ' + outlineY + 'px, 0)';
2956        dot.style.transform = 'translate3d(' + dotX + 'px, ' + dotY + 'px, 0)';
2957        
2958        animationId = requestAnimationFrame(updateCursorPosition);
2959      }
2960      
2961      // تحديث التوهج
2962      function updateGlow() {
2963        glow.style.setProperty('--mouse-x', mouseX + 'px');
2964        glow.style.setProperty('--mouse-y', mouseY + 'px');
2965      }
2966      
2967      // مراقبة حركة الماوس
2968      document.addEventListener('mousemove', function(e) {
2969        mouseX = e.clientX;
2970        mouseY = e.clientY;
2971        updateGlow();
2972        
2973        // إظهار المؤشر إذا كان مخفياً
2974        if (dot.style.opacity === '0') {
2975          dot.style.opacity = '1';
2976          outline.style.opacity = '1';
2977        }
2978      });
2979      
2980      // تأثيرات التفاعل
2981      function addHoverEffect() {
2982        outline.classList.add('hover-effect');
2983        dot.classList.add('hover-effect');
2984      }
2985      
2986      function removeHoverEffect() {
2987        outline.classList.remove('hover-effect');
2988        dot.classList.remove('hover-effect');
2989      }
2990      
2991      function addClickEffect() {
2992        outline.classList.add('click-effect');
2993        dot.classList.add('click-effect');
2994        setTimeout(function() {
2995          outline.classList.remove('click-effect');
2996          dot.classList.remove('click-effect');
2997        }, 150);
2998      }
2999      
3000      // العناصر التفاعلية
3001      const interactiveElements = 'a, button, .card, [role="button"], .glass-card, .launch-card, input, select, textarea, .clickable, [data-cursor="hover"], .btn, .wp-element-button, .wp-block-button__link';
3002      
3003      function bindEventsToElements() {
3004        document.querySelectorAll(interactiveElements).forEach(function(el) {
3005          if (!el.hasCursorListeners) {
3006            el.addEventListener('mouseenter', addHoverEffect);
3007            el.addEventListener('mouseleave', removeHoverEffect);
3008            el.addEventListener('mousedown', addClickEffect);
3009            el.hasCursorListeners = true;
3010          }
3011        });
3012      }
3013      
3014      // ربط الأحداث فوراً
3015      bindEventsToElements();
3016      
3017      // مراقبة العناصر الجديدة
3018      var observer = new MutationObserver(function() {
3019        bindEventsToElements();
3020      });
3021      observer.observe(document.body, { childList: true, subtree: true });
3022      
3023      // إخفاء المؤشر عند مغادرة النافذة
3024      document.addEventListener('mouseleave', function() {
3025        dot.style.opacity = '0';
3026        outline.style.opacity = '0';
3027      });
3028      
3029      document.addEventListener('mouseenter', function() {
3030        dot.style.opacity = '1';
3031        outline.style.opacity = '1';
3032      });
3033      
3034      // بدء التشغيل
3035      updateCursorPosition();
3036      updateGlow();
3037      
3038      // تحديث عند تغيير حجم النافذة
3039      window.addEventListener('resize', function() {
3040        updateGlow();
3041      });
3042    }
3043    
3044    // تشغيل الكود بعد تحميل الصفحة
3045    if (document.readyState === 'loading') {
3046      document.addEventListener('DOMContentLoaded', initCustomCursor);
3047    } else {
3048      initCustomCursor();
3049    }
3050    
3051  })();
3052
3053
3054
3055document.addEventListener("DOMContentLoaded", function () {
3056
3057  const button = document.getElementById("backToTop");
3058
3059  window.addEventListener("scroll", function () {
3060
3061    if (window.scrollY > 500) {
3062      button.classList.add("is-visible");
3063    } else {
3064      button.classList.remove("is-visible");
3065    }
3066
3067  });
3068
3069  button.addEventListener("click", function () {
3070
3071    window.scrollTo({
3072      top: 0,
3073      behavior: "smooth"
3074    });
3075
3076  });
3077
3078});
3079
3080
3081
3082
3083
3084const lenis = new Lenis({
3085  duration: 1.2,
3086  smoothWheel: true,
3087  wheelMultiplier: 1,
3088  touchMultiplier: 2,
3089  infinite: false,
3090});
3091
3092function raf(time) {
3093  lenis.raf(time);
3094  requestAnimationFrame(raf);
3095}
3096
3097requestAnimationFrame(raf);
3098
3099</script>
vendor: 1 bytes, line 3099
3099
3100<script>
3101document.addEventListener("DOMContentLoaded", () => {
3102  // مزامنة Lenis مع GSAP
3103  if (typeof lenis !== 'undefined') {
3104    lenis.on('scroll', ScrollTrigger.update);
3105    gsap.ticker.add((time) => {
3106      lenis.raf(time * 1000);
3107    });
3108    gsap.ticker.lagSmoothing(0);
3109  }
3110
3111  gsap.registerPlugin(ScrollTrigger);
3112
3113  const container = document.querySelector('#timeline-scroll-container');
3114  const track = document.querySelector('#timeline-track');
3115
3116  if (container && track) {
3117    // حساب المسافة بدقة
3118    const calculateScrollDistance = () => {
3119      const scrollWidth = track.scrollWidth - window.innerWidth;
3120      return Math.max(scrollWidth, window.innerHeight * 2); // على الأقل ضعف ارتفاع الشاشة
3121    };
3122
3123    let scrollTween = gsap.to(track, {
3124      x: () => -calculateScrollDistance(),
3125      ease: "none",
3126      scrollTrigger: {
3127        trigger: container,
3128        pin: true,
3129        start: "top top",
3130        end: () => `+=${calculateScrollDistance()}`,
3131        scrub: 1,
3132        invalidateOnRefresh: true,
3133        anticipatePin: 1,
3134        onUpdate: (self) => {
3135          // منع السكرول الطبيعي أثناء الـ pin
3136          if (self.isActive) {
3137            container.style.overflow = 'hidden';
3138          } else {
3139            container.style.overflow = '';
3140          }
3141        }
3142      }
3143    });
3144
3145    // Refresh عند تغيير حجم الشاشة
3146    window.addEventListener('resize', () => {
3147      ScrollTrigger.refresh();
3148    });
3149  }
3150});
3151
3152
3153  /* the FQA JS Interactions ---------------------------------*/
3154  function x9kToggle(header){
3155  const item = header.closest('.qx9k-faq-vault-item');
3156  const answer = item.querySelector('.qx9k-faq-vault-a');
3157  const toggleText = item.querySelector('.qx9k-faq-vault-toggle-text');
3158  const isOpen = item.classList.contains('open');
3159
3160  // أقفل كل العناصر المفتوحة
3161  document.querySelectorAll('.qx9k-faq-vault-item.open').forEach(el => {
3162    el.classList.remove('open');
3163    el.querySelector('.qx9k-faq-vault-a').style.maxHeight = null;
3164    const txt = el.querySelector('.qx9k-faq-vault-toggle-text');
3165    if(txt) txt.textContent = 'plus';
3166  });
3167
3168  // افتح العنصر الحالي لو كان مقفول
3169  if(!isOpen){
3170    item.classList.add('open');
3171    answer.style.maxHeight = answer.scrollHeight + 'px';
3172    if(toggleText) toggleText.textContent = 'minus';
3173  }
3174}
3175
3176document.addEventListener('DOMContentLoaded', function() {
3177  const questions = document.querySelectorAll('.qx9k-faq-vault-q');
3178  questions.forEach(q => {
3179    q.addEventListener('click', function() {
3180      x9kToggle(this);
3181    });
3182  });
3183});
3184</script>
3184<!-- Lightweight JS for horizontal scrolling and effects -->
3185<script>
3186  const scrollContainer = document.getElementById("timeline-scroll-container");
3187  let isHorizontalScrolling = false;
3188  let scrollTimeout;
3189
3190  // Function to check if the screen is mobile size
3191  function isMobileView() {
3192    return window.innerWidth <= 768;
3193  }
3194
3195  // Smart scroll: Horizontal until reaching end, then vertical
3196  scrollContainer.addEventListener("wheel", (evt) => {
3197    // Disable horizontal scroll logic on mobile devices
3198    if (isMobileView()) return; 
3199
3200    const container = scrollContainer;
3201    const maxScrollLeft = container.scrollWidth - container.clientWidth;
3202    const currentScrollLeft = container.scrollLeft;
3203    const deltaY = evt.deltaY;
3204    
3205    // Check if we're at the start or end of horizontal scroll
3206    const isAtStart = currentScrollLeft <= 0;
3207    const isAtEnd = currentScrollLeft >= maxScrollLeft - 1;
3208    
3209    // If not at boundaries and user is scrolling, handle horizontal
3210    if (!isAtStart && !isAtEnd) {
3211      evt.preventDefault();
3212      container.scrollLeft += deltaY;
3213      isHorizontalScrolling = true;
3214      clearTimeout(scrollTimeout);
3215      scrollTimeout = setTimeout(() => {
3216        isHorizontalScrolling = false;
3217      }, 100);
3218    } 
3219    // If at start and trying to scroll left (negative delta) OR at end and trying to scroll right (positive delta)
3220    else if ((isAtStart && deltaY < 0) || (isAtEnd && deltaY > 0)) {
3221      // Allow vertical scroll to pass through
3222      return;
3223    }
3224    else {
3225      // In between but horizontal scroll might be possible
3226      evt.preventDefault();
3227      container.scrollLeft += deltaY;
3228      isHorizontalScrolling = true;
3229      clearTimeout(scrollTimeout);
3230      scrollTimeout = setTimeout(() => {
3231        isHorizontalScrolling = false;
3232      }, 100);
3233    }
3234  });
3235
3236  // Drag to scroll - remains functional
3237  let isDown = false;
3238  let startX;
3239  let scrollLeft;
3240
3241  scrollContainer.addEventListener("mousedown", (e) => {
3242    if (isMobileView()) return; // Disable drag on mobile
3243    isDown = true;
3244    startX = e.pageX - scrollContainer.offsetLeft;
3245    scrollLeft = scrollContainer.scrollLeft;
3246    scrollContainer.style.cursor = "grabbing";
3247  });
3248  
3249  scrollContainer.addEventListener("mouseleave", () => {
3250    if (isMobileView()) return;
3251    isDown = false;
3252    scrollContainer.style.cursor = "grab";
3253  });
3254  
3255  scrollContainer.addEventListener("mouseup", () => {
3256    if (isMobileView()) return;
3257    isDown = false;
3258    scrollContainer.style.cursor = "grab";
3259  });
3260  
3261  scrollContainer.addEventListener("mousemove", (e) => {
3262    if (isMobileView()) return;
3263    if (!isDown) return;
3264    e.preventDefault();
3265    const x = e.pageX - scrollContainer.offsetLeft;
3266    const walk = (x - startX) * 2;
3267    scrollContainer.scrollLeft = scrollLeft - walk;
3268  });
3269  // Function to check if the screen is mobile size (More accurate)
3270  function isMobileView() {
3271    return window.matchMedia("(max-width: 768px)").matches || window.innerWidth <= 768;
3272  }
3273
3274    // Force kill external library transforms (like GSAP/Lenis) on Mobile
3275  function killMobileTransforms() {
3276    if (window.matchMedia("(max-width: 768px)").matches) {
3277      const track = document.getElementById("timeline-track");
3278      const container = document.getElementById("timeline-scroll-container");
3279      
3280      if (track) {
3281        track.style.transform = "none";
3282        track.style.translate = "none";
3283        
3284        // Observer to constantly reset if an external library keeps trying to move it
3285        const observer = new MutationObserver((mutations) => {
3286          if (window.matchMedia("(max-width: 768px)").matches) {
3287            if (track.style.transform !== "none") track.style.transform = "none";
3288            if (track.style.translate !== "none") track.style.translate = "none";
3289          }
3290        });
3291        
3292        observer.observe(track, { attributes: true, attributeFilter: ['style'] });
3293      }
3294      
3295      if (container) {
3296        container.style.transform = "none";
3297        container.style.translate = "none";
3298      }
3299
3300      // If you are using GSAP, this will disable it on mobile
3301      if (typeof gsap !== 'undefined' && gsap.globalTimeline) {
3302        gsap.globalTimeline.pause();
3303      }
3304      
3305      // If you are using Lenis smooth scroll, disable it on mobile
3306      if (typeof lenis !== 'undefined') {
3307        lenis.stop();
3308      }
3309    } else {
3310      // Re-enable GSAP/Lenis if on desktop
3311      if (typeof gsap !== 'undefined' && gsap.globalTimeline) {
3312        gsap.globalTimeline.play();
3313      }
3314      if (typeof lenis !== 'undefined') {
3315        lenis.start();
3316      }
3317    }
3318  }
3319
3320  // Run on load and on resize
3321  killMobileTransforms();
3322  window.addEventListener("resize", killMobileTransforms);
3323  
3324  // Also run if the page uses a library that initializes late
3325  window.addEventListener("load", killMobileTransforms);
3326
3327  
3328  // Mouse Tracking Glow
3329  const mouseGlow = document.getElementById("mouse-glow");
3330  if (mouseGlow) {
3331    document.addEventListener("mousemove", (e) => {
3332      if (isMobileView()) return; // Disable glow tracking on mobile to save performance
3333      mouseGlow.style.setProperty("--mouse-x", `${e.clientX}px`);
3334      mouseGlow.style.setProperty("--mouse-y", `${e.clientY}px`);
3335    });
3336  }
3337</script>
3337</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.