/* bricks-frontend-inline-inline-css */
html {scroll-behavior: smooth}.fr-header-alpha {padding-top: 0; padding-right: var(--section-padding-x); padding-bottom: 0; padding-left: var(--section-padding-x); background-color: var(--white); isolation: isolate}.fr-header-alpha { position: relative;}.fr-header-alpha__inner {display: flex; align-items: center; flex-direction: row; column-gap: var(--space-xxl); justify-content: center}@media (max-width: 991px) {.fr-header-alpha__inner {justify-content: space-between}}.header-logo-text__wrapper {display: flex; align-items: center; column-gap: var(--space-xs)}.header-logo__wrapper {display: flex; flex-direction: column; overflow: hidden; row-gap: unset}.fr-header-alpha__logo {width: 10em}.header-logo--text {font-family: "Lora"; font-size: var(--text-l); font-weight: 900; color: var(--primary-ultra-dark)}.fr-brx-nav-alpha .bricks-mobile-menu > li > a {padding-right: var(--space-m); padding-left: var(--space-m); color: var(--fr-text-light)}.fr-brx-nav-alpha .bricks-mobile-menu > li > .brx-submenu-toggle > * {padding-right: var(--space-m); padding-left: var(--space-m); color: var(--fr-text-light)}.fr-brx-nav-alpha .bricks-mobile-menu-toggle {color: var(--fr-text-dark)}.fr-brx-nav-alpha .bricks-nav-menu > li {margin-left: 0}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu .brx-submenu-toggle > a + button {color: var(--fr-text-dark); font-size: var(--text-m); line-height: 1}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu .brx-submenu-toggle button {margin-left: .5em}.fr-brx-nav-alpha .bricks-nav-menu > li > a {color: var(--text-dark)}.fr-brx-nav-alpha .bricks-nav-menu > li > .brx-submenu-toggle > * {color: var(--text-dark)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > .current-menu-item > a {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > .current-menu-item > .brx-submenu-toggle > * {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > .current-menu-ancestor > a {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > .current-menu-ancestor > .brx-submenu-toggle > * {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu .menu-item {background-color: var(--primary)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu {background-color: var(--primary)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > li > a {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu > li > .brx-submenu-toggle > * {color: var(--text-light)}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu a {padding-top: 0.5em; padding-bottom: 0.5em}.fr-brx-nav-alpha .bricks-nav-menu .sub-menu button {padding-top: 0.5em; padding-bottom: 0.5em}.fr-brx-nav-alpha { --link-gap: var(--content-gap); inline-size: 100%;}@media (min-width: 768px) { .fr-brx-nav-alpha ul:not(.sub-menu) { display: flex; gap: var(--link-gap); } #menu-main-menu { li:first-child { margin-left: auto; } } .free-audit-btn { position: relative; padding-inline: var(--space-m); justify-content: center; background-color: var(--accent); text-wrap: nowrap; padding: var(--space-xs) var(--space-m); border-radius: var(--radius-circle); display: flex; flex-direction: column; dddddddd &:before { contain: ''; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; background-color: black; transform: translate(5px 5px); z-index: 1; } a { color: var(--text-light) !important; } }}@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(222, 84, 72, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(222, 84, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(222, 84, 72, 0); }} @media (max-width: 991px) {.fr-brx-nav-alpha {line-height: 0}}.animation-typing__section {position: relative}@media (max-width: 478px) {.animation-typing__section { overflow-x: hidden;}}/* CLS fix 2026-07-27: animate transform only (compositor), element parked at its final inset — moving inset-* caused 15 counted layout shifts */.hero-animate-logo { position: absolute; inline-size: 50%; z-index: -1; inset-inline-start: 45%; inset-block-end: 40%; animation: moveAndScale 3s 1s ease-in-out forwards; transform: translate(-110%, 90%) scale(1);}@keyframes moveAndScale { from { transform: translate(-110%, 90%) scale(1); } to { transform: translate(0, 0) scale(1.6) rotate(10deg); }}@media (max-width: 478px) {.hero-animate-logo { position: absolute; inline-size: 50%; z-index: -1; inset-inline-start: 45%; inset-block-end: 70%; animation: moveAndScale 3s 1s ease-in-out forwards; transform: translate(-110%, 90%) scale(1);}@keyframes moveAndScale { from { transform: translate(-110%, 90%) scale(1); } to { transform: translate(0, 0) scale(3) rotate(10deg); }}}.animation-typing__container {align-items: flex-start; row-gap: var(--content-gap)}.animation-typing__container { --anim-typing-text-size: var(--h2);}.animation-typing__element {font-size: var(--anim-typing-text-size); font-weight: 700; line-height: 1.3; width: 34ch}.animation-typing__element { .typed { background-color: var(--accent-trans-30); padding-inline: 0.1em; } .typed-cursor { position: relative; animation: no-blink 3s infinite; color: var(--accent-trans-90); font-weight: 400; &:after { content: 'Cleverus'; position: absolute; inset-block-start: -35px; inset-inline-start: 5px; font-size: var(--text-l); font-weight: 600; background-color: var(--primary); color: var(--text-light); padding: 0.3em 0.5em; border-radius: var(--radius-m) var(--radius-m) var(--radius-m) 0; } } .suffix { div { display: inline; } } .prefix { div { display: inline; } }}@keyframes no-blink { 0%, 100% { opacity: 1 !important; }}.hero-highlight-title {font-size: var(--h2); font-weight: 700; text-wrap: balance}.hero-highlight-title { .highlighted { background-color: var(--accent-trans-30); padding-inline: 0.1em; }}.cta-free-audit__accent-heading-wrapper {display: flex; align-items: center; justify-content: center; column-gap: 0.2em; order: -1; padding-top: calc(var(--space-xs) * 0.2); padding-right: var(--space-s); padding-bottom: calc(var(--space-xs) * 0.2); padding-left: var(--space-s); color: var(--accent-text-color); font-size: var(--text-s); border: 1px solid var(--white); border-radius: var(--radius-xxl); background-color: var(--accent-heading-bg-color)}.cta-free-audit__accent-heading-wrapper { inline-size: fit-content;}.cta-free-audit__accent-heading {font-size: var(--accent-heading-size); font-weight: 400}@media (max-width: 478px) {.cta-free-audit__accent-heading {text-wrap: balance}}.cta-free-audit__accent-icon {font-size: var(--accent-heading-size)}.cta-free-audit__accent-icon { transform: rotate(-45deg);}.animation-typing__lede {font-weight: 400; font-size: var(--text-m); text-wrap: balance}h2.animation-typing__lede { font-size: calc(var(--h3) * 0.9);}.cta-btn--accent {padding-top: var(--space-xs) !important; padding-right: var(--space-l) !important; padding-bottom: var(--space-xs) !important; padding-left: var(--space-l) !important; color: var(--cta-btn-color) !important; font-size: var(--cta-btn-text) !important; background-color: var(--accent) !important; margin-top: var(--space-m)}.cta-btn--accent { --cta-btn-text: var(--text-m); --cta-btn-color: var(--white); font-weight: 500 !important; border-radius: var(--radius-circle) !important; border: 2px solid var(--accent) !important; transform: translateX(-5px) translateY(-5px); box-shadow: 3px 3px 5px 3px var(--accent-trans-50); transition: all 0.3s ease-in-out !important; &:hover { transform: translateX(-8px) translateY(-8px); box-shadow: 5px 5px 5px 3px var(--accent-trans-50); } &:active { transform: translateX(0px) translateY(0px); box-shadow: 0px 0px 5px 3px var(--accent-trans-50); }} .hero__key-point {display: flex; flex-direction: row; align-items: center; column-gap: 0.2em}.hero__key-point { position: relative; &:before { content: '✓'; }}.hero__key-point__text {font-size: var(--text-s)}.feature-card__li {row-gap: calc(var(--space-xs) * 0.5)}.feature-card__icon {font-size: var(--h2); margin-bottom: var(--space-xs); color: var(--accent); fill: var(--accent)}.feature-card__header {font-size: var(--h4); font-weight: 700}.feature-card__text {font-size: var(--text-s); color: var(--neutral-semi-dark); font-weight: 400; font-family: "Onest"; line-height: 1.3}.service-single__arrow-down-heading-container {row-gap: var(--content-gap)}.service-single__arrow-down-heading--main {text-align: center; font-size: calc(var(--h2) * 1.0); text-wrap: balance}.service-single__arrow-down-heading-wrapper {order: -1; display: flex; align-items: center; justify-content: center; column-gap: var(--space-xs); color: var(--accent)}.service-single__arrow-down-heading__icon {font-size: var(--text-m)}.service-single__arrow-down-heading__icon { transform: rotate(45deg);}.service-single__arrow-down-heading__icon-text {text-transform: uppercase; font-size: calc(var(--text-xs) * 1); font-weight: 700; letter-spacing: 1px}.notification-card {display: flex; align-items: center; padding-top: calc(var(--space-xs) * 0.5); padding-right: var(--space-s); padding-bottom: calc(var(--space-xs) * 0.5); padding-left: var(--space-s); border-radius: var(--fr-card-radius); column-gap: var(--space-xs)}.notification-card { position: absolute; z-index: 99;} .notification-card--dark { background-color: var(--neutral); .notification-card__icon-wrapper { background-color: var(--accent); .notification-card__icon { color: var(--text-dark); } } .notification-card__accent-text { color: var(--neutral-light); } .notification-card__text { color: var(--text-light); }} .notification-card--light { background-color: var(--white); .notification-card__icon-wrapper { background-color: var(--primary); .notification-card__icon { color: var(--text-light); } } .notification-card__accent-text { color: var(--neutral-semi-dark); } .notification-card__text { color: var(--text-dark); }}.notification-card__icon-wrapper {display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: var(--radius-50); aspect-ratio: 1/1; width: 50px}.notification-card__icon {font-size: var(--text-l)}.notification-card__body {display: flex; flex-direction: column}.notification-card__accent-text {font-size: var(--text-xs)}@media (max-width: 478px) {.notification-card__accent-text {font-size: calc(var(--text-xs) * 0.8)}}.notification-card__text {font-weight: 700; max-width: 20ch}@media (max-width: 478px) {.notification-card__text {font-size: var(--text-xs)}}.service-usp__number-card__li {display: flex; align-items: flex-start; column-gap: var(--space-xs)}@media (max-width: 767px) {.service-usp__number-card__li {flex-direction: column}}.service-usp__number-card__body {display: flex; flex-direction: column; row-gap: var(--space-xs)}@media (max-width: 767px) {.service-usp__number-card__body {margin-top: var(--space-m)}}.achievement-card-wrapper {display: grid; align-items: initial; grid-template-columns: var(--grid-4); grid-gap: var(--space-l) var(--grid-gap) }@media (max-width: 767px) {.achievement-card-wrapper {grid-template-columns: var(--grid-2)}}@media (max-width: 478px) {.achievement-card-wrapper {grid-template-columns: var(--grid-1)}}.achievement-card__li {align-items: center; row-gap: var(--space-xs); justify-content: center}.achievement-card__number {color: var(--accent); font-size: var(--h2); font-weight: 600}.achievement-card__text {text-align: center; text-transform: capitalize}.service-featured__section {background-color: var(--text-dark)}.service-featured__container {display: grid; align-items: initial; grid-template-columns: var(--grid-2-3); grid-gap: var(--space-l)}@media (max-width: 767px) {.service-featured__container {grid-template-columns: var(--grid-1)}}.service-featured__body {row-gap: var(--content-gap); justify-content: center}.service-featured__title {color: var(--text-light); font-size: var(--h3)}.service-featured__text {color: var(--text-light-muted)}.service-featured__text a {color: var(--text-light-muted); font-size: inherit}.service-featured__text { a { text-decoration: underline; }}.service-featured__media-wrapper {justify-content: center; align-items: center}@media (max-width: 767px) {.service-featured__media-wrapper {order: -1}}.service-featured__media:not(.tag), .service-featured__media img {object-fit: contain}.fr-timeline-section-alpha {row-gap: var(--container-gap); position: relative}.timeline-gradient-svg { position: absolute; z-index: -1; inset-block-start: 0; inline-size: 100%;}.timeline-triangle-svg {position: absolute; z-index: -1; width: var(--triangle-line-size); right: 0px; bottom: -15%}.timeline-triangle-svg { --triangle-line-size: 90%;}.fr-intro-alpha {align-items: center; text-align: center; row-gap: var(--content-gap)}@media (max-width: 767px) {.fr-intro-alpha {text-align: left; align-items: flex-start}}@media (max-width: 767px) {.fr-intro-alpha__heading {font-size: var(--h1)}}.fr-lede {font-size: var(--text-s)}.fr-timeline-alpha {row-gap: var(--container-gap); position: relative}.fr-timeline-alpha { --timeline-gap: var(--space-m); --center-line-color: var(--neutral-light); --center-line-width: 0.3em; --icon-size: 1.5em; counter-reset: process-count; li { .fr-timeline-alpha__icon-wrapper { &:after { font-weight: 400; font-size: calc(var(--text-xl) * 1.0); z-index: 1; padding: var(--space-xs); background-color: white; box-shadow: 0px 5px 10px 3px var(--primary-trans-20); border-radius: var(--radius-50); aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center; } } .fr-timeline-alpha__icon-wrapper { &:after { counter-increment: process-count; content: counter(process-count, decimal-leading-zero); } } &:last-child { .fr-timeline-alpha__heading { inline-size: 26ch; font-size: var(--text-m); background-color: var(--accent); padding: var(--space-xs) var(--space-l); border-radius: var(--radius-circle); color: white; line-height: 1.5; text-wrap: balance; text-align: center; transform: translateX(-5px) translateY(-5px); box-shadow: 3px 3px 5px 3px var(--accent-trans-50); transition: all 0.3s ease-in-out; &:hover { transform: translateX(-8px) translateY(-8px); box-shadow: 5px 5px 5px 3px var(--accent-trans-50); } &:active { transform: translateX(0px) translateY(0px); box-shadow: 0px 0px 5px 3px var(--accent-trans-50); } } } }}.fr-timeline-alpha .fr-timeline-alpha__list-item { display: grid; grid-template-columns: repeat(11, 1fr);grid-template-rows: var(--grid-1); align-items: stretch;}@media (min-width: 768px) { .fr-timeline-alpha .fr-timeline-alpha__list-item > *:first-child { grid-column: 1 / 6; } .fr-timeline-alpha .fr-timeline-alpha__list-item:last-child:nth-child(odd) .fr-timeline-alpha__header { align-items: flex-end; } .fr-timeline-alpha .fr-timeline-alpha__list-item:nth-child(2n) > *:last-child { grid-column: 6; grid-row: 1; } .fr-timeline-alpha .fr-timeline-alpha__list-item:nth-child(2n) > *:first-child { grid-column: 7 / end; text-align: left; } .fr-timeline-alpha .fr-timeline-alpha__list-item:nth-child(2n) .fr-timeline-alpha__body { align-items: start; } }.fr-timeline-alpha li:not(:last-child) .fr-timeline-alpha__icon-wrapper::before { width: var(--center-line-width); content: ""; background-color: var(--center-line-color); background-size: cover; position: absolute; inset-block-start: 0; bottom: calc(var(--timeline-gap) * -1);}.brx-draggable.is-empty { min-width: unset; min-height: unset;}.fr-timeline-alpha__list {row-gap: var(--timeline-gap); z-index: 1; column-gap: 0px}@media (max-width: 767px) {.fr-timeline-alpha__list .fr-timeline-alpha__list-item > *:first-child { order: -1; grid-column: 2 / end;}.fr-timeline-alpha__list .fr-timeline-alpha__list-item > *:last-child { grid-column:1; grid-row:1; }}.fr-timeline-alpha__list-item {grid-gap: 0px}@media (max-width: 767px) {.fr-timeline-alpha__list-item {grid-gap: var(--space-xs)}}.fr-timeline-alpha__content {row-gap: var(--space-xs); display: flex; flex-direction: column; text-align: right}@media (max-width: 767px) {.fr-timeline-alpha__content {text-align: left}}.fr-timeline-alpha__heading {font-size: var(--h3); font-weight: 600; width: 100%}.fr-timeline-alpha__body {align-items: flex-end}@media (max-width: 767px) {.fr-timeline-alpha__body {align-items: flex-start}}.fr-timeline-alpha__lede {font-size: var(--text-xs); width: 37ch}.fr-timeline-alpha__icon-wrapper {display: flex; flex-direction: column; align-items: center; flex-grow: 1; height: 100%; position: relative}@media (max-width: 767px) {.table__thead {display: none}}.table__tr {display: grid; align-items: initial; grid-template-columns: var(--table-row-col)}@media (max-width: 767px) {.table__tr {grid-template-columns: var(--grid-1)}}.table__th {display: flex; flex-direction: column; justify-content: center}.table__th-text {text-transform: capitalize; font-size: var(--th-font-size); font-weight: 700}@media (max-width: 767px) {.table__tbody {display: flex; flex-direction: column; row-gap: calc(var(--space-xs) * 0.35)}}.table__td {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center}@media (max-width: 767px) {.table__td {display: flex; flex-direction: row; justify-content: flex-start; column-gap: var(--fr-content-gap); align-items: center; padding-top: var(--space-xs); padding-right: var(--space-xs); padding-bottom: var(--space-xs); padding-left: var(--space-xs)}}.table__td-title-wrapper {display: flex; column-gap: .5em; cursor: help; flex-direction: column}.table__td-text {text-align: center; font-size: var(--td-font-size)}@media (max-width: 767px) {.table__td-text {font-size: var(--text-s)}}.why-seo-card__li {flex-direction: row; column-gap: var(--space-s); row-gap: var(--space-s)}.why-seo-card__icon-wrapper {aspect-ratio: 1/1; padding-top: var(--space-xs); padding-right: var(--space-xs); padding-bottom: var(--space-xs); padding-left: var(--space-xs); background-color: var(--primary-ultra-light); border-radius: var(--radius-m); width: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center}.why-seo-card__icon {font-size: var(--text-m); color: var(--primary); fill: var(--primary)}.why-seo-card__body {row-gap: calc(var(--space-xs) * 0.5)}.why-seo-card__heading {font-size: var(--h4)}.why-seo-card__text {font-size: var(--text-xs)}.cta-free-audit-section {position: relative; isolation: isolate; overflow: hidden; padding-top: var(--section-space-l); padding-bottom: var(--section-space-l)}.cta-free-audit__bg-img-wrapper {display: inline; position: absolute; z-index: -1; width: 100%; height: 100%}.cta-free-audit__bg-img {width: 100%; height: 100%}.cta-free-audit__bg-img:not(.tag), .cta-free-audit__bg-img img {object-fit: cover}.cta-free-audit__bg-img { position: relative;} .cta-free-audit__bg-img:before { content: ''; position: absolute; background-color: var(--neutral-ultra-dark-trans-70); block-size: 100%; inline-size: 100%}.cta-free-audit__body {row-gap: var(--space-xs); z-index: 1}.cta-free-audit__body { --alignment-position: center; --cta-color: var(--white); --cta-free-audit__heading-color: var(--cta-color); --accent-heading-size: var(--text-s); --accent-heading-bg-color: var(--transparent); --accent-text-color: var(--cta-color); --cta-free-audit__text-color: var(--cta-color); align-items: var(--alignment-position); }.cta-free-audit__heading {text-align: center; color: var(--cta-free-audit__heading-color); font-weight: 600; font-size: calc(var(--h2) * 1.2); text-wrap: balance; width: 30ch}.cta-free-audit__heading { text-align: var(--alignment-position);}@media (max-width: 478px) {.cta-free-audit__heading {font-size: var(--h2)}}.cta-free-audit__text {text-align: center; font-size: var(--text-s); color: var(--cta-free-audit__text-color); font-weight: 400; max-width: 65ch}.cta-free-audit__text { text-align: var(--alignment-position);}@media (max-width: 478px) {.cta-free-audit__text {font-size: var(--text-xs)}}.faq__ul .fr-accordion__icon--flipped {transform: rotateZ(180deg)}.faq__ul { --faq-icon-bg-color: black; --faq-text-color: var(--text-dark); --faq-body-color: var(--text-dark-muted); --faq-gap: var(--space-xl);} .faq__ul .fr-accordion__icon-wrapper { inline-size: 20px; min-inline-size: 20px; aspect-ratio: 1/1; position: relative;} .faq__ul .fr-accordion__icon-wrapper:before,.faq__ul .fr-accordion__icon-wrapper:after { content: ''; position: absolute; background-color: var(--faq-icon-bg-color); top: 50%; left: 50%; transition: all 0.3s ease-in-out;} .faq__ul .fr-accordion__icon-wrapper:before { transform: translate(-50%, -50%); inline-size: 100%; block-size: 2px;} .faq__ul .fr-accordion__icon-wrapper:after { transform: translate(-50%, -50%); inline-size: 2px; block-size: 100%;} .faq__ul .fr-accordion__item>[aria-expanded="true"] .fr-accordion__icon-wrapper:before { transform: translate(-50%, -50%) rotateZ(180deg); background-color: var(--faq-icon-bg-color);} .faq__ul .fr-accordion__item>[aria-expanded="true"] .fr-accordion__icon-wrapper:after { transform: translate(-50%, -50%) rotateZ(270deg); background-color: var(--faq-icon-bg-color);} .faq__ul { gap: var(--faq-gap);} .faq__ul .fr-accordion__item { position: relative; gap: 1px;} .faq__ul .fr-accordion__item:not(:last-child):after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: calc(var(--faq-gap) * -0.5); inline-size: 100%; block-size: 2px; background-color: var(--neutral-light-trans-30); } .faq__ul .fr-accordion__item * { transition: all 0.3s ease-in-out;} .faq__ul [aria-expanded="false"], .faq__ul .fr-accordion__header { background-color: transparent;} .faq__ul [aria-expanded="true"] { } .faq__ul .fr-accordion__title { font-size: calc(var(--text-l) * 0.8); font-weight: 500; color: var(--faq-text-color);} .fr-accordion__header { padding-block: 0; gap: var(--space-xs);} .faq__ul .fr-accordion__body { inline-size: 100%; color: var(--faq-body-color); font-size: var(--text-xs);} .faq__ul .fr-accordion__body a { color: var(--faq-body-color); text-decoration: underline;}.footer-col-span {row-gap: var(--content-gap)}.footer-col-span { grid-column: span 2; .footer-title { font-size: var(--text-m); color: var(--accent); font-weight: 600; }}@media (max-width: 767px) {.footer-col-span {grid-column: auto}}.fr-social-alpha {align-items: center; display: flex; column-gap: var(--space-xs); flex-wrap: wrap}@media (max-width: 991px) {.fr-social-alpha {row-gap: 1em}}.fr-social-alpha__icon-wrapper {flex-direction: row; display: flex; align-items: center; column-gap: px; text-decoration: none; justify-content: center; background-color: var(--black); border-radius: var(--radius-circle); aspect-ratio: 1/1; height: calc(var(--text-s) * 2)}.fr-social-alpha__icon {color: var(--white); fill: var(--white); font-size: var(--text-s)}.contact-details__ul {display: flex; flex-direction: column; row-gap: var(--space-xs); z-index: 1}.contact-details__li {display: flex; column-gap: var(--space-s)}.contact-details__icon-wrapper {display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1/1; height: var(--text-l)}.contact-details__icon {font-size: var(--text-xs)}.contact-details__text {font-size: var(--text-xs); color: var(--text-dark-muted); align-self: center}.fr-footer-alpha__nav-column {row-gap: var(--fr-content-gap)}.fr-footer-alpha__nav-column > span { font-size: var(--text-m); color: var(--accent); font-weight: 600;;}.fr-footer-alpha__nav-ul {padding-left: 0; row-gap: 0.5em}.fr-footer-alpha__nav-ul {list-style: none;}.fr-footer-alpha__link {font-size: var(--text-xs); line-height: 0}.fr-footer-alpha__link { color: var(--text-dark-muted);}.floating-cta-item {display: flex; align-items: center; background-color: var(--primary); color: var(--white); column-gap: var(--space-xs); padding-top: 0.3em; padding-right: var(--space-xs); padding-bottom: 0.3em; padding-left: 0.3em}.floating-cta-item { --side-panel-size: var(--text-s);}.floating-cta__icon-wrapper {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0.3em; padding-right: 0.3em; padding-bottom: 0.3em; padding-left: 0.3em; aspect-ratio: 1/1; width: auto}.floating-cta__icon {font-size: calc(var(--side-panel-size) * 1.8)}.floating-cta__text {font-size: var(--side-panel-size); color: var(--white)}.floating-cta__text { &:hover { color: white; }}
/*# sourceURL=bricks-frontend-inline-inline-css */
/* bricks-global-classes-inline-inline-css */
/* BREAKPOINT: Desktop (BASE) */
.marquee-logo {z-index: -1; padding-top: var(--space-m); padding-bottom: var(--space-m)}
.marquee-logo { --logo-height: 50px;} .marquee-logo :where(.splide__list, .splide__slide){ transition-timing-function: linear !important; }
/* BREAKPOINT: Desktop (BASE) */
.marquee-img:not(.tag), .marquee-img img {object-fit: contain}
.marquee-img {height: var(--logo-height)}
/* BREAKPOINT: Desktop (BASE) */
.marquee-section {background-color: #151515; background-image: url(/my/wp-content/uploads/Layer_1.png); background-size: cover; background-position: 30% 90px; background-repeat: no-repeat; row-gap: var(--space-xs); padding-bottom: var(--overlap-spacing)}
/* BREAKPOINT: Desktop (BASE) */
.section-header__accent-container {align-items: flex-start; row-gap: var(--content-gap)}
/* BREAKPOINT: Desktop (BASE) */
.section-header__accent {color: var(--accent); font-weight: 600; font-size: var(--h3); margin-bottom: var(--space-xs)}
/* BREAKPOINT: Desktop (BASE) */
.marquee-ticker-container {row-gap: var(--content-gap); position: relative}
/* BREAKPOINT: Desktop (BASE) */
.marquee-container {overflow: hidden}
/* BREAKPOINT: Desktop (BASE) */
.marquee-sroller {flex-direction: row; overflow: hidden; align-self: flex-start !important; color: var(--white)}
/* BREAKPOINT: Mobile landscape */
@media (max-width: 767px) {
.marquee-sroller {flex-wrap: nowrap}
/* CUSTOM CSS */
.marquee-sroller {
& > :last-child {
@media only screen and (max-width: 767px) {
display: none;
}
}
}
}
/* BREAKPOINT: Desktop (BASE) */
.marquee-group {display: flex}
/* BREAKPOINT: Desktop (BASE) */
.marquee-item__text-wrapper {display: flex; flex-direction: column; justify-content: center; align-items: center}
/* BREAKPOINT: Desktop (BASE) */
.marquee-item__text {padding-right: var(--space-m); padding-left: var(--space-m); font-weight: 600}
/* BREAKPOINT: Desktop (BASE) */
.case-study-card {display: flex; position: relative; overflow: hidden; align-items: center; height: 100%; width: 100%; justify-content: center}
.case-study-card { position: relative; &:before { content: ''; position: absolute; inline-size: 100%; block-size: 100%; inset: 0; background-color: var(--neutral-trans-70); opacity: 0; z-index: 1; transition: opacity 0.3s ease-in-out; } .case-study__cta-wrapper { opacity: 0; transition: opacity 0.3s ease-in-out; } &:hover { .case-study__cta-wrapper, &:before { opacity: 1; } }}
/* BREAKPOINT: Desktop (BASE) */
.case-study__body {row-gap: calc(var(--space-xs) * 0.5); color: var(--text-light)}
.case-study__body { position: absolute; inline-size: 90%; inset-block-end: var(--space-s);}
/* BREAKPOINT: Desktop (BASE) */
.case-study__client-name {font-size: var(--h3)}
/* BREAKPOINT: Desktop (BASE) */
.case-study__taxonomy-wrapper {display: flex; justify-content: space-between; width: 100%}
/* BREAKPOINT: Desktop (BASE) */
.case-study__feature-img {order: -1; width: 100%; height: 100%}
/* BREAKPOINT: Desktop (BASE) */
.case-study__media-wrapper {display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 380px}
.case-study__media-wrapper { position: relative; &:after { content: ''; position: absolute; inline-size: 100%; block-size: 100%; inset: 0; background-color: var(--neutral-trans-40); }}
/* BREAKPOINT: Mobile landscape */
@media (max-width: 767px) {
.case-study__media-wrapper {min-height: unset}
}
/* BREAKPOINT: Desktop (BASE) */
.case-study__media {width: 100%; height: 100%}
.case-study__media:not(.tag), .case-study__media img {object-fit: cover}
/* BREAKPOINT: Desktop (BASE) */
.case-study__logo-wrapper {padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; border-radius: var(--fr-card-radius); background-color: var(--secondary-trans-70); max-width: 150px; max-height: 150px}
.case-study__logo-wrapper { position: absolute; align-self: center;}
/* BREAKPOINT: Desktop (BASE) */
.case-study__logo:not(.tag), .case-study__logo img {object-fit: contain}
/* BREAKPOINT: Desktop (BASE) */
.case-study__cta-wrapper {display: flex; justify-content: center; align-items: center; column-gap: var(--space-xs)}
.case-study__cta-wrapper { --font-size: var(--text-l); --color: var(--text-light); inset: 0; position: absolute; z-index: 2;}
/* BREAKPOINT: Desktop (BASE) */
.case-study-card-container {display: grid; align-items: initial; grid-template-columns: var(--grid-2); grid-gap: var(--grid-gap); z-index: 9}
/* BREAKPOINT: Mobile landscape */
@media (max-width: 767px) {
.case-study-card-container {grid-template-columns: var(--grid-1)}
}
/* BREAKPOINT: Desktop (BASE) */
.popup-announcement-wrapper {display: flex; flex-direction: column; align-items: center}
.popup-announcement-wrapper { position: relative;}
/* BREAKPOINT: Desktop (BASE) */
.popup-announcement__media:not(.tag), .popup-announcement__media img {object-fit: contain}
.popup-announcement__media {max-width: 900px}
/* BREAKPOINT: Desktop (BASE) */
.popup-announcement__close {font-size: var(--text-l)}
.popup-announcement__close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; cursor: pointer; z-index: 999999999;}
/*# sourceURL=bricks-global-classes-inline-inline-css */
/* unnamed */
:root {
--bg: #ffffff;
--bg-soft: #f6f8fb;
--bg-card: #ffffff;
--ink: #0e1220;
--ink-2: #2a3042;
--ink-3: #5b6479;
--ink-4: #8a93a6;
--line: #e6ebf2;
--line-2: #eef1f6;
--accent-ink: #ffffff;
--accent-soft: #e7faf1;
--accent-2: #0e1220;
--radius: 20px;
--radius-sm: 12px;
}
body.accent-orange { --accent: #ff6a3d; --accent-soft: #fff0ea; }
body.accent-blue { --accent: #2f6bff; --accent-soft: #e9f0ff; }
body.accent-purple { --accent: #6d48ff; --accent-soft: #eee8ff; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; letter-spacing: -0.02em; }
/* ---- Header block ---- */
.head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 64px;
inline-size: 100%;
}
@media (max-width: 900px) {
.head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
margin-bottom: 24px;
}
.eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.head h2 {
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.05;
font-weight: 700;
margin: 0;
color: var(--ink);
}
.head h2 .mark { color: var(--accent); }
.head .lede {
font-size: 17px;
line-height: 1.6;
color: var(--ink-3);
max-width: 46ch;
margin: 0;
}
.head .lede strong { color: var(--ink); font-weight: 600; }
/* ---- Grid of 4 stat cards ---- */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
.card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px;
position: relative;
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -24px rgba(14, 18, 32, 0.18);
border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.card .idx {
position: absolute;
top: 24px; right: 28px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--ink-4);
letter-spacing: 0.08em;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--bg-soft);
color: var(--ink-2);
font-size: 12px;
font-weight: 500;
border: 1px solid var(--line);
margin-bottom: 28px;
inline-size: fit-content;
}
.pill .ic {
width: 14px; height: 14px; display: inline-block; color: var(--accent);
}
.stat-num {
font-family: 'Poppins', sans-serif;
font-size: clamp(56px, 7vw, 96px);
line-height: 0.95;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 2px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.stat-num .suffix {
color: var(--accent);
font-size: 0.5em;
font-weight: 700;
margin-left: 4px;
}
.unit {
font-size: var(--text-l);
color: var(--ink-3);
font-weight: 500;
align-self: center;
letter-spacing: -1px;
margin-block-end: var(--space-m);
inline-size: 100%;
}
.stat-title {
font-family: 'Poppins', sans-serif;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
color: var(--ink);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.stat-body {
font-size: 15px;
line-height: 1.55;
color: var(--ink-3);
margin: 0 0 22px;
max-width: 42ch;
}
.stat-body strong { color: var(--ink); font-weight: 600; }
.source {
padding-top: 20px;
margin-top: auto;
border-top: 1px dashed var(--line);
font-size: 12px;
color: var(--ink-4);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
/* ---- Card 2: bar race viz ---- */
.race {
display: flex; flex-direction: column; gap: 12px;
margin: 6px 0 22px;
}
.race-row {
display: grid;
grid-template-columns: 82px 1fr 64px;
align-items: center;
gap: 12px;
font-size: 13px;
}
.race-row .name {
font-weight: 600;
color: var(--ink-2);
display: flex; align-items: center; gap: 8px;
}
.race-row .logo {
width: 22px; height: 22px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff;
font-family: 'Poppins', sans-serif;
aspect-ratio: 1/1;
}
.race-row.chat .logo { background: var(--accent); }
.race-row.goog .logo { background: var(--ink); }
.race-row .bar {
height: 10px;
background: var(--bg-soft);
border-radius: 999px;
position: relative;
overflow: hidden;
}
.race-row .bar .fill {
position: absolute; inset: 0;
background: var(--accent);
border-radius: 999px;
transform-origin: left;
transform: scaleX(0);
transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.race-row.goog .bar .fill { background: var(--ink-2); }
.card.in-view .race-row .bar .fill { transform: scaleX(var(--pct)); }
.race-row .time {
font-weight: 700;
color: var(--ink);
text-align: right;
font-family: 'Poppins', sans-serif;
}
.badge-fast {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--accent);
background: var(--accent-soft);
padding: 5px 10px;
border-radius: 999px;
font-size: 13px;
}
/* ---- Card 3: arc ---- */
.arc-wrap {
width: 120px; height: 120px;
position: relative;
margin-bottom: 20px;
}
.arc-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.arc-wrap .track { fill: none; stroke: var(--line); stroke-width: 10; }
.arc-wrap .prog {
fill: none; stroke: var(--accent); stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 327;
stroke-dashoffset: 327;
transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
}
.card.in-view .arc-wrap .prog {
stroke-dashoffset: calc(327 - (327 * var(--pct, 0.47)));
}
.arc-wrap .label {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: 'Poppins', sans-serif;
}
.arc-wrap .label .n {
font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
color: var(--ink);
}
.arc-wrap .label .n .pc { color: var(--accent); font-size: 0.7em; }
.arc-wrap .label .sub {
font-size: 10px; color: var(--ink-4); font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px;
}
/* ---- Card 4: zero-click dots ---- */
.dots {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
margin: 6px 0 20px;
}
.dots .d {
aspect-ratio: 1;
border-radius: 50%;
background: var(--line);
opacity: 0;
transform: scale(0.3);
transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), background-color .3s ease;
}
.dots .d.on { background: var(--accent); }
.dots.played .d { opacity: 1; transform: scale(1); }
.legend {
display: flex; gap: 20px;
font-size: 12px; color: var(--ink-3);
}
.legend .k { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 10px; height: 10px; border-radius: 50%; }
.legend .sw.a { background: var(--accent); }
.legend .sw.b { background: var(--line); }
.legend .k strong { color: var(--ink); font-weight: 600; }
/* ---- CTA footer ---- */
.cta-strip {
margin-top: 36px;
background: var(--ink);
color: #fff;
border-radius: var(--radius);
padding: 32px 40px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
inline-size: 100%;
}
@media (max-width: 760px) {
.cta-strip { grid-template-columns: 1fr; padding: 28px; }
}
.cta-strip h3 {
margin: 0 0 6px;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
}
.cta-strip p {
margin: 0;
color: #b8bccb;
font-size: 15px;
line-height: 1.5;
max-width: 56ch;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent);
color: var(--accent-ink);
padding: 14px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
border: none;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cta-btn svg { width: 16px; height: 16px; }
[data-countup] { font-variant-numeric: tabular-nums; }