.elementor-117792 .elementor-element.elementor-element-b7691b9 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#00A081;font-family:"Inter", Sans-serif;font-size:30px;font-weight:700;}.elementor-117792 .elementor-element.elementor-element-4cd2d7f .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#00A081;font-family:"Inter", Sans-serif;font-size:30px;font-weight:700;}.elementor-117792 .elementor-element.elementor-element-2bf5929 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#00A081;font-family:"Inter", Sans-serif;font-size:30px;font-weight:700;}@media(max-width:1024px){.elementor-117792 .elementor-element.elementor-element-b7691b9 .elementor-counter-number-wrapper{font-size:24px;}.elementor-117792 .elementor-element.elementor-element-4cd2d7f .elementor-counter-number-wrapper{font-size:24px;}.elementor-117792 .elementor-element.elementor-element-2bf5929 .elementor-counter-number-wrapper{font-size:24px;}}@media(max-width:767px){.elementor-117792 .elementor-element.elementor-element-b7691b9 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:1;--counter-suffix-grow:1;--counter-number-grow:0;}.elementor-117792 .elementor-element.elementor-element-4cd2d7f .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:1;--counter-suffix-grow:1;--counter-number-grow:0;}.elementor-117792 .elementor-element.elementor-element-2bf5929 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:1;--counter-suffix-grow:1;--counter-number-grow:0;}}/* Start custom CSS *//* Lifecycle cards: scroll focus effect.
Performance note: only opacity + blur are animated on the card itself (GPU-friendly). The blue glow lives on a pseudo-element with a static shadow whose opacity is animated, so scrolling stays smooth. */
@supports (animation-timeline: view()) {
.capability-module {
position: relative;
transition: none !important;
will-change: opacity, filter;
animation: capability-module-focus linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
.capability-module::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
box-shadow: 29px 26px 15px rgba(0, 98, 255, 0.02), 16px 15px 13px rgba(0, 98, 255, 0.06), 7px 6px 10px rgba(0, 98, 255, 0.1), 2px 2px 5px rgba(0, 98, 255, 0.12);
animation: capability-module-glow linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes capability-module-focus {
0%, 28%, 72%, 100% { opacity: 0.6; filter: blur(1.6px); }
46%, 54% { opacity: 1; filter: blur(0px); }
}
@keyframes capability-module-glow {
0%, 28%, 72%, 100% { opacity: 0; }
46%, 54% { opacity: 1; }
}
}
@media (prefers-reduced-motion: reduce) {
.capability-module { animation: none !important; opacity: 1; filter: none; will-change: auto; }
.capability-module::after { animation: none !important; }
}
/* MOBILE ONLY (767px and below): no blur / glow focus effect. Each card matches the design frame: outlined pill (12px) at the top, then a 16px semibold title and a 16px description, all centred in one white card with a thin light-blue border. Desktop and tablet are unchanged. */
@media (max-width: 767px) {
.capability-module {
animation: none !important;
opacity: 1 !important;
filter: none !important;
will-change: auto !important;
}
.capability-module::after {
display: none !important;
animation: none !important;
}
/* the tag cell becomes the top part of the card. Its side and top borders are forced (!important) because the desktop column-divider rules were wiping the left/right borders on mobile. It overlaps the card below by 1px so no hairline gap shows where the two parts meet. */
.lifecycle-columns > :has(> .stage-tag) {
display: flex;
justify-content: center;
box-sizing: border-box;
position: relative;
z-index: 1;
background: #FFFFFF;
border-style: solid !important;
border-color: #D5E1F5 !important;
border-width: 1px 1px 0 1px !important;
border-radius: 16px 16px 0 0 !important;
padding: 24px 24px 0 !important;
margin-bottom: -25px;
}
.lifecycle-columns .stage-tag {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 1px solid #0057E5 !important;
border-radius: 1000px !important;
color: #0057E5 !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 15px !important;
padding: 7px 16px !important;
}
/* the card becomes the bottom part */
.lifecycle-columns .capability-module {
border-style: solid !important;
border-color: #D5E1F5 !important;
border-width: 0 1px 1px 1px !important;
border-radius: 0 0 16px 16px !important;
padding: 20px 24px 24px !important;
min-height: 0 !important;
gap: 7px !important;
align-items: center;
text-align: center;
}
.lifecycle-columns .capability-module .icon-well {
display: none !important;
}
.lifecycle-columns .capability-module .module-header {
justify-content: center;
text-align: center;
margin: 0;
}
.lifecycle-columns .capability-module .module-title {
text-align: center;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 140% !important;
margin: 0 !important;
}
.lifecycle-columns .capability-module .module-description {
text-align: center;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 125% !important;
margin: 0 !important;
}
}
/* MOBILE ONLY (767px and below): the feature cards get slightly smaller side padding. The feature card titles ("Single
source of truth", "Clean
master data", "Complete
pipeline visibility", "Faster
onboarding") keep the same two-line break as on desktop and are allowed to wrap, so long titles never overflow the card. */
@media (max-width: 767px) {
.feature-card {
padding-left: 20px !important;
padding-right: 20px !important;
}
.feature-title {
font-size: min(24px, 6.1vw) !important;
white-space: normal !important;
overflow-wrap: break-word;
}
}
/* Impact section (3 columns): label, big number line and caption rise into place one after another as they scroll into view.
Transform + opacity only, so it stays smooth. */
@supports (animation-timeline: view()) {
.impact-card { --o: 0%; }
.impact-card:nth-child(2) { --o: 6%; }
.impact-card:nth-child(3) { --o: 12%; }
.impact-card .impact-category-text,
.impact-card .impact-label,
.impact-card .elementor-widget-counter,
.impact-card .impact-value {
animation: impact-text-rise linear both;
animation-timeline: view();
will-change: transform, opacity;
}
.impact-card .impact-category-text { animation-range: entry calc(0% + var(--o)) entry calc(45% + var(--o)); }
.impact-card .impact-label,
.impact-card .elementor-widget-counter { animation-range: entry calc(8% + var(--o)) entry calc(58% + var(--o)); }
.impact-card .impact-value { animation-range: entry calc(16% + var(--o)) entry calc(66% + var(--o)); }
@keyframes impact-text-rise {
from { opacity: 0; transform: translateY(48px); }
to { opacity: 1; transform: translateY(0); }
}
}
@media (prefers-reduced-motion: reduce) {
.impact-card .impact-category-text,
.impact-card .impact-label,
.impact-card .elementor-widget-counter,
.impact-card .impact-value { animation: none !important; opacity: 1; transform: none; will-change: auto; }
}
/* Impact counters (Elementor Counter widget): same look as the heading text beside them, in green and bold */
.impact-card .elementor-widget-counter .elementor-counter {
text-align: left;
}
.impact-card .elementor-widget-counter .elementor-counter-title {
display: none;
}
.impact-card .elementor-widget-counter .elementor-counter-number-wrapper {
justify-content: flex-start;
font-family: Inter;
font-weight: 700;
font-size: 24px;
line-height: 130%;
color: #00A081;
margin: 0;
white-space: nowrap;
}
@media (max-width: 1024px) {
.impact-card .elementor-widget-counter .elementor-counter-number-wrapper { font-size: 20px; }
}
@media (max-width: 767px) {
.impact-card .elementor-widget-counter .elementor-counter-number-wrapper { font-size: 22px; }
}
/* Impact arrows ("18 days →" and "8 hrs →"): the arrow is drawn as the design's thin arrow icon (shaft + open head). The text keeps its normal arrow character (for screen readers and copy/paste), but the text is painted through a gradient that is see-through over that last character, so the font arrow never shows, and the icon sits right where it was. This works on every browser and phone and does not depend on installed fonts. The element is shrink-wrapped to its text so the see-through part lines up with the arrow (the arrow character is the last 1em; the icon overlaps it by 0.9em). */
[data-id="57e7d86e"],
[data-id="208fada4"] {
width: fit-content !important;
max-width: none !important;
white-space: nowrap !important;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, #374151 0, #374151 calc(100% - 0.95em), transparent calc(100% - 0.95em));
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
}
[data-id="57e7d86e"]::after,
[data-id="208fada4"]::after {
content: '';
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-left: -0.9em;
vertical-align: -0.08em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12H21M14 5L21 12L14 19'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 767px) {
[data-id="57e7d86e"],
[data-id="208fada4"] {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* FAQ accordion: swap + / minus icon with open state */
.faq-item .faq-plus-open { display: none !important; }
.faq-item[open] .faq-plus-open { display: block !important; }
.faq-item[open] .faq-plus-closed { display: none !important; }
.faq-item-header { list-style: none; }
.faq-item-header::-webkit-details-marker { display: none; }
.faq-item-header::marker { content: ''; }
/* FAQ + / minus: drawn as one SVG image (not separate CSS bars) so the plus and the minus have exactly the same stroke weight in every row, at any zoom or screen scale. Bars used to snap to whole device pixels, which made some rows look bold and others thin. */
.faq-toggle { position: relative; }
.faq-toggle .faq-plus {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
.faq-toggle .faq-plus::before {
content: '';
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
}
.faq-toggle .faq-plus-closed::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 7H13M7 1V13' stroke='%23000F9B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-toggle .faq-plus-open::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 7H13' stroke='%23000F9B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
.faq-toggle .faq-plus::before { background-size: 12px 12px; }
}
/* CTA banner button ("Talk to a Lead Management Expert"): 2px gradient border (mint to blue), white fill. The theme/kit hover rules outrank the class: they switch the font to Helvetica on hover (which made the text look smaller and narrower), change the colour to white and add their own shadow. All of that is overridden here, so the text uses the same font (Inter), size, weight, spacing, line-height and colour in every state. */
.elementor .expert-cta-button {
font-family: Inter, sans-serif !important;
line-height: 120% !important;
letter-spacing: normal !important;
word-spacing: normal !important;
font-size: 20px !important;
font-weight: 600 !important;
font-synthesis: none;
transform: translateZ(0) !important;
backface-visibility: hidden;
will-change: box-shadow;
transition: box-shadow 0.3s ease !important;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 45px 40px 17px rgba(255, 255, 255, 0.02), 29px 26px 15px rgba(255, 255, 255, 0.04), 2px 2px 5px #00FECC !important;
}
@media (max-width: 1024px) {
.elementor .expert-cta-button { font-size: 16px !important; }
}
.elementor .expert-cta-button:hover,
.elementor .expert-cta-button:focus,
.elementor .expert-cta-button:focus-visible,
.elementor .expert-cta-button:active {
font-family: Inter, sans-serif !important;
line-height: 120% !important;
color: #00109C !important;
letter-spacing: normal !important;
word-spacing: normal !important;
font-size: 20px !important;
font-weight: 600 !important;
transform: translateZ(0) !important;
box-shadow: 45px 40px 17px rgba(255, 255, 255, 0.02), 29px 26px 15px rgba(255, 255, 255, 0.04), 2px 2px 14px #00FECC !important;
}
@media (max-width: 1024px) {
.elementor .expert-cta-button:hover,
.elementor .expert-cta-button:focus,
.elementor .expert-cta-button:focus-visible,
.elementor .expert-cta-button:active { font-size: 16px !important; }
}
/* Hero button: flowing multi-colour gradient, loops forever */
@keyframes hero-button-gradient-flow {
0% { background-position: top left, left top, left top, 0% 50%; }
50% { background-position: top left, left top, left top, 100% 50%; }
100% { background-position: top left, left top, left top, 0% 50%; }
}
.hero-button {
animation: hero-button-gradient-flow 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.hero-button { animation: none; }
}
/* Hero chip (Lead Management System): clean 2px gradient border on the pill's rounded edge, transparent inside, gradient text kept.
The ring is cut with a rounded padding-box mask (not a rectangle), so the ends of the pill stay smooth. */
.hero-chip::before {
content: '';
position: absolute;
inset: 0;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: inherit;
background: linear-gradient(90deg, #3070F2 0%, #602CF4 100%) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
mask-composite: exclude;
pointer-events: none;
}
/* SVG icons: the Elementor SVG widget forces fill=currentColor on the root, which fills outline icons solid/black. Turning the root fill off fixes outline icons (no fill of their own), while icons whose paths carry their own fill colour (e.g. the green Geo-Tagged pin, the white filled features icons) keep it. Applies to the hero chip icons and the 'Channel Partner Onboarding Simplified' feature icons. */
.hero-floating-icon svg,
.feature-icon svg {
fill: none !important;
}
/* Hero button: keep Inter on hover/focus (the kit's a:hover rule switches links to Helvetica) */
.elementor .hero-button,
.elementor .hero-button:hover,
.elementor .hero-button:focus,
.elementor .hero-button:focus-visible,
.elementor .hero-button:active {
font-family: 'Inter', sans-serif !important;
text-decoration: none !important;
}
/* Features section (4 cards): plain cards, no hover effect (no purple bottom border, no transition) */
.elementor .feature-card,
.elementor .feature-card:hover,
.elementor .feature-card:focus,
.elementor .feature-card:focus-visible {
border-style: none !important;
border-width: 0 !important;
transition: none !important;
transform: none !important;
box-shadow: none !important;
}
/* ===== Section 2 (features grid): swipe carousel on tablet and mobile (same as the Van Sales page). Tablet = 3 cards visible + a peek of the 4th. Mobile = 280px cards, snap to centre. Desktop keeps the 4-column row. ===== */
@media (max-width: 1024px) {
.elementor .elementor-element-2a52f7 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 24px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; padding: 8px 0 24px 0 !important; }
.elementor .elementor-element-2a52f7::-webkit-scrollbar { display: none; }
.elementor .elementor-element-2a52f7 > * { flex: 0 0 calc((100% - 120px) / 3) !important; width: calc((100% - 120px) / 3) !important; min-width: 0 !important; max-width: none !important; transform: none !important; scroll-snap-align: start; }
}
@media (max-width: 767px) {
.elementor .elementor-element-2a52f7 { gap: 16px !important; padding: 24px 24px 40px 24px !important; }
.elementor .elementor-element-2a52f7 > * { flex: 0 0 280px !important; width: 280px !important; scroll-snap-align: center; }
}
/* ===== Section 3 timeline pointer (same as the Van Sales page): a 3px gradient bar pinned to the vertical middle of the screen and visible only along the line. The card at the middle of the screen is the focused one, so the bar always sits next to it. Pure CSS (fixed background on the line); the old spine element is hidden. ===== */
.elementor .lifecycle-columns > .lifecycle-spine { display: none !important; }
.elementor .lifecycle-columns.lifecycle-columns { position: relative !important; }
@media (min-width: 768px) {
.elementor .lifecycle-columns.lifecycle-columns::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; pointer-events: none; z-index: 0; background-image: linear-gradient(180deg, #FFFFFF -8.68%, #B1B8FF 109.07%); background-repeat: no-repeat; background-attachment: fixed; background-size: 100vw 160px; background-position: 0 calc(50vh - 80px); }
}
@supports (-webkit-touch-callout: none) {
.elementor .lifecycle-columns.lifecycle-columns::before { display: none; }
}
/* ===== Section 3 chips (1. Discover ... 6. Govern), desktop and tablet: the chip is a pale gradient pill, dimmed and blurred like the cards, when it is not in focus (default state). As it reaches the middle of the screen it turns sharp and becomes the existing chip look (white-to-pale-blue gradient, soft blue shadow, blue text), then fades back. Mobile keeps its own outlined chip. ===== */
@supports (animation-timeline: view()) {
@media (min-width: 768px) {
.elementor .lifecycle-columns .stage-tag { position: relative; isolation: isolate; line-height: 40px; color: #000F9B; background-image: linear-gradient(90deg, #F3F8FF 0%, #EDF4FF 100%); box-shadow: 29px 26px 15px 0 rgba(0,98,255,0), 16px 15px 13px 0 rgba(0,98,255,0), 7px 6px 10px 0 rgba(0,98,255,0), 2px 2px 5px 0 rgba(0,98,255,0); will-change: opacity, filter; animation: lms-chip-focus linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
.elementor .lifecycle-columns .stage-tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(90deg, #FFFFFF 0%, #EDF4FF 100%); opacity: 0; animation: lms-chip-focus-bg linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
@keyframes lms-chip-focus { 0%, 28%, 72%, 100% { opacity: 0.6; filter: blur(1.6px); color: #000F9B; box-shadow: 29px 26px 15px 0 rgba(0,98,255,0), 16px 15px 13px 0 rgba(0,98,255,0), 7px 6px 10px 0 rgba(0,98,255,0), 2px 2px 5px 0 rgba(0,98,255,0); } 46%, 54% { opacity: 1; filter: blur(0px); color: #0057E6; box-shadow: 29px 26px 15px 0 rgba(0,98,255,0.01), 16px 15px 13px 0 rgba(0,98,255,0.05), 7px 6px 10px 0 rgba(0,98,255,0.09), 2px 2px 5px 0 rgba(0,98,255,0.1); } }
@keyframes lms-chip-focus-bg { 0%, 28%, 72%, 100% { opacity: 0; } 46%, 54% { opacity: 1; } }
}
}
@media (prefers-reduced-motion: reduce) {
.elementor .lifecycle-columns .stage-tag, .elementor .lifecycle-columns .stage-tag::before { animation: none !important; opacity: 1; filter: none; }
}
/* v22 *//* End custom CSS */