/* Geist self-hosted via /assets/css/fonts.css */
:root {
--color-primary: #4F46E5;
--color-vivid-indigo: #6366F1;
--text-color-primary: #334155;
--text-color-light: #6b7280;
--text-color-white: #ffffff;
--text-color-dark: #1f2937;
--text-color-navy: #0F172A;
--text-color-black: #000;
--color-slate-light: #CBD5E1;
--color-soft-gray: #E9EAEB;
--color-primary-light: #C7D2FE;
--color-surface: #F8F7F6;
--color-light-indigo: #EEF2FF;
--color-muted: #F1F5F9;
--color-off-white: #FAFAFA;
--color-soft-indigo: #E0E7FF;
--color-gray-blue: #94A3B8;
--color-steel-gray: #64748B;
--color-cloud-white: #F8FAFC;
--color-moon-gray: #E2E8F0;
--color-silver-ash: #9CA3AF;
--color-charcoal-blue: #535862;
--color-twilight: #475569;
--color-blue-haze: #E5EBF2;
--shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 25px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--border-1: #e5e7eb;
--max-width: 90rem;
--font-primary: "Geist", sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.75rem;
--radius-0: 0;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
}
/* ==============================
Base Styles
============================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-primary);
background: var(--color-surface);
color: var(--text-color-primary);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
letter-spacing: 0;
}
h1,
.text-h1 {
font-size: 4.5rem;
font-style: normal;
font-weight: 400;
line-height: 4.75rem;
letter-spacing: -0.225rem;
color: var(--text-color-navy)
}
h2,
.text-h2 {
font-size: 3.5rem;
font-style: normal;
font-weight: 400;
line-height: 3.75rem;
letter-spacing: -0.175rem;
color: var(--text-color-navy)
}
h3,
.text-h3 {
font-size: 2.75rem;
font-style: normal;
font-weight: 400;
line-height: 1.136;
letter-spacing: -0.125rem;
color: var(--text-color-navy);
}
h4,
.text-h4 {
font-size: 2.5rem;
font-style: normal;
font-weight: 400;
line-height: 1.2;
}
h5,
.text-h5 {
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.01em;
}
h6,
.text-h6 {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.28;
letter-spacing: -0.0375rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.5714;
}
.text-xs {
font-size: 0.75rem;
font-style: normal;
line-height: 1.33;
letter-spacing: 0.075em;
}
.text-base {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.7;
}
.text-md {
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: 1.7;
}
.text-lg {
font-size: 1.25rem;
font-style: normal;
line-height: 1.4;
letter-spacing: 0;
}
.text-2xl {
font-size: 1.75rem;
font-style: normal;
letter-spacing: -0.0214em;
line-height: 1.2857;
}
.gap-xxl {
display: flex;
flex-direction: column;
gap: 4rem;
}
.gap-xl {
display: flex;
flex-direction: column;
gap: 2rem;
}
.subtitle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
background: var(--color-muted);
max-width: max-content;
margin-bottom: 0.5rem;
}
.d-none {
display: none;
}
.spacing-xxl {
padding-top: 4.25rem;
margin-top: 1.25rem;
}
.spacing-xxxl {
padding-top: 5.5rem;
padding-bottom: 5rem;
}
.bg-cloud-white {
background: var(--color-cloud-white) !important;
}
.header-area {
display: flex;
flex-direction: column;
gap: 1rem;
}
.header-area-center {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
text-align: center;
margin: 0 auto;
}
.header-area-center .hero__badge-group {
justify-content: center;
}
/* ==============================
CONTAINER
============================== */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 5rem 2.5rem;
}
/* ==============================
Swiper Css
============================== */
.swiper-slide {
justify-content: center;
align-items: center;
}
.swiper {
width: 100%;
min-height: fit-content;
/* overflow-y: hidden; */
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==============================
Header Area
============================== */
.header {
width: 100%;
position: fixed;
top: 1.25rem;
left: 50%;
transform: translate(-50%, -1.25rem);
z-index: 999;
}
.navbar {
position: relative;
z-index: 100;
padding: 1.25rem 0;
max-width: 87.5rem;
margin: 0 auto;
}
.header__container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.navbar__inner {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(1.25rem);
-webkit-backdrop-filter: blur(1.25rem);
border-radius: 1rem;
box-shadow: var(--shadow-md);
padding: 0.8rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 4.5rem;
position: relative;
transition: var(--transition);
border-radius: 0.75rem;
max-width: var(--max-width);
}
.navbar__inner--scrolled {
box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -0.3125rem rgba(0, 0, 0, 0.04);
}
/* ===== LOGO ===== */
.logo__link {
max-width: 8.125rem;
}
.logo__img {
width: 100%;
height: auto;
display: block;
}
/* ===== NAV MENU (Desktop) ===== */
.nav-menu {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
}
.nav-menu__link {
position: relative;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 1rem;
color: var(--text-color-primary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
transition: var(--transition);
cursor: pointer;
background: none;
border: none;
font-family: inherit;
}
.nav-menu__link:hover {
background: rgba(79, 70, 229, 0.08);
color: var(--color-primary);
}
.nav-menu__chevron {
width: 1rem;
height: 1rem;
transition: transform 0.3s ease;
}
/* ===== DROPDOWN (Desktop) ===== */
.dropdown {
display: flex;
gap: 1rem;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background: var(--text-color-white);
border-radius: var(--radius-lg);
box-shadow:
0 12px 16px -4px rgba(10, 13, 18, 0.08),
0 4px 6px -2px rgba(10, 13, 18, 0.03),
0 2px 2px -1px rgba(10, 13, 18, 0.04);
padding: 0.5rem;
min-width: 20rem;
width: fit-content;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease 0.3s,
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
visibility 0s linear 0.3s;
}
.nav-menu__item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(5px);
pointer-events: auto;
transition-delay: 0s;
z-index: 200;
}
.nav-menu__link::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: -15px;
height: 20px;
z-index: 199;
}
.dropdown__inner {
min-width: 20rem;
}
.dropdown::before {
content: '';
position: absolute;
top: -0.75rem;
left: 0;
right: 0;
height: 0.75rem;
}
.nav-menu__item:hover .nav-menu__chevron {
transform: rotate(180deg);
}
.dropdown__title {
display: block;
font-size: 11px;
text-transform: uppercase;
padding: 0.625rem 1.25rem;
}
.dropdown__item {
display: flex;
gap: 0.75rem;
padding: 0.625rem 1.25rem;
text-decoration: none;
color: var(--text-color-primary);
transition: var(--transition);
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
}
.dropdown__item-icon {
padding-top: 5px;
color: var(--color-primary);
}
.dropdown__item-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dropdown__item-title {
font-size: 1rem;
font-weight: 500;
color: var(--text-color-navy);
white-space: pre-wrap;
}
.dropdown__item-desc {
font-size: 0.875rem;
white-space: pre-wrap;
white-space-collapse: collapse;
}
.dropdown__item:hover {
background: var(--color-off-white);
border-radius: var(--radius-sm);
}
/* ===== NESTED DROPDOWN ===== */
.dropdown__item--nested {
position: relative;
}
.dropdown__nested {
position: absolute;
left: 100%;
top: 0;
margin-left: 0.5rem;
background: var(--text-color-white);
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
min-width: 11.25rem;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
border: 0.0625rem solid var(--border-1);
transform: translateX(-0.3125rem);
z-index: 201;
}
.dropdown__item--nested:hover .dropdown__nested {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.dropdown__nested-arrow {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 0.75rem;
}
/* ===== NAV ACTIONS ===== */
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.btn {
display: inline-block;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4286;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
font-family: inherit;
border: none;
text-align: center;
}
.btn--secondary {
background: var(--text-color-white);
color: var(--text-color-primary);
border: 1px solid var(--color-soft-indigo);
}
.btn--secondary:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--text-color-white);
}
.btn--primary {
background: var(--color-primary);
color: var(--text-color-white);
box-shadow: 0 0.25rem 0.875rem rgba(79, 70, 229, 0.3);
}
.btn--primary:hover {
transform: translateY(-0.125rem);
box-shadow: 0 0.375rem 1.25rem rgba(79, 70, 229, 0.4);
}
/* ===== MOBILE TOGGLE ===== */
.mobile-toggle {
display: none;
flex-direction: column;
gap: 0.3125rem;
padding: 0.5rem;
background: none;
border: none;
cursor: pointer;
z-index: 1002;
}
.mobile-toggle__bar {
display: block;
width: 1.5rem;
height: 0.125rem;
background: var(--text-color-primary);
border-radius: 0.125rem;
transition: var(--transition);
transform-origin: center;
}
.mobile-toggle--active .mobile-toggle__bar:nth-child(1) {
transform: translateY(0.4375rem) rotate(45deg);
}
.mobile-toggle--active .mobile-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-toggle--active .mobile-toggle__bar:nth-child(3) {
transform: translateY(-0.4375rem) rotate(-45deg);
}
/* ===== MOBILE OVERLAY ===== */
.mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(0.25rem);
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 500;
}
.mobile-overlay--active {
opacity: 1;
visibility: visible;
}
/* ===== MOBILE MENU ===== */
.mobile-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 23.75rem;
height: 100vh;
height: 100dvh;
background: var(--text-color-white);
z-index: 1000;
transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.mobile-menu--active {
left: 0;
}
.mobile-menu__header {
flex-shrink: 0;
padding: 1.25rem 1.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu__close {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.625rem;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.mobile-menu__close:hover {
background: rgba(79, 70, 229, 0.08);
}
.mobile-menu__close svg {
width: 1.5rem;
height: 1.5rem;
color: var(--text-color-primary);
}
.mobile-menu__scroll {
flex: 1;
overflow-y: auto;
padding: 0 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.mobile-menu__scroll::-webkit-scrollbar {
width: 0.25rem;
}
.mobile-menu__scroll::-webkit-scrollbar-track {
background: transparent;
}
.mobile-menu__scroll::-webkit-scrollbar-thumb {
background: #ddd6fe;
border-radius: 0.25rem;
}
.mobile-menu__item {
border-radius: 0.625rem;
overflow: hidden;
flex-shrink: 0;
}
.mobile-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
color: var(--text-color-primary);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: var(--transition);
border-radius: 0.625rem;
}
.mobile-menu__link:hover {
background: rgba(79, 70, 229, 0.05);
}
.mobile-menu__submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
background: rgba(245, 243, 255, 0.5);
border-radius: 0 0 0.625rem 0.625rem;
}
.mobile-menu__item--active>.mobile-menu__submenu {
max-height: 31.25rem;
overflow-y: scroll;
}
.mobile-menu__item--active>.mobile-menu__link .mobile-menu__chevron {
transform: rotate(180deg);
}
.mobile-menu__dropdown-item {
display: block;
padding: 0.75rem 1rem 0.75rem 2rem;
text-decoration: none;
color: var(--text-color-primary);
transition: var(--transition);
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
margin: 0.125rem 0.5rem;
}
.mobile-menu__dropdown-item:hover {
color: var(--color-primary);
background: rgba(79, 70, 229, 0.04);
}
.mobile-menu__actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1rem;
border-top: 0.0625rem solid var(--border-1);
background: var(--text-color-white);
}
.mobile-menu__actions .btn {
width: 100%;
text-align: center;
padding: 0.875rem;
font-size: 0.9375rem;
}
/* =============================
Hero Area
============================= */
.hero--home {
position: relative;
background-color: var(--color-surface);
}
.hero__container {
position: relative;
z-index: 2;
}
.hero--home .hero__header-area {
max-width: 48rem;
}
.hero--home .hero__desc {
margin-top: 0.5rem;
max-width: 27.75rem;
}
.hero--home .hero__cta-wrap {
margin-top: 1rem;
}
.hero__content {
position: relative;
}
.hero__video-wrap {
width: 100%;
max-width: 68rem;
height: 100%;
max-height: 68rem;
margin: 0 auto;
position: relative;
}
.hero__video {
border-radius: var(--radius-xl);
overflow: hidden;
}
.hero__video-wrap video,
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__image--small {
position: absolute;
right: -3vw;
bottom: 3rem;
max-width: 19rem;
width: 100%;
height: 100%;
object-fit: contain;
}
.hero__play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* =============================
Brands Area
============================= */
.brands {
background: var(--color-surface);
}
.brands__container {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-top: 0 !important;
padding-bottom: 4rem;
}
.brands__header {
align-items: center;
}
.brands__logos {
display: flex;
justify-content: center;
flex-wrap: nowrap;
overflow: hidden;
overflow: hidden;
position: relative;
}
.brand__logos-inner {
display: flex;
align-items: center;
animation: brand-scroll 20s linear infinite;
flex-shrink: 0;
}
.brands__logo-wrap {
max-width: 9rem;
padding: 0.5rem 1rem;
display: grid;
place-items: center;
flex-shrink: 0;
}
.brands__logo-wrap img {
object-fit: cover;
width: 100%;
}
.brands__logos::before,
.brands__logos::after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.brands__logos::before {
left: -1rem;
background: linear-gradient(to right, var(--color-surface), transparent);
}
.brands__logos::after {
right: -1rem;
background: linear-gradient(to left, var(--color-surface), transparent);
}
@keyframes brand-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 20px));
}
}
/* =============================
How It Works Area
============================= */
.how-it-works {
position: relative;
overflow: hidden;
}
.how-it-works--one::after {
content: "";
position: absolute;
left: 50%;
bottom: 4rem;
transform: translate(-50%, 0);
width: 26.25rem;
height: 26.25rem;
border-radius: 26.25rem;
background: radial-gradient(50% 50% at 50% 50%, rgba(79, 70, 229, 0.18) 0%, rgba(79, 70, 229, 0.00) 100%);
z-index: 1;
}
.header__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: end;
justify-content: space-between;
column-gap: 2rem;
row-gap: 1rem;
}
.align-right {
display: flex;
justify-content: end;
}
.how-it-works--one .how-it-works__header-right,
.trust-metrics__header-right {
display: flex;
justify-content: end;
}
.how-it-works__title {
max-width: 30rem;
}
.how-it-works--one .how-it-works__desc {
max-width: 23rem;
}
.how-it-works--one .how-it-works__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.how-it-works--one .how-it-works__item {
min-height: 27rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--text-color-white);
border-radius: var(--radius-xl);
border: 5px solid var(--text-color-white);
overflow: hidden;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 102px 29px 0 rgba(26, 60, 231, 0.00), 0 65px 26px 0 rgba(26, 60, 231, 0.01), 0 37px 22px 0 rgba(26, 60, 231, 0.05), 0 16px 16px 0 rgba(26, 60, 231, 0.09), 0 4px 9px 0 rgba(26, 60, 231, 0.10);
}
.how-it-works__item-bg {
border-radius: var(--radius-xl);
}
.how-it-works__item:nth-child(even) {
flex-direction: column-reverse;
}
.how-it-works__item:nth-child(3) .how-it-works__item-content {
max-width: 18rem;
margin: 0 auto;
align-items: center;
text-align: center;
}
.how-it-works__item-img-wrap {
overflow: hidden;
border-radius: var(--radius-xl);
max-height: 300px;
height: 100%;
position: relative;
}
.how-it-works__item-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.how-it-works__item-img--large {
max-width: 15rem;
height: auto !important;
position: absolute;
bottom: 0;
left: 2rem;
}
.how-it-works__item-img--small {
position: absolute;
height: auto !important;
max-width: 11rem;
bottom: 0;
right: 2rem;
}
.how-it-works__item-content {
padding: 1rem 1.25rem;
}
.how-it-works__item-title {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.how-it-works__item-text {
margin-top: 0.67rem;
color: var(--text-color-primary);
font-weight: 400;
}
.how-it-works__features-list {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 0.5rem;
margin-top: 3rem;
position: relative;
z-index: 10;
}
.how-it-works__features-item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.how-it-works__features-item-icon {
width: 1rem;
height: 1rem;
display: grid;
place-items: center;
}
.how-it-works__features-item-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.how-it-works__features-item-text {
font-weight: 500;
color: var(--color-blacks);
}
/* =============================
Stats Area
============================= */
.stats {
background: var(--color-surface);
overflow: hidden;
}
.stats__header-area {
align-items: center;
text-align: center;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.stats__card {
display: flex;
flex-direction: column;
gap: 1rem;
background: var(--text-color-white);
padding: 1.8rem 1.25rem;
}
.stats__icon-wrapper {
width: 3rem;
height: 3rem;
background: var(--color-light-indigo);
border-radius: var(--radius-md);
display: grid;
place-items: center;
flex-grow: 0;
}
.stats__label {
font-weight: 500;
color: var(--text-color-primary);
margin-top: 0.375rem;
}
.stats__number {
color: var(--color-primary);
}
.stats--one .stats__card {
background: transparent;
text-align: center;
border-radius: var(--radius-sm);
border: 1px solid var(--color-gray-blue);
}
.stats--one .stats__number {
color: var(--text-color-navy);
}
.stats--two .stats__container {
padding-top: 0;
}
.stats--two .stats__grid {
background: var(--text-color-white);
}
.stats--two .stats__label {
color: var(--color-steel-gray);
}
.stats--two .stats__card {
padding: 2.5rem;
}
.stats--two .stats__card:not(:last-child) {
border-right: 1px solid var(--border-1);
}
/* =============================
Problems Area
============================= */
.problems {
position: relative;
}
.problems__container {
max-width: 80rem;
}
.problems__left-column h2 {
max-width: 28rem;
}
.problems__info-list {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.problems__info-item-text {
font-weight: 500;
}
.problems__info-item-icon {
max-width: 1.5rem;
max-height: 1.5rem;
background: var(--text-color-white);
overflow: hidden;
border-radius: var(--radius-sm);
padding: 5px;
display: grid;
place-items: center;
}
.problems__info-item {
display: flex;
align-items: start;
gap: 0.5rem;
}
.problems__info-item-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.problems__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 3rem;
}
.problems__items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.problems__item {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
max-width: 24rem;
background: var(--text-color-white);
border-radius: var(--radius-2xl);
border: 1px solid rgba(255, 255, 255, 0.60);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.60) inset, 0 8px 24px 0 rgba(16, 24, 40, 0.06);
backdrop-filter: blur(12px);
overflow: hidden;
user-select: none;
}
.problems .problems__items {
min-height: 40rem;
width: 100%;
position: relative;
}
.problems .problems__item:not(:first-child) {
margin-top: -0.5rem;
}
.problems .problems__item:nth-child(1) {
transform: rotate(2deg);
position: relative;
z-index: 10;
}
.problems .problems__item:nth-child(2) {
transform: rotate(-4.34deg);
position: relative;
margin-left: 15%;
z-index: 5;
}
.problems .problems__item:nth-child(3) {
transform: rotate(-2.74deg);
position: relative;
margin-left: 30%;
z-index: 10;
}
.problems .problems__item:nth-child(4) {
transform: rotate(-2.74deg);
position: relative;
margin-left: 15%;
z-index: 5;
}
.problems .problems__item:nth-child(5) {
transform: rotate(-2.74deg);
position: relative;
margin-left: -15%;
z-index: 10;
}
.problems__item-left {
display: flex;
gap: 0.4rem;
}
.problems__item-avatar-wrap {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
overflow: hidden;
flex-shrink: 0;
}
.problems__item-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.problems__item-name {
color: var(--text-color-navy);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.42;
letter-spacing: 0;
}
.problems__item-role {
color: var(--color-gray-blue);
font-size: 0.75rem;
line-height: 1.33;
letter-spacing: 0.075rem;
}
.problems__item-actions {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.problems__item-btn {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-light-indigo);
background: var(--text-color-white);
color: var(--color-text-muted, var(--color-steel-gray));
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.075rem;
text-decoration: none;
}
.problems__item-btn:hover {
background-color: var(--color-primary);
color: var(--text-color-white);
transition: all 0.6ms;
}
.problems__item-btn:hover svg path {
stroke: var(--text-color-white);
}
.problems__list {
position: relative;
}
.problems__list::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 26.25rem;
height: 26.25rem;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: radial-gradient(50% 50% at 50% 50%, rgba(79, 70, 229, 0.18) 0%, rgba(79, 70, 229, 0.00) 100%);
}
/* How work */
.problems__item--how-it-work {
height: 100%;
}
.problems__item--how-it-work .problems__item {
padding: 0.5rem;
max-width: 20rem;
gap: 3px;
border-radius: var(--radius-md);
position: relative;
z-index: 100 !important;
}
.problems__item--how-it-work .problems__item-name {
font-size: 0.67556rem;
}
.problems__item--how-it-work .problems__item-role,
.problems__item--how-it-work .problems__item-btn,
.problems__item--how-it-work .problems__item-location {
font-size: 0.57906rem;
}
.problems__item--how-it-work .problems__item-btn {
gap: 0.3rem;
padding: 0.35rem;
}
.problems__item--how-it-work .problems__item-avatar-wrap {
max-width: 2.48rem;
max-height: 2.48rem;
}
.problems__item--how-it-work {
position: relative;
}
.problems__item--how-it-work .problems__item {
position: absolute;
transform: scale(0.8);
}
.problems__item--how-it-work .problems__item:nth-child(1) {
left: 0rem;
top: 0;
}
.problems__item--how-it-work .problems__item:nth-child(2) {
left: 1rem;
top: 4rem;
}
.problems__item--how-it-work .problems__item:nth-child(3) {
left: 2rem;
top: 8rem;
}
.problems__item--how-it-work .problems__item:nth-child(4) {
left: 3rem;
top: 12rem;
}
.problems__item--how-it-work .problems__item-workplace {
color: var(--color-primary);
font-size: 0.57906rem;
line-height: 1.33;
letter-spacing: 0.05788rem;
}
.problems__item-location {
display: flex;
align-items: center;
gap: 3px;
color: var(--color-steel-gray);
font-size: 0.57906rem;
letter-spacing: 0.05788rem;
}
/* =============================
Use Cases Area
============================= */
.features {
background: var(--color-surface);
}
.features__header {
align-items: center;
max-width: 38rem;
text-align: center;
margin: 0 auto;
}
.features__description {
max-width: 23rem;
margin: 0 auto;
}
.features__list {
display: flex;
flex-direction: column;
}
.features__list,
.features__list-inner {
gap: 1.25rem;
}
.features__list-inner.col-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.features__list-inner.col-2 {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
}
.features__item {
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: space-between;
background: var(--text-color-white);
border-radius: var(--radius-xl);
border: 1px solid var(--color-soft-indigo);
box-shadow: 0 4.894px 24px 0 rgba(147, 181, 213, 0.16);
}
.features__item-img-wrap {
background: #E8E8E8;
padding: 0.5rem;
max-width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
}
.features__item-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.features__item-content {
padding: 1.25rem;
padding-top: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* =============================
Use Cases Area
============================= */
.reach {
background: var(--text-color-white);
overflow: hidden;
}
.reach__header-area {
display: flex;
align-items: center;
max-width: 28rem;
margin: 0 auto;
}
.reach__map-wrap {
position: relative;
min-height: 37.5rem;
}
.reach__map-bg {
z-index: 1 !important;
}
.reach__map-bg img {
object-fit: contain;
}
.reach-card {
width: 100%;
position: absolute !important;
background: var(--text-color-white);
padding: 0.75rem;
border-radius: 0.57906rem;
border: 2px solid var(--text-color-white);
display: flex;
justify-content: space-between;
gap: 0.4rem;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 102px 29px 0 rgba(26, 60, 231, 0.00), 0 65px 26px 0 rgba(26, 60, 231, 0.01), 0 37px 22px 0 rgba(26, 60, 231, 0.05), 0 16px 16px 0 rgba(26, 60, 231, 0.09), 0 4px 9px 0 rgba(26, 60, 231, 0.10);
max-width: 13.7rem;
position: relative;
z-index: 20;
transition: all 0.7ms;
}
.reach-card__left-column {
display: flex;
gap: 0.4rem;
}
.reach-card__avatar-wrap {
max-width: 2.48rem;
max-height: 2.48rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.reach-card__avatar-wrap img {
object-fit: cover;
width: 100%;
height: 100%;
position: relative;
z-index: 10;
}
.reach-card__author-name {
color: var(--text-color-navy);
font-size: 0.67556rem;
font-style: normal;
font-weight: 600;
line-height: 1.4285;
letter-spacing: 0;
}
.reach-card__author-role {
color: var(--color-gray-blue);
font-size: 0.57906rem;
line-height: 1.3333;
letter-spacing: 0.05788rem;
}
.reach-card__author-workplace {
color: var(--color-primary);
font-size: 0.57906rem;
line-height: 1.33;
letter-spacing: 0.05788rem;
}
.reach-card__location-wrap {
display: flex;
align-items: center;
gap: 0.12rem;
color: var(--color-steel-gray);
margin-top: 0.19rem;
line-height: 0;
}
.location__name {
color: var(--color-steel-gray);
font-size: 0.57906rem;
line-height: 1.33;
letter-spacing: 0.05788rem;
text-decoration: none;
}
.reach-card__contact-wrap {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.reach-card__contact-link a {
border-radius: 0.193rem;
border: 0.772px solid var(--color-light-indigo);
background: var(--text-color-white);
width: 0.77rem;
height: 0.77rem;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
}
.reach-card__1 {
top: 31%;
left: 8%;
}
.reach-card__2 {
top: 2px;
left: 22%;
}
.reach-card__4 {
top: 35%;
left: 63%;
}
.reach-card__3 {
top: 54px;
left: 47%;
}
.reach-card__5 {
top: 45%;
left: 37%;
}
.reach-card__6 {
left: 13%;
bottom: 14%;
}
.reach-card__7 {
bottom: 14%;
right: 7%;
}
/* =============================
Use Cases Area
============================= */
.use-cases {
position: relative;
}
.bg-wrap--wide {
border-radius: 1.875rem;
max-width: calc(100% - 2rem);
height: 100%;
margin-left: auto;
margin-right: auto;
}
.use-cases__header-area {
max-width: 32.6rem;
align-items: center;
text-align: center;
margin: 0 auto;
}
.use-cases__desc {
max-width: 23rem;
}
.use-cases__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
}
.use-cases__item {
background: var(--text-color-white);
position: relative;
/* overflow: hidden; */
z-index: 10;
}
.use-cases__item-inner {
padding: 0.6rem;
position: relative;
display: flex;
flex-direction: column;
gap: 5rem;
justify-content: space-between;
height: 100%;
}
.use-cases__item-icon {
max-width: 2.5rem;
max-height: 2.5rem;
height: 100%;
width: 100%;
}
.use-cases__item-icon img {
object-fit: cover;
height: 100%;
width: 100%;
}
.use-cases__item-text {
color: var(--text-color-primary);
margin-top: 0.5rem;
margin-bottom: 0.75rem;
}
.use-cases__item-link {
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: 0.6ms;
}
.use-cases__item-link:hover {
text-decoration: underline;
}
.use-cases__circle {
width: 7.25025rem;
height: 7.25025rem;
flex-shrink: 0;
position: absolute;
border-radius: 6.25rem;
background: var(--color-primary);
filter: blur(100px);
top: 50%;
left: -6rem;
z-index: 1;
}
.use-cases__item:nth-child(even)::before,
.use-cases__item:nth-child(even)::after,
.use-cases__item:nth-child(even) .use-cases__item-inner::after,
.use-cases__item:nth-child(even) .use-cases__item-inner::before {
content: "";
position: absolute;
width: 0.50063rem;
height: 0.50063rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: 1px solid var(--color-primary);
background-color: var(--text-color-white);
z-index: 20;
display: none;
}
.use-cases__item:nth-child(even)::after {
display: block;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.use-cases__item:nth-child(even)::before {
display: block;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.use-cases__item:nth-child(even) .use-cases__item-inner::after {
display: block;
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
.use-cases__item:nth-child(even) .use-cases__item-inner::before {
display: block;
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}
.use-cases__item:nth-child(odd)::after,
.use-cases__item:nth-child(odd)::before,
.use-cases__item:nth-child(odd) .use-cases__item-inner::after,
.use-cases__item:nth-child(odd) .use-cases__item-inner::before {
content: "";
position: absolute;
width: 0.7rem;
height: 0.7rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 9' fill='none'%3E%3Cpath d='M3.59473 1.25C4.17204 0.250069 5.61495 0.25021 6.19238 1.25L9.08398 6.25781C9.66132 7.2578 8.93982 8.50777 7.78516 8.50781H2.00293C0.848291 8.50781 0.125947 7.25779 0.703125 6.25781L3.59473 1.25Z' fill='transparent' stroke='%236366F1'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
z-index: 20;
display: block;
}
.use-cases__item:nth-child(odd)::after {
top: 2px;
left: 2px;
transform: translate(-50%, -50%);
}
.use-cases__item:nth-child(odd)::before {
top: 2px;
right: 2px;
transform: translate(50%, -50%);
}
.use-cases__item:nth-child(odd) .use-cases__item-inner::after {
bottom: 2px;
left: 2px;
transform: translate(-50%, 50%);
}
.use-cases__item:nth-child(odd) .use-cases__item-inner::before {
bottom: 2px;
right: 2px;
transform: translate(50%, 50%);
}
/* =============================
Integrations Area
============================= */
.integrations {
background: var(--color-surface);
}
.integrations__header-area {
align-items: center;
text-align: center;
max-width: 27rem;
margin: 0 auto;
}
.integrations__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.integrations__item {
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid var(--color-light-indigo);
background: var(--color-surface-default, var(--text-color-white));
display: flex;
flex-direction: column;
gap: 3.75rem;
}
.integrations__item-icon {
width: 3.5rem;
height: 3.5rem;
overflow: hidden;
}
.integrations__item-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.integrations__item-top {
display: flex;
align-items: center;
gap: 1rem;
}
.integrations__item-title {
font-size: var(--text-2xl);
font-style: normal;
font-weight: 500;
line-height: 2.25rem;
letter-spacing: -0.0375rem;
}
.integrations__item-category {
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.025rem;
}
.integrations__item-btn {
width: 100%;
margin-top: 1.25rem;
}
.integrations__filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.integrations__filter-item {
padding: 0.6rem 0.88rem;
color: var(--text-color-navy);
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 500;
border: 1px solid var(--color-slate-light);
text-decoration: none;
transition: 0.5ms ease;
}
.integrations__filter-item--active,
.integrations__filter-item:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--text-color-white);
}
/* =============================
Testimonials Area
============================= */
.testimonials {
background-color: var(--color-surface);
}
.testimonials__header-area {
max-width: 34rem;
margin: 0 auto;
align-items: center;
text-align: center;
}
.testimonials__item {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
border-radius: 1rem;
background: var(--text-color-white);
padding: 1.87rem;
min-height: 22rem;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.15);
position: relative;
max-width: 100%;
height: 100%;
}
.testimonials__content {
display: flex;
flex-direction: column;
gap: 1.25rem;
position: relative;
z-index: 5;
}
.testimonials__rating {
display: inline-flex;
align-items: center;
border-radius: 6.25rem;
border: 1px solid #E7E4E7;
gap: 0.5rem;
padding: 0.37rem 0.75rem;
flex-grow: 0;
width: max-content;
}
.testimonials__rating {
font-size: 0.9375rem;
font-style: normal;
font-weight: 500;
line-height: 1.5;
}
.testimonials__author {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.5rem;
position: relative;
z-index: 5;
}
.testimonials__author-avatar {
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
overflow: hidden;
}
.testimonials__author-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.testimonials__author-name {
color: var(--text-color-navy);
font-size: var(--text-xl);
font-weight: 500;
line-height: 1.75rem;
letter-spacing: -0.0125rem;
}
.testimonials__author-role {
font-size: var(--text-xl);
font-style: normal;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.0125rem;
}
.testimonials__author-avatar img,
.testimonials__quote-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonials__quote-img {
width: 1.875rem;
height: 1.875rem;
flex-shrink: 0;
}
.testimonials__shadow-circle {
width: 8.18425rem;
height: 8.18425rem;
position: absolute;
background: var(--color-primary);
opacity: 0.1;
filter: blur(40px);
border-radius: 50%;
z-index: 1;
}
.testimonials__shadow-circle--left-bottom {
bottom: 5rem;
right: -1rem;
}
.testimonials__shadow-circle--top-right {
top: 0;
right: 4rem;
width: 5.15625rem;
height: 5.15625rem;
}
.testimonials__shadow-circle--top-left {
top: -1rem;
left: 5rem;
width: 7.1785rem;
height: 7.1785rem;
}
.testimonials__slider-area {
position: relative;
}
.testimonials__slider {
padding-bottom: 6.5rem !important;
}
.testimonials__slider .swiper-wrapper {
height: fit-content !important;
}
/* Thumbnail Slider */
.testimonials__slider--thumb {
max-width: 25rem;
margin: -3.3rem auto 0;
padding: 0.5rem !important;
overflow: hidden;
user-select: none;
border-radius: 6.25rem;
background: var(--text-color-white);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.15);
outline: 2px solid #E7E4E7;
outline-offset: 5px;
border-radius: 999px;
}
.testimonials__slider--thumb .swiper-wrapper {
align-items: center;
}
.testimonials__slider--thumb .swiper-slide {
display: flex;
justify-content: center;
flex-shrink: 0;
opacity: .5;
cursor: pointer;
transition: all .3s ease;
}
.testimonials__slider--thumb .swiper-slide img {
width: 100%;
height: 100%;
max-width: 3.125rem !important;
max-height: 3.125rem !important;
object-fit: cover;
border-radius: 50%;
display: block;
}
.testimonials__slider--thumb .swiper-slide-thumb-active {
opacity: 1;
transform: scale(1.1);
}
.testimonials__slider--thumb .swiper-slide:not(.swiper-slide-thumb-active) {
transform: scale(.9);
}
.testimonials__slider--thumb .swiper-slide img {
object-fit: cover;
cursor: pointer;
}
.testimonials__slider--thumb .swiper-slide-thumb-active {
opacity: 1;
}
.testimonials__slider .swiper-slide {
opacity: 0.6;
display: flex;
height: auto;
}
.testimonials__slider .swiper-slide-active {
opacity: 1 !important;
}
.testimonials__slider .swiper-slide-active .testimonials__text {
color: var(--text-color-navy) !important;
}
.testimonials__button {
padding: 0.75rem 1.25rem;
border-radius: 3.8125rem;
border: 1px solid #E7E4E7;
background: #F1EFF1;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
z-index: 999 !important;
cursor: pointer;
}
.testimonials__button:hover {
background: var(--color-primary);
transition: 0.6ms ease-in;
}
.testimonials__button:hover svg path {
stroke: var(--text-color-white);
}
.testimonials__button--next {
left: auto;
right: 0;
}
/* =============================
14. Faq Area
============================= */
.faq {
background-color: var(--color-surface);
}
.faq__inner {
display: grid;
grid-template-columns: 0.8fr 1fr;
gap: 4rem;
}
.faq__left {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.faq__subtitle {
margin-top: 2rem;
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
color: var(--color-primary);
}
.faq__desc {
font-size: var(--text-lg);
line-height: 1.55;
max-width: 24.625rem;
}
.faq__content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq__item {
padding: 2rem;
overflow: hidden;
transition: padding 0.6s ease;
background-color: var(--text-color-white);
border-radius: 1rem;
cursor: pointer;
}
.faq__answer {
overflow: hidden;
height: 0;
opacity: 0;
margin-top: 0;
transition: height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
font-size: 1rem;
color: var(--text-color-primary);
padding-right: 1rem;
}
.faq__item--active .faq__answer {
height: auto;
opacity: 1;
margin-top: 0.5rem;
font-weight: 400;
line-height: 1.5;
}
.faq__question-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
}
.faq__question {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 1rem;
}
.faq__question-text {
flex: 1;
font-size: var(--text-xl);
font-weight: 500;
line-height: 1.5;
color: var(--text-color-navy);
}
.faq__toggle {
color: var(--color-primary-light);
font-size: 1rem;
border: none;
border-radius: 50%;
width: 2rem;
height: 2rem;
cursor: pointer;
border: 2px solid var(--color-primary-light);
background-color: transparent;
}
/* Faq Style Two */
.faq--style-two .faq__inner {
display: grid;
grid-template-columns: 1fr;
}
.faq--style-two .faq__left {
align-items: center;
text-align: center;
max-width: 29.25rem;
margin: 0 auto;
}
.faq--style-two .faq__content {
max-width: 53.75rem;
margin: 0 auto;
}
.faq--style-two .faq__item {
background: transparent;
padding: 1.25rem 1.5rem;
counter-increment: faq-counter;
}
.faq--style-two .faq__content {
counter-reset: faq-counter;
}
.faq--style-two .faq__question-text::before {
content: counter(faq-counter, decimal-leading-zero);
padding-right: 1rem;
}
.faq--style-two .faq__toggle {
color: var(--color-primary);
font-weight: 400;
border: none;
}
.faq--three {
background: var(--color-muted);
}
/* ===============================================================
Cta Styles
=============================================================== */
.cta__content {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
padding: 7rem 2rem;
}
.cta__overlay {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: lightgray;
opacity: 0.5;
}
.bg-wrap {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-height: 900px;
transform: translate(-50%, -50%);
z-index: -1;
overflow: hidden;
}
.hero .bg-wrap {
top: 0;
transform: translate(-50%, 0);
z-index: 1;
}
.bg-img {
object-fit: cover;
width: 100%;
height: 100%;
}
.cta__content-inner {
max-width: 36rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
position: relative;
z-index: 10;
}
.cta__title {
text-align: center;
}
.cta__desc {
font-size: var(--text-lg);
text-align: center;
max-width: 22.625rem;
}
.cta-wrap {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
.cta--style-two {
background: var(--color-muted);
}
/* ===============================================================
Footer Styles
=============================================================== */
.footer {
background: var(--text-color-white);
width: calc(100% - 2.5rem);
margin: 0 auto;
}
.footer__content {
display: grid;
grid-template-columns: 10rem repeat(4, 12.5rem);
gap: 1.5rem;
justify-content: space-between;
}
.footer .footer__column:not(:first-child) {
max-width: 12.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer__title {
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: 1.75rem;
margin-bottom: 1rem;
color: var(--text-color-dark);
letter-spacing: 0;
}
.footer__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
list-style: none;
}
.footer__link {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
color: var(--text-color-primary);
text-decoration: none;
transition: var(--transition);
}
.footer__link:hover {
color: var(--color-primary);
}
.spring__reviews-title {
color: var(--text-color-navy);
margin-bottom: 1rem;
line-height: 1.2;
}
.spring__badge-wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.spring__reviews--style-two .spring__badge-wrap {
justify-content: center;
}
.footer .spring__badge-wrap:first-child {
max-width: 19.5rem;
}
.footer .spring__badge svg {
width: 4rem;
height: fit-content;
}
.footer .spring__reviews {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spring__reviews--style-two .spring__reviews-title {
text-align: center;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
flex-wrap: wrap;
}
.footer__list--inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1rem;
}
.footer__bottom-right {
display: flex;
gap: 0.5rem 2rem;
flex-wrap: wrap;
align-items: center;
}
.footer__bottom .footer__list {
gap: 0.5rem 1rem;
}
.footer__bottom-right .footer__social {
display: flex;
gap: 0.6rem;
}
.footer__bottom-right .footer__social .footer__social-link {
background: var(--color-light-indigo);
display: grid;
place-items: center;
padding: 0.45rem;
border-radius: var(--radius-md);
transition: 0.6ms ease-in;
}
.footer__bottom-right .footer__social .footer__social-link:hover {
background: var(--color-primary);
color: var(--text-color-white);
}
.footer__bottom-right .footer__social .footer__social-link:hover svg path {
fill: var(--text-color-white);
}
.footer__logo-wrapper {
margin-bottom: 1rem;
}
/* ===============================================================
Benefits Styles
=============================================================== */
.benefits {
background: var(--color-surface);
}
.benefits__header-area {
align-items: center;
text-align: center;
max-width: 32rem;
margin: 0 auto;
}
.benefits__grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
.benefits__grid-inner--top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.benefits__grid-inner--bottom {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 2rem;
}
.benefits__item {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background: var(--text-color-white);
border-radius: var(--radius-lg);
}
.benefits__item-img-wrap {
border-radius: var(--radius-xl);
max-height: 26rem;
overflow: hidden;
}
.benefits__item-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.benefits__item-title {
font-weight: 500;
letter-spacing: 0;
margin-bottom: 1rem;
}
.benefits__item-text {
line-height: 1.62;
letter-spacing: 0;
}
/* ==============================
Discovery Area
==============================*/
.discovery__header-area {
max-width: 34rem;
}
.discovery__img-wrap {
position: relative;
overflow: hidden;
border-radius: var(--radius-3xl);
}
.discovery__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.discovery__img-overlay {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.49) 75.03%, var(--color-surface) 94.84%);
}
.discovery__cta-wrapper {
position: relative;
display: flex;
justify-content: center;
margin-top: -3rem;
z-index: 10;
}
.discovery--data-enrichment-page .discovery__header-area {
max-width: 45rem;
}
.discovery--data-enrichment-page .discovery__desc {
max-width: 34rem;
}
/* ==============================
Feature Showcase
============================== */
.feature-showcase {
background: var(--color-surface);
}
.feature-showcase__content {
background: var(--text-color-white);
padding: 2.5rem;
border-radius: var(--radius-xl);
}
.feature-showcase__title {
max-width: 22rem;
}
.feature-showcase__tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.feature-showcase__tab {
padding: 0.55rem 0.5rem;
background-color: var(--color-light-indigo);
color: #717680;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.025rem;
}
.feature-showcase__tab {
cursor: pointer;
transition: all 0.3s ease;
}
.feature-showcase__tab.is-active {
font-weight: bold;
}
.feature-showcase__card {
will-change: transform, opacity;
}
.feature-showcase__tab:hover {
color: var(--text-color-white);
background-color: var(--color-primary);
}
.feature-showcase__tab.is-active {
background-color: var(--color-primary);
color: var(--text-color-white);
}
.feature-showcase__card {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
padding: 2rem 1.5rem;
overflow: hidden;
background: var(--text-color-white);
border: 1px solid var(--color-light-indigo);
border-radius: var(--radius-xl);
}
.feature-showcase__info-desc {
margin-top: 1.5rem;
}
.feature-showcase__list {
list-style: none;
padding: 0;
margin-top: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.feature-showcase__list-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.feature-showcase__icon {
width: 20px;
height: 20px;
stroke: var(--fs-primary);
flex-shrink: 0;
}
.feature-showcase__preview {
width: 100%;
display: flex;
justify-content: center;
}
.feature-showcase__image {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
object-fit: cover;
}
/* ==============================
Hero People
============================== */
.hero--people-search {
overflow: hidden;
position: relative;
}
.hero--people-search .hero__content {
margin-top: 0 !important;
}
.hero--people-search .bg-wrap {
transform: translate(-50%, 0);
}
.hero--people-search .hero__header-area {
max-width: 44rem;
}
.hero--people-search .hero__video-wrap {
margin: 0 auto;
margin-bottom: 0;
position: relative;
}
.hero--people-search .hero__image-wrap {
margin: 0 auto;
text-align: center;
width: 100%;
position: relative;
}
.hero--people-search .hero__image-wrap img {
width: 100%;
object-fit: cover;
}
.hero--people-search .hero__video-wrap video {
height: 100%;
object-fit: contain;
}
.hero--people-search .hero__video-wrap .hero__image--large {
height: auto;
width: 100%;
}
.hero--people-search .hero__image--small {
position: absolute;
left: -7rem;
bottom: 8rem;
max-height: fit-content;
}
/* ==============================
Hero Lead Finder Area
============================== */
.hero--lead-finder {
position: relative;
}
.hero--lead-finder .hero__header-area {
max-width: 45rem;
}
/* ==============================
Hero Email Finder Area
============================== */
.hero--find-email {
position: relative;
}
.subtitle__wrapper--find-email,
.subtitle-arrow {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
max-width: fit-content;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-light-indigo);
background: var(--text-color-white);
padding: 0.4rem;
}
.subtitle__icon-wrapper {
padding-right: 0.5rem;
}
.subtitle__wrapper span {
color: var(--color-primary);
}
.subtitle__badge {
border-radius: var(--radius-2xl);
border: 1px solid var(--color-light-indigo);
background: var(--text-color-white);
padding: 0.15rem 0.60rem;
}
.find-email {
max-width: 66rem;
margin: 0 auto;
width: 100%;
background: linear-gradient(180deg, var(--color-light-indigo) 0%, var(--color-surface) 100%);
border-radius: var(--radius-2xl);
padding: 4rem 2rem;
box-shadow: var(--shadow-md);
}
.find-email__tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.find-email__tab {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
padding: 0.34rem 0.70rem;
color: var(--text-color-white);
font-size: 0.68913rem;
font-weight: 500;
border-radius: var(--radius-md);
border: 1.5px solid var(--border-1);
background: var(--text-color-white);
color: var(--text-color-light);
cursor: pointer;
transition: var(--transition);
}
.find-email__tab:hover {
border-color: var(--color-primary);
}
.find-email__tab--active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--text-color-white);
box-shadow: var(--shadow);
}
.find-email__tab--active:hover {
border-color: var(--color-primary);
}
.find-email__tab-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.find-email__card {
background: var(--text-color-white);
border-radius: var(--radius-xl);
padding: 18px;
}
/* Element: input field */
.find-email__input {
width: 100%;
padding: 14px 16px;
font-size: var(--text-base);
border-radius: var(--radius-md);
border: 1.5px solid var(--border-1);
color: var(--text-color-primary);
outline: none;
font-family: inherit;
transition: var(--transition);
}
.find-email__input::placeholder {
color: var(--text-color-light);
font-size: 1rem;
color: var(--color-gray-blue);
}
.find-email__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* Element: hint text below input */
.find-email__hint {
margin: 0.75rem 0 1.5rem 0;
font-size: var(--text-sm);
color: var(--text-color-primary);
}
/* Element: submit button */
.find-email__submit {
width: 100%;
font-size: var(--text-sm);
display: block;
}
.find-email__submit:hover {
background: var(--color-primary);
}
.find-email__submit:active {
transform: translateY(1px);
}
/* Find Email Image */
.hero--find-email .hero__img,
.hero--domain-search .hero__img,
.hero--find-mobile .hero__img {
margin: 0 auto;
max-width: 100%;
width: 100%;
object-fit: cover;
}
.hero--find-email .hero__content,
.hero--domain-search .hero__content,
.hero--find-mobile .hero__content {
position: relative;
justify-content: center;
max-width: 67rem;
margin: 0 auto;
}
.hero--find-email .hero__header-area {
max-width: 38rem;
}
.hero--find-email .bg-wrap,
.hero--domain-search .bg-wrap,
.hero--find-mobile .bg-wrap {
max-height: 70% !important;
}
/* ==============================
Hero Email Finder Area
============================== */
.why-us__header-area {
max-width: 32rem;
}
.why-us__card-description {
margin-top: 1rem;
}
.why-us__grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3.75rem;
}
.why-us__list-text {
margin-top: 0.1rem;
}
.why-us__list .why-us__list-item .why-us__list-icon {
display: grid;
place-items: center;
}
.why-us__list-item {
display: flex;
gap: 0.75rem;
}
.why-us__list {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1.125rem;
}
.why-us__card {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
gap: 6rem;
}
.why-us__card--reverse .why-us__content {
order: 2;
}
.why-us__image {
width: 100%;
object-fit: cover;
}
.why-us__card-title {
margin-top: 1.125rem;
}
.why-us__media {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
}
.why-us__loop-area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
flex-direction: column;
gap: 2.5rem;
}
.why-us__loop,
.why-us__loop-item,
.why-us__loop-inner,
.why-us__loop-item-icon {
display: flex;
gap: 0.75rem;
align-items: center;
flex-shrink: 0;
}
.why-us__loop-inner {
animation: loop-left 30s linear infinite;
}
.why-us__loop-item {
border-radius: var(--radius-sm);
background: var(--text-color-white);
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16);
padding: 0.25rem;
}
.why-us__card-cta,
.bulk__card-cta {
margin-top: 3.75rem;
}
/* ==============================
Enrichment Hero Area
============================== */
.hero--enrichment .hero__content {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.hero--enrichment .hero__cta-wrap {
justify-content: start;
}
/* ==============================
Enrich Data Area
============================== */
.enrich-data__header-area {
max-width: 45rem;
margin: 0 auto;
}
.enrich-data__desc {
max-width: 34rem;
}
.enrich-data__media {
overflow: hidden;
}
.enrich-data__media img {
width: 100%;
}
/* ==============================
Use Cases
============================== */
.header-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 3rem;
row-gap: 1rem;
}
.header-right {
display: flex;
align-items: end;
justify-content: end;
}
.services--two .title-lg {
max-width: 27.5rem;
}
.services--two .services__heder-left {
max-width: 30rem;
}
.services__heder-left {
max-width: 27rem;
}
.header-cta {
margin-top: 1.25rem;
justify-content: start;
}
.services--two {
background: var(--color-surface);
}
.services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.services__card {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 2.25rem;
border: 1px solid var(--color-soft-indigo);
will-change: opacity, transform;
}
.services__link {
text-decoration: underline !important;
display: inline-block;
}
.services__card-title {
font-weight: 500;
}
.filter__btn {
width: fit-content !important;
background: var(--text-color-white);
color: var(--text-color-primary);
border: 1px solid var(--color-soft-indigo);
}
.filter__btn--active {
background: var(--color-primary);
color: var(--text-color-white);
opacity: 1;
pointer-events: none;
}
/* ==============================
Bulk Area
============================== */
.bulk {
background: var(--color-surface);
}
.bulk__header-area {
max-width: 34rem;
}
.bulk__desc {
color: var(--color-charcoal-blue);
}
.list {
display: flex;
flex-direction: column;
align-items: start;
gap: 1.25rem;
list-style: none;
margin-left: 0;
padding-left: 0;
}
.list li {
display: flex;
align-items: start;
gap: 0.75rem;
}
.list li span {
margin-top: 3px;
}
.bulk__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 4rem;
row-gap: 2rem;
}
.bulk__item-left {
display: flex;
flex-direction: column;
justify-content: center;
}
.bulk__item--reverse .bulk__item-right {
order: -1;
}
.bulk__item-title {
margin-bottom: 1rem;
max-width: 28rem;
}
.bulk__feature-list {
padding-left: 1rem;
margin-top: 1.5rem;
}
.bulk__list {
display: flex;
flex-direction: column;
gap: 3.75rem
}
.bulk__item-cta {
margin-top: 3rem;
}
.bulk__item-right img {
width: 100%;
}
/* Domain Search Page */
.bulk--domain-search-page .bulk__header-area {
max-width: 38rem;
}
.bulk__item--lg {
grid-template-columns: repeat(1, 1fr);
}
.bulk__item--lg .bulk__item-right img {
width: 100%;
max-width: 100%;
}
/* For Agencies Page */
.bulk--for-agencies-page .bulk__header-area {
max-width: 48rem;
}
/* ==============================
Services Three
============================== */
.services--three .services__desc {
max-width: 29rem;
}
.services--three .services__heder-left {
max-width: 44rem;
}
.services--three .services__card-link {
text-decoration: underline;
}
/* ==============================
Breadcrumbs
============================== */
.breadcrumbs {
position: relative;
}
.breadcrumbs__header {
max-width: 35rem;
}
.breadcrumbs__link-wrap {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.breadcrumbs__link {
color: var(--color-silver-ash);
text-decoration: none;
}
.breadcrumbs__link--active {
color: var(--text-color-navy);
font-weight: 500;
}
.breadcrumbs__subtitle {
color: var(--color-primary)
}
.breadcrumbs__meta-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.breadcrumbs__meta-text {
color: var(--color-silver-ash);
padding: 0.30rem 0.75rem;
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.breadcrumbs__meta-text--update {
font-weight: 500;
color: var(--text-color-navy);
background: var(--text-color-white);
border: 1px solid var(--border-1);
}
.breadcrumbs__meta-dot {
display: block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
}
/* ==============================
Sidebar
============================== */
.single__content {
background: var(--color-muted);
}
.single__content-area {
display: flex;
gap: 3.75rem;
}
.single__content-row {
margin-bottom: 2.2rem;
}
.single__content p,
.single__content h2,
.single__content h3,
.single__content h4,
.single__content h5,
.single__content h6 {
margin-bottom: 0.87rem;
}
.single__content ul {
padding-left: 1rem;
margin-top: 0.3rem;
}
.single__content ul li::marker {
color: var(--color-primary);
}
.single__content blockquote {
border: 1px solid #FED7AA;
background: var(--text-color-white);
padding: 1.25rem;
}
.single__content blockquote span {
color: var(--color-primary);
display: block;
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.27;
letter-spacing: 0.0625rem;
margin-bottom: 3px;
}
.sidebar {
order: -1;
flex: 0 1 17.5rem;
min-width: 14rem;
max-width: 17.5rem;
}
.toc-card {
background: var(--text-color-white);
padding: 1.25rem;
}
.toc-card__title {
color: var(--text-color-primary);
font-size: 0.75rem;
letter-spacing: 0.075rem;
line-height: 1;
margin-bottom: 1rem;
}
.toc-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.8rem;
padding-left: 0 !important;
}
.toc-card__item a {
color: var(--text-color-primary);
text-decoration: none;
}
.toc-card__item .toc-card__number {
margin-right: 0.5rem;
}
.toc-card__item--active .toc-card__number {
color: var(--color-primary);
}
.toc-card__item--active a {
color: var(--color-navys);
}
.toc-card__item:hover .toc-card__number {
color: var(--color-primary);
}
.toc-card__item:hover a {
color: var(--color-navys);
}
.toc-card__link {
display: flex;
flex-wrap: nowrap;
}
/* Single Content */
.single__content h2 {
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.single__content h2 span {
color: var(--color-primary);
display: block;
}
.sidebar .contact-card {
padding: 1.25rem;
margin-top: 1.5rem;
background: var(--color-light-indigo);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sidebar .contact-card__subtitle {
text-transform: uppercase;
color: var(--color-vivid-indigo);
}
.sidebar .contact-card__title {
font-size: 1.125rem;
letter-spacing: 0;
font-style: normal;
font-weight: 500;
line-height: 1.4;
margin: 0;
}
.sidebar .contact-card__email {
color: var(--text-color-primary);
text-decoration: none;
user-select: none;
}
/* ==============================
Hero Search Domain
============================== */
.hero--domain-search {
position: relative;
}
.hero--domain-search .hero__desc {
max-width: 39rem;
}
.hero--domain-search .hero__cta-wrap {
justify-content: start;
}
/* ==============================
Search Card
============================== */
.search-card {
width: 100%;
background-color: var(--text-color-white);
overflow: hidden;
max-width: 66rem;
padding: 1.5rem 2.5rem;
margin: 0 auto;
border-radius: var(--radius-3xl);
border: 1.868px solid var(--color-light-indigo);
background: var(--color-light-indigo);
box-shadow: 0 11.21px 14.947px -3.737px rgba(10, 13, 18, 0.08), 0 3.737px 5.605px -1.868px rgba(10, 13, 18, 0.03), 0 1.868px 1.868px -0.934px rgba(10, 13, 18, 0.04);
}
.search-card__top {
background-color: var(--text-color-white);
padding: 2rem 1.6rem 1.5rem;
border-radius: 1.1915rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
position: relative;
z-index: 2;
}
.search-card__form-group {
margin-bottom: 1.5rem;
}
.search-card__input {
width: 100%;
padding: 0.8rem 1rem;
font-size: 0.875rem;
color: #333333;
border: 1px solid #e1e3ea;
border-radius: 8px;
outline: none;
transition: border-color 0.2s ease;
}
.search-card__input::placeholder {
color: #a0a5b5;
}
.search-card__input:focus {
border-color: var(--color-primary);
}
.search-card__hint {
margin: 8px 0 0 0;
}
.search-card__btn {
width: 100%;
padding: 0.75rem 1rem;
font-weight: 500;
border-radius: 10px;
border: none;
cursor: pointer;
transition: opacity 0.2s ease;
background: var(--color-primary);
}
.search-card__btn--primary {
background-color: var(--color-primary);
color: var(--text-color-white);
}
.search-card__btn:hover {
opacity: 0.92;
}
.search-card__bottom {
padding: 24px 28px 28px;
background-color: transparent;
position: relative;
z-index: 1;
}
.search-card__toggle-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
background-color: var(--text-color-white);
padding: 5px;
border-radius: var(--radius-sm);
border-radius: 8px;
}
.search-card__toggle-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0.56rem 1rem;
background: transparent;
border-radius: 0.28681rem;
border: none;
font-size: 0.875rem;
flex: 1 0 150px;
cursor: pointer;
transition: all 0.2s ease;
}
/* --- BEM: Modifiers --- */
.search-card__toggle-btn:hover,
.search-card__toggle-btn--active {
border: 1px solid var(--color-primary);
}
.search-card__action-btn:hover,
.search-card__toggle-btn:hover svg path,
.search-card__toggle-btn--active svg path {
fill: var(--text-color-white);
}
.search-card__divider {
text-align: center;
margin: 16px 0;
font-size: 11px;
font-weight: 600;
color: #555555;
letter-spacing: 0.5px;
}
.search-card__action-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background-color: var(--text-color-white);
border: 1px solid #f0edf7;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #4b447e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-card__action-btn:hover {
color: var(--text-color-white);
background: var(--color-primary);
}
.search-card__action-btn:hover svg path {
fill: var(--text-color-white);
}
.search-card__icon {
flex-shrink: 0;
}
/* ==============================
For Agencies
============================== */
.hero--for-agencies {
position: relative;
background: var(--color-surface);
}
.hero--for-agencies .hero__header-area {
max-width: 59rem;
}
.hero--for-agencies .hero__video-wrap {
margin-bottom: 0;
}
.hero--for-agencies .hero__content {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.hero--for-agencies .hero__image-wrap {
max-width: 100%;
width: 100%;
}
.hero__floating-card {
padding: 0.75rem 1rem;
border-radius: 0.875rem;
border: 1px solid var(--text-color-white);
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 12px 32px -6px rgba(16, 24, 40, 0.12);
backdrop-filter: blur(10px);
max-width: fit-content;
position: absolute;
}
.hero__floating-card .hero__floating-card-icon svg {
background: #E8F6ED;
border-radius: var(--radius-full);
}
.hero__floating-card--notification {
display: flex;
align-items: center;
gap: 0.5rem;
left: 0;
top: 3rem;
transform: rotate(-3deg) translateX(-50%);
}
.hero__floating-card-content {
display: flex;
flex-direction: column;
}
.hero__floating-card-title {
color: var(--text-color-navy);
font-weight: 500;
}
.hero__floating-card-text {
color: #676E7B;
font-family: Geist;
font-size: 0.6875rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.hero__floating-card-value {
font-weight: 500;
color: var(--text-color-navy);
}
.hero__floating-card-info {
color: #16A34A;
}
.hero__floating-card--stats .hero__floating-card-content {
display: flex;
flex-direction: column;
gap: 0.38rem;
}
.hero__floating-card--stats {
bottom: 4rem;
right: 0;
transform: rotate(4deg) translateX(80%);
}
.hero--outbound .hero__floating-card--stats {
transform: rotate(4deg) translateX(25%);
}
/* ==============================
Reporting
============================== */
.reporting {
background-color: var(--color-surface);
}
.reporting .reporting__subtitle {
margin-bottom: 1.5rem;
color: var(--color-primary);
}
.reporting .bulk__item {
background: var(--color-light-indigo);
padding: 3rem 1.5rem;
border-radius: var(--radius-xl);
}
.reporting .bulk__feature-item svg {
margin-top: 0.65rem;
}
.bulk__item img {
width: 100%;
}
/* ==============================
Metrics Area
============================== */
.metrics {
background: var(--color-surface);
}
.metrics__badge {
color: var(--color-primary);
text-transform: uppercase;
}
.metrics__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.metrics__grid--col-3 {
grid-template-columns: repeat(3, 1fr);
}
.metrics-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.metrics-card__title {
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.0125rem;
}
.metrics-card__description {
line-height: 1.4;
}
/* ==============================
Pain Points
============================== */
.pain-points {
background: var(--color-surface);
}
.pain-points__badge {
border-radius: var(--radius-sm);
border: 1px solid var(--color-soft-indigo);
background: var(--text-color-white);
padding: 0.25rem 0.75rem;
}
.pain-points__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.pain-points__card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2.5rem;
background: var(--text-color-white);
border-radius: var(--radius-xl);
}
.pain-points__icon {
max-width: 2.875rem;
overflow: hidden;
}
.pain-points__card-title {
color: var(--text-color-navy);
font-size: 1.375rem;
font-weight: 500;
line-height: 1.36;
letter-spacing: -0.01875rem;
}
/* ==============================
Pricing Addon Area
============================== */
.pricing-addon {
background: var(--color-surface);
box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.06);
}
.pricing-addon__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
column-gap: 0.75rem;
row-gap: 2rem;
flex-wrap: wrap;
margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.pricing-addon__title-group {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 0.75rem;
}
.pricing-addon__title-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.pricing-addon__title {
font-weight: 500;
}
.pricing-addon__info {
width: clamp(1.2rem, 3vw, 1.5rem);
height: clamp(1.2rem, 3vw, 1.5rem);
border-radius: 50%;
border: 0.125rem solid #d0d5dd;
display: flex;
align-items: center;
justify-content: center;
color: #667085;
font-size: clamp(0.625rem, 1.4vw, 0.875rem);
flex-shrink: 0;
}
.pricing-addon__link {
color: #475467;
text-decoration: underline;
font-size: clamp(0.875rem, 1.2vw, 1rem);
}
.pricing-addon__price {
font-weight: 500;
color: var(--text-color-navy);
text-align: right;
display: block;
white-space: nowrap;
}
.pricing-addon__slider {
width: 100%;
}
/* ========================================
Range Track
======================================== */
.pricing-addon__range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: clamp(0.375rem, 0.8vw, 0.625rem);
border-radius: 999rem;
outline: none;
cursor: pointer;
background: linear-gradient(to right,
var(--color-primary) 0%,
var(--color-primary) var(--progress),
var(--border-1) var(--progress),
var(--border-1) 100%);
}
.pricing-addon__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: clamp(1.375rem, 3vw, 1.875rem);
height: clamp(1.375rem, 3vw, 1.875rem);
border-radius: clamp(0.5rem, 1vw, 0.75rem);
background-color: var(--white, #fff);
border: 0.0625rem solid #cccfd4;
box-shadow:
0 0.25rem 0.75rem rgba(16, 24, 40, 0.12),
0 0.125rem 0.25rem rgba(16, 24, 40, 0.06);
background-image:
linear-gradient(#667085, #667085),
linear-gradient(#667085, #667085);
background-size:
0.125rem clamp(0.5rem, 1vw, 0.75rem),
0.125rem clamp(0.5rem, 1vw, 0.75rem);
background-position:
calc(50% - 0.1875rem) center,
calc(50% + 0.1875rem) center;
background-repeat: no-repeat;
cursor: pointer;
}
.pricing-addon__range::-moz-range-thumb {
width: clamp(1.375rem, 3vw, 1.875rem);
height: clamp(1.375rem, 3vw, 1.875rem);
border-radius: clamp(0.5rem, 1vw, 0.75rem);
background-color: var(--white, #fff);
border: 0.0625rem solid #cccfd4;
box-shadow:
0 0.25rem 0.75rem rgba(16, 24, 40, 0.12),
0 0.125rem 0.25rem rgba(16, 24, 40, 0.06);
cursor: pointer;
}
.pricing-addon__range::-moz-focus-outer {
border: 0;
}
.pricing-addon__ticks {
display: grid;
grid-template-columns: repeat(33, minmax(0, 1fr));
margin-top: clamp(1rem, 2vw, 1.75rem);
}
.pricing-addon__tick {
position: relative;
text-align: center;
min-width: 0;
}
.pricing-addon__tick::before {
content: "";
position: absolute;
top: calc(clamp(1rem, 2vw, 1.75rem) * -1 + 0.375rem);
left: 50%;
transform: translateX(-50%);
width: clamp(0.0625rem, 0.15vw, 0.125rem);
height: clamp(0.375rem, 1vw, 0.75rem);
border-radius: 999rem;
background: #d0d5dd;
}
.pricing-addon__tick-label {
display: none;
position: relative;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: #667085;
font-size: clamp(0.5625rem, 0.9vw, 0.875rem);
line-height: 1.2;
}
.pricing-addon__tick:nth-child(2n + 1) .pricing-addon__tick-label {
display: block;
}
/* ==============================
Pricing Comparison
============================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pricing-comparison__header {
margin-bottom: 3rem;
}
.pricing-comparison__title {
margin-bottom: 1rem;
}
.pricing-comparison__filter-wrap {
margin-bottom: 3rem;
border-radius: var(--radius-md);
border: 1px solid var(--color-soft-gray);
background: var(--color-off-white);
max-width: fit-content;
padding: 0.35rem 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pricing-comparison__filter-btn {
padding: 0.6rem 0.75rem;
cursor: pointer;
border: none;
background-color: transparent;
font-weight: 600;
color: #414651;
transition: 0.6ms ease-in;
border-radius: 0.375rem;
}
.pricing-comparison__filter-btn--active,
.pricing-comparison__filter-btn:hover {
color: var(--text-color-white);
background-color: var(--color-primary);
box-shadow: 0 1px 3px 0 rgba(10, 13, 18, 0.10), 0 1px 2px -1px rgba(10, 13, 18, 0.10);
}
/* Overflow wrapper for smooth mobile horizontal scrolling */
.pricing-comparison__wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 6px;
}
.pricing-comparison__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 720px;
/* Ensures minimum width on small screens */
}
.pricing-comparison__cell {
padding: 1rem;
font-size: 0.95rem;
text-align: center;
vertical-align: middle;
}
.pricing-comparison__cell--header {
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
padding-bottom: 24px;
}
.pricing-comparison__cell--label {
text-align: left;
font-weight: 500;
color: var(--text-dark);
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.pricing-comparison__category-title {
padding: 1rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-primary);
text-align: left;
}
.pricing-comparison__tooltip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1px solid #d0d5dd;
border-radius: 50%;
font-size: 0.7rem;
color: var(--text-muted);
cursor: help;
user-select: none;
}
.pricing-comparison__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.pricing-comparison__icon--check {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--primary-color);
color: var(--primary-color);
font-size: 0.8rem;
font-weight: bold;
}
.pricing-comparison__icon--dash {
color: #d0d5dd;
font-size: 1.1rem;
}
.pricing-comparison__cell--highlighted {
position: relative;
}
.pricing-comparison__cell--highlighted::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-left: 2px solid var(--primary-color);
border-right: 2px solid var(--primary-color);
pointer-events: none;
}
.pricing-comparison__row--header .pricing-comparison__cell--highlighted::before {
border-top: 2px solid var(--primary-color);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.pricing-comparison__row:last-child .pricing-comparison__cell--highlighted::before {
border-bottom: 2px solid var(--primary-color);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
tr.pricing-comparison__row:nth-child(odd) {
background-color: var(--text-color-white);
}
tr.pricing-comparison__row:nth-child(even) {
background-color: transparent;
}
tr .pricing-comparison__row--category {
background: transparent;
}
.pricing-comparison__table--hidden {
display: none !important;
}
tr.pricing-comparison__row.pricing-comparison__row--category {
background: transparent;
}
.pricing-comparison__table--active {
display: table;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==============================
Hero Pricing
============================== */
.hero--pricing {
position: relative;
}
.hero--pricing .hero__title {
max-width: 37rem;
}
.hero--pricing .bg-wrap {
max-height: calc(100% - 28rem);
}
.hero__avatar-area {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.avatar__img {
max-width: 2.5rem;
max-height: 2.5rem;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar__img:not(:first-child) {
margin-left: -1.2rem;
}
.pricing-card__filter-wrap {
display: flex;
justify-content: center;
gap: 0.5rem;
background: var(--text-color-white);
padding: 6px;
border-radius: 12px;
width: fit-content;
margin: 2.5rem auto 3rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
border: 1px solid var(--color-muted);
}
.pricing-card__filter-btn {
border: none;
background: transparent;
padding: 10px 22px;
font-size: 14px;
font-weight: 500;
color: var(--color-steel-gray);
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
}
.pricing-card__filter-btn--active {
background: var(--color-primary);
color: var(--text-color-white);
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-primary);
}
.pricing-card__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 0 auto;
align-items: flex-start;
}
.pricing-card__item {
background: var(--text-color-white);
border-radius: 16px;
padding: 2rem 1rem;
border: 1px solid var(--color-moon-gray);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.pricing-card__item--featured {
border: 1px solid var(--color-primary);
box-shadow: 0 10px 30px rgba(79, 70, 229, 0.12);
padding-top: 52px;
}
.pricing-card__item--last {
border: 1px solid var(--color-primary);
box-shadow: 0 10px 30px rgba(79, 70, 229, 0.12);
}
.pricing-card__badge {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--color-primary);
color: var(--text-color-white);
text-align: center;
padding: 8px 0;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.pricing-card__icon {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
margin-bottom: 16px;
}
.pricing-card__icon img {
width: 100%;
}
.pricing-card__title {
font-weight: 500;
color: var(--color-primary);
margin: 0 0 0.75rem;
}
.pricing-card__description {
margin-bottom: 1.25rem;
}
.pricing-card__price {
font-weight: 400;
color: var(--text-color-navy);
transition: opacity 0.2s ease;
}
.pricing-card__unit {
font-size: 18px;
color: var(--color-steel-gray);
font-weight: 500;
}
.pricing-card__credits {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.5px;
color: var(--color-steel-gray);
margin: 8px 0 24px;
}
.pricing-card__credit-num {
color: var(--color-primary);
}
.pricing-card__btn {
margin-bottom: 2rem;
}
.pricing-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-card__features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
}
.pricing-card__check {
width: 1.2rem;
height: 1.2rem;
color: var(--color-primary);
background: var(--color-soft-indigo);
border-radius: 50%;
padding: 2px;
flex-shrink: 0;
}
/* ==============================
Herp Contact
============================== */
.hero--contact {
position: relative;
}
.hero--contact .hero__header-area {
max-width: 29rem;
}
.contact__info {
max-width: 54rem;
margin: 0 auto 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 5rem;
}
.info-card {
background: var(--text-color-white);
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: 0 4px 16px 0 rgba(169, 169, 169, 0.06);
}
.info-card__icon {
margin-bottom: 2rem;
}
.info-card__title {
margin-bottom: 1rem;
}
.info-card__link,
.info-card__text {
color: var(--text-color-primary);
text-decoration: none;
transition: 0.5s ease-in;
}
.info-card__link:hover {
color: var(--color-primary);
}
/* ==============================
Contact (Contact Page)
============================== */
.contact--page .contact__content {
display: grid;
grid-template-columns: 4fr 6fr;
gap: 5rem;
align-items: start;
}
.contact--page .contact__subtitle {
font-size: 13px;
font-weight: 700;
color: var(--color-primary);
display: block;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.contact--page .contact__title {
font-size: 2.25rem;
font-weight: 400;
color: var(--text-color-navy);
margin-bottom: 0.6rem;
letter-spacing: -0.0556em;
line-height: 1.11;
}
.contact--page .contact__description {
color: var(--text-color-light);
font-size: 15px;
line-height: 1.6;
margin-bottom: 35px;
}
.contact--page .contact__cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact--page .contact__card {
display: flex;
padding: 20px;
border: 1px solid #E5EAF0;
border-radius: 12px;
text-decoration: none;
background-color: var(--white, var(--text-color-white));
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
transition: all 0.2s ease-in-out;
}
.contact--page .contact__card:hover {
border-color: var(--color-vivid-indigo);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.contact--page .contact__card-icon {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 16px;
flex-shrink: 0;
}
.contact--page .contact__card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.contact--page .contact__card-details {
flex-grow: 1;
margin-right: 1rem;
}
.contact--page .contact__card-title {
color: var(--text-color-navy);
letter-spacing: 0;
margin-bottom: 2px;
}
.contact--page .contact__card-text {
font-weight: 600;
color: var(--color-primary);
margin-bottom: 2px;
}
.contact--page .contact__card-desc {
color: var(--text-color-primary);
}
.contact--page .contact__card-arrow {
display: flex;
align-items: center;
padding-right: 1.5rem;
}
.contact--page .contact__form-wrapper {
background-color: #EFF6FF;
padding: 1.5rem;
border-radius: var(--radius-xl);
}
.contact--page .contact__form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 1.2rem;
margin-bottom: 1.2rem;
}
.contact--page .contact__form-group {
display: flex;
flex-direction: column;
}
.contact--page .contact__form-group--full {
margin-bottom: 20px;
}
.contact--page .contact__label {
font-weight: 600;
color: var(--text-color-navy);
margin-bottom: 1rem;
}
.contact--page .contact__input,
.contact--page .contact__select,
.contact--page .contact__textarea {
width: 100%;
padding: 1rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background-color: var(--text-color-white);
font-size: 1rem;
color: var(--text-color-navy);
outline: none;
transition: border-color 0.2s;
}
.contact--page .contact__input::placeholder,
.contact--page .contact__textarea::placeholder {
color: var(--color-steel-gray);
font-family: var(--font-primary);
}
.contact--page .contact__input:focus,
.contact--page .contact__select:focus,
.contact--page .contact__textarea:focus {
border-color: var(--color-vivid-indigo);
}
.contact--page .contact__select-wrapper {
position: relative;
}
.contact--page .contact__textarea {
resize: vertical;
}
.contact--page .contact__submit-btn {
margin-top: 2rem;
}
/* ==============================
Hero Free Trail
============================== */
.hero--free-trail {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero--free-trail .bg-wrap {
max-height: 100%;
}
.hero--free-trail .hero__grid {
display: grid;
grid-template-columns: 5.5fr 4.5fr;
gap: 3rem;
align-items: center;
}
.hero--free-trail .hero__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hero--free-trail .hero__badge-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.hero--free-trail .hero__badge,
.subtitle-badge {
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 500;
padding: 0.3rem 0.6rem;
border-radius: 62.4375rem;
letter-spacing: 0.0625rem;
text-transform: uppercase;
line-height: 1.11;
}
.hero--free-trail .hero__badge-text {
color: var(--color-charcoal-blue);
font-size: 0.875rem;
font-weight: 500;
}
.hero--free-trail .hero__title {
color: var(--text-color-navy);
}
.hero--free-trail .hero__description {
color: var(--color-steel-gray);
font-size: 1.05rem;
line-height: 1.6;
}
.hero--free-trail .hero__features {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 0.5rem;
}
.hero--free-trail .hero__feature-item {
display: flex;
gap: 0.75rem;
font-size: 1rem;
}
.hero--free-trail .hero__feature-item svg {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: var(--color-light-indigo);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.2rem;
padding: 0.2rem;
flex-shrink: 0;
border: 1px solid rgba(79, 70, 229, 0.40);
margin-top: 3px;
}
.hero--free-trail .hero__avatar-area {
justify-content: start;
}
.hero--free-trail .signup-card {
width: 100%;
background: var(--text-color-white);
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
border: 1px solid rgba(226, 232, 240, 0.8);
}
.hero--free-trail .signup-card__title {
margin-bottom: 0.35rem;
letter-spacing: 0;
}
.hero--free-trail .signup-card__subtitle {
font-size: 0.875rem;
color: var(--color-steel-gray);
margin-bottom: 1.75rem;
}
.hero--free-trail .signup-card__form-group {
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hero--free-trail .signup-card__label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-twilight);
}
.signup-card__input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-slate-light);
border-radius: 8px;
font-size: 0.95rem;
outline: none;
transition: all 0.2s ease;
}
.signup-card__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.signup-card__hint {
font-size: 0.75rem;
color: var(--color-steel-gray);
margin-top: 0.25rem;
}
.signup-card__btn {
width: 100%;
padding: 0.85rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
}
.signup-card__btn--primary {
background-color: var(--color-primary);
color: var(--text-color-white);
margin-top: 0.5rem;
}
.signup-card__btn--primary:hover {
background-color: #4338ca;
}
.signup-card__btn--google {
background-color: var(--text-color-white);
color: var(--text-color-primary);
border: 1px solid var(--color-slate-light);
margin-top: 0.75rem;
padding: 0.75rem;
}
.signup-card__btn--google:hover {
background-color: var(--color-cloud-white);
}
.signup-card__google-icon {
width: 18px;
height: 18px;
}
.signup-card__footer {
text-align: center;
font-size: 0.875rem;
color: var(--color-steel-gray);
margin-top: 1.5rem;
}
.signup-card__link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
.signup-card__link:hover {
text-decoration: underline;
}
/* ==============================
App Preview
============================== */
.trial-feature,
.brands--free-trail {
background: var(--color-muted);
}
.brands--free-trail .brands__container {
padding-top: 4rem !important;
}
.trial-feature__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.trial-feature__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.trial-feature__badge,
.subtitle-badge {
align-self: flex-start;
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 500;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.trial-feature__title {
line-height: 1.15;
font-weight: 400;
}
.trial-feature__stats {
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-top: 1rem;
}
.trial-feature__stat-item {
display: flex;
gap: 1.13rem;
align-items: flex-start;
}
.trial-feature__stat-number {
font-weight: 400;
color: var(--color-primary);
line-height: 1;
min-width: 60px;
}
.trial-feature__stat-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.trial-feature__stat-title {
font-weight: 500;
}
.trial-feature__stat-text {
font-size: 0.875rem;
color: var(--color-steel-gray);
line-height: 1.5;
}
.app-preview img {
width: 100%;
}
/* ==============================
.How It Works
============================== */
.how-it-works--style-two {
background: var(--text-color-white);
}
.how-it-works--style-two .how-it-works__header {
max-width: 32rem;
}
.how-it-works--style-two .how-it-works__title {
max-width: 100%
}
.how-it-works--style-two .how-it-works__description {
margin-top: 0.25rem;
}
.how-it-works--style-two .how-it-works__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.how-it-works--style-two .how-it-works__footer {
text-align: center;
font-size: 14px;
color: var(--color-steel-gray);
margin-top: 1.5rem;
}
.how-it-works--style-two .step-card {
background: var(--text-color-white);
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 24, 40, 0.06);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.how-it-works--style-two .step-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.06);
}
.how-it-works--style-two .step-card__preview img {
width: 100%;
object-fit: cover;
}
.how-it-works--style-two .step-card__content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.75rem;
background: var(--text-color-white);
}
.how-it-works--style-two .step-card__badge {
display: inline-block;
align-self: flex-start;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--color-vivid-indigo);
background-color: var(--color-light-indigo);
padding: 4px 10px;
border-radius: 12px;
}
.how-it-works--style-two.step-card__title {
font-size: 18px;
font-weight: 600;
color: var(--text-color-navy);
margin-bottom: 10px;
}
.how-it-works--style-two.step-card__text {
color: var(--color-charcoal-blue);
}
/* ==============================
Testimonials Two
============================== */
.testimonials--style-two {
background: var(--color-surface);
}
.testimonials--style-two .testimonials__header {
max-width: 34rem;
}
.testimonials--style-two .testimonials__badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--color-vivid-indigo);
background-color: var(--color-light-indigo);
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 16px;
text-transform: uppercase;
}
/* 3 Items Visible Container Height Calculation */
.testimonials--style-two .testimonials__wrapper {
position: relative;
overflow: hidden;
/* Exactly 3 Cards + 2 Gaps height */
height: calc((250px * 3) + (1.5rem * 2));
mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}
.testimonials--style-two .testimonials__overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 12rem;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--text-color-white) 100%);
}
.testimonials--style-two .testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonials--style-two .testimonials__column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.testimonials--style-two .testimonials__column--up {
animation: scrollUp 25s linear infinite;
}
.testimonials__column--down {
animation: scrollDown 25s linear infinite;
}
.testimonials--style-two .testimonials__column:hover {
animation-play-state: paused;
}
.testimonials--style-two .testimonial-card {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 3rem;
border-radius: var(--radius-lg);
border: 1px solid var(--color-soft-gray);
background: var(--text-color-white);
box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonials--style-two .testimonial-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}
.testimonials--style-two .testimonial-card__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.testimonials--style-two .testimonial-card__avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
background-color: var(--color-slate-light);
}
.testimonials--style-two .testimonial-card__info {
display: flex;
flex-direction: column;
}
.testimonials--style-two .testimonial-card__name-wrapper {
display: flex;
align-items: center;
gap: 5px;
}
.testimonials--style-two .testimonial-card__name {
font-weight: 600;
color: var(--text-color-navy);
line-height: 1;
}
.testimonials--style-two .testimonial-card__verified {
margin-top: 0.3rem;
}
.testimonials--style-two .testimonial-card__role {
color: var(--color-charcoal-blue);
}
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@keyframes scrollDown {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
@keyframes scrollHorizontal {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ==============================
Enterprise Area
============================== */
.enterprise {
background-color: var(--color-surface);
}
.enterprise__badge {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-primary);
background-color: var(--color-light-indigo);
padding: 0.3125rem 0.625rem;
border-radius: 0.375rem;
margin-bottom: 1.25rem;
text-transform: uppercase;
}
.enterprise__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.enterprise__card {
background-color: var(--text-color-white);
border-radius: var(--radius-2xl);
padding: 2rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.01);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
gap: 1rem;
}
.enterprise__card:hover {
transform: translateY(-0.125rem);
box-shadow: 0 0.75rem 1.5rem -0.25rem rgba(0, 0, 0, 0.04);
}
.enterprise__icon-wrapper {
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
border-radius: 0.625rem;
background: var(--color-light-indigo);
}
.enterprise__icon {
width: 1.125rem;
height: 1.125rem;
color: var(--color-primary);
}
/* ==============================
Agenda Area
============================== */
.agenda {
background-color: var(--color-surface);
}
.agenda__header {
max-width: 35rem;
}
.agenda__card {
background-color: var(--text-color-white);
border-radius: 1rem;
border: 0.0625rem solid var(--color-muted);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.01);
overflow: hidden;
}
.agenda__row {
display: grid;
grid-template-columns: 10rem 14rem 1fr;
align-items: center;
padding: 2rem 2.5rem;
border-bottom: 0.0625rem solid var(--color-muted);
transition: background-color 0.2s ease;
}
.agenda__row:last-child {
border-bottom: none;
}
.agenda__row:hover {
background-color: #fcfcfd;
}
.agenda__time {
font-weight: 500;
color: var(--color-primary);
}
.agenda__topic {
font-weight: 500;
color: var(--text-color-navy);
}
.agenda__description {
color: var(--color-charcoal-blue);
}
/* ==============================
Animation
============================== */
.booking {
width: 100%;
display: flex;
align-items: center;
position: relative;
}
.booking__content-area {
display: grid;
grid-template-columns: 5.7fr 4.3fr;
gap: 3.5rem;
align-items: center;
}
.booking__info {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 38rem;
}
.booking__title {
letter-spacing: -0.225rem;
}
.booking__meta-title {
font-size: 0.8125rem;
font-weight: 500;
}
.booking__list {
list-style: none;
}
.booking__list-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1rem;
color: var(--text-color-primary);
margin-bottom: 0.875rem;
}
.booking__list-dash {
color: var(--color-primary);
font-weight: bold;
}
.booking__host {
display: flex;
flex-direction: column;
}
.booking__host-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.booking__host-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
object-fit: cover;
}
.booking__host-label {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-charcoal-blue);
text-transform: uppercase;
}
.booking__host-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-color-navy);
line-height: 1;
}
.booking__host-role {
font-size: 0.75rem;
color: var(--color-charcoal-blue);
}
.booking__card {
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 24, 40, 0.06);
background: var(--text-color-white);
box-shadow: 0 12px 32px 0 rgba(16, 24, 40, 0.06);
}
.booking__card-header {
background: var(--color-light-indigo);
padding: 2rem;
}
.booking-form {
padding: 1.5rem 2rem;
}
.booking__card-badge {
display: inline-block;
font-weight: 500;
color: var(--color-primary);
background-color: var(--text-color-white);
padding: 0.19rem 0.5rem;
border-radius: var(--radius-full);
margin-bottom: 1.2rem;
text-transform: uppercase;
}
.booking__card-title {
line-height: 1.2;
color: var(--text-color-navy);
margin-bottom: 0.5rem;
}
.booking__card-desc {
letter-spacing: -0.02em;
line-height: 1.2;
}
.calendar__nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
margin-top: 1rem;
}
.calendar__title {
font-weight: 500;
color: var(--text-color-navy);
}
.calendar__arrow-group {
display: flex;
gap: 0.25rem;
}
.calendar__arrow-btn {
width: 1.75rem;
height: 1.75rem;
border: 0.0625rem solid var(--color-moon-gray);
border-radius: 0.375rem;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-steel-gray);
font-size: 0.75rem;
transition: all 0.2s ease;
}
.calendar__arrow-btn:hover {
background-color: var(--color-cloud-white);
color: var(--text-color-navy);
}
.calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
column-gap: 1.5rem;
row-gap: 0.25rem;
margin-top: 1rem;
}
.calendar__day-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-gray-blue);
padding: 0.375rem 0;
}
.calendar__day {
font-size: 0.8125rem;
height: 2.125rem;
padding: 0.5rem 0.94rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
cursor: pointer;
color: var(--text-color-primary);
border: none;
background: transparent;
transition: all 0.15s ease;
}
.calendar__day--empty {
cursor: default;
}
.calendar__day--available {
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-weight: 500;
}
.calendar__day--available:hover {
background-color: var(--color-primary-light);
}
.calendar__day--selected {
background-color: var(--color-primary) !important;
color: var(--text-color-white) !important;
font-weight: 600;
}
.calendar__times-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-twilight);
margin-bottom: 0.75rem;
margin-top: 1rem;
}
.calendar__times-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.625rem;
margin-bottom: 1.5rem;
}
.calendar__time-btn-wrap {
display: flex;
justify-content: center;
}
.calendar__time-btn {
padding: 0.625rem 0;
border: 0.0625rem solid var(--color-moon-gray);
border-radius: 0.5rem;
background-color: var(--text-color-white);
width: 100%;
max-width: 7.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-color-navy);
cursor: pointer;
transition: all 0.2s ease;
}
.calendar__time-btn:hover {
border-color: var(--color-primary);
}
.calendar__time-btn--selected {
background-color: var(--text-color-navy);
color: var(--text-color-white);
border-color: var(--text-color-navy);
}
/* --- Submit Button --- */
.calendar__submit-btn {
width: 100%;
margin-bottom: 1rem;
}
.calendar__timezone {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--color-steel-gray);
}
.calendar__timezone-dot {
width: 0.375rem;
height: 0.375rem;
background-color: #10A37C;
border-radius: 50%;
}
/* ==============================
Leadvaro Vs Prospeo
============================== */
.hero--lead-pro {
position: relative;
}
.hero--lead-pro .bg-wrap {
max-height: 100% !important;
}
.hero--lead-pro .hero__title {
letter-spacing: -0.225rem;
}
.hero--lead-pro .cta-wrap {
justify-content: start;
}
.hero--lead-pro .hero__content-area {
display: flex;
align-items: center;
gap: 3rem;
}
.hero--lead-pro .hero__left {
display: flex;
flex-direction: column;
gap: 2rem;
flex: 0 0 60%;
}
.hero--lead-pro .hero__right {
flex: 0 0 40%;
overflow: hidden;
}
.hero--lead-pro .hero__right img {
width: 100%;
height: auto;
}
.hero--lead-pro .subtitle__wrapper {
display: flex;
flex-wrap: wrap;
column-gap: 0.75rem;
align-items: center;
}
.hero--lead-pro .subtitle__text {
color: var(--color-charcoal-blue);
}
ul.green {
list-style-type: disc;
padding-left: 1.25rem;
}
ul.green li {
color: var(--color-twilight);
font-size: 1rem;
}
ul.green li::marker {
color: #10A37C;
font-size: 1.2rem;
}
/* ==============================
Reason Area
============================== */
.reasons {
background-color: var(--color-surface);
}
.reasons__header {
max-width: 37.5rem;
}
.reasons__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.reasons__card {
border-radius: var(--radius-lg);
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
padding: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
box-shadow: 0 8px 20px 0 rgba(16, 24, 40, 0.05);
}
.reasons__card-badge {
font-style: normal;
font-weight: 500;
line-height: normal;
color: var(--color-primary);
font-size: 0.75rem;
background: #EEEFFE;
padding: 0.38rem 0.75rem;
border-radius: var(--radius-full);
}
.reasons__card-subtitle {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
color: #8F96A2;
text-transform: uppercase;
}
.reasons__card-title {
font-size: 1.25rem;
font-weight: 500;
color: var(--text-color-navy);
}
.reasons__card-text {
color: #535B68;
}
/* ==============================
Comparison Area
============================== */
.comparison {
background: var(--text-color-white)
}
.comparison__badge {
color: var(--color-primary);
}
.comparison__description {
font-size: 1rem;
color: var(--color-steel-gray);
}
.comparison__table-wrapper {
background-color: var(--text-color-white);
border: 1px solid #eaecf0;
border-radius: var(--radius-lg);
overflow-x: auto;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.comparison__table {
width: 100%;
border-collapse: collapse;
text-align: left;
overflow-x: scroll;
}
.comparison__table thead {
background: var(--color-cloud-white);
}
.comparison__table .comparison__th {
padding: 1.25rem 2rem
}
.comparison__th {
font-size: 0.75rem;
font-weight: 500;
}
.comparison__th--feature {
width: 40%;
}
.comparison__th--brand {
width: 30%;
}
.comparison__brand-logo {
max-width: 6.5rem;
margin-bottom: 0.3rem;
}
.comparison__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.comparison__brand--alt {
align-items: center;
}
.comparison__brand-name {
font-size: 1rem;
font-weight: 600;
color: var(--text-color-navy);
}
.comparison__brand-badge-title {
font-weight: 600;
font-size: 0.8125rem;
text-align: center;
display: block;
}
.comparison__brand-desc {
text-align: center;
color: var(--color-charcoal-blue);
font-size: 0.6875rem;
font-weight: 400;
display: block;
}
.comparison__brand-badge {
font-size: 0.6875rem;
background-color: #EEEFFE;
;
color: var(--color-primary);
padding: 0.125rem 0.65rem;
border-radius: 12px;
font-weight: 500;
}
.comparison__category-row {
border-top: 1px solid #EAEEF3;
background: var(--color-surface);
}
.comparison__category-title {
padding: 0.75rem 1.5rem;
border-top: 1px solid #eaecf0;
border-bottom: 1px solid #eaecf0;
color: var(--text-color-navy);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.05rem;
}
.comparison--alt .comparison__category-title {
color: var(--color-primary);
}
.comparison__cell {
padding: 1rem 1.5rem;
font-size: 0.875rem;
color: var(--text-color-primary);
border-bottom: 1px solid var(--color-muted);
vertical-align: middle;
}
.comparison--alt .comparison__cell {
text-align: center;
}
.comparison--alt .comparison__cell--left {
text-align: left;
}
.comparison__cell strong {
display: block;
color: var(--text-color-navy);
font-weight: 500;
}
.comparison__cell-sub {
display: block;
font-size: 0.75rem;
color: var(--color-gray-blue);
margin-top: 0.125rem;
}
.comparison__status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.comparison__status--active {
background: var(--color-light-indigo);
padding: 0.25rem 0.60rem;
border-radius: var(--radius-full);
color: var(--color-primary);
font-weight: 500;
}
.comparison__status--success::before {
content: "";
background-color: #E8F7EF;
display: inline-block;
width: 0.8rem;
height: 0.8rem;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
margin-right: 0.375rem;
padding: 5px;
border-radius: 50%;
}
.comparison__status--disabled {
color: var(--text-color-navy);
}
.comparison__status--disabled::before {
content: "";
background-color: #FDEDED;
display: inline-block;
width: 0.8rem;
height: 0.8rem;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 8px;
margin-right: 0.375rem;
padding: 5px;
border-radius: 50%;
}
.comparison--alt tfoot td {
padding: 2rem;
text-align: center;
}
.comparison--alt tfoot {
background-color: var(--color-cloud-white);
}
/* ==============================
Hero Prospeo Alt Area
============================== */
.hero--prospeo-alt {
position: relative;
overflow: hidden;
background-color: var(--color-surface);
}
.hero--prospeo-alt .hero__container {
position: relative;
z-index: 2;
}
.hero--prospeo-alt .bg-wrap {
max-height: 100% !important;
z-index: 1;
}
.hero--prospeo-alt .hero__cta-wrap {
margin-top: 2rem;
}
.hero--prospeo-alt .hero__header-area {
max-width: 47rem;
}
/* ==============================
Switch Reasons
============================== */
.switch-reasons {
background: var(--color-surface);
}
.switch-reasons__header {
text-align: left;
max-width: 40rem;
}
.switch-reasons__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.switch-reasons__card {
background-color: var(--text-color-white);
border: 1px solid var(--color-muted);
border-radius: 20px;
padding: 3rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: flex-start;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.switch-reasons__card--featured {
background-color: var(--color-light-indigo);
border-color: transparent;
}
.switch-reasons__card-badge {
margin-bottom: 0.5rem;
color: var(--color-primary);
background-color: var(--color-light-indigo);
border-radius: var(--radius-full);
padding: 0.25rem 0.6rem;
font-weight: 500;
font-size: 0.75rem;
}
.switch-reasons--contact-out .switch-reasons__card:nth-child(odd) .switch-reasons__card-stat {
color: var(--color-primary);
}
/* ==============================
Hero Find Decision
============================== */
.hero--find-decision {
position: relative;
background: var(--color-surface);
}
.hero__container {
position: relative;
z-index: 2;
}
.hero--find-decision .hero__header-area {
max-width: 50rem;
}
/* ==============================
Outreach Area
============================== */
.outreach {
background: var(--color-surface);
}
.outreach__header {
max-width: 38rem;
}
.outreach__header--lg {
max-width: 43rem;
}
.outreach__description {
color: var(--text-color-light);
font-size: 1rem;
line-height: 1.6;
}
.outreach__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.outreach-card {
padding: 2.5rem;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 1.5rem;
border: 1px solid rgba(16, 24, 40, 0.06);
}
.outreach-card--light {
background-color: var(--text-color-white);
border: 1px solid #f0f0f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.outreach-card--dark {
background-color: #121316;
color: var(--text-color-white);
}
.outreach-card__badge {
align-self: flex-start;
padding: 0.25rem 0.63rem;
border-radius: 12px;
color: #DC2626;
font-size: 0.625rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.05rem;
}
.outreach-card__badge--danger {
background-color: #fee2e2;
color: #ef4444;
}
.outreach-card__badge--dark {
background-color: #27272a;
color: var(--color-silver-ash);
}
.outreach-card__title {
font-weight: 500;
}
.outreach-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.88rem;
}
.outreach-card__item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9375rem;
line-height: 1.4;
}
.outreach-card--light .outreach-card__item {
color: #4b5563;
}
.outreach-card--dark .outreach-card__item {
color: var(--text-color-white);
}
.outreach-card--dark .outreach-card__title {
color: var(--text-color-white);
}
.outreach-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
flex-shrink: 0;
margin-top: 2px;
}
.outreach-card__icon--cross {
background-color: #fef2f2;
color: #ef4444;
}
.outreach-card__icon--check {
background-color: #27272a;
color: var(--color-silver-ash);
}
/* ==============================
Features Step Area
============================== */
.feature-steps {
background: var(--color-surface);
}
.feature-steps__tag {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
}
.feature-steps__title {
letter-spacing: -0.02em;
color: var(--text-color-navy);
}
.feature-steps__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.step-card {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: var(--radius-2xl);
border: 1px solid rgba(16, 24, 40, 0.06);
background: var(--text-color-white);
box-shadow: 0 4px 16px 0 rgba(16, 24, 40, 0.04);
}
.step-card__visual {
max-height: 9.75rem;
}
.step-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.75rem;
}
.step-card__step {
display: inline-block;
max-width: fit-content;
padding: 4px 10px;
border-radius: var(--radius-full);
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-weight: 500;
}
.step-card__title {
color: var(--text-color-navy);
letter-spacing: 0;
font-weight: 500;
}
/* ==============================
Animation
============================== */
.trust-metrics {
background: var(--color-cloud-white);
}
.trust-metrics__header {
max-width: 24rem;
}
.trust-metrics__desc {
max-width: 21rem;
}
.trust-metrics__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: var(--text-color-white);
overflow: hidden;
}
.trust-card {
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--text-color-white);
border-right: 1px solid var(--color-soft-indigo);
}
.trust-card:last-child {
border-right: none;
}
.trust-card__top {
display: flex;
flex-direction: column;
gap: 1rem;
}
.trust-card__index {
color: #606060;
}
.trust-card__value {
font-weight: 400;
color: var(--text-color-navy);
}
.trust-card__details {
margin-top: auto;
margin-top: 4.5rem;
}
.trust-card__label {
font-weight: 600;
}
.trust-metrics__footer {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin-top: 40px;
}
.trust-metrics__feature {
font-weight: 500;
display: flex;
gap: 1rem;
align-items: center;
}
.trust-metrics__feature-icon {
color: var(--color-vivid-indigo);
}
/* ==============================
Target Audience
============================== */
.target-audience {
background-color: var(--color-surface);
}
.target-audience__header {
max-width: 39rem;
}
.target-audience__header--lg {
max-width: 45rem;
}
.target-audience__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.audience-card {
background-color: var(--text-color-white);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
border-radius: var(--radius-2xl);
border: 1px solid rgba(16, 24, 40, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.audience-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.audience-card__icon-wrapper {
width: 2.5rem;
height: 2.5rem;
background-color: var(--color-light-indigo);
;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.audience-card__icon {
width: 1.3rem;
height: 1.3rem;
}
.audience-card__title {
font-weight: 500;
color: var(--text-color-navy);
}
.audience-card__description {
color: var(--color-charcoal-blue);
}
.audience-card__link {
text-decoration: underline !important;
}
/* ==============================
Blog Hero Area
============================== */
.hero--blog {
position: relative;
}
.hero--blog .bg-wrap {
max-height: 100% !important;
}
.hero--blog .hero__header-area {
max-width: 45rem;
}
.hero--blog .hero__desc {
max-width: 35rem;
}
.search-bar {
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
max-width: 30.3rem;
padding: 12px 16px;
background-color: var(--text-color-white);
margin-left: auto;
margin-right: auto;
border: 1px solid var(--color-light-indigo);
box-shadow: 0 4px 16px rgba(120, 110, 150, 0.08);
box-sizing: border-box;
margin-top: 1.5rem;
}
.search-bar__icon {
width: 1.1rem;
height: 1.1rem;
color: var(--color-primary-light);
flex-shrink: 0;
}
.search-bar__input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.8rem;
color: var(--text-color-navy);
}
.search-bar__input::placeholder {
color: var(--color-silver-ash);
font-weight: 400;
}
.search-bar__shortcut {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px 8px;
background-color: var(--color-light-indigo);
color: var(--color-primary);
border-radius: 4px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
user-select: none;
}
.search-bar__shortcut-cmd {
font-size: 13px;
}
/* ==============================
Blog Area
============================== */
.blog {
background: var(--color-surface);
position: relative;
}
.blog__header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3.75rem;
}
.blog__header-btn {
max-width: fit-content !important;
}
.blog__categories {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog__category-btn {
border: 1px solid var(--border-1);
background: var(--text-color-white);
color: var(--text-color-navy);
padding: 0.5rem 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.blog__category-btn--active,
.blog__category-btn:hover {
background: var(--text-color-navy);
color: var(--text-color-white);
border-color: var(--text-color-navy);
}
.blog__sort-select {
background: var(--text-color-white);
color: #4B5563;
border: 1px solid var(--border-1);
padding: 0.7rem 0.88rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
outline: none;
}
.blog__section-label {
text-transform: uppercase;
font-weight: 400;
color: var(--color-primary);
margin-bottom: 2.5rem;
}
.blog__subheader {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 60px;
margin-bottom: 24px;
}
.blog__subheader .blog__section-label {
margin-bottom: 0;
}
.blog__count {
font-size: 12px;
color: var(--color-gray-blue);
}
.blog__featured-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
background: var(--text-color-white);
overflow: hidden;
color: var(--text-color-navy);
}
.blog__featured-card .blog__post-tag {
background: var(--color-light-indigo);
padding: 0.25rem 0.75rem;
font-weight: 500;
}
.blog__featured-title-link {
color: var(--text-color-navy);
text-decoration: none;
}
.blog__featured-media {
height: 100%;
min-height: 300px;
}
.blog__featured-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog__featured-body {
padding: 2.5rem 3.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.25rem;
}
.blog__btn {
max-width: fit-content;
}
.blog__post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--color-silver-ash);
}
.blog__post-tag {
color: var(--color-primary);
text-transform: uppercase;
font-weight: 700;
}
.blog__author {
display: flex;
align-items: center;
gap: 0.8rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-soft-indigo);
}
.blog__author-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
object-fit: cover;
}
.blog__author-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.blog__author-name {
font-weight: 500;
color: var(--text-color-navy);
line-height: 1;
}
.blog__author-role {
font-size: 0.75rem;
color: #4B5563;
line-height: 1;
}
.blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.blog__card {
background: var(--text-color-white);
overflow: hidden;
color: var(--text-color-navy);
display: flex;
flex-direction: column;
border: 1px solid var(--color-soft-indigo);
}
.blog__card-media {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.blog__card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog__card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog__card-title-link {
text-decoration: none;
color: var(--text-color-navy);
}
.blog__card-title {
margin-bottom: 0.85rem;
margin-top: 1rem;
font-weight: 500;
}
.blog__card-excerpt {
flex-grow: 1;
margin-bottom: 0.75rem;
}
.blog__pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 3rem;
}
.blog__pagination-btn,
.blog__pagination-page {
background: var(--text-color-white);
border: 1px solid var(--border-1);
color: var(--text-color-navy);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
cursor: pointer;
flex-shrink: 0;
}
.blog__pagination-pages {
display: flex;
gap: 6px;
align-items: center;
}
.blog__pagination-btn:hover,
.blog__pagination-page--active,
.blog__pagination-page:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--text-color-white);
}
.blog__pagination-ellipsis {
color: var(--color-gray-blue);
padding: 0 4px;
}
/* ==============================
Blog Details Area
============================== */
.hero--blog-details {
overflow: hidden;
position: relative;
background-color: var(--color-surface);
}
.hero--blog-details .bg-wrap {
max-height: 100% !important;
}
.hero--blog-details .hero__header-area {
max-width: 54rem;
}
.blog--details .blog__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.blog--details .blog__thumbnail-wrap {
width: 100%;
overflow: hidden;
margin-bottom: 1.5rem;
}
.blog--details .blog__heading {
padding-top: 1.5rem !important;
margin-bottom: 0.5rem;
font-size: 2rem;
line-height: 1.25;
letter-spacing: -0.025em;
font-weight: 500;
}
.blog--details .blog__thumbnail {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.blog--details .blog__layout {
display: grid;
grid-template-columns: 1fr 16.3rem;
gap: 5rem;
align-items: start;
}
.blog--details .blog__paragraph {
color: var(--text-color-navy);
}
.blog--details .blog__paragraph--bold {
font-weight: 500;
}
.blog--details .blog__quote {
border-left: 3px solid var(--color-primary);
padding-left: 1.2rem;
margin: 0.8rem 0;
font-size: 1.5rem;
font-weight: 300;
color: var(--text-color-navy);
line-height: 1.5;
}
.blog--details .blog__callout {
background-color: var(--color-light-indigo);
padding: 1.75rem;
}
.blog--details .blog__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.blog--details .blog__list-item {
position: relative;
padding-left: 20px;
}
.blog--details .blog__list-item::before {
content: "■";
position: absolute;
left: 0;
top: 0;
color: var(--color-primary);
font-size: 0.8rem;
}
.blog--details .blog__list-item strong {
display: block;
font-size: 1.25rem;
margin-bottom: 4px;
font-weight: 500;
color: var(--text-color-navy);
}
.blog--details .blog__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.blog--details .blog__tag {
background-color: var(--text-color-white);
border: 1px solid var(--color-light-indigo);
padding: 6px 12px;
border-radius: 4px;
font-size: 0.8rem;
color: #4B5563;
text-decoration: none;
transition: all 0.2s ease;
}
.blog--details .blog__tag:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.blog--details .blog__sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: sticky;
top: 20px;
}
.blog--details .blog__toc-card {
background-color: var(--text-color-white);
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.blog--details .blog__toc-title {
color: var(--color-steel-gray);
margin: 0 0 0.75rem 0;
}
.blog--details .blog__toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.blog--details .blog__toc-item {
color: #666666;
cursor: pointer;
transition: color 0.2s ease;
padding-left: 1rem;
}
.blog--details .blog__toc-item:hover {
color: #1a1a1a;
}
.blog--details .blog__toc-item--active {
color: var(--text-color-navy);
font-weight: 500;
position: relative;
}
.blog--details .blog__toc-item--active::before {
position: absolute;
content: '';
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
top: 6px;
left: 0;
background: #EA580C;
}
/* Author Widget */
.blog--details .blog__author-card {
display: flex;
flex-direction: column;
gap: 0.75rem;
background-color: var(--text-color-white);
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.blog--details .blog__author-card-avatar {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
}
.blog--details .blog__author-card-name {
color: var(--text-color-navy);
}
.blog--details .blog__author-card-bio {
color: #4B5563;
margin-top: 0.75rem;
margin-bottom: 1rem;
}
.blog--details .blog__author-card-socials {
display: flex;
gap: 0.75rem;
}
.blog--details .blog__author-card-link {
text-decoration: none;
transition: 0.5ms eases;
color: var(--text-color-navy);
}
.blog--details .blog__author-card-link:hover {
text-decoration: underline;
color: var(--color-primary);
}
/* Newsletter Widget */
.blog--details .blog__newsletter-card {
background-color: var(--color-light-indigo);
padding: 1.25rem;
}
.blog--details .blog__newsletter-subtitle {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0;
color: var(--color-primary);
display: block;
margin-bottom: 0.75rem;
}
.blog--details .blog__newsletter-title {
font-weight: 500;
margin-bottom: 0.75rem;
}
.blog--details .blog__newsletter-desc {
margin-bottom: 0.75rem;
}
.blog--details .blog__newsletter-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.blog--details .blog__newsletter-input {
padding: 10px 14px;
border: 1px solid var(--color-light-indigo);
font-size: 0.85rem;
outline: none;
}
.blog--details .blog__newsletter-input:focus {
border-color: var(--color-primary);
}
.blog--details .blog__newsletter-btn {
width: 100%;
}
/* ==============================
Hero Area Case Study
============================== */
.hero--case-study {
position: relative;
overflow: hidden;
}
.hero--case-study .bg-wrap {
max-height: 100% !important;
}
.hero--case-study .hero__cta-wrap {
justify-content: start;
}
.hero--case-study .hero__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5rem;
align-items: center;
}
.hero--case-study .hero__right {
display: flex;
align-items: center;
justify-content: center;
}
.hero--case-study .hero__cards {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
}
.hero--case-study .hero__card {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
max-width: 22.5rem;
background: var(--text-color-white);
padding: 1.5rem;
border-radius: var(--radius-2xl);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.60) inset, 0 8px 24px 0 rgba(16, 24, 40, 0.06);
}
.hero--case-study .hero__card-tag {
background: rgba(16, 24, 40, 0.06);
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
max-width: fit-content;
}
.hero--case-study .hero__card-stat {
color: var(--color-primary);
font-weight: 300;
}
.hero--case-study .hero__card--top {
transform: rotate(2deg);
}
.hero--case-study .hero__card--middle {
transform: translateX(20%);
}
.hero--case-study .hero__card--bottom {
transform: rotate(-2deg);
}
/* ==============================
Isolated Trusted By
============================== */
.trusted-by {
background-color: var(--color-surface);
}
.trusted-by * {
box-sizing: border-box;
}
.trusted-by .trusted-by__title {
color: var(--color-charcoal-blue);
text-align: center;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.0875rem;
margin-bottom: 2rem;
}
.trusted-by .trusted-by__grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 50px;
}
.trusted-by .trusted-by__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
flex: 1;
}
.trusted-by .trusted-by__logo-name {
color: var(--text-color-navy);
font-family: Geist;
font-size: 1.375rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: -0.0375rem;
}
.trusted-by .trusted-by__badge {
display: inline-block;
color: var(--color-primary);
background-color: var(--color-light-indigo);
font-size: 0.72rem;
font-weight: 500;
padding: 0.37rem 0.75rem;
border-radius: var(--radius-full);
letter-spacing: -0.01em;
line-height: 1.25;
white-space: nowrap;
}
.trusted-by .trusted-by__divider {
width: 100%;
height: 1px;
background-color: var(--border-1);
margin-top: 10px;
}
/* ==============================
Story Card
============================== */
.story-card--featured {
background-color: var(--color-surface);
}
.story-card--featured * {
box-sizing: border-box;
}
.story-card--featured .story-card__wrapper {
display: grid;
grid-template-columns: 6fr 4fr;
align-items: center;
gap: 2.5rem;
padding: 4rem;
border-radius: var(--radius-3xl);
border: 1px solid rgba(79, 70, 229, 0.10);
background: linear-gradient(90deg, var(--color-light-indigo) 0%, var(--color-surface) 55%, var(--text-color-white) 100%);
}
.story-card--featured .story-card__content {
max-width: 600px;
}
.story-card--featured .story-card__badge {
display: inline-block;
background-color: var(--text-color-white);
color: var(--color-primary);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
padding: 0.38rem 0.75rem;
border-radius: var(--radius-full);
margin-bottom: 2rem;
text-transform: uppercase;
}
.story-card--featured .story-card__stat {
font-size: 10rem;
font-style: normal;
font-weight: 300;
line-height: 1;
letter-spacing: -0.04375em;
color: var(--text-color-navy);
}
.story-card--featured .story-card__substat {
font-size: 1.1rem;
font-weight: 500;
line-height: 1.4;
margin-top: 0.5rem;
}
.story-card__bottom {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.story-card--featured .story-card__quote {
font-size: 0.98rem;
color: var(--text-color-primary);
font-weight: 400;
}
.story-card--featured .story-card__author {
display: flex;
align-items: center;
gap: 0.7rem;
}
.story-card--featured .story-card__author-img {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
object-fit: cover;
}
.story-card--featured .story-card__author-name {
color: var(--text-color-navy);
}
.story-card--featured .story-card__author-role {
color: var(--color-charcoal-blue);
}
.story-card--featured .story-card__link {
display: inline-flex;
align-items: center;
color: var(--color-primary);
font-family: Geist;
font-size: 0.9375rem;
font-style: normal;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.story-card--featured .story-card__link:hover {
color: var(--color-primary);
text-decoration: underline;
}
.story-card__img {
width: 100%;
object-fit: cover;
}
/* ==============================
Customer Stories
============================== */
.customer-stories {
background-color: var(--color-surface);
}
.customer-stories .customer-stories__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.2rem;
flex-wrap: wrap;
}
.customer-stories .customer-stories__badge {
display: inline-block;
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 6px 12px;
border-radius: 20px;
margin-bottom: 16px;
text-transform: uppercase;
}
.customer-stories .customer-stories__filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.customer-stories .customer-stories__filter-btn {
background-color: var(--text-color-white);
color: var(--text-color-navy);
border: 1px solid var(--border-1);
padding: 0.5rem 0.88rem;
border-radius: var(--radius-full);
font-weight: 500;
cursor: pointer;
border: 1px solid rgba(16, 24, 40, 0.10);
transition: all 0.2s ease;
}
.customer-stories .customer-stories__filter-btn:hover,
.customer-stories .customer-stories__filter-btn--active {
background-color: var(--color-primary);
color: var(--text-color-white);
border-color: var(--color-primary);
}
.customer-stories .customer-stories__filter-btn--active:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--text-color-white);
}
.customer-stories .customer-stories__layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.customer-stories .customer-stories__column {
display: flex;
flex-direction: column;
gap: 24px;
}
.customer-stories .customer-stories__card {
background-color: var(--text-color-white);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 24, 40, 0.06);
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 4px 16px 0 rgba(16, 24, 40, 0.04);
}
.customer-stories .customer-stories__card-tag {
display: inline-block;
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.05em;
padding: 0.25rem 0.63rem;
border-radius: var(--radius-full);
text-transform: uppercase;
width: fit-content;
}
.customer-stories .customer-stories__card--large {
background-color: #edf2ff;
padding: 1.25rem;
grid-column: span 2;
border-radius: var(--radius-lg);
border: none;
}
.customer-stories .customer-stories__card--large .customer-stories__card-tag {
background-color: var(--text-color-white);
color: var(--color-primary);
font-weight: 600;
margin-bottom: 1.5rem;
}
.customer-stories__card--large .customer-stories__card-stat {
color: var(--text-color-navy);
font-size: 8.75rem;
font-style: normal;
font-weight: 300;
line-height: 1.03;
letter-spacing: -0.35rem;
}
.customer-stories .customer-stories__card-stat--purple {
color: var(--color-primary);
font-weight: 300;
}
.customer-stories .customer-stories__card--large .customer-stories__card-title {
color: var(--text-color-navy);
margin: 0 0 2.5rem 0;
max-width: 530px;
}
.customer-stories .customer-stories__card--medium {
padding: 1.5rem;
gap: 1.5rem;
flex: 1;
}
.customer-stories .customer-stories__card--medium .customer-stories__card-title {
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.015em;
color: var(--text-color-dark);
}
.customer-stories .customer-stories__card--medium .customer-stories__author {
padding-top: 0;
}
.customer-stories .customer-stories__card--image {
grid-column: span 1;
border-radius: 0;
}
.customer-stories .customer-stories__card-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.customer-stories .customer-stories__card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.customer-stories .customer-stories__card-overlay-stat {
position: absolute;
bottom: 12px;
right: 16px;
font-weight: 400;
color: var(--text-color-white);
}
.customer-stories .customer-stories__card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.customer-stories .customer-stories__card--image .customer-stories__card-title {
margin: 1rem 0 0.88rem 0;
color: var(--text-color-navy);
font-weight: 500;
}
.customer-stories .customer-stories__card-excerpt {
margin: 0 0 0.75rem 0;
}
.customer-stories .customer-stories__author {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
.customer-stories .customer-stories__card--image .customer-stories__author {
border-top: 1.5px solid var(--color-light-indigo);
}
.customer-stories .customer-stories__author-img {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-full);
object-fit: cover;
}
.customer-stories .customer-stories__author-info {
display: flex;
flex-direction: column;
}
.customer-stories .customer-stories__author-name {
color: var(--text-color-navy);
font-style: normal;
font-weight: 400;
line-height: 1.2;
}
.customer-stories .customer-stories__author-desc {
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
color: var(--color-charcoal-blue);
}
.customer-stories .customer-stories__footer {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* ==============================
API Docs
============================== */
.hero--api-docs {
position: relative;
overflow: hidden;
}
.hero--api-docs .bg-wrap {
max-height: 100% !important;
}
.hero--api-docs .subtitle__badge {
background: var(--color-primary);
color: var(--text-color-white);
margin-right: 0.75rem;
}
.hero--api-docs .hero__cta-wrap {
justify-content: start;
}
.hero--api-docs .hero__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 4rem;
}
.hero--api-docs .hero__img {
width: 100%;
}
/* ==============================
Hero Area Our Data
============================== */
.hero--our-data {
position: relative;
text-align: center;
}
.hero--our-data .bg-wrap {
max-height: 100% !important;
}
.hero--our-data .hero__header {
max-width: 42.5rem;
}
.hero--our-data .hero__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
padding: 0.44rem 0.62rem;
border-radius: var(--radius-full);
}
.hero--our-data .hero__badge-dot {
width: 6px;
height: 6px;
background-color: #4BD996;
border-radius: 50%;
box-shadow: 0 0 8px #34d399;
}
.hero--our-data .hero__badge-text {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
}
.hero--our-data .hero__stats-card {
margin-top: 3.25rem;
border-radius: var(--radius-2xl);
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
padding: 3.25rem 0.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
backdrop-filter: blur(10px);
}
.hero--our-data .hero__stat-item {
text-align: left;
position: relative;
padding: 0 2rem;
}
.hero--our-data .hero__stat-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.18);
}
.hero--our-data .hero__stat-number {
font-weight: 400;
margin: 0 0 0.5rem 0;
}
.hero--our-data .hero__stat-number {
color: var(--color-primary);
}
.hero--our-data .hero__stat-title {
color: var(--text-color-navy);
margin: 0 0 0.5rem 0;
}
.hero--our-data .hero__stat-desc {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.45;
color: var(--text-color-primary);
margin: 0;
max-width: 250px;
}
/* ==============================
Data Breakdown
============================== */
.data-breakdown {
background-color: var(--color-cloud-white);
}
.data-breakdown__header {
text-align: center;
max-width: 650px;
}
.badge--style-two {
display: inline-block;
max-width: fit-content;
padding: 0.35rem 0.75rem;
background-color: var(--color-light-indigo);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: var(--radius-full);
}
.data-breakdown__cards {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.data-breakdown__card {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
background: #F9F9F9;
border-radius: var(--radius-xl);
overflow: hidden;
padding: 1rem;
}
.data-breakdown__card:nth-child(even) .data-breakdown__card-img-wrap {
order: 2;
}
.data-breakdown__card-content {
display: flex;
flex-direction: column;
gap: 4rem;
}
.data-breakdown__card-content-top {
display: flex;
flex-direction: column;
gap: 0.63rem;
}
.data-breakdown__card-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.data-breakdown__category {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.33;
color: var(--color-primary);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.data-breakdown__count {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.33;
background-color: var(--color-light-indigo);
color: var(--color-primary);
padding: 0.25rem 0.56rem;
border-radius: 12px;
}
.data-breakdown__card-title {
font-weight: 500;
}
.data-breakdown__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.data-breakdown__item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.data-breakdown__icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5625rem;
background-color: var(--color-light-indigo);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.data-breakdown__item-title {
color: var(--text-color-navy);
font-weight: 500;
}
/* ==============================
User Feedback
============================== */
.user-feedback {
background-color: var(--text-color-white);
}
.user-feedback__header {
max-width: 775px;
}
.user-feedback__tag {
display: inline-block;
color: var(--color-primary);
text-transform: uppercase;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.08em;
}
.user-feedback__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.user-feedback__card {
border-radius: var(--radius-xl);
border: 1px solid var(--color-moon-gray);
background: var(--color-cloud-white);
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.user-feedback__author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.user-feedback__avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
object-fit: cover;
}
.user-feedback__meta {
display: flex;
flex-direction: column;
}
.user-feedback__name {
color: var(--text-color-navy);
letter-spacing: 0;
line-height: 1.2;
}
.user-feedback__role {
font-size: 0.75rem;
}
.user-feedback__footer {
display: flex;
align-items: center;
gap: 16px;
}
.user-feedback__stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-steel-gray);
}
.user-feedback__stat svg {
stroke: var(--color-steel-gray);
}
.user-feedback__action {
text-align: center;
}
/* ==============================
Sales Triggers
============================== */
.sales-triggers {
background-color: var(--color-cloud-white);
}
.sales-triggers__header {
max-width: 42rem;
}
.sales-triggers__description {
font-size: 15px;
color: var(--color-steel-gray);
line-height: 1.6;
}
.sales-triggers__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3rem;
}
.sales-triggers__card {
background: var(--text-color-white);
border: 1px solid var(--color-moon-gray);
border-radius: var(--radius-xl);
padding: 1.75rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.88rem;
}
.sales-triggers__icon {
width: 2.75rem;
height: 2.75rem;
background-color: var(--color-light-indigo);
color: var(--color-primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.sales-triggers__card-title {
font-weight: 500;
}
.sales-triggers__card-link {
text-decoration: underline !important;
}
.sales-triggers__footer {
display: flex;
align-items: center;
}
.sales-triggers__link {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.sales-triggers__link:hover {
text-decoration: underline;
}
.sales-triggers__link svg {
transition: transform 0.2s ease;
}
.sales-triggers__link:hover svg {
transform: translateX(3px);
}
/* ==============================
Data Preview Area
============================== */
.data-preview__media img {
width: 100%;
}
/* ==============================
Quick Start Area
============================== */
.quick-start {
background-color: var(--color-surface);
}
.quick-start__badge {
max-width: fit-content;
}
.quick-start__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.quick-start__card {
background-color: var(--text-color-white);
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: var(--radius-2xl);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.quick-start__step-badge {
max-width: fit-content;
}
.quick-start__img {
width: 100%;
}
/* ==============================
API Explorer Area
============================== */
.api-explorer__image {
width: 100%;
}
/* ==============================
SDK Integrations Area
============================== */
.sdk-integrations {
background-color: var(--color-surface);
}
.sdk-integrations__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.sdk-integrations__card {
background-color: var(--text-color-white);
padding: 1.87rem 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 24, 40, 0.06);
}
.sdk-integrations__tech-tag {
font-weight: 500;
color: var(--color-charcoal-blue);
padding: 0.20rem 0.5rem;
text-transform: uppercase;
border-radius: var(--radius-full);
background: var(--color-cloud-white);
}
.sdk-integrations__card-title {
font-weight: 500;
}
.sdk-integrations__command {
width: 100%;
background-color: var(--color-light-indigo);
border-radius: var(--radius-md);
padding: 0.63rem 0.87rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
overflow-x: auto;
white-space: nowrap;
}
/* ==============================
Animation
============================== */
.enrichment-events {
padding: 80px 20px;
background-color: var(--color-surface);
}
.enrichment-events__header {
max-width: 700px;
margin-bottom: 48px;
}
.enrichment-events__flow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.enrichment-events__card {
flex: 1;
background-color: var(--text-color-white);
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: var(--radius-xl);
padding: 1.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.enrichment-events__step {
display: inline-block;
align-self: flex-start;
padding: 4px 10px;
background-color: var(--color-soft-indigo);
color: #4338ca;
font-size: 11px;
font-weight: 700;
border-radius: 12px;
margin-bottom: 20px;
}
.enrichment-events__code {
background-color: #eff6ff;
border-radius: 8px;
padding: 10px 14px;
font-size: 11px;
font-weight: 600;
color: var(--color-primary);
overflow-x: auto;
white-space: nowrap;
}
.enrichment-events__arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0 8px;
}
.enrichment-events__arrow svg {
width: 20px;
height: auto;
}
/* ==============================
Animation
============================== */
.lead-sourcing {
background-color: var(--color-cloud-white);
max-width: calc(100% - 2.5rem);
margin: 0 auto;
border-radius: var(--radius-3xl);
}
.lead-sourcing__badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-color-primary);
}
.lead-sourcing__list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.lead-sourcing__card {
position: relative;
background-color: var(--color-cloud-white);
padding: 2.5rem;
display: flex;
align-items: center;
gap: 3rem;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-soft-indigo);
}
.lead-sourcing__card--reverse {
flex-direction: row-reverse;
}
.lead-sourcing__visual {
flex: 1;
/* aspect-ratio: 16 / 8; */
height: 100%;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lead-sourcing__img {
max-width: 100%;
width: 100%;
object-fit: cover;
border-radius: var(--radius-xl);
}
.lead-sourcing__content {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 0.88rem;
}
.lead-sourcing__card-title {
color: var(--text-color-navy);
}
.lead-sourcing__number {
position: absolute;
top: 48px;
right: 48px;
font-size: 14px;
font-weight: 600;
color: var(--color-gray-blue);
}
.lead-sourcing__card--reverse .lead-sourcing__number {
right: 48px;
}
/* ==============================
Hero Integrations Area
============================== */
.hero-integrations {
overflow: hidden;
display: flex;
align-items: center;
position: relative;
}
.hero-integrations__content {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.hero-integrations__badge-group,
.subtitle-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.badge-group-center {
justify-content: center;
width: 100%;
}
.hero-integrations__badge-text,
.subtitle-transparent {
padding: 0;
margin: 0;
background: transparent;
}
.hero-integrations__actions {
margin-top: 3rem;
}
.hero-integrations__apps {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 1.3rem;
padding: 0;
}
.hero-integrations__app-card {
min-width: 3.5rem;
width: 100%;
}
.hero-integrations__app-card--offset-1 {
transform: translateY(20px);
}
.hero-integrations__app-card--offset-2 {
transform: translateY(0);
}
.hero-integrations__app-card--offset-3 {
transform: translateY(35px);
}
.hero-integrations__app-card--offset-4 {
transform: translateY(10px);
}
.hero-integrations__app-icon {
width: 100%;
object-fit: contain;
}
.hero-integrations__app-name {
font-size: 12px;
font-weight: 600;
color: var(--text-color-navy);
}
/* ==============================
Animation
============================== */
.custom-api {
background-color: var(--color-surface);
}
.custom-api__card {
background-color: var(--color-light-indigo);
border-radius: var(--radius-3xl);
padding: 2.5rem;
display: flex;
align-items: center;
gap: 4rem;
}
.custom-api__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.custom-api__badge {
display: inline-block;
padding: 0.25rem 0.6rem;
background-color: var(--text-color-white);
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--radius-full);
max-width: fit-content;
}
.custom-api__features {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.custom-api__feature {
display: flex;
align-items: center;
gap: 0.75rem;
}
.custom-api__check-icon-wrap {
background-color: var(--color-soft-indigo);
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: var(--radius-full);
width: 1.25rem;
height: 1.25rem;
}
.custom-api__check-icon {
color: var(--color-primary);
font-size: 0.75rem;
}
.custom-api__actions {
justify-content: start;
}
.custom-api__media {
flex: 1;
display: flex;
justify-content: center;
}
.custom-api__image {
width: 100%;
max-width: 520px;
height: auto;
display: block;
}
/* ==============================
Animation
============================== */
.data-responsibility {
background-color: var(--text-color-black);
}
.data-responsibility__header {
max-width: 40rem;
}
.data-responsibility__title {
font-weight: 500;
color: var(--text-color-white);
}
.data-responsibility__description {
color: var(--text-color-white);
}
.data-responsibility__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.data-responsibility__card {
background-color: transparent;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-default, var(--color-moon-gray));
}
.data-responsibility__number {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-color-white);
margin-bottom: 1rem;
}
.data-responsibility__card-title,
.data-responsibility__card-text {
color: var(--text-color-white);
}
/* ==============================
Hero About Area
============================== */
.hero--about {
position: relative;
background: var(--color-surface);
}
.hero--about .bg-wrap {
max-height: 100% !important;
}
.hero--about .cta-wrap {
justify-content: start;
}
.hero--about .hero__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.hero--about .hero__img {
width: 100%;
}
/* ==============================
B2B Sellers Area
============================== */
.b2b-sellers {
background-color: var(--color-surface);
}
.b2b-sellers__grid {
display: grid;
grid-template-columns: 3fr 7fr;
align-items: center;
gap: 6rem;
}
.b2b-sellers__column {
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 1;
}
.b2b-sellers__title-left {
color: var(--text-color-navy);
font-weight: 300;
}
.b2b-sellers__image-wrapper {
width: 100%;
border-radius: var(--radius-xl);
overflow: hidden;
}
.b2b-sellers__image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 16px;
}
.b2b-sellers__title-right {
font-weight: 300;
}
/* ==============================
Team Area
============================== */
.team-members {
background-color: var(--color-surface);
}
.team-members__header {
text-align: center;
max-width: 870px;
}
.team-members__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem 1.25rem;
margin-bottom: 56px;
}
.team-members__card {
display: flex;
flex-direction: column;
}
.team-members__image-box {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
margin-bottom: 1rem;
border-radius: var(--radius-xl);
box-shadow: 0 8px 24px 0 rgba(16, 24, 40, 0.06);
}
.team-members__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-members__name {
font-weight: 500;
color: var(--text-color-navy);
margin-bottom: 0.25rem;
}
.team-members__role {
font-weight: 400;
color: var(--color-charcoal-blue);
}
.team-members__link {
color: var(--color-primary);
text-decoration: none;
}
.team-members__link:hover {
text-decoration: underline;
}
.team-members__actions {
text-align: center;
}
/* ==============================
Animation
============================== */
.modern-platform {
background-color: var(--color-surface);
}
.modern-platform__header {
text-align: center;
max-width: 48rem;
}
.modern-platform__description {
font-size: 14px;
color: var(--color-steel-gray);
line-height: 1.6;
}
.modern-platform__card {
background-color: var(--color-light-indigo);
border-radius: var(--radius-3xl);
padding: 3rem 2.5rem;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.modern-platform__media {
width: 100%;
max-width: 680px;
display: flex;
justify-content: center;
}
.modern-platform__image {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
box-shadow: 0 24px 48px 0 rgba(16, 24, 40, 0.32);
}
/* ==============================
Press News Area
============================== */
.badge--style-three {
color: var(--color-primary);
padding: 0.37rem 0.75rem;
border-radius: var(--radius-full);
border: 1px solid rgba(79, 70, 229, 0.20);
background: var(--text-color-white);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.1em;
max-width: fit-content;
}
.press-news {
background-color: var(--color-surface);
}
.press-news__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.press-news__card {
background-color: var(--text-color-white);
border-radius: var(--radius-2xl);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
min-height: 240px;
border: 1px solid rgba(16, 24, 40, 0.06);
}
.press-news__card-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.press-news__date {
font-size: 0.875rem;
color: var(--color-charcoal-blue);
font-weight: 400;
}
.press-news__card-title {
font-weight: 500;
}
.press-news__link {
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
}
.press-news__link:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* ==============================
Our Journey Area
============================== */
.our-journey {
background-color: var(--text-color-white);
}
.our-journey__timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.our-journey__item {
display: flex;
flex-direction: column;
}
.our-journey__marker-wrapper {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.our-journey__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
}
.our-journey__line {
height: 1px;
background: rgba(203, 213, 225, 0.60);
flex-grow: 1;
}
.our-journey__year {
font-weight: 300;
}
/* ==============================
Hero Study Index
============================== */
.hero--study-index {
position: relative;
padding-bottom: 4rem;
}
.hero--study-index .bg-wrap {
max-height: 100% !important;
}
/* ==============================
Client Case Studies
============================== */
.client-case-studies {
background-color: var(--text-color-white);
}
.client-case-studies__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.client-case-studies__card {
background-color: var(--text-color-white);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-moon-gray);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.client-case-studies__company {
display: flex;
align-items: center;
gap: 0.60rem;
}
.client-case-studies__logo {
width: 28px;
height: 28px;
background-color: var(--color-primary);
color: var(--text-color-white);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.client-case-studies__company-name {
color: var(--text-color-navy);
font-weight: 400;
}
.client-case-studies__badge {
border-radius: 0.375rem;
}
.client-case-studies__title {
max-width: 350px;
}
.client-case-studies__divider {
height: 1px;
background: var(--color-moon-gray);
}
.client-case-studies__stats {
display: flex;
justify-content: space-between;
}
.client-case-studies__stat {
display: flex;
flex-direction: column;
}
.client-case-studies__number {
color: var(--color-primary);
font-weight: 500;
}
.client-case-studies__label {
font-size: 0.75rem;
font-weight: 500;
margin-top: 0.20rem;
}
.client-case-studies__link {
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
margin-top: auto;
}
.client-case-studies__link:hover {
text-decoration: underline;
}
.client-case-studies__cta {
text-align: center;
}
.client-case-studies__cta-title {
font-weight: 500;
color: var(--text-color-navy);
margin-bottom: 0.75rem;
}
.link-text {
font-size: 0.875rem;
font-weight: 400;
color: var(--color-primary);
text-decoration: none;
}
.link-text:hover {
text-decoration: underline;
}
/* ==============================
Hero First Prospecting Area
============================== */
.hero--first-prospecting {
position: relative;
}
.hero--first-prospecting .cta-wrap {
justify-content: start;
}
.hero--first-prospecting .hero__container {
display: flex;
justify-content: center;
}
.hero--first-prospecting .hero__header-area {
max-width: 58rem;
}
.hero--first-prospecting .bg-wrap {
max-height: 100% !important;
}
/* ==============================
Prospecting Problem Area
============================== */
.prospecting-problem__container {
display: flex;
flex-direction: column;
gap: 1.38rem;
max-width: 48.75rem;
}
.prospecting-problem__content {
display: flex;
flex-direction: column;
gap: 1.38rem;
}
.prospecting-problem__workflow {
display: flex;
align-items: center;
gap: 1rem;
}
.prospecting-problem__step {
border-radius: 6px;
padding: 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 150px;
border-radius: 0.625rem;
border: 1px solid var(--color-moon-gray);
background: var(--color-cloud-white);
}
.prospecting-problem__step-title {
color: var(--text-color-navy);
margin-bottom: 2px;
}
.prospecting-problem__step-sub {
font-size: 12px;
color: var(--color-steel-gray);
font-weight: 500;
}
.prospecting-problem__arrow {
color: var(--color-gray-blue);
font-size: 18px;
user-select: none;
}
/* ==============================
Animation
============================== */
.account-approach {
background-color: var(--color-cloud-white);
}
.account-approach__container {
display: flex;
flex-direction: column;
gap: 1.37rem;
max-width: 48.75rem;
}
.account-approach__content {
display: flex;
flex-direction: column;
gap: 1.37rem;
}
.account-approach__diagram {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
}
.account-approach__target-card {
background-color: var(--color-primary);
color: var(--text-color-white);
border-radius: 12px;
padding: 18px 48px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 10px 25px rgba(49, 46, 129, 0.15);
}
.account-approach__target-title {
color: var(--text-color-white);
line-height: 1;
}
.account-approach__target-sub {
font-size: 0.75rem;
color: var(--text-color-white);
}
.account-approach__arrow {
margin: 16px 0;
color: var(--color-steel-gray);
font-size: 18px;
user-select: none;
}
.account-approach__roles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
width: 100%;
margin-bottom: 24px;
}
.account-approach__role-card {
background-color: var(--text-color-white);
border-radius: 6px;
padding: 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
}
.account-approach__role-title {
font-size: 0.875rem;
color: var(--text-color-navy);
line-height: 1;
}
.account-approach__role-sub {
font-size: 0.75rem;
color: var(--color-steel-gray);
}
.account-approach__caption {
font-size: 13px;
color: var(--color-steel-gray);
text-align: center;
}
/* ==============================
Inverted Benefits Area
============================== */
.inverted-benefits {
background-color: var(--text-color-white);
}
.inverted-benefits__title {
margin-bottom: 3.7rem;
text-align: center;
}
.inverted-benefits__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.inverted-benefits__card {
display: flex;
flex-direction: column;
gap: 0.88rem;
}
.inverted-benefits__number {
font-weight: 400;
color: #CDC8FA;
;
line-height: 1;
}
.inverted-benefits__card-title {
font-weight: 500;
color: var(--text-color-navy);
}
.inverted-benefits__card-text {
color: var(--text-color-primary);
}
/* ==============================
Product Showcase Area
============================== */
.product-showcase {
background-color: var(--color-cloud-white);
}
.product-showcase__container {
display: flex;
flex-direction: column;
align-items: center;
}
.product-showcase__header {
text-align: center;
max-width: 60rem;
}
.product-showcase__media {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 28px;
}
.product-showcase__image {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
border: 1px solid var(--color-moon-gray);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}
.product-showcase__caption {
color: var(--color-steel-gray);
text-align: center;
margin-top: 1.5rem;
}
/* ==============================
Free Trail Area
============================== */
.free-trial-cta {
padding: 100px 20px;
background-color: var(--text-color-white);
text-align: center;
border-bottom: 1px solid var(--color-primary-light);
}
.free-trial-cta__container {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.free-trial-cta__actions {
width: 100%;
}
/* ==============================
Hero Hub Spot Area
============================== */
.hero--hub-spot {
position: relative;
}
.hero--hub-spot .bg-wrap {
max-height: 100% !important;
}
.header-area-center .subtitle-group {
justify-content: center;
}
.hero--hub-spot .hero__header-area {
max-width: 50rem;
}
.hero--hub-spot .hero__desc {
max-width: 43rem;
}
.hero--hub-spot .hero__short-desc {
margin: 2rem 0 7rem 0;
}
.hubspot-integration__visual-card {
position: relative;
background-color: var(--text-color-white);
border-radius: var(--radius-xl);
padding: 1.22rem 1.55rem;
width: 100%;
max-width: 620px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
border: 1px solid var(--color-muted);
position: relative;
}
.hubspot-integration__visual-card::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 56.25rem;
background: radial-gradient(50% 50% at 50% 50%, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0.00) 100%);
}
.hubspot-integration__card-item {
flex-grow: 1;
padding: 1.5rem;
max-width: 12rem;
width: 100%;
background-color: var(--text-color-white);
border-radius: var(--radius-3xl);
border: 1px solid rgba(16, 24, 40, 0.06);
box-shadow: 0 8px 24px 0 rgba(16, 24, 40, 0.08);
}
.hubspot-integration__card-item--rotated {
transform: rotate(8deg);
padding-bottom: 1rem;
padding-top: 1rem;
}
.hubspot-integration__logo-leadvaro {
display: flex;
align-items: center;
gap: 8px;
}
.hubspot-integration__logo-text {
font-size: 20px;
font-weight: 700;
color: var(--text-color-navy);
}
.hubspot-integration__sync-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.hubspot-integration__sync-label {
font-size: 10px;
font-weight: 700;
color: var(--color-gray-blue);
letter-spacing: 0.08em;
}
.hubspot-integration__sync-dots {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-primary);
font-weight: bold;
}
.hubspot-integration__sync-dots span {
width: 4px;
height: 4px;
background-color: rgba(79, 70, 229, 0.35);
border-radius: 50%;
}
.hubspot-integration__sync-dots span:last-of-type {
background-color: var(--color-primary);
}
.hubspot-integration__logo-hubspot {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.hubspot-integration__hubspot-text {
font-size: 13px;
font-weight: 700;
color: var(--text-color-primary);
}
.hubspot-integration__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.hubspot-integration__tag {
background-color: var(--text-color-white);
border: 1px solid var(--color-moon-gray);
color: var(--color-twilight);
font-size: 0.75rem;
font-weight: 500;
padding: 0.37rem 0.7rem;
border-radius: 20px;
}
/* ==============================
Integration Workflow Area
============================== */
.integration-workflow {
background-color: var(--text-color-white);
}
.integration-workflow__header {
text-align: center;
}
.integration-workflow__badge {
display: inline-block;
color: var(--color-primary);
font-size: 0.75rem;
font-weight: 500;
}
.integration-workflow__desc {
color: var(--text-color-primary);
}
.integration-workflow__card-wrapper {
border-radius: var(--radius-2xl);
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
.integration-workflow__grid {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
gap: 0.3rem;
}
.integration-workflow__step {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.12rem;
}
.integration-workflow__connector {
width: 2.5rem;
height: 0.175rem;
background-color: var(--color-moon-gray);
margin-top: 100px;
flex-shrink: 0;
}
.integration-workflow__step-header {
display: flex;
align-items: center;
gap: 8px;
}
.integration-workflow__step-number {
width: 22px;
height: 22px;
background-color: var(--color-primary);
color: var(--text-color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 500;
}
.integration-workflow__step-tag {
color: var(--color-steel-gray);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.075rem;
}
.integration-workflow__mockup-img {
width: 100%;
object-fit: cover;
}
.integration-workflow__step-description {
color: var(--text-color-primary);
}
/* ==============================
Sync Mapping
============================== */
.sync-mapping {
background: var(--color-cloud-white);
}
.sync-mapping__badge {
color: var(--color-vivid-indigo);
background: transparent;
}
.sync-mapping__card {
border-radius: 16px;
width: 100%;
padding: 2.5rem;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
}
.sync-mapping__table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-muted);
margin-bottom: 8px;
}
.sync-mapping__col-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
color: var(--color-steel-gray);
letter-spacing: 0.05em;
text-transform: uppercase;
flex-grow: 1;
}
.sync-mapping__dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.sync-mapping__dot--blue {
background-color: var(--color-primary);
}
.sync-mapping__dot--orange {
background-color: #f97316;
}
.sync-mapping__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px solid var(--color-muted);
}
.sync-mapping__row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sync-mapping__left {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.sync-mapping__icon {
width: 36px;
height: 36px;
background-color: #eeeffe;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sync-mapping__info {
display: flex;
flex-direction: column;
}
.sync-mapping__field-title {
color: var(--text-color-navy);
}
.sync-mapping__field-desc {
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
}
.sync-mapping__arrow {
color: var(--color-slate-light);
font-size: 14px;
padding: 0 24px;
}
.sync-mapping__right {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.sync-mapping__property-tag {
background: #FFF2ED;
color: #D94F2D;
padding: 4px 10px;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
border-radius: 0.4375rem;
}
.sync-mapping__link {
color: var(--color-primary);
text-align: center;
text-decoration: none;
transition: color 0.2s ease;
}
.sync-mapping__link:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* ==============================
Target Audiences Area
============================== */
.target-audiences {
position: relative;
}
.target-audiences__badge {
display: inline-block;
background: transparent;
}
.target-audiences__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.target-audiences__card {
background-color: var(--text-color-white);
border-radius: var(--radius-2xl);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.16);
background: var(--text-color-white);
}
.target-audiences__tag-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.target-audiences__card-title {
font-weight: 500;
}
.target-audiences__icon {
width: 2.375rem;
height: 2.375rem;
background-color: var(--color-light-indigo);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.target-audiences__tag {
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.075rem;
text-transform: uppercase;
}
.target-audiences__card-desc {
flex-grow: 1;
margin-bottom: 1.25rem;
}
.target-audiences__stat {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0rem 0.75rem;
}
.target-audiences__stat-number {
font-weight: 500;
color: #0B8954;
}
.target-audiences__stat-label {
color: var(--color-steel-gray);
font-weight: 500;
}
.target-audiences__quote {
color: var(--color-steel-gray);
font-style: normal;
}
/* ==============================
Quick Setup Area
============================== */
.quick-setup {
background-color: var(--text-color-white);
}
.quick-setup__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
}
.quick-setup--style-two {
background: var(--color-cloud-white);
}
.quick-setup--style-two .quick-setup__grid {
align-items: center;
background: var(--text-color-white);
padding: 3rem 1.5rem;
border-radius: var(--radius-3xl);
border: 1px solid var(--color-moon-gray);
}
/* Left Side Styling */
.quick-setup__content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.quick-setup__badge {
background: transparent;
}
.quick-setup__steps {
list-style: none;
padding: 0;
margin: 0 0 36px 0;
display: flex;
flex-direction: column;
}
.quick-setup__step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 28px;
}
.quick-setup__step:last-child {
padding-bottom: 0;
}
.quick-setup__step:not(:last-child)::before {
content: '';
position: absolute;
top: 24px;
left: calc(1.875rem / 2);
width: 1px;
height: calc(100% - 20px);
background-color: var(--color-moon-gray);
}
.quick-setup__step-number {
display: flex;
width: 1.875rem;
height: 1.875rem;
justify-content: center;
align-items: center;
border-radius: var(--radius-full);
background-color: var(--color-light-indigo);
color: var(--color-primary);
flex-shrink: 0;
z-index: 1;
}
.quick-setup__step-number--active {
background-color: #EBFFF6;
color: #17B26A;
}
.quick-setup__step-details {
display: flex;
flex-direction: column;
gap: 0.30rem;
}
.quick-setup__step-title {
color: var(--text-color-navy);
letter-spacing: 0;
}
.quick-setup__step-text {
color: var(--color-steel-gray);
line-height: 1.4;
}
.quick-setup__img {
width: 100%;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
box-shadow: 0 8px 24px 0 rgba(15, 23, 41, 0.06);
}
.quick-setup__docs-link {
margin-top: 1.5rem;
display: inline-block;
}
/* ==============================
Customer Story Area
============================== */
.customer-story {
background-color: var(--color-light-indigo);
display: flex;
justify-content: center;
}
.customer-story__content-area {
max-width: 60rem;
width: 100%;
padding: 3rem;
display: flex;
align-items: center;
gap: 48px;
border-radius: var(--radius-2xl);
border: 1px solid #C9F0DD;
background: var(--text-color-white);
margin: 0 auto;
}
.customer-story__quote-wrapper {
flex: 1.8;
display: flex;
flex-direction: column;
}
.customer-story__quote {
font-weight: 500;
color: var(--text-color-navy);
margin-bottom: 1.75rem;
}
.customer-story__author {
display: flex;
gap: 0.88rem;
}
.customer-story__avatar {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
object-fit: cover;
}
.customer-story__author-info {
display: flex;
flex-direction: column;
}
.customer-story__author-name {
color: var(--text-color-navy);
line-height: 1.2;
margin-top: 2px;
}
.customer-story__author-role {
color: var(--color-steel-gray);
line-height: 1.2;
}
.customer-story__divider {
width: 1px;
height: 120px;
background-color: var(--color-muted);
flex-shrink: 0;
}
.customer-story__stats-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.customer-story__stat-number {
color: #17B26A;
line-height: 1;
margin-bottom: 0.5rem;
}
.customer-story__stat-label {
color: var(--text-color-primary);
margin-bottom: 0.5rem;
}
.customer-story__stat-sublabel {
color: var(--color-steel-gray);
line-height: 1.2;
}
.customer-story--style-two {
background-color: var(--text-color-white);
}
.customer-story--style-two .customer-story__quote-wrapper {
justify-content: center;
align-items: center;
}
.customer-story--style-two .customer-story__quote {
text-align: center;
}
.customer-story--style-two .customer-story__content-area {
background-color: var(--color-light-indigo);
}
/* ==============================
Hero Features Area
============================== */
.hero--features {
position: relative;
}
.hero__badge-group {
display: flex;
flex-wrap: wrap;
gap: 0 0.5rem;
align-items: center;
}
.hero__badge .hero__badge-text {
padding: 0;
background: transparent;
}
.hero--features .hero__header-area {
text-align: center;
max-width: 54rem;
margin: 0 auto;
}
.hero--features .hero__desc {
max-width: 40rem;
}
.hero--features .hero__cta-wrap {
margin-top: 1.5rem;
}
.hero--features .hero__tags {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0 1.25rem;
list-style: none;
padding: 0;
margin: 0;
margin-top: 1rem;
}
.hero--features .hero__tag {
position: relative;
color: var(--color-steel-gray);
font-weight: 400;
}
.hero--features .hero__tag:not(:first-child) {
padding-left: 1.25rem;
}
.hero--features .hero__tag:not(:first-child)::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background-color: var(--color-gray-blue);
border-radius: 50%;
}
.hero--features .bg-wrap {
max-height: 100% !important;
}
/* ==============================
Feature Spine Area
============================== */
.feature-spine {
background-color: var(--color-cloud-white);
}
.feature-spine__header {
max-width: 47rem;
}
.feature-spine__badge {
background-color: transparent;
}
.feature-spine__content {
width: 100%;
position: relative;
}
.feature-spine__timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-bottom: 24px;
}
.feature-spine__line {
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 0.375rem;
background: linear-gradient(90deg, #BAB4F8 0%, var(--color-primary) 100%);
transform: translateY(-50%);
z-index: 1;
}
.feature-spine__step-badge {
width: 2.5rem;
height: 2.5rem;
border-radius: 1.25rem;
border: 2px solid #BAB4F8;
border-radius: var(--radius-full);
background-color: var(--text-color-white);
color: var(--color-vivid-indigo);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
z-index: 2;
}
.feature-spine__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.feature-spine__card {
background-color: var(--text-color-white);
border-radius: 12px;
padding: 24px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--color-muted);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.feature-spine__card-body {
text-align: center;
}
.feature-spine__card-title {
color: var(--text-color-navy);
margin-bottom: 0.75rem;
}
.feature-spine__card-text {
color: var(--text-color-primary);
margin-bottom: 0.75rem;
}
/* Inner Stat Box */
.feature-spine__stat {
background-color: var(--text-color-white);
border: 1px solid var(--color-moon-gray);
border-radius: var(--radius-md);
padding: 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.feature-spine__stat-number {
font-weight: 500;
color: #A29AF4;
}
/* Footer Note */
.feature-spine__footer-note {
display: flex;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--color-steel-gray);
text-align: center;
}
.feature-spine__footer-dot {
width: 5px;
height: 5px;
background-color: var(--color-primary);
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.feature-spine__footer-text {
margin-top: -8px;
}
/* ==============================
Core Pillars Area
============================== */
.core-pillars {
background-color: var(--text-color-white);
}
.core-pillars__header {
text-align: center;
max-width: 600px;
margin-bottom: 56px;
}
.core-pillars__badge {
background: transparent;
}
.core-pillars__grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 24px;
width: 100%;
}
.core-pillars__column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.core-pillars__card {
background-color: var(--text-color-white);
border-radius: 20px;
border: 1px solid var(--color-moon-gray);
padding: 1.75rem 1.75rem 0 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
justify-content: space-between;
overflow: hidden;
}
.core-pillars__card-content {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.core-pillars__card--featured {
padding: 2.25rem 2.25rem 0 2.25rem;
}
.core-pillars__icon-box {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.6875rem;
background-color: var(--color-light-indigo);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.core-pillars__card-title {
color: var(--text-color-navy);
font-weight: 500;
}
.core-pillars__media {
width: 100%;
margin-top: auto;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
.core-pillars__media--compact {
max-height: 180px;
}
.core-pillars__image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: top left;
}
/* ==============================
Secondary Features Area
============================== */
.secondary-features {
background-color: var(--text-color-white);
}
.secondary-features__badge {
background: transparent;
}
.secondary-features__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 32px;
width: 100%;
}
.secondary-features__card {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
border-top: 1px solid var(--color-moon-gray);
transition: 0.4ms ease;
}
.secondary-features__card:hover {
background-color: var(--color-cloud-white);
}
.secondary-features__card-header {
display: flex;
align-items: center;
gap: 0.6rem;
}
.secondary-features__icon-box {
display: flex;
width: 1.875rem;
height: 1.875rem;
justify-content: center;
align-items: center;
background: var(--color-light-indigo);
color: var(--color-primary);
border-radius: var(--radius-md);
}
.secondary-features__card-title {
color: var(--text-color-navy);
letter-spacing: 0;
}
.secondary-features__custom-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color-navy);
margin-bottom: 8px;
}
/* ==============================
Animation
============================== */
.changelog {
background-color: var(--text-color-white);
}
.changelog__container {
max-width: 67.5rem;
}
.changelog__item {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px;
padding: 2.5rem 0;
}
.changelog__item:not(:first-child) {
border-top: 1px solid var(--color-primary-light);
}
.changelog__item:first-child {
padding-top: 0;
}
.changelog__date {
font-size: 13px;
color: var(--color-steel-gray);
font-weight: 500;
padding-top: 4px;
}
.changelog__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.changelog__badge {
background-color: var(--color-light-indigo);
color: var(--color-primary);
padding: 0.25rem 0.63rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-full);
}
.changelog__badge--improvement {
background-color: var(--color-light-indigo);
color: var(--color-primary);
}
.changelog__badge--bugfix {
background-color: var(--color-muted);
;
color: var(--color-steel-gray);
}
.changelog__badge--feature {
background-color: #F0FDF4;
color: #16A34A;
padding: 0.25rem 0.63rem;
}
.changelog__title {
font-weight: 500;
color: var(--text-color-navy);
}
.changelog__media {
width: 100%;
margin-bottom: 16px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-muted);
}
.changelog__img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.changelog__footer {
text-align: center;
padding-top: 4rem;
padding-bottom: 1.3rem;
}
.changelog__footer-text {
font-size: 13px;
color: var(--color-steel-gray);
margin-bottom: 6px;
}
/* ==============================
Hero Changelog Area
============================== */
.hero--changelog {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.hero--changelog .bg-wrap {
max-height: 100% !important;
}
.hero--changelog .hero__container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero--changelog .hero__form {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 480px;
}
.hero--changelog .hero__input {
flex: 1;
height: 44px;
padding: 0 16px;
font-size: 14px;
padding: 1.2rem 0.5rem;
border: 1px solid var(--color-moon-gray);
border-radius: 8px;
background-color: var(--text-color-white);
color: var(--text-color-navy);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero--changelog .hero__input::placeholder {
color: var(--color-gray-blue);
}
.hero--changelog .hero__input:focus {
border-color: var(--color-vivid-indigo);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* ==============================
Value Props Area
============================== */
.value-props {
background-color: var(--color-cloud-white);
}
.value-props__title {
text-align: center;
}
.value-props__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.value-props__card {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
padding-top: 1rem;
border-top: 0.125rem solid var(--color-primary);
}
.value-props__badge {
color: var(--color-primary);
text-transform: uppercase;
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.075rem;
}
.value-props__card-title {
font-weight: 500;
color: var(--text-color-navy);
}
/* ==============================
Steps Timeline Area
============================== */
.steps-timeline {
padding: 100px 20px;
display: flex;
justify-content: center;
background: var(--text-color-white);
}
.steps-timeline__container {
max-width: 1080px;
width: 100%;
}
.steps-timeline__badge {
background: transparent;
}
.steps-timeline__list {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.steps-timeline__item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.steps-timeline__item--reverse .steps-timeline__content {
order: 2;
}
.steps-timeline__item--reverse .steps-timeline__media {
order: 1;
}
.steps-timeline__content {
display: flex;
flex-direction: column;
gap: 0.88rem;
align-items: flex-start;
}
.steps-timeline__number {
color: var(--text-color-white);
display: flex;
width: 2.5rem;
height: 2.5rem;
justify-content: center;
align-items: center;
background-color: var(--color-primary);
border-radius: var(--radius-full);
}
.steps-timeline__item-title {
font-weight: 500;
color: var(--text-color-navy);
}
.steps-timeline__img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* ==============================
Hero Sales Prospecting Area
============================== */
.hero--sales-prospecting {
position: relative;
}
.hero--sales-prospecting .bg-wrap {
max-height: 100% !important;
}
.hero--sales-prospecting .hero__avatar-area {
justify-content: start;
}
.hero--sales-prospecting .hero__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.75rem;
align-items: center;
}
.hero--sales-prospecting .hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.75rem;
}
.hero--sales-prospecting .hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--text-color-white);
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--color-moon-gray);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.hero--sales-prospecting .hero__badge-dot {
width: 8px;
height: 8px;
background-color: #10b981;
border-radius: 50%;
}
.hero--sales-prospecting .hero__badge-text {
font-size: 13px;
font-weight: 500;
color: var(--text-color-primary);
}
.hero--sales-prospecting .hero__actions {
display: flex;
align-items: center;
justify-content: start;
}
.avatar__title {
font-weight: 400;
letter-spacing: 0;
color: var(--text-color-navy);
}
.hero--sales-prospecting .hero__footer-note {
font-size: 13px;
color: var(--color-gray-blue);
color: var(--text-muted);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.33;
letter-spacing: 0.025rem;
}
.hero--sales-prospecting .hero__media {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.hero--sales-prospecting .hero__img {
width: 100%;
height: auto;
display: block;
}
/* ==============================
Hero Outbound Area
============================== */
.hero--outbound {
position: relative;
}
.hero--outbound .hero__badge-group {
justify-content: center;
}
.hero--outbound .hero__short-desc {
text-align: center;
margin-top: 0.5rem;
}
.hero--outbound .hero__desc {
max-width: 43rem;
}
.hero--outbound .hero__header-area {
max-width: 57rem;
}
.hero--outbound .hero__content {
position: relative;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* ==============================
Whole Stack Area
============================== */
.whole-stack {
background: var(--text-color-white);
}
.whole-stack__header {
text-align: center;
max-width: 42rem;
}
.whole-stack__badge {
background-color: transparent;
}
.whole-stack__comparison {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.stack-card {
border-radius: 20px;
padding: 32px;
box-sizing: border-box;
}
.stack-card--old {
background-color: var(--color-cloud-white);
flex: 1;
padding: 2rem;
border-radius: var(--radius-2xl);
}
.stack-card--new {
background-color: var(--color-light-indigo);
flex: 1;
max-width: 550px;
padding: 36px;
}
.stack-card__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 1.12rem;
}
.stack-card__title {
font-weight: 500;
color: var(--color-steel-gray);
text-transform: uppercase;
}
.stack-card__badge {
padding: 0.12rem 0.5rem;
border-radius: 12px;
font-weight: 500;
}
.stack-card__badge--red {
background-color: #FEEDEC;
color: #CC3D30;
}
.stack-card__badge--blue {
background-color: var(--color-soft-indigo);
color: #4338ca;
}
.stack-card__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.stack-item {
background-color: var(--text-color-white);
border: 1px dashed var(--color-slate-light);
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.stack-item__icon {
width: 1.75rem;
height: 1.75rem;
background-color: #eff6ff;
color: #3b82f6;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.stack-item__info {
flex-grow: 1;
}
.stack-item__title {
color: var(--text-color-navy);
line-height: 1;
}
.stack-item__desc {
font-size: 12px;
color: var(--color-gray-blue);
margin: 2px 0 0;
}
.stack-item__status {
font-size: 12px;
color: var(--color-gray-blue);
}
.whole-stack__arrow {
width: 44px;
height: 44px;
background-color: var(--color-primary);
color: var(--text-color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stack-card__logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: 700;
color: var(--text-color-navy);
margin-bottom: 32px;
}
.stack-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.12rem;
}
.stack-card__features li {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-color-primary);
}
.whole-stack__footer {
text-align: center;
font-size: 13px;
color: var(--color-gray-blue);
margin: 0;
}
/* ==============================
Outbound Teams Area
============================== */
.outbound-teams {
background-color: var(--text-color-white);
}
.outbound-teams__title {
text-align: center;
}
.outbound-teams__list {
border-top: 1px solid var(--color-muted);
}
.outbound-teams__item {
display: grid;
grid-template-columns: 340px 1fr 160px;
align-items: center;
gap: 40px;
padding: 36px 0;
border-bottom: 1px solid var(--color-muted);
}
.outbound-teams__col-title {
display: flex;
align-items: flex-start;
gap: 16px;
}
.outbound-teams__icon {
width: 3rem;
height: 3rem;
background-color: var(--color-light-indigo);
color: var(--color-primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.outbound-teams__item-title-wrap {
display: flex;
flex-direction: column;
}
.outbound-teams__category {
font-weight: 500;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--color-primary);
}
.outbound-teams__item-title {
font-weight: 500;
color: var(--text-color-navy);
}
.outbound-teams__col-desc {
max-width: 600px;
}
.outbound-teams__arrow {
transition: transform 0.2s ease;
}
.outbound-teams__link:hover .outbound-teams__arrow {
transform: translateX(3px);
}
/* ==============================
Animation
============================== */
.data-metrics {
background-color: var(--color-cloud-white);
}
.data-metrics__title {
font-weight: 500;
text-align: center;
}
.data-metrics__stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
background-color: var(--text-color-white);
margin: 3rem 0;
padding: 1rem 0;
max-width: fit-content;
margin-left: auto !important;
margin-right: auto !important;
}
.data-metrics__stat-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
padding: 0 2.5rem;
}
.data-metrics__stat-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 15%;
height: 70%;
width: 1px;
background-color: var(--color-moon-gray);
}
.data-metrics__number {
font-weight: 500;
color: var(--text-color-navy);
}
.data-metrics__preview {
display: flex;
justify-content: center;
align-items: center;
}
.data-metrics__image-box {
width: 100%;
border-radius: var(--radius-2xl);
overflow: hidden;
}
.data-metrics__img {
width: 100%;
height: auto;
display: block;
}
/* ==============================
Company Details Area
============================== */
/* Base Section */
.company-details {
background-color: var(--text-color-white);
}
.company-details__card {
background-color: var(--color-cloud-white);
border-radius: 16px;
padding: 1.75rem 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 3rem;
}
.company-details__label {
display: block;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.company-details__value {
color: var(--text-color-navy);
}
/* ==============================
Animation
============================== */
.results-impact {
background-color: var(--text-color-white);
}
.results-impact__tag {
background: transparent;
padding: 0;
}
.results-impact__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.62rem;
margin: 3.5rem 0;
}
.results-impact__card {
background-color: var(--color-cloud-white);
border-radius: var(--radius-xl);
padding: 1.60rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.results-impact__card-label {
font-size: 14px;
color: var(--color-twilight);
line-height: 1.4;
margin-bottom: 20px;
flex-grow: 1;
}
.results-impact__card-badge {
font-size: 12px;
color: var(--color-steel-gray);
background-color: var(--text-color-white);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--color-moon-gray);
}
.results-impact__table-box {
background-color: var(--color-cloud-white);
border: 1px solid var(--color-moon-gray);
border-radius: 16px;
overflow: hidden;
margin-bottom: 3.5rem;
}
.results-impact__table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.results-impact__table th {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--color-steel-gray);
text-transform: uppercase;
padding: 20px 24px;
border-bottom: 1px solid var(--color-moon-gray);
}
.results-impact__table td {
padding: 20px 24px;
font-size: 14px;
color: var(--color-twilight);
border-bottom: 1px solid var(--color-moon-gray);
}
.results-impact__table tbody tr:last-child td {
border-bottom: none;
}
.results-impact__highlight {
font-weight: 600;
color: var(--color-primary) !important;
}
.results-impact__badge {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.results-impact__badge--green {
background-color: #EBFFF6;
;
color: #17B26A;
}
.results-impact__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.results-impact__paragraph {
font-size: 15px;
line-height: 1.65;
color: var(--color-twilight);
margin: 0;
}
/* ==============================
Solution Case Area
============================== */
.solution-case {
background-color: var(--color-surface);
}
.solution-case__wrapper {
border-radius: var(--radius-3xl);
background: var(--text-color-white);
border-radius: var(--radius-3xl);
padding: 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
border: 1px solid rgba(79, 70, 229, 0.10);
}
.solution-case__workflow {
margin-bottom: 36px;
}
.solution-case__workflow-label {
font-weight: 500;
}
.solution-case__steps {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.solution-case__step {
font-size: 13px;
font-weight: 500;
color: var(--color-primary);
}
.solution-case__step--highlight {
background-color: var(--color-soft-indigo);
padding: 4px 10px;
border-radius: 6px;
}
.solution-case__arrow {
font-size: 13px;
color: var(--color-gray-blue);
}
.solution-case__workflow {
margin-top: 2rem;
}
.solution-case__quote {
font-size: 18px;
font-weight: 500;
color: var(--text-color-navy);
line-height: 1.4;
margin: 0 0 24px 0;
}
.solution-case__author {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.solution-case__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.solution-case__author-name {
font-size: 14px;
font-weight: 600;
color: var(--text-color-navy);
margin: 0;
line-height: 1.2;
}
.solution-case__author-title {
font-size: 12px;
color: var(--color-steel-gray);
}
.solution-case__link {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: var(--color-vivid-indigo);
text-decoration: none;
}
.solution-case__link:hover {
text-decoration: underline;
}
.solution-case__side {
align-items: center;
}
.solution-case__side img {
width: 100%;
}
.solution-case__card {
border-radius: var(--radius-2xl);
overflow: hidden;
}
.solution-case__card-caption {
text-align: center;
margin-top: 1.5rem;
}
/* ==============================
Challenge Overview Area
============================== */
.challenge-overview {
background: var(--text-color-white);
}
.challenge-overview__container {
max-width: 45rem;
}
.challenge-overview__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.challenge-overview__tag {
background: transparent;
padding: 0;
}
.challenge-overview__quote {
border-left: 3px solid var(--color-primary);
padding-left: 1.5rem;
}
.challenge-overview__quote-text {
font-weight: 500;
color: var(--text-color-navy);
}
/* ==============================
Hero Case Study Two
============================== */
.hero--case-study-two {
position: relative;
}
.hero--case-study-two .bg-wrap {
max-height: 100% !important;
}
.hero--case-study-two .hero__image-wrap img {
width: 100%;
}
.hero--case-study-two .hero__cta {
justify-content: start;
}
.hero--case-study-two .hero__content {
display: grid;
grid-template-columns: 1fr 550px;
gap: 3.75rem;
align-items: center;
margin-top: 0;
}
.hero--case-study-two .hero__video-wrap {
max-width: fit-content;
overflow: hidden;
text-align: center;
border-radius: 1.375rem;
border: 1px solid var(--color-moon-gray);
background: var(--text-color-white);
box-shadow: 0 16px 40px -4px rgba(15, 23, 41, 0.10);
}
.hero--case-study-two .hero__header {
max-width: 720px;
}
.hero--case-study-two .hero__video-wrap img {
width: 100%;
object-fit: contain;
}
/* ==============================
Animation
============================== */
.cost-comparison {
padding: 80px 0;
background-color: var(--text-color-white);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-color-navy);
}
.cost-comparison__header {
max-width: 35.4rem;
}
.cost-comparison__subtitle {
font-size: 15px;
color: var(--color-steel-gray);
line-height: 1.6;
margin: 0;
}
.cost-comparison__grid {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: relative;
overflow: hidden;
padding-top: 1rem;
}
.cost-comparison__vs {
display: block;
position: relative;
height: 100%;
}
.cost-comparison__vs::after {
position: absolute;
content: "";
height: 46rem;
width: 3px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(180deg, rgba(225, 226, 228, 0.00) 0%, #E1E2E4 50%, rgba(225, 226, 228, 0.00) 100%);
}
.cost-comparison__vs span {
position: relative;
width: 40px;
height: 40px;
background-color: var(--text-color-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--color-steel-gray);
z-index: 5;
flex-shrink: 0;
border-radius: var(--radius-full);
border: 4px solid #E1E2E4;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.cost-card {
flex: 1;
max-width: 440px;
border-radius: 24px;
padding: 2rem;
box-sizing: border-box;
position: relative;
}
.cost-card--primary {
background-color: var(--text-color-white);
border: 2px solid var(--color-primary);
box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.15);
}
.cost-card__badge {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
background-color: var(--color-primary);
color: var(--text-color-white);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 6px 16px;
border-radius: 20px;
white-space: nowrap;
}
.cost-card__top {
margin-top: 8px;
}
.cost-card__brand {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.cost-card__subtext {
color: var(--color-steel-gray);
}
.cost-card__divider {
border: none;
border-top: 1px solid var(--color-muted);
margin: 20px 0;
}
.cost-card__section-label {
display: block;
font-weight: 400;
color: #4A4454;
margin-bottom: 1rem;
}
.cost-card__features {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cost-card__features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 400;
color: var(--text-color-navy);
}
.cost-card__check-icon {
width: 20px;
height: 20px;
background-color: #EADDFF;
color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cost-card__sources-box {
background-color: #F2F4F6;
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.cost-card__sources-label {
color: #4A4454;
display: block;
margin-bottom: 12px;
}
.cost-card__sources-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.cost-card__source-item {
display: flex;
align-items: center;
padding: 0.5rem;
color: var(--text-color-primary);
text-align: center;
border-radius: var(--radius-md);
border: 1px solid #E1E2E4;
background: var(--text-color-white);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.cost-card--secondary .cost-card__source-item {
box-shadow: none;
border: none;
}
.cost-card--secondary .cost-card__stack-list {
gap: 1.5rem;
}
.cost-card__sources-more {
background-color: #EADDFF;
color: var(--color-primary);
font-weight: 500;
text-align: center;
padding: 8px;
border-radius: 8px;
}
.cost-card--secondary {
background-color: #F2F1FC;
}
.cost-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.cost-card__title {
font-weight: 700;
color: #4A4454;
margin: 0;
}
.cost-card__icon-box {
color: var(--color-gray-blue);
}
.cost-card__stack-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 24px;
}
.cost-card__stack-item {
background-color: var(--text-color-white);
border-radius: 10px;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.cost-card__stack-item img {
object-fit: cover;
width: 100%;
}
.cost-card__provider {
font-size: 13px;
font-weight: 600;
color: var(--text-color-navy);
}
.cost-card__provider-more {
color: #191C1E;
display: flex;
align-items: center;
gap: 0.5rem;
}
.cost-card__provider-more span {
display: flex;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
align-items: center;
justify-content: center;
background: #EDEEF0;
font-size: 14px;
}
.cost-card__provider-price {
font-size: 13px;
color: var(--color-steel-gray);
}
.cost-card__total-box {
border-radius: var(--radius-xl);
padding: 1.5rem;
text-align: center;
}
.cost-card__total-box--dark {
background-color: #131314;
color: var(--text-color-white);
}
.cost-card__total-box--light {
border-radius: var(--radius-xl);
border: 1px solid #CCC3D6;
background: var(--text-color-white);
}
.cost-card__total-label {
display: block;
margin-bottom: 4px;
}
.cost-card__total-box--dark .cost-card__total-label {
color: var(--text-color-white);
}
.cost-card__total-box--light .cost-card__total-label {
color: var(--text-color-primary);
}
.cost-card__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
}
.cost-card__amount {
font-size: 32px;
color: var(--text-color-white);
}
.cost-card__amount--purple {
color: var(--color-primary);
}
.cost-card__period {
font-size: 1rem;
color: var(--text-color-white);
}
.cost-card__credits {
font-size: 1rem;
display: block;
margin-top: 2px;
}
.cost-card__total-box--dark .cost-card__credits {
color: var(--text-color-white);
}
.cost-card__total-box--light .cost-card__credits {
color: var(--text-color-primary);
}
/* ==============================
Security Trust Area
============================== */
.security-trust--style-two {
background-color: var(--color-surface);
}
.security-trust--style-two .security-trust__wrapper {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 64px;
align-items: center;
}
.security-trust--style-two .security-trust__info {
max-width: 480px;
}
.security-trust--style-two .security-trust__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.security-trust--style-two .trust-card {
background-color: var(--text-color-white) !important;
border-radius: var(--radius-xl);
padding: 3.75rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
border: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.security-trust--style-two .trust-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.security-trust--style-two .trust-card__icon {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
/* ==============================
Department Area
============================== */
.department {
background: var(--color-surface);
}
.department .department__header-left {
max-width: 35rem;
}
.department__desc {
max-width: 26rem;
}
.department .department__grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 1.5rem;
}
.department__card:nth-child(1),
.department__card:nth-child(2) {
grid-column: span 3;
}
.department__card:nth-child(3) {
grid-column: span 4;
}
.department__card:nth-child(4) {
grid-column: span 4;
}
.department__card:nth-child(5),
.department__card:nth-child(6) {
grid-column: span 3;
}
.department .department__card {
display: flex;
flex-direction: column;
padding: 1rem;
background: var(--text-color-white);
border-radius: var(--radius-lg);
overflow: hidden;
}
.department .department__card-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.department .department__card-title {
font-weight: 500;
}
.department .department__card-text {
max-width: 460px;
}
.department .department__card-link {
text-decoration: underline;
}
.department__card-img-area {
display: flex;
align-items: end;
width: 100%;
flex-grow: 1;
}
.department .department__card-img {
width: 100%;
object-fit: contain;
}
/* ==============================
Animation
============================== */
.hero--find-mobile {
position: relative;
}
.hero--find-mobile .hero__header-area {
max-width: 39rem;
}
.bulk--find-mobile .bulk__header-area {
max-width: 37rem;
}
.bulk--find-mobile .bulk__item--lg .bulk__item-text,
.bulk--find-mobile .bulk__item--lg .bulk__item-title {
max-width: 52rem;
}
/* ==============================
Hero Company Search Area
============================== */
.hero--company-search {
position: relative;
}
.hero__image-wrap {
width: 100%;
margin: 0 auto;
}
.hero--company-search .hero__header-area {
max-width: 44rem;
}
.hero--company-search .hero__image--small {
left: -6rem;
bottom: 0;
}
/* ==============================
Platform Stats Area
============================== */
.platform-stats {
background-color: var(--text-color-white);
}
.platform-stats__badge {
padding: 0;
background: transparent;
color: var(--color-primary);
}
.platform-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.stat-box {
background-color: var(--text-color-white);
border: 1px solid var(--color-light-indigo);
border-radius: var(--radius-md);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(79, 70, 229, 0.08) 46.39%, rgba(79, 70, 229, 0.08) 52.41%, rgba(79, 70, 229, 0.06) 67.17%, rgba(79, 70, 229, 0.00) 83.03%), var(--text-color-white);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stat-box:hover {
border-color: var(--color-slate-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.stat-box__icon-box {
width: 3rem;
height: 3rem;
background-color: var(--color-light-indigo);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--color-primary);
}
.stat-box__icon {
width: 18px;
height: 18px;
}
.stat-box__value {
font-weight: 400;
line-height: 1.1;
margin-bottom: 0.5rem;
color: var(--text-color-navy);
}
.stat-box__title {
font-weight: 500;
color: var(--text-color-navy);
margin-bottom: 0.25rem;
}
/* ==============================
Email Validator Area
============================== */
.email-validator {
background-color: var(--color-cloud-white);
}
.email-validator__content {
background: var(--text-color-white);
padding: 5rem;
border-radius: 3.57144rem;
}
.email-validator__title {
text-align: center;
}
.email-validator__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
.email-card {
border-radius: var(--radius-3xl);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1.429px solid var(--color-light-indigo);
background: rgba(255, 255, 255, 0.00);
box-shadow: 0 1.429px 2.857px 0 rgba(0, 0, 0, 0.05);
}
.email-card__header {
padding: 1.2rem 1.5rem;
text-align: center;
}
.email-card__header--generic {
background-color: #F5F3FF;
}
.email-card__header--brand {
background-color: var(--color-primary);
}
.email-card__heading {
margin: 0;
font-weight: 600;
}
.email-card__header--generic .email-card__heading {
color: var(--text-color-navy);
}
.email-card__header--brand .email-card__heading {
color: var(--text-color-white);
}
.email-card__body {
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.email-card__field {
display: flex;
flex-direction: column;
gap: 0.36rem;
}
.email-card__label {
color: var(--color-gray-blue);
font-weight: 500;
}
.email-card__value {
font-weight: 500;
color: var(--text-color-navy);
}
.email-card__status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.90rem 2.14rem;
border-radius: var(--radius-full);
font-weight: 600;
width: fit-content;
margin: 0 auto;
}
.email-card__status span {
text-align: center;
}
.email-card__status--warning {
border: 1.429px solid #FCD34D;
background: #FFFBEB;
color: #D97706;
}
.email-card__status--success {
background-color: var(--color-light-indigo);
color: var(--color-primary);
border: 1.429px solid var(--color-primary);
}
/* ==============================
Compliance Area
============================== */
/* Compliance Section Container */
.compliance {
background-color: var(--color-cloud-white);
}
.compliance__container {
padding-bottom: 3.75rem;
}
.compliance__content {
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3.5rem;
background-color: var(--text-color-white);
border-radius: var(--radius-xl);
}
.compliance__info-group {
display: flex;
align-items: center;
gap: 24px;
}
.compliance__check-icon {
width: 8rem;
height: 8rem;
min-width: 8rem;
border-radius: var(--radius-full);
background-color: var(--color-light-indigo);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.compliance__details {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.compliance__title {
margin: 0;
font-weight: 500;
color: var(--text-color-navy);
}
.compliance__badges {
display: flex;
gap: 16px;
}
.compliance-card__img {
width: 100%;
min-width: 7rem;
object-fit: cover;
}
/* ==============================
Tools Suite Area
============================== */
.tools-suite {
background-color: var(--text-color-white);
}
.tools-suite__header-area {
max-width: 39rem;
}
.tools-suite__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: var(--radius-md);
gap: 1rem;
overflow: hidden;
}
.tool-card {
padding: 1.25rem;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(79, 70, 229, 0.08) 46.39%, rgba(79, 70, 229, 0.08) 52.41%, rgba(79, 70, 229, 0.06) 67.17%, rgba(79, 70, 229, 0.00) 83.03%), #FFF;
transition: background-color 0.2s ease;
}
.tool-card:hover {
background-color: var(--color-cloud-white);
}
.tool-card__icon {
width: 2.5rem;
height: 2.5rem;
padding: 0.38rem;
border-radius: var(--radius-md);
background-color: var(--text-color-white);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5rem;
}
.tool-card__icon svg {
width: 2rem;
}
.tool-card__title {
font-weight: 400;
color: var(--text-color-navy);
margin: 0 0 1rem;
letter-spacing: -0.01em;
}
.tool-card__text {
margin-bottom: 2.5rem;
flex-grow: 1;
}
.tool-card__link {
color: var(--color-primary);
text-decoration: underline;
display: inline-flex;
align-items: center;
transition: color 0.2s ease;
}
.tool-card__link:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Container & Mask */
.tags-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 20px 0;
mask-image: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
-webkit-mask-image: linear-gradient(to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
}
.tags-marquee__track {
display: flex;
flex-direction: column;
gap: 12px;
}
.tags-marquee__row {
display: flex;
width: max-content;
}
.tags-marquee__content {
display: flex;
align-items: center;
gap: 10px;
padding-right: 10px;
will-change: transform;
}
/* Animations */
.tags-marquee__content--rtl {
animation: marqueeScrollRTL 30s linear infinite;
}
.tags-marquee__content--ltr {
animation: marqueeScrollLTR 30s linear infinite;
}
/* Pause on hover */
.tags-marquee__row:hover .tags-marquee__content {
animation-play-state: paused;
}
.tags-marquee__tag {
display: inline-flex;
align-items: center;
padding: 0.75rem;
background-color: #F1F0FD;
color: var(--text-color-primary);
font-size: 1rem;
font-weight: 500;
border-radius: var(--radius-md);
white-space: nowrap;
user-select: none;
transition: background-color 0.2s ease;
}
.tags-marquee__tag:hover {
background-color: #e5e2f9;
}
/* ==============================
Review Bar Area
============================== */
.review-bar {
width: 100%;
padding: 1rem 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem 2.5rem;
margin-top: 1rem;
}
.review-item {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.review-brand {
display: flex;
align-items: center;
gap: 9px;
color: var(--text-color-navy);
font-size: 1rem;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.review-brand svg {
display: block;
flex-shrink: 0;
}
.divider {
width: 1px;
height: 1.2rem;
background: #D1D5DB;
flex-shrink: 0;
}
.rating {
display: flex;
align-items: center;
gap: 11px;
white-space: nowrap;
}
.stars {
display: inline-flex;
align-items: center;
color: #fbbf00;
font-size: 20px;
line-height: 1;
}
.half-star {
position: relative;
display: inline-block;
color: #d9d9df;
}
.half-star::before {
content: "★";
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #fbbf00;
}
.score {
color: #15192b;
font-size: 16px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
/* ==============================
Lead Form Area
============================== */
.hero--lead-form .hero__header-area {
max-width: 35rem;
}
.lead-form {
background-color: var(--text-color-white);
padding: 2rem;
border-radius: var(--radius-xl);
max-width: 72rem;
margin: 0 auto;
flex-grow: 1;
width: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.lead-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-field__label {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-color-navy);
}
.form-field__required {
color: var(--text-color-navy);
}
.form-field__input {
width: 100%;
padding: 1rem 18px;
background-color: var(--color-cloud-white);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--text-base);
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-field__input::placeholder {
color: #64748B;
font-size: var(--text-base);
}
.form-field__input:focus {
background-color: var(--text-color-white);
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
.lead-form__button:hover {
background-color: var(--color-primary);
}
/* ==============================
Animation
============================== */
@keyframes loop-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes marqueeScrollRTL {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes marqueeScrollLTR {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* ==============================
Responsive Styles
============================== */
@media (max-width: 1524px) {
.hero--people-search .hero__image--small {
left: 2rem;
bottom: 1rem;
}
}
@media (max-width: 1400px) {
/* Hero Area Case Study Two */
.hero--case-study-two .hero__content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1200px) {
.how-it-works--one .how-it-works__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Why Us Area */
.why-us__card {
gap: 3rem;
}
/* B2B Sellers Area */
.b2b-sellers__grid {
grid-template-columns: 4fr 6fr;
gap: 4rem;
}
/* Hero Area Case Study Two */
.hero--case-study-two .hero__content {
grid-template-columns: 1fr;
}
}
@media (max-width: 1350px) {
.hero__floating-card--notification {
transform: rotate(-3deg) translateX(-20%);
}
.hero__floating-card--stats {
transform: rotate(4deg) translateX(30%);
}
.tool-card__icon {
margin-bottom: 3.75rem;
}
.tool-card__text {
margin-bottom: 2rem;
}
/* Footer Area */
.footer__content {
display: grid;
grid-template-columns: repeat(4, 12.5rem);
gap: 1.5rem;
justify-content: space-between;
}
.footer .spring__reviews {
height: auto;
display: flex;
flex-direction: row;
align-items: end;
flex-wrap: wrap;
gap: 0.75rem;
}
.footer__column:first-child {
grid-column: 1 / -1;
padding-bottom: 2rem;
}
/* Tools Suite */
.tools-suite__grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 1150px) {
.use-cases__list {
grid-template-columns: repeat(3, 1fr);
}
/* Benefits */
.benefits__grid-inner--bottom {
grid-template-columns: repeat(2, 1fr);
}
.hero__content-wrapper--find-email {
gap: 3rem;
}
/* Metrics Area */
.metrics__grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Booking Form */
.booking__content-area {
grid-template-columns: 1fr;
gap: 3rem;
}
/* Features Step */
.feature-steps__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* Blog Area */
.blog__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Story Card */
.story-card--featured .story-card__wrapper {
grid-template-columns: 1fr 1fr;
padding: 3rem;
}
.story-card--featured .story-card__stat,
.customer-stories__card--large .customer-stories__card-stat {
font-size: 7rem;
}
/* Data Responsibility */
.data-responsibility__grid {
grid-template-columns: repeat(3, 1fr);
}
/* B2B Sellers Area */
.b2b-sellers__grid {
grid-template-columns: 1fr;
gap: 3rem;
}
/* Target Audiences Area */
.target-audiences__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Quick Setup Area */
.quick-setup__grid {
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
/* Solution Case Area */
.solution-case__wrapper {
grid-template-columns: 1fr;
padding: 2.5rem;
}
/* Department Area */
.department .department__grid {
grid-template-columns: 1fr 1fr;
}
.department__card:nth-child(1),
.department__card:nth-child(2),
.department__card:nth-child(3),
.department__card:nth-child(4),
.department__card:nth-child(5),
.department__card:nth-child(6) {
grid-column: span 1;
}
/* Email Validator Area */
.email-validator__content {
padding: 3.5rem;
border-radius: var(--radius-3xl);
}
/* Hero Floatig Card */
.hero__floating-card--notification {
transform: rotate(-3deg) translateX(-10%);
}
.hero__floating-card--stats {
transform: rotate(4deg) translateX(10%);
}
/* Pricing Addon Area */
.pricing-addon__tick-label {
display: none;
}
.pricing-addon__tick:nth-child(4n + 1) .pricing-addon__tick-label {
display: block;
}
.pricing-addon__tick-label {
font-size: 0.75rem;
}
/* Tools Suite */
.tools-suite__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.secondary-features__grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.5rem;
}
/* Platform Stats Area */
.platform-stats__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Email Validator Area */
.email-validator__content {
padding: 2.5rem;
}
/* Compliance Area */
.compliance__content {
flex-direction: column;
align-items: center;
justify-content: center;
}
.compliance__info-group {
flex-direction: column;
}
.compliance__title,
.compliance__description {
text-align: center;
}
.compliance__badges {
width: 100%;
justify-content: center;
}
}
@media (max-width: 992px) {
.header__grid {
grid-template-columns: repeat(1, 1fr);
}
.align-right {
justify-content: start;
}
.nav-menu,
.nav-actions {
display: none;
}
.mobile-toggle {
display: flex;
}
.navbar {
padding: 1rem 0;
}
.navbar__inner {
height: 4rem;
padding: 0 1.25rem;
}
.hero__image--small {
max-width: 13rem;
}
.hero__play-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 6rem;
height: 6rem;
flex-shrink: 0;
}
.hero__play-btn svg {
width: 100%;
height: 100%;
}
/* Brands Area */
.brands__container {
padding-top: 0;
padding-bottom: 2rem;
}
.brands__logos {
column-gap: 1rem;
}
/* How It Works */
.how-it-works__grid {
grid-template-columns: repeat(2, 1fr);
}
.how-it-works__features-list {
margin-top: 2rem;
}
/* Stats Area */
.stats__grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
/* Problems Area */
.problems__grid {
grid-template-columns: repeat(1, 1fr);
}
/* Features Area */
.features__list-inner.col-3,
.features__list-inner.col-2 {
grid-template-columns: repeat(2, 1fr);
}
.features__list {
flex-direction: column-reverse;
}
.features__item {
gap: 1.25rem;
}
/* Reach Area */
.reach__map-wrap {
position: relative;
min-height: 28.5rem;
}
.reach-card__info {
display: none;
}
.reach-card__right-column {
display: none;
}
.reach-card {
width: fit-content;
padding: 1rem;
background: transparent;
box-shadow: none;
border: none;
}
.reach-card__5 {
top: 45%;
left: 40%;
}
.reach-card__6 {
left: 24%;
bottom: 14%;
}
.reach-card:hover {
padding: 1rem;
background: var(--text-color-white) !important;
width: 100%;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 102px 29px 0 rgba(26, 60, 231, 0.00), 0 65px 26px 0 rgba(26, 60, 231, 0.01), 0 37px 22px 0 rgba(26, 60, 231, 0.05), 0 16px 16px 0 rgba(26, 60, 231, 0.09), 0 4px 9px 0 rgba(26, 60, 231, 0.10);
z-index: 100;
}
.reach-card:hover .reach-card__right-column,
.reach-card:hover .reach-card__info {
display: block !important;
}
/* Use Cases Area */
.bg-wrap--wide {
max-width: calc(100% - 1rem);
}
/* Integration Area */
.integrations__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* Faq Area */
.faq__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.faq__item {
padding: 1.5rem;
border-radius: 0.75rem;
}
/* Cta Area */
.cta__content {
padding: 5rem 1.5rem;
}
/* Footer Styles */
.footer__content {
grid-template-columns: repeat(3, 1fr);
}
.footer__bottom {
align-items: start;
flex-direction: column;
}
/* Benefits */
.benefits__grid-inner,
.benefits__grid {
gap: 1.5rem;
}
.benefits__item {
gap: 1.5rem;
}
/* Features Showcase */
.feature-showcase__info-desc {
margin-top: 1rem;
}
.feature-showcase__card {
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
/* Hero Search People */
.hero--people-search .hero__container {
margin-right: 0;
}
/* Email Find */
.hero__content-wrapper--find-email {
grid-template-columns: 1fr;
}
.find-email__tabs {
flex-wrap: wrap;
}
/* Why Us Area */
.why-us__card {
gap: 2rem;
}
.why-us__card {
grid-template-columns: 1fr;
}
.why-us__loop-area {
gap: 1.5rem;
}
.why-us__list {
margin-top: 1.5rem;
gap: 1rem;
}
.why-us__card-cta,
.bulk__card-cta {
margin-top: 2.5rem;
}
/* Header Grid */
.header-grid {
grid-template-columns: 1fr;
}
.header-right {
justify-content: start;
}
.services__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.services__card {
padding: 1.75rem;
}
/* Bulk Area */
.bulk__item {
grid-template-columns: 1fr;
}
.bulk__item--reverse .bulk__item-right {
order: 2;
}
.bulk__item-cta {
margin-top: 2rem;
}
.list {
gap: 1rem;
}
.list li span {
margin-top: 0px;
}
/* Single Page */
.single__content-area {
gap: 2.5rem;
}
/* Pain Points */
.pain-points__card {
padding: 1.5rem;
}
/* Pricing Comparison Area */
.pricing-comparison__filter-wrap,
.pricing-comparison__header {
margin-bottom: 2rem;
}
/* Pricing Card Filter *
.pricing-card__filter-wrap {
margin: 2rem auto 2rem;
}
/* Contact (Contact Page) */
.contact--page .contact__content {
gap: 3rem;
grid-template-columns: repeat(1, 1fr);
}
/* Hero Free Trail */
.hero--free-trail .hero__grid {
grid-template-columns: 1fr;
}
/* App Preview */
.trial-feature__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.trial-feature__stats {
gap: 1.5rem;
}
/* Testimonials Two */
.testimonials__overlay {
display: none;
}
.testimonials--style-two .testimonials__wrapper {
height: auto;
}
.testimonials--style-two .testimonials__grid {
display: flex;
width: max-content;
animation: scrollHorizontal 30s linear infinite;
gap: 1rem;
}
.testimonials--style-two .testimonials__grid:hover {
animation-play-state: paused;
}
.testimonials--style-two .testimonials__column {
flex-direction: row;
animation: none !important;
gap: 1rem;
}
.testimonials--style-two .testimonial-card {
width: 350px;
height: auto;
min-height: 180px;
flex-shrink: 0;
}
/* Enterprise Area */
.enterprise__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Lead Vs Pro */
.hero--lead-pro .hero__content-area {
flex-direction: column;
gap: 2rem;
}
/* Reasons Grid */
.reasons__grid {
grid-template-columns: repeat(2, 1fr);
}
.switch-reasons__grid {
grid-template-columns: 1fr 1fr;
}
.feature-steps__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Trust Metrics */
.trust-metrics__grid {
grid-template-columns: repeat(2, 1fr);
}
.trust-card {
border-bottom: 1px solid var(--color-muted);
}
.trust-card:nth-child(2n) {
border-right: none;
}
/* Targeted Audience */
.target-audience__grid {
grid-template-columns: repeat(2, 1fr);
}
.hero .bg-wrap {
max-height: calc(100% - 13rem);
}
/* Blog Area */
.blog__featured-body {
padding: 1.5rem 2rem;
}
/* Trusted By Area */
.trusted-by .trusted-by__grid {
justify-content: center;
gap: 32px 24px;
}
.story-card--featured .story-card__badge {
margin-bottom: 1rem;
}
.story-card__bottom {
margin-top: 1rem;
}
.story-card__bottom {
gap: 1rem;
}
/* Customer Stories */
.customer-stories .customer-stories__layout {
grid-template-columns: repeat(2, 1fr);
}
.customer-stories .customer-stories__card--large {
grid-column: span 2;
}
.customer-stories .customer-stories__column {
grid-column: span 2;
flex-direction: row;
}
.customer-stories .customer-stories__card--image {
grid-column: span 1;
}
/* Hero Area Docs */
.hero--api-docs .hero__grid {
gap: 2.5rem;
grid-template-columns: 1fr;
}
/* Hero Area Our Data */
.hero--our-data .hero__stats-card {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.5rem;
}
.hero--our-data .hero__stat-item:nth-child(2)::after {
display: none;
}
/* Data Breakdown */
.data-breakdown__card {
grid-template-columns: 1fr;
}
.data-breakdown__card:nth-child(even) .data-breakdown__card-img-wrap {
order: initial;
}
/* User Feedback */
.user-feedback__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Sales Triggers */
.sales-triggers__grid {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 2.5rem;
}
/* Quick Start */
.quick-start__grid {
grid-template-columns: repeat(2, 1fr);
}
/* SDK Integrations */
.sdk-integrations__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Enrichment Events Area */
.enrichment-events__flow {
flex-direction: column;
gap: 1.5rem;
}
.enrichment-events__card {
width: 100%;
}
.enrichment-events__arrow {
transform: rotate(90deg);
padding: 0.5rem 0;
}
/* Custom API Area */
.custom-api__card {
flex-direction: column;
padding: 2.5rem;
gap: 2.5rem;
}
.custom-api__media {
width: 100%;
}
.custom-api__image {
max-width: 100%;
}
/* Lead Sourcing */
.lead-sourcing__card,
.lead-sourcing__card--reverse {
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
}
.lead-sourcing__number {
top: 24px;
right: 24px;
}
/* Data Responsibility */
.data-responsibility__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Data Breakdown */
.data-breakdown__card-content {
gap: 2.5rem;
}
.hero--about .hero__grid {
grid-template-columns: 1fr;
}
.hero--about .hero__right {
order: -1;
}
/* Team Area */
.team-members__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Press News Area */
.press-news__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Hero Study Index */
.hero--study-index {
background: var(--color-surface);
padding-bottom: 0rem;
}
/* Client Case Studies */
.client-case-studies__grid {
grid-template-columns: repeat(2, 1fr);
}
.client-case-studies__title {
min-height: auto;
}
/* Inverted Benefits Area */
.inverted-benefits__grid {
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
/* Hero Hub Spot Area */
.hero--hub-spot .hero__short-desc {
margin: 1.5rem 0 3rem 0;
}
/* Core Pillars Area */
.core-pillars__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.core-pillars__card {
padding: 1.5rem 1.5rem 0 1.5rem;
}
/* Feature Spine Area */
.feature-spine__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.feature-spine__timeline {
display: none;
}
/* Integration Workflow */
.integration-workflow__grid {
flex-direction: column;
gap: 2.5rem;
}
.integration-workflow__connector {
display: none;
}
.integration-workflow__card-wrapper {
padding: 2rem;
}
.gap-xl {
gap: 1.5rem;
}
/* Value Props Area */
.value-props__grid {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
/* Hero Sales Prospecting Area */
.hero--sales-prospecting .hero__container {
grid-template-columns: 1fr;
gap: 3rem;
}
.hero--sales-prospecting .hero__content {
align-items: center;
text-align: center;
max-width: 37rem;
margin: 0 auto;
}
.outbound-teams__item {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.5rem 0;
}
/* Outbound Teams Area */
.outbound-teams__col-link {
text-align: left;
margin-top: 4px;
}
/* Data Metrics Area */
.data-metrics__stats {
margin: 2.5rem 0;
}
.data-metrics__stats {
grid-template-columns: repeat(3, 1fr);
gap: 2rem 0;
}
.data-metrics__stat-item:nth-child(3)::after {
display: none;
}
/* Company Details Area */
.company-details__card {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 1.5rem 2rem;
}
/* Solution Case Area */
.solution-case__side {
margin: 0 auto;
width: 100%;
}
/* Challenge Overview Area */
.challenge-overview__content {
gap: 1rem;
}
/* Hero Case Study Area */
.hero--case-study-two .hero__content {
gap: 2.5rem;
}
/* Security Trust Area */
.security-trust--style-two .security-trust__wrapper {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.security-trust--style-two .security-trust__info {
max-width: 100%;
}
/* Find Email */
.find-email {
padding: 2.5rem 1.5rem;
}
/* Email Validator Area */
.email-validator__grid {
grid-template-columns: 1fr;
}
/* Tools Suite Area */
.tools-suite__grid {
grid-template-columns: repeat(2, 1fr);
}
.tool-card {
border-right: 1px solid var(--color-blue-haze) !important;
border-bottom: 1px solid var(--color-blue-haze) !important;
padding: 1.5rem;
}
.tool-card__icon {
margin-bottom: 2.5rem;
}
.tool-card__text {
margin-bottom: 1.5rem;
}
/* Results Impact Area */
.results-impact__cards {
grid-template-columns: repeat(2, 1fr);
}
.results-impact__cards {
margin: 2.5rem 0;
}
.results-impact__table-box {
margin-bottom: 2.5rem;
}
/* Hero Integrations */
.hero-integrations__apps {
flex-wrap: wrap;
gap: 1rem;
}
.hero-integrations__app-card,
.hero-integrations__app-card--offset-1,
.hero-integrations__app-card--offset-2,
.hero-integrations__app-card--offset-3,
.hero-integrations__app-card--offset-4 {
transform: translateY(0);
width: 100px;
}
/* Pricing Addon Area */
.pricing-addon__price {
text-align: right;
width: 100%;
}
.pricing-addon__tick-label {
display: none;
}
.pricing-addon__tick:nth-child(6n + 1) .pricing-addon__tick-label {
display: block;
}
.pricing-addon__tick-label {
font-size: 0.6875rem;
}
/* Lead Sourcing Area */
.lead-sourcing__visual {
aspect-ratio: unset;
width: 100%;
overflow: hidden;
}
.lead-sourcing__visual img {
width: 100%;
}
/* Why Us Card Area */
.why-us__card--reverse .why-us__content {
order: initial;
}
}
@media (max-width: 850px) {
/* Reach Area */
.reach-card__2 {
top: 10%;
left: 22%;
}
/* Benefits */
.benefits__item {
padding: 1.5rem;
}
/* Features Showcase */
.feature-showcase__content {
padding: 1.5rem;
}
/* Metrics Area */
.metrics__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Agenda */
.agenda__row {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 1.5rem;
}
.agenda__time {
margin-bottom: 0.25rem;
}
.agenda__topic {
margin-bottom: 0.25rem;
}
/* Blog Area */
.blog__featured-card {
grid-template-columns: repeat(1, 1fr);
}
/* Blog Details Area */
.blog--details .blog__layout {
grid-template-columns: 1fr;
}
.blog--details .blog__sidebar {
position: static;
}
/* Hero Area Case Study */
.hero--case-study .hero__grid {
grid-template-columns: repeat(1, 1fr);
}
/* Story Card Area */
.story-card--featured .story-card__wrapper {
grid-template-columns: 1fr;
padding: 2.5rem;
gap: 2rem;
}
/* Prospecting Problem Area */
.prospecting-problem__workflow {
flex-wrap: wrap;
justify-content: flex-start;
gap: 12px;
}
.prospecting-problem__step {
flex: 1 1 calc(50% - 24px);
min-width: 140px;
}
.prospecting-problem__arrow {
display: none;
}
/* Step Timeline Area */
.steps-timeline__list {
gap: 2rem;
}
.steps-timeline__item {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.steps-timeline__item--reverse .steps-timeline__content {
order: 1;
}
.steps-timeline__item--reverse .steps-timeline__media {
order: 2;
}
/* Hero Outbound Area */
.whole-stack__comparison {
flex-direction: column;
}
.stack-card--old,
.stack-card--new {
max-width: 100%;
width: 100%;
}
.whole-stack__arrow {
transform: rotate(90deg);
}
.stack-card {
padding: 1.5rem;
}
/* Cost Comparison Area */
.cost-comparison__grid {
flex-direction: column;
}
.cost-card {
max-width: 100%;
width: 100%;
padding: 1.5rem;
}
.cost-comparison__vs {
margin: -10px 0;
width: 100%;
display: flex;
justify-content: center;
}
.cost-comparison__vs::after {
position: absolute;
content: "";
height: 3px;
width: 90%;
top: 50%;
left: 50%;
}
/* Footer Area */
.spring__badge-wrap {
gap: 0.75rem;
}
.spring__badge svg {
width: 100px;
height: 100px;
}
/* Lead Form Area */
.lead-form__grid {
grid-template-columns: 1fr;
gap: 1.1rem;
}
}
@media (max-width: 768px) {
.hero__image--small {
max-width: 9rem;
bottom: 0;
display: none;
}
.hero__image-wrap {
max-width: 100%;
}
/* Reach Area */
.reach__map-wrap {
min-height: 19.5rem;
}
.reach-card__2 {
top: 0%;
left: 22%;
}
.reach-card__3 {
top: 8%;
left: 47%;
}
/* How It Works */
.how-it-works--one .how-it-works__grid {
grid-template-columns: repeat(1, 1fr);
}
/* Stats Area */
.stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
/* Problem Area */
.problems__item {
padding: 1rem;
}
.problems__item:not(:first-child) {
margin-top: 0;
}
/* Use Cases Area */
.use-cases__list {
grid-template-columns: repeat(2, 1fr);
}
.bg-wrap--wide {
max-width: 100%;
}
.hero .bg-wrap {
max-height: calc(100% - 8rem);
}
/* Integration Area */
.integrations__list {
grid-template-columns: repeat(1, 1fr);
}
.integrations__item {
padding: 1rem;
}
/* Testimonials Area */
.testimonials__item {
padding: 1.5rem;
}
.testimonials__slider {
padding-bottom: 4.5rem !important;
}
.testimonials__button {
display: none;
}
/* Faq Area */
.faq__item {
padding: 1rem;
border-radius: 0.5rem;
}
/* Cta Area */
.cta__content {
padding: 4rem 1rem;
}
/* Footer Styles */
.footer {
max-width: calc(100% - 1rem);
}
.footer__content {
grid-template-columns: repeat(2, 1fr);
}
/* Benefits */
.benefits__item {
padding: 1rem;
margin-bottom: 0.5rem;
}
.benefits__grid-inner {
grid-template-columns: repeat(1, 1fr);
}
.benefits__grid-inner,
.benefits__grid {
gap: 1rem;
}
/* Single Page */
.single__content-area {
flex-wrap: wrap;
}
.sidebar {
order: 2;
flex: 0 1 100%;
min-width: auto;
max-width: 100%;
}
/* Hero Contact */
.contact__info {
gap: 1rem;
margin-top: 3rem;
}
/* Hero Free Trail */
.hero--free-trail .signup-card {
padding: 1.5rem;
}
/* */
.trial-feature__stat-item {
gap: 0.5rem;
}
.trial-feature__content {
gap: 1rem;
}
.booking-form,
.booking__card-header {
padding: 1.5rem;
}
.switch-reasons__card {
padding: 2rem 1rem;
}
/* Outreach Area */
.outreach-card {
padding: 1.5rem;
}
/* Trust Metrics */
.trust-metrics__header {
flex-direction: column;
align-items: flex-start;
}
.trust-metrics__title {
font-size: 2.25rem;
}
.trust-metrics__grid {
grid-template-columns: 1fr;
}
.trust-card {
border-right: none;
}
.trust-metrics__footer {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
/* Calender */
.calendar__grid {
gap: 0.25rem;
}
.calendar__day {
font-size: 0.8125rem;
height: 2.125rem;
padding: 0.3rem 0.5rem;
}
/* Blog Area */
.blog__grid {
grid-template-columns: repeat(1, 1fr);
}
/* Hero Area Case Study */
.hero--case-study .hero__card--middle {
transform: translateX(0);
}
/* Story Card */
.story-card--featured .story-card__wrapper {
grid-template-columns: 1fr;
padding: 2rem;
}
.story-card--featured .story-card__stat,
.customer-stories__card--large .customer-stories__card-stat {
font-size: 4rem;
}
/* Customer Stories */
.customer-stories .customer-stories__layout {
grid-template-columns: 1fr;
}
.customer-stories .customer-stories__card--large,
.customer-stories .customer-stories__column,
.customer-stories .customer-stories__card--image {
grid-column: span 1;
}
.customer-stories .customer-stories__column {
flex-direction: column;
}
/* Data Breakdown */
.data-breakdown__card-content {
padding: 1rem 0;
}
/* User Feedback */
.user-feedback__grid {
grid-template-columns: 1fr;
}
/* Quick Start */
.quick-start__card {
padding: 1.5rem;
}
.quick-start__grid {
grid-template-columns: 1fr;
}
/* SDK Integrations Area */
.sdk-integrations__grid {
grid-template-columns: 1fr;
}
/* Custom API Area */
.custom-api__card {
padding: 2rem 1.5rem;
}
/* Lead Sourcing */
.lead-sourcing__card {
padding: 1.5rem;
}
/* Data Breakdown */
.data-breakdown__card-content {
gap: 2rem;
}
/* B2B Sellers Area */
.b2b-sellers__grid {
gap: 2rem;
}
.b2b-sellers__column {
gap: 1rem;
}
/* Modern Platform Area */
.modern-platform__card {
padding: 1.5rem 1rem;
}
/* Account Approach Area */
.account-approach__roles-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Inverted Benefits Area */
.inverted-benefits__title {
margin-bottom: 2rem;
text-align: center;
}
/* Target Audiences Area */
.target-audiences__grid {
grid-template-columns: 1fr;
}
.target-audiences__card {
padding: 1.5rem;
}
/* Quick Setup Area */
.quick-setup__content {
gap: 1.5rem;
}
/* Customer Story */
.customer-story__content-area {
flex-direction: column;
align-items: start;
padding: 2rem 1.5rem;
gap: 32px;
}
.customer-story__divider {
width: 100%;
height: 1px;
}
/* Sync Mapping Card */
.sync-mapping__card {
padding: 1.5rem 1rem;
}
.sync-mapping__row {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.sync-mapping__arrow {
display: none;
}
.sync-mapping__right {
justify-content: flex-start;
}
.sync-mapping__table-header {
display: none;
}
/* Results Impact Area */
.results-impact__content {
grid-template-columns: 1fr;
gap: 20px;
}
.results-impact__table-box {
overflow-x: auto;
}
/* Department Area */
.department .department__grid {
grid-template-columns: 1fr;
}
.search-card {
padding: 1.5rem;
}
/* Hero Floatig Card */
.hero__floating-card--notification,
.hero__floating-card--stats {
display: none;
}
/* Pricing Addon Area */
.pricing-addon__header {
flex-direction: column;
align-items: flex-start;
row-gap: 1rem;
}
.pricing-addon__price {
white-space: normal;
}
.pricing-addon__ticks {
position: relative;
display: block;
height: 2.75rem;
margin-top: 1.25rem;
}
/* Keep all tick marks */
.pricing-addon__tick {
position: absolute;
top: 0;
width: 0;
}
.pricing-addon__tick::before {
top: 0;
left: 0;
transform: translateX(-50%);
width: 0.0625rem;
height: 0.5rem;
}
/* Evenly distribute all 33 ticks */
.pricing-addon__tick:nth-child(1) {
left: 0%;
}
.pricing-addon__tick:nth-child(2) {
left: 3.125%;
}
.pricing-addon__tick:nth-child(3) {
left: 6.25%;
}
.pricing-addon__tick:nth-child(4) {
left: 9.375%;
}
.pricing-addon__tick:nth-child(5) {
left: 12.5%;
}
.pricing-addon__tick:nth-child(6) {
left: 15.625%;
}
.pricing-addon__tick:nth-child(7) {
left: 18.75%;
}
.pricing-addon__tick:nth-child(8) {
left: 21.875%;
}
.pricing-addon__tick:nth-child(9) {
left: 25%;
}
.pricing-addon__tick:nth-child(10) {
left: 28.125%;
}
.pricing-addon__tick:nth-child(11) {
left: 31.25%;
}
.pricing-addon__tick:nth-child(12) {
left: 34.375%;
}
.pricing-addon__tick:nth-child(13) {
left: 37.5%;
}
.pricing-addon__tick:nth-child(14) {
left: 40.625%;
}
.pricing-addon__tick:nth-child(15) {
left: 43.75%;
}
.pricing-addon__tick:nth-child(16) {
left: 46.875%;
}
.pricing-addon__tick:nth-child(17) {
left: 50%;
}
.pricing-addon__tick:nth-child(18) {
left: 53.125%;
}
.pricing-addon__tick:nth-child(19) {
left: 56.25%;
}
.pricing-addon__tick:nth-child(20) {
left: 59.375%;
}
.pricing-addon__tick:nth-child(21) {
left: 62.5%;
}
.pricing-addon__tick:nth-child(22) {
left: 65.625%;
}
.pricing-addon__tick:nth-child(23) {
left: 68.75%;
}
.pricing-addon__tick:nth-child(24) {
left: 71.875%;
}
.pricing-addon__tick:nth-child(25) {
left: 75%;
}
.pricing-addon__tick:nth-child(26) {
left: 78.125%;
}
.pricing-addon__tick:nth-child(27) {
left: 81.25%;
}
.pricing-addon__tick:nth-child(28) {
left: 84.375%;
}
.pricing-addon__tick:nth-child(29) {
left: 87.5%;
}
.pricing-addon__tick:nth-child(30) {
left: 90.625%;
}
.pricing-addon__tick:nth-child(31) {
left: 93.75%;
}
.pricing-addon__tick:nth-child(32) {
left: 96.875%;
}
.pricing-addon__tick:nth-child(33) {
left: 100%;
}
/* Hide all labels */
.pricing-addon__tick-label {
display: none !important;
}
/* Show only evenly spaced major labels */
.pricing-addon__tick:nth-child(1) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(5) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(9) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(13) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(18) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(23) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(27) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(33) .pricing-addon__tick-label {
display: block !important;
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-92%);
font-size: 0.625rem;
white-space: nowrap;
}
/* Lead Sourcing */
.lead-sourcing {
max-width: 100%;
}
/* Blog Area */
.blog__featured-body {
padding: 1.5rem 1rem;
}
}
@media (max-width: 640px) {
.team-members__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Press News Area */
.press-news__grid {
grid-template-columns: 1fr;
}
.press-news__card {
padding: 1.5rem;
}
/* Our Journey Area */
.our-journey__timeline {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Client Case Studies */
.client-case-studies__grid {
grid-template-columns: 1fr;
}
.client-case-studies__card {
padding: 1.5rem;
}
/* Prospecting Problem Area */
.prospecting-problem__step {
flex: 1 1 100%;
}
/* Account Approach Area */
.account-approach__roles-grid {
grid-template-columns: 1fr;
}
.account-approach__target-card {
width: 100%;
}
/* Inverted Benefits Area */
.inverted-benefits__grid {
grid-template-columns: 1fr;
gap: 32px;
}
/* Hero Hub Spot Area */
.hubspot-integration__visual-card {
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
}
.hubspot-integration__card-item--rotated {
transform: none;
}
.hero--hub-spot .hero__short-desc {
margin-bottom: 2rem;
}
/* Feature Spine Area */
.feature-spine__grid {
grid-template-columns: 1fr;
}
/* Secondary Features */
.secondary-features__grid {
grid-template-columns: 1fr;
}
/* Changelog Area */
.changelog__item {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.5rem 0;
}
/* Hero Changelog Area */
.hero--changelog .hero__form {
flex-direction: column;
width: 100%;
}
.hero--changelog .hero__input {
width: 100%;
padding: 0.8rem 0.5rem;
}
.hero--changelog button.hero__button {
width: 100%;
}
/* Value Props Area */
.value-props__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Data Metrics Area */
.data-metrics__stats {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem 0;
}
.data-metrics__stat-item::after {
display: none;
}
/* Company Details Area */
.company-details__card {
grid-template-columns: 1fr;
gap: 1.3rem;
padding: 1.5rem;
}
/* Platform Stats Area */
.platform-stats__grid {
grid-template-columns: 1fr;
}
.stat-box {
padding: 1.2rem;
}
/* Email Validator Area */
.email-validator__content {
padding: 1.5rem;
}
.email-card__header {
padding: 1rem;
}
.email-card__body {
padding: 1.5rem;
}
.email-card__status {
padding: 0.5rem 1.5rem;
}
/* Compliance Area */
.compliance__content {
padding: 1.5rem;
}
.compliance__check-icon {
width: 5rem;
height: 5rem;
min-width: 5rem;
}
.compliance__badges {
flex-wrap: wrap;
}
/* Tools Suite Area */
.tools-suite__grid {
grid-template-columns: 1fr;
}
/* Hero Integrations Area */
.hero-integrations__app-card {
width: 85px;
}
/* Lead Form Area */
.lead-form {
padding: 1.5rem;
}
}
@media (max-width: 576px) {
/* Button */
.btn--primary,
.btn--secondary {
display: block;
width: 100%;
}
/* Features Area */
.features__list-inner.col-3,
.features__list-inner.col-2 {
grid-template-columns: repeat(1, 1fr);
}
/* Reach Area */
.reach-card__2 {
top: 8%;
}
.reach-card__3 {
top: 12%;
}
/* Testimonials Area */
.testimonials__slider {
padding-bottom: 1rem !important;
}
.testimonials__slider--thumb.swiper.swiper-initialized.swiper-horizontal.swiper-free-mode.swiper-watch-progress.swiper-backface-hidden.swiper-thumbs {
display: none;
}
/* Services Area */
.services__grid {
grid-template-columns: 1fr;
}
.services__card {
padding: 1.5rem;
}
/* Hero Domain Search */
.search-card__top {
padding: 1rem;
}
.search-card__bottom {
padding: 1rem 0;
}
.search-card {
padding: 1rem;
}
/* Pain Points */
.pain-points__grid {
grid-template-columns: repeat(1, 1fr);
}
.pain-points__card {
padding: 1.2rem;
}
/* How It Works */
.how-it-works--style-two .how-it-works__grid {
gap: 1rem;
}
/* Enterprise Area */
.enterprise__grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Reasons Grid */
.reasons__grid {
grid-template-columns: 1fr;
}
.switch-reasons__grid {
grid-template-columns: 1fr;
}
/* Features Card */
.feature-steps__grid {
grid-template-columns: 1fr;
}
/* Targeted Audience */
.target-audience__grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.audience-card {
padding: 1.5rem;
}
/* Trusted By Area */
.trusted-by .trusted-by__grid {
gap: 28px 16px;
}
.trusted-by .trusted-by__item {
min-width: 120px;
}
.trusted-by .trusted-by__logo-name {
font-size: 1.25rem;
}
/* Hero Area Our Data */
.hero--our-data .hero__stats-card {
grid-template-columns: 1fr;
padding: 2rem 0.25rem;
}
.hero--our-data .hero__stat-item::after {
display: none !important;
}
.hero--our-data .hero__stat-item {
padding: 0 1rem;
}
/* Sales Triggers */
.sales-triggers__grid {
grid-template-columns: 1fr;
margin-bottom: 2rem;
}
/* Data Responsibility */
.data-responsibility__grid {
grid-template-columns: 1fr;
}
/* Solution Case Area */
.solution-case__wrapper {
padding: 24px;
}
/* Security Trust Area */
.security-trust--style-two .security-trust__cards {
grid-template-columns: 1fr;
gap: 1rem;
}
.security-trust--style-two .trust-card {
padding: 2rem 1rem;
}
/* Results Impact Area */
.results-impact__cards {
grid-template-columns: 1fr;
}
/* Reporting Area */
.reporting .bulk__item {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.navbar {
padding: 0.75rem 0;
}
.navbar__inner {
border-radius: 0.75rem;
padding: 0 1rem;
}
.mobile-menu {
max-width: 100%;
}
.mobile-menu__scroll {
padding: 1rem 0.5rem;
}
.mobile-menu__header {
padding: 1rem 0.5rem;
border-bottom: 0.0625rem solid var(--border-1);
}
.mobile-menu__actions {
padding: 0.75rem;
}
/* Hero Area */
.hero__image--small {
display: none;
}
/* Stats Area */
.stats__grid {
grid-template-columns: repeat(1, 1fr);
}
.stats--two .stats__card:not(:last-child) {
border-bottom: 1px solid var(--border-1);
}
.problems .problems__items {
gap: 1rem;
}
.problems .problems__item {
width: 100%;
display: flex;
flex-direction: column;
padding: 1rem;
}
.problems .problems__item {
transform: rotate(0) !important;
margin-left: 0 !important;
}
.problems .problems__item-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
}
/* Use Cases Area */
.use-cases__list {
grid-template-columns: repeat(1, 1fr);
}
/* Metrics Area */
.metrics__grid {
grid-template-columns: repeat(1, 1fr);
}
.metrics-card {
align-items: center;
}
.metrics-card__title,
.metrics-card__description {
text-align: center;
}
/* Footer Styles */
.footer__content {
grid-template-columns: repeat(1, 1fr);
}
.calendar__grid {
column-gap: 0.25rem;
}
/* Story Card Area */
.story-card--featured .story-card__wrapper {
padding: 2rem 1rem;
}
/* Pricing Addon Area */
.pricing-addon__ticks {
height: 2.5rem;
}
.pricing-addon__tick:nth-child(1) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(5) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(18) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(23) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(33) .pricing-addon__tick-label {
font-size: 0.5625rem;
}
.pricing-addon__range {
height: 0.375rem;
}
/* Features Showcase Area */
.feature-showcase__content {
padding: 1.5rem 1rem;
}
}
@media (max-width: 360px) {
.pricing-addon__tick:nth-child(1) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(5) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(18) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(23) .pricing-addon__tick-label,
.pricing-addon__tick:nth-child(33) .pricing-addon__tick-label {
font-size: 0.5rem;
}
}
/* ===================================
Responsive
=================================== */
@media (max-width: 992px) {
.container {
padding: 5rem 2.5rem;
}
.gap-xxl {
gap: 3rem;
}
h1,
.text-h1 {
font-size: 3.75rem;
line-height: 1.06;
letter-spacing: -0.188rem;
}
h2,
.text-h2 {
font-size: 3rem;
line-height: 1.08;
letter-spacing: -0.15rem;
}
h3,
.text-h3 {
font-size: 2.375rem;
line-height: 1.14;
letter-spacing: -0.1rem;
}
h4,
.text-h4 {
font-size: 2.125rem;
line-height: 1.22;
letter-spacing: -0.06rem;
}
h5,
.text-h5 {
font-size: 1.1875rem;
line-height: 1.42;
letter-spacing: -0.01rem;
}
h6,
.text-h6 {
font-size: 1.0625rem;
line-height: 1.32;
letter-spacing: -0.03rem;
}
/* Text */
.text-2xl {
font-size: 1.625rem;
line-height: 1.3;
letter-spacing: -0.03rem;
}
.text-lg {
font-size: 1.25rem;
line-height: 1.4;
}
.text-base,
.text-sm {
font-size: inherit;
}
}
@media (max-width: 768px) {
.container {
padding: 4.5rem 2rem;
}
.gap-xxl {
gap: 2.5rem;
}
h1,
.text-h1 {
font-size: 3.25rem;
line-height: 1.08;
letter-spacing: -0.16rem;
}
h2,
.text-h2 {
font-size: 2.75rem;
line-height: 1.1;
letter-spacing: -0.135rem;
}
h3,
.text-h3 {
font-size: 2.125rem;
line-height: 1.15;
letter-spacing: -0.08rem;
}
h4,
.text-h4 {
font-size: 1.875rem;
line-height: 1.24;
letter-spacing: -0.05rem;
}
h5,
.text-h5 {
font-size: 1.125rem;
line-height: 1.45;
letter-spacing: -0.01rem;
}
h6,
.text-h6 {
font-size: 1rem;
line-height: 1.34;
letter-spacing: -0.025rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 1.35;
letter-spacing: -0.025rem;
}
.text-lg {
font-size: 1.2rem;
line-height: 1.4;
letter-spacing: -0.01rem;
}
}
@media (max-width: 576px) {
.container {
padding: 4.5rem 1.5rem;
}
.gap-xxl {
gap: 2rem;
}
h1,
.text-h1 {
font-size: 3rem;
line-height: 1.1;
letter-spacing: -0.12rem;
}
h2,
.text-h2 {
font-size: 2.5rem;
line-height: 1.12;
letter-spacing: -0.1rem;
}
h3,
.text-h3 {
font-size: 1.875rem;
line-height: 1.2;
letter-spacing: -0.06rem;
}
h4,
.text-h4 {
font-size: 1.625rem;
line-height: 1.26;
letter-spacing: -0.04rem;
}
h5,
.text-h5 {
font-size: 1.0625rem;
line-height: 1.46;
letter-spacing: -0.008rem;
}
h6,
.text-h6 {
font-size: 0.9375rem;
line-height: 1.36;
letter-spacing: -0.02rem;
}
.text-2xl {
font-size: 1.375rem;
line-height: 1.35;
letter-spacing: -0.02rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.45;
letter-spacing: -0.01rem;
}
}
@media (max-width: 480px) {
.container {
padding: 4rem 1rem;
}
h1,
.text-h1 {
font-size: 3rem;
line-height: 1.1;
letter-spacing: -0.1rem;
}
h2,
.text-h2 {
font-size: 2.5rem;
line-height: 1.12;
letter-spacing: -0.08rem;
}
h3,
.text-h3 {
font-size: 1.75rem;
line-height: 1.2;
letter-spacing: -0.05rem;
}
h4,
.text-h4 {
font-size: 1.5rem;
line-height: 1.28;
letter-spacing: -0.03rem;
}
h5,
.text-h5 {
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.005rem;
}
h6,
.text-h6 {
font-size: 0.875rem;
line-height: 1.4;
letter-spacing: -0.015rem;
}
.text-2xl {
font-size: 1.25rem;
line-height: 1.4;
letter-spacing: -0.015rem;
}
.text-lg {
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0;
}
}
/* a11y: WCAG AA contrast for role text on light cards (was --color-gray-blue) */
.problems__item-role { color: #475569; }