/* =============================================================================
   HOMEPAGE 2026 — style.css
   Section order (matches index.html):
   01. Global / Common
   02. Banner section  (za-banner-sticky-wrap, za-banner-section, iframe-step)
   03. Trusted / Promo section (za-trusted-section, za-promo-section)
   04. Journey section (za-journey-section)
   05. For-all section (za-forall-section)
   06. Integration section (za-integ-section)
   07. Customer stories / Testimonials (za-custories-section)
   08. Rating section (za-rating-section)
   09. Mobile apps section (za-mapps-section)
   10. Truly section (za-truly-section)
   11. Bottom / CTA section (za-bottom-section)
   12. @keyframes (float animations)
   13. Media queries (1600 → 1440 → 1366 → 1300 marquee → 1280 → 1200 banner sticky → 1024 → 991 → 767 → 480)
   ============================================================================= */


/* =============================================================================
   01. GLOBAL / COMMON
   ============================================================================= */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Hide Zoho global header on scroll */
body.za-header-hidden #header {
	display: none;
}

/* common style */
.za-page-wrapper .cta-btn {
	padding: 12px 30px;
	border-radius: 5px;
	font-size: 17px;
}

.za-page-wrapper h2{
	max-width: 100%;
	font-size: 45px;
	margin-block-end: 20px ;
	font-family: 'Zoho_Puvi_Bold';
}

.za-page-wrapper b {
	font-family: var(--secondaryfont-semibold);
}

.p-120 {
	padding: 120px 0;
}

.p-t-0 {
	padding-block-start: 0 !important;
}

.p-b-0 {
	padding-block-end: 0;
}

.zw-product-header {
	z-index: 11;
	position: relative;
}

.zrmore-cta {
	color: #3376F7;
	padding-inline-end: 20px;
	position: relative;
	font-family: var(--secondaryfont-semibold);
}

.zrmore-cta::after {
	content: '';
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid;
	border-bottom: 2px solid;
	position: absolute;
	inset-inline-end: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform-origin: 15px 12px;
}

/* =============================================================================
   02. BANNER SECTION
   ============================================================================= */

.za-banner-sticky-wrap {
	position: relative;
	background-color: #EFE7DC;
	height: calc(100vh + 300px);
	/* scroll room: section sticks while animation plays */
}

.za-banner-section {
	background-image: image-set(url(/sites/zweb/images/analytics/banner-index-bg.avif) type("image/avif"), url(/sites/zweb/images/analytics/banner-index-bg.webp) type("image/webp"));
	padding-block-start: 130px;
	border-end-start-radius: 84px;
	border-end-end-radius: 84px;
	background-position: bottom;
	margin-block-start: -68px;
	background-repeat: no-repeat;
	background-size: cover;
	position: sticky;
	top: 0px;
	height: 100vh;
	overflow: hidden;
	z-index: 1;
}

/* Content wrap must sit above banner-grass-bg (z-index: 111) at all viewports */
.za-banner-section .content-wrap {
	position: relative;
	z-index: 200;
}

.za-banner-content-box {
	display: flex;
	align-items: center;
	transform-origin: center top;
	justify-content: space-between;
}

/* will-change only while scroll-reveal is actively driving transforms */
.za-banner-section.is-scroll-animating .content-wrap,
.za-banner-section.is-scroll-animating .za-banner-content-box {
	will-change: transform, opacity;
}



.za-banner-cont {
	width: 62%;
}

.za-banner-cont .ai-tag {
	font-size: 19px;
	line-height: 30px;
	font-family: var(--zf-primary-regular);
	background: rgb(255 255 255 / 49%);
	text-align: center;
	border-radius: 25px;
	padding: 10px 20px;
	margin: 0 0 15px;
	position: relative;
	letter-spacing: normal;
	width: fit-content;
	display: flex;
	align-items: center;
    gap: 5px;
}

.za-banner-cont .ai-tag .text-gardient {
	background: radial-gradient(233.22% 153.56% at -5.28% 79.78%, #2E0708 0%, #5B0F10 22.92%, #891617 40.63%, #A01A1B 53.65%, #CD2123 61.03%, #E42527 69.66%, #E73B3D 76.21%, #E95152 82.04%, #F29293 89.72%, #F7BEBE 97.04%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Zoho_Puvi_SemiBold';
}

.za-banner-cont h1 {
	font-size: 77px;
	line-height: 92px;
	letter-spacing: -4px;
	margin-block-end: 8px;
}

.za-banner-cont h1 span {
	background: radial-gradient(233.22% 153.56% at -5.28% 79.78%, #2E0708 0%, #5B0F10 22.92%, #891617 40.63%, #A01A1B 53.65%, #CD2123 61.03%, #E42527 69.66%, #E73B3D 76.21%, #E95152 82.04%, #F29293 89.72%, #F7BEBE 97.04%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* letter-spacing: -4px + background-clip clips the trailing “s” */
	display: inline-block;
	padding-inline-end: 0.03em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.za-banner-cont p{
	font-size: 20px;
    width: 100%;
    max-width: 546px;
	margin-block-end: 16px;
}

.za-banner-cont>ul {
	display: flex;
	gap: 10px 16px;
	flex-wrap: wrap;
}

.za-banner-cont>ul>li {
	position: relative;
	font-size: 18px;
	font-family: var(--secondaryfont-semibold);
	letter-spacing: -0.4px;
}

.za-banner-cont>ul>li span{
	display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #000000;
    border-radius: 50%;
    margin-inline-end: 8px;
}

.za-cta-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 24px 0 0;
}

.za-cta-box .watch-btn {
	border: 1px solid #707070;
	padding-block: 12px;
	padding-inline-start: 50px;
	padding-inline-end: 30px;
	border-radius: 5px;
	font-size: 17px;
	margin: 0;
	max-width: 100%;
}

.za-cta-box .watch-btn::after {
	inset-inline-end: auto;
	inset-inline-start: 25px;
	top: 16px;
	border-block-width: 8px;
	border-inline-start-width: 12px;
	border-inline-end-width: 0;
	border-radius: 2px;
}

.za-cta-box .watch-btn::before {
	display: none;
}

.za-cta-box p {
	margin: 0;
	line-height: 20px;
}

/* ── Banner animated layers ── */
.za-banner-cont h1,
.za-banner-cont .ai-tag,
.za-banner-cont ul,
.za-banner-cont .za-cta-box {
	backface-visibility: hidden;
}

.za-banner-img {
	width: 38%;
	position: relative;
	backface-visibility: hidden;
	transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
	transition-delay: 0.05s;
}

.za-banner-img .bimg {
	width: 125%;
	max-width: 826px;
	float: inline-end;
	position: relative;
	inset-inline-end: -16%;
}

.za-banner-img>ul {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
}

.za-banner-img>ul>li {
	width: 100px;
	height: 100px;
	position: absolute;
	opacity: 0;
	transition: all .5s ease;
	transform: translateY(40px);
}

.za-banner-img>ul>li img {
	max-width: 60px;
}

.za-banner-img>ul>li:first-child {
	inset-inline-end: -50px;
	top: 40px;
}

.za-banner-img>ul>li:nth-child(2) {
	top: 350px;
	inset-inline-start: 60px;
	transition-delay: .2s;
}

.za-banner-img>ul>li:nth-child(3) {
	inset-inline-end: -50px;
	bottom: 100px;
	transition-delay: .3s;
}

.za-banner-stats {
	background: #fff;
	position: absolute;
	width: 170px;
	padding: 10px 15px;
	border: 2px solid #efefef;
	border-radius: 5px;
	inset-inline-end: 50px;
	bottom: 270px;
	opacity: 0;
	transition: all .5s ease;
	transform: scale(0);
}

.za-banner-stats b {
	display: block;
	font-size: 23px;
	line-height: 25px;
}

.za-banner-stats b:after {
	content: '';
	display: block;
	width: 90px;
	height: 5px;
	background: #f5f5f5;
	border-radius: 4px;
	margin: 6px 0 5px;
}

.za-banner-stats span {
	font-size: 10px;
	font-family: var(--zf-secondary-medium);
	position: relative;
}

.za-banner-stats span:after {
	content: '';
	width: 11px;
	height: 11px;
	border-inline-end: 3px solid #0CB24B;
	border-bottom: 3px solid #0CB24B;
	position: absolute;
	inset-inline-end: -55.5px;
	top: 24px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform-origin: 0 0;
}

.za-banner-stats span:before {
	content: '';
	width: 3px;
	height: 30px;
	position: absolute;
	background: #0CB24B;
	inset-inline-end: -46px;
	top: 12px;
	border-radius: 10px;
}

.signup-box {
	background: rgb(255 255 255 / 60%);
	box-shadow: 11px 11px 25px #0000000f;
	border: 2px solid #ede9e9;
	border-radius: 10px;
	z-index: 1;
	padding: 30px;
	width: 100%;
	margin: 0 auto;
	max-width: 440px;
	min-height: 440px;
	/* On-premise adds fields — scroll inside the card instead of
	   overlapping the demo iframe or changing banner height */
	max-height: min(520px, calc(100vh - 260px));
	overflow-x: hidden;
	overflow-y: auto;
}

.middle-animated .za-banner-img>ul>li {
	opacity: 1;
	transform: translateY(0px);
}

.middle-animated .za-banner-stats {
	opacity: 1;
	transform: scale(1);
}

.non-umain .za-cta-box .cta-btn {
	display: none;
}

.umain .middle-animated .za-banner-img>ul>li:first-child .zicon,
.umain .middle-animated .za-banner-img>ul>li:nth-child(2) .zicon {
	-webkit-animation: zeven 6s linear 3s infinite;
	animation: zeven 6s linear 3s infinite;
}

.umain .middle-animated .za-banner-img>ul>li:nth-child(3) .zicon {
	-webkit-animation: zodd 6s linear 3s infinite;
	animation: zodd 6s linear 3s infinite;
}

.umain .za-banner-section .za-banner-content-box .za-banner-cont {
	width: 100%;
	text-align: center;
}

.umain .za-banner-section .za-banner-content-box .za-banner-cont .ai-tag {
	margin-inline: auto;
}

.umain .za-banner-section .za-banner-content-box .za-banner-cont p{
	max-width: 100%;
}

.umain .za-banner-section .za-banner-content-box .za-banner-cont ul,
.umain .za-banner-section .za-banner-content-box .za-banner-cont .za-cta-box {
	justify-content: center;
}

.umain .za-banner-section .za-banner-content-box .za-banner-img {
	display: none;
}

/* ── iframe step section (within banner) ─────────────────────────────────── */
.iframe-step-section {
	position: relative;
	margin-block-start: 50px;
	z-index: 2;
}

.iframe-step-section .iframe-step-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 4px solid #00000099;
	border-radius: 21px;
	/* Slightly shorter than 2/1 to trim remaining bottom gutter in the embed */
	aspect-ratio: 2.1 / 1;
}

.iframe-step-section .iframe-step-box iframe {
	border: 0;
	border-radius: 0;
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Crop thin grey padding inside the embed around the demo UI */
	transform: scale(1);
	transform-origin: center center;
}

.za-banner-section .banner-grass-bg {
	/* Must stay under .content-wrap (200) — was 1111 and covered the demo */
	z-index: 1;
	position: absolute;
	bottom: -25px;
	inset-inline-start: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 280;
	object-fit: cover;
	transition: bottom 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* picture wrapper must not take flow height under the demo */
.za-banner-section > picture {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 1111;
}

/* =============================================================================
   03. TRUSTED / PROMO SECTION
   ============================================================================= */

.trust-icon .ae-icon {
	margin-inline-end: 150px;
	font-size: 0;
	display: inline-flex;
	text-align: center;
	align-items: center;
	float: none;
	min-height: 100px;
	vertical-align: top;
}

.trust-icon .ae-icon img {
	display: block;
	transform: scale(1.15);
}

.trust-icon-wrap {
	overflow: hidden;
	display: flex;
}

/* trusted customer logos */
.trusted-icon-wrap {
	overflow: hidden;
	height: 110px;
}

/* Gartner promo section */
.za-trusted-section {
	background-color: #EFE7DC;
	padding-block-start: 30px;
}

/* customers counts section  */
.za-cust-counts ul {
	display: flex;
	max-width: 850px;
	margin: 0 auto 0;
	text-align: center;
	justify-content: center;
	margin-block-start: 30px;
	margin-block-end: 40px;
}

.za-cust-counts ul>li {
	width: 30%;
	position: relative;
}

.za-cust-counts ul>li p {
	margin: 0;
	font-size: 20px;
}

.za-cust-counts ul>li:not(:first-child):before {
	content: '';
	position: absolute;
	width: 1px;
	height: 50%;
	background: #601D1C;
	top: 0;
	bottom: 0;
	margin: auto;
	inset-inline-start: 0;
	opacity: 0.2;
}

.za-cust-counts ul>li>span {
	font-size: 50px;
	line-height: 50px;
	font-family: var(--zf-secondary-medium);
}

.za-cust-counts ul>li>span:after {
	content: '+';
	font-family: var(--zf-primary-extralight);
}

.za-gartner-wrap {
	background: transparent linear-gradient(180deg, #FF8B00 0, #c62e2e00 100%) 0 0 no-repeat padding-box;
	border-radius: 16px;
	max-width: 950px;
	margin: 0 auto;
	padding: 1px;
}

.za-gartner-wrap .slick-list {
	background: #F9F5F1;
	border-radius: inherit;
	padding: 24px;
}

.za-gartner-wrap .slick-track:not(.lang-ar .za-gartner-wrap .slick-track) {
	display: flex;
	align-items: center;
}

.zag-promo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 30px;
}

.zag-promo-box .zga-promo-img {
	width: 200px;
	text-align: center;
}

.zag-promo-box a {
	position: relative;
}

.zag-promo-box p {
	margin: 0;
	line-height: 26px;
}

.zag-promo-box>div:nth-child(2) {
	max-width: 360px;
}

/* 6.0 promo section */
.zpromo-strip {
	background: transparent linear-gradient(278deg, #ffe7c1 0, #ffdd6f 100%) 0 0 no-repeat padding-box;
	box-shadow: 15px 15px 28px #00000010;
	border: 2px solid #fff;
	border-radius: 80px;
	max-width: 1100px;
	margin: 0 auto 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 60px;
	width: 90%;
	position: relative;
	/* opacity: 0; */
	/* transform: translateY(50px); */
	transition: transform .5s ease, opacity .5s ease
}

.zpromo-strip a {
	background: #4560ff;
	color: #fff;
	padding-block: 5px;
	padding-inline-start: 30px;
	padding-inline-end: 40px;
	border-radius: 18px;
	font-size: 16px;
	margin-inline-start: 15px
}

.zpromo-strip a:after {
	top: 3px;
	inset-inline-end: 20px
}

.zpromo-strip p {
	margin: 0;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--secondaryfont-semibold);
	position: relative;
	padding-inline-start: 100px;
	max-width: 640px
}

.zpromo-strip p span {
	width: fit-content;
	display: block;
	font-size: 15px;
	color: #ffffff;
	text-transform: uppercase;
	background: #0b9949;
	padding: 0px 15px;
	border-radius: 18px;
	margin: 0 0 7px;
}

.zpromo-strip p:before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	width: 70px;
	height: 72px;
	background: url(//www.zohowebstatic.com/sites/zweb/images/analytics/promo-confetti-icon.png) no-repeat;
	background-size: 100% auto;
	opacity: 0;
	transform: scale(0);
	transition: transform .5s ease, opacity .5s ease
}

.zpromo-strip.zwe-ot {
	transform: translateY(0px);
	opacity: 1;
}

.zpromo-strip.zwe-ot p:before {
	transition-delay: .4s;
	transform: scale(1);
	opacity: 1;
}

/* ── Dashboard section (legacy — no matching HTML in current index.html) ──── */
.za-dashboard-section {
	text-align: center;
	position: relative;
}

.za-dashboard-section:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 50%;
	background: #D83D3E;
	inset-inline-start: 0;
	z-index: -1;
	bottom: 0;
}

/* =============================================================================
   04. JOURNEY SECTION
   ============================================================================= */

.za-journey-section {
	position: relative;
	z-index: 2;
	/* sits above the sticky banner */
	background-color: #efe7dc;
}

.za-journey-section h2 {
	text-align: center;
}

.za-journey-nav {
	z-index: 2;
	position: sticky;
	top: 100px;
	width: 100%;
}

.za-journey-nav.makesticky {
	position: absolute;
	top: auto;
	bottom: 800px;
}

.za-journey-nav ul {
	display: flex;
	gap: 10px;
	justify-content: center;
	text-align: center;
	margin: 50px 0 0px;
}

.za-journey-nav ul li {
	border-radius: 9px;
	font-family: var(--zf-secondary-medium);
	cursor: pointer;
	padding: 15px 55px;
	font-size: 20px;
	letter-spacing: -0.24px;
	transition: all .2s ease;
	position: relative;
	background: #fff;
	box-shadow: 13px 14px 29px #3376F714;
}

.za-journey-nav ul li.active {
	background-color: #3376f7;
	color: #fff;
}

.za-journey-nav ul li.active img {
	filter: brightness(0) invert(1);
}

.za-journey-wrap {
	width: 100%;
	margin: 0 auto;
}

.za-journey-box {
	max-width: 1700px;
	margin: 40px auto 0;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
	position: sticky;
	top: 130px;
	min-height: 770px;
	align-items: center;
	border-radius: 16px;
	border: 0.8px solid rgba(54, 66, 50, 0.50);
	/* transform is driven per-rAF by JS at 60fps — no CSS transition needed;
       adding one restarts the timer every frame and causes backward-scroll lag */
	will-change: transform;
	background: #edfff8;
	/* backdrop-filter: blur(2px) removed — background is solid so the blur
       had no visual effect, but it forced Chrome to re-composite every frame
       during the scale() transition, causing the blur glitch on section switch */
}

#prepare {
	background: #f4f6ff
}

#analyze {
	background: #fffcea
}

#visualize {
	background: #eeffed
}

#collaborate {
	background: #f0faff
}

#extend {
	background: #fff6f0
}

#agentic {
	background-color: #d9d6fe
}


.za-journey-cont>ul {
	max-width: 80%;
	margin: 30px 0 20px;
}

.za-journey-box .content-wrap {
	display: flex;
	justify-content: space-between;
}

.za-journey-cont {
	width: 40%;
	padding-inline-start: 200px;
	padding-inline-end: 50px;
}

.za-journey-cont>ul>li {
	padding-block-end: 30px;
	padding-inline-start: 25px;
	position: relative;
}

.za-journey-cont>ul>li:before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	bottom: 2px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	width: 12px;
	height: 6px;
	border-top: 1.5px solid;
	border-inline-end: 1.5px solid;
}

.watch-btn {
	color: #000;
	padding-inline-end: 30px;
	position: relative;
	font-family: var(--secondaryfont-semibold);
	display: block;
	max-width: 132px;
	margin-block-start: 20px;
	margin-inline-start: auto;
	margin-inline-end: 40px;
}

.watch-btn:after,
.watch-btn:before {
	position: absolute;
	content: ''
}

.watch-btn:before {
	inset-inline-end: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border: 1px solid #000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100%
}

.watch-btn:after {
	inset-inline-end: 6px;
	top: 9px;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-inline-start: 6px solid #000;
}

.za-journey-img {
	width: 60%;
}

.za-journey-img img,
.za-journey-img video {
	display: block;
	margin-inline-start: auto;
	border-radius: 10px;
	max-width: 950px;
}

.za-journey-img .watch-btn {
	display: none;
}

.za-journey-iframe {
	position: relative;
	width: 100%;
	padding-block-start: 56.25%;
}

.za-journey-iframe iframe {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	bottom: 0;
	inset-inline-end: 0;
	line-height: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
}

.za-features-link {
	text-align: center;
	margin: 40px 0 0;
}

.za-features-link a {
	display: inline-block;
	border: 2px solid;
	padding-block: 10px;
	padding-inline-start: 20px;
	padding-inline-end: 30px;
	border-radius: 4px;
}

.za-features-link a:after {
	inset-inline-end: 15px;
}

/* =============================================================================
   05. FOR-ALL SECTION (Designed to democratize Analytics for all)
   ============================================================================= */

.za-forall-section {
	background: linear-gradient(180deg, #EFE7DC 0%, #FFF 84.23%);
}

.za-forall-section h2 {
	text-align: center;
}

.za-forall-section ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 50px 0 0;
}

.za-forall-section ul li {
	width: calc(25% - 8px);
	border-radius: 10px;
	transition: box-shadow .3s ease;
	background-image: linear-gradient(45deg, #C4C8BA, transparent);
	padding: 1px;
	flex: 1;
	display: flex;
	box-shadow: 0 4px 9px 0 rgba(89, 48, 255, 0.05);
}

.za-forall-section ul li .card-wrap {
	background-color: #ffffff;
	border-radius: inherit;
	padding: 24px;
}

.za-forall-section ul li .card-wrap img {
	border-radius: 16px;
	margin-block-end: 12px;
}

.za-forall-section ul li:hover {
	box-shadow: 0px 3px 2px #00000029;
}

.za-forall-section ul li p {
	margin: 0;
}

.za-forall-section ul li h3 {
	position: relative;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(90deg, #008EF5 0%, #9914FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 23px;
}


/* =============================================================================
   06. INTEGRATION SECTION
   ============================================================================= */

.za-integ-head {
	text-align: center;
	margin: 0 auto;
}

.za-integ-head h2{
	width: 70%;
    margin-inline: auto;
}

.za-integ-head>p {
	font-size: 20px;
    margin: 0;
    line-height: 1.6;
    width: 80%;
    margin-inline: auto;
}

/*
 * 3-column diagram: left panel | center | right panel
 *
 * Panel width = 6 cells × 84px + 5 gaps × 16px = 584px each
 * Center = 112px  →  total = 584 + 112 + 584 = 1280px
 */
.za-integ-diagram {
	display: grid;
	grid-template-columns: 584px 112px 584px;
	align-items: center;
	justify-content: center;
	max-width: 1280px;
	margin: 60px auto 50px;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

/* Each panel is a vertical stack of category rows */
.za-integ-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * Each row = 6 items (logos + label + empties).
 * Both panels share the same grid template — column order in
 * the HTML determines whether logos are on the left (left panel)
 * or right (right panel).
 */
.za-integ-row {
	display: grid;
	grid-template-columns: repeat(5, 84px) 84px;
	column-gap: 16px;
	align-items: center;
}

/* Individual cell */
.za-cell {
	width: 84px;
	height: 72px;
	border-radius: 10px;
	border: 1px solid rgba(223, 228, 235, 0.45);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: -3;
}

/* Logo cell — full border + shadow */
.za-cell--logo {
	border-color: #dfe4eb;
	box-shadow: 0 8px 20px 0 rgba(3, 41, 78, 0.1);
	perspective: 600px;
}

.za-cell--logo img {
	max-width: 54px;
	max-height: 46px;
	object-fit: contain;
	display: block;
}

/* ── Random logo flip animation ─────────────────────────────────── */
@keyframes za-cell-flip {
	0% {
		transform: rotateY(0deg);
		opacity: 1;
	}

	35% {
		transform: rotateY(90deg);
		opacity: 0;
	}

	65% {
		transform: rotateY(270deg);
		opacity: 0;
	}

	100% {
		transform: rotateY(360deg);
		opacity: 1;
	}
}

.za-cell--logo.is-flipping img {
	animation: za-cell-flip 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.za-cell--logo.is-flipping {
	box-shadow: 0 12px 28px 0 rgba(3, 41, 78, 0.18);
	border-color: #c5cdd8;
}

/* Category label — sits in an 84px column like a cell */
.za-cat-label {
	width: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
	color: #8092a9;
	font-family: var(--zf-secondary-medium);
	line-height: 1.35;
	height: 72px;
}

/* Center — Zoho Analytics logo */
.za-integ-center {
	width: 112px;
	min-height: 616px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.za-integ-logo {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 8px rgba(255, 0, 27, 0.08), 0 8px 24px rgba(3, 41, 78, 0.2);
}

.za-integ-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Integration lines ───────────────────────────────────────── */

/*
 * .za-integ-lines-wrap sits at z-index: -1 within the isolated stacking
 * context of .za-integ-diagram, so it is always behind every grid cell.
 * isolation: isolate on the parent prevents -1 from escaping to the page.
 */
.za-integ-lines-wrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

/* ─── Line animations ─────────────────────────────────────────── */
/* Initial state: hidden, clipped to centre (0% drawn) */
.za-line {
	position: absolute;
	top: 44px;
	inset-inline-start: 0;
	width: 100%;
	height: 87%;
	object-fit: contain;
	object-position: center center;
	opacity: 0;
	clip-path: inset(0 50% 0 50%);
}

/* Draw from centre outward → full width */
@keyframes za-line-reveal {
	0% {
		opacity: 0;
		clip-path: inset(0 50% 0 50%);
	}

	15% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0% 0 0%);
	}
}

/* Continuous data-flow pulse after lines have drawn in */
@keyframes za-line-flow {

	0%,
	100% {
		opacity: 0.65;
	}

	50% {
		opacity: 1;
	}
}

/* Class added by IntersectionObserver when section enters viewport */
.za-line.in-view {
	animation:
		za-line-reveal 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both,
		za-line-flow 5s ease-in-out 3.5s infinite;
}

/* Footer links */
.za-integ-links {
	display: flex;
	justify-content: center;
	gap: 40px;
}

.za-integ-links a+a {
	display: inline-flex;
	margin: 0;
}

/* Integration marquee track (injected by JS at ≤1300px) */
.za-integ-marquee {
	display: none;
}

@keyframes za-integ-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}


/* =============================================================================
   07. CUSTOMER STORIES / TESTIMONIALS SECTION
   ============================================================================= */

.za-custories-section {
	position: relative;
	background-image: image-set(url(/sites/zweb/images/analytics/banner-index-fullbg.avif) type("image/avif"), url(/sites/zweb/images/analytics/banner-index-fullbg.webp) type("image/webp"));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}

.za-custories {
	text-align: center;
}

.za-custories-section h2{
	width: 80%;
    margin-inline: auto;
}

.za-custories-left .zrmore-cta {
	color: #fff;
}

.za-custories-right {
	text-align: center;
	width: 50%;
}

.za-clogo {
	font-size: 36px;
	margin: 0 auto 20px;
	position: relative;
	max-width: 260px;
}

.za-clogo:before,
.za-clogo:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 44px;
	background: url(/sites/zweb/images/analytics/homepage/floral-left.svg);
	inset-inline-start: 0;
	top: 0;
	opacity: 0;
	transition: transform .3s ease;
}

.za-clogo:before {
	transform: translateX(50px);
}


.za-clogo:after {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: translateX(-50px) rotateY(160deg);
}

.middle-animated .za-clogo:before {
	opacity: 1;
	transform: translateX(0);
}

.middle-animated .za-clogo:after {
	opacity: 1;
	transform: translateX(0) rotateY(160deg);
}

.za-custories-right>p {
	max-width: 260px;
	font-family: var(--zf-secondary-regularitalic);
	font-style: italic;
	margin: 0 auto;
	position: relative;
	padding: 0 0 40px;
}

.za-custories-right>p:after {
	content: '\2605   \2605   \2605';
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	color: #ff9c27;
	font-family: var(--zf-secondary-regular);
	font-style: normal;
}


/* testimonials */

.za-custories-testimonials {
	margin: 60px 0 0;
	position: relative;
	background: #000;
	border-radius: 10px;
}

.za-testi-box {
	position: relative;
}

.za-testi-img {
	position: relative;
	border-radius: 10px;
	max-height: 600px;
	overflow: hidden;
}

.za-testi-img img {
	border-radius: 10px;
	display: block;
}

.za-testi-img video {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

.za-testi-img:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent linear-gradient(231deg, #00000000 0%, #113D588F 37%, #000000 100%) 0% 0% no-repeat padding-box;
	border-radius: 10px;
}

.za-testi-cont {
	position: absolute;
	top: 0;
	color: #fff;
	width: 100%;
	padding: 80px 100px;
}

.za-testi-cont h4 {
	font-size: 30px;
	line-height: 44px;
	font-family: var(--zf-secondary-medium);
	max-width: 370px;
	opacity: 0;
	transition: transform 1s ease;
	transform: translateY(40px);
}

#zcust-testimonials li:nth-child(2) h4 {
	max-width: 420px;
}

.slick-current .za-testi-cont h4 {
	opacity: 1;
	transform: translateY(0px);
}

.za-testi-cont p {
	margin: 0;
	font-size: 15px;
	opacity: 0;
	transition: transform 1s ease .2s;
	transform: translateY(40px);
}

.zslide2,
.zslide3 {
	display: none;
}

.slick-current .za-testi-cont p {
	opacity: 1;
	transform: translateY(0px);
}

.za-testi-cont p:before {
	content: '';
	width: 50px;
	height: 1px;
	background: #fff;
	display: block;
	margin: 30px 0;
	opacity: 0;
	transition: transform 1s ease .1s;
	transform: translateY(10px);
}

.slick-current .za-testi-cont p:before {
	opacity: 1;
	transform: translateY(0px);
}

.za-testi-cont p>b {
	display: block;
	font-size: 20px;
}

a.play-btn {
	position: absolute;
	inset-inline-end: 100px;
	top: 100px;
	background: #fff;
	color: #000;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 15px;
	font-family: var(--secondaryfont-semibold);
}

a.play-btn:before {
	content: '';
	border-width: 8px;
	border-block-color: transparent;
	border-inline-start-color: #000;
	border-inline-end-color: transparent;
	border-style: solid solid solid;
	display: inline-block;
	vertical-align: middle;
	border-radius: 3px;
	position: relative;
	top: -1px;
}

#zcust-testi-sm {
	position: absolute;
	bottom: 100px;
	max-width: 440px;
	inset-inline-start: 100px;
}

#zcust-testi-sm li {
	margin: 5px 10px;
}

.za-testi-smallimg {
	position: relative;
}

.za-testi-smallimg img {
	display: block;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.za-testi-smallimg svg {
	top: -30px;
	position: absolute;
	inset-inline-start: -29px;
}

.circle {
	display: none
}

.slick-current .circle {
	display: block;
	stroke-dasharray: 1100;
	stroke-dashoffset: 1100;
	animation: ringloader 155s ease-out
}

@keyframes ringloader {
	to {
		stroke-dashoffset: 0
	}
}

.za-custories-data {
	display: flex;
	gap: 10px;
	margin: 10px 0 0;
}

.za-custories-data>li {
	background: rgb(255 255 255 / 76%);
	border-radius: 10px;
	padding: 40px;
	width: 25%;
	transition: transform 1s ease;
	transform: translateY(50px);
	backdrop-filter: blur(16px);
}

.za-custories-data>li:nth-child(2) {
	transition-delay: .2s;
}

.za-custories-data>li:nth-child(3) {
	transition-delay: .4s;
}

.za-custories-data>li:nth-child(4) {
	transition-delay: .6s;
}

.za-custories-data.zwe-om>li {
	transform: translateY(0);
}

.za-custimg {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: left;
	opacity: 0;
	transition: transform 1s ease;
	transform: scale(0);
}

.za-custories-data.zwe-om>li .za-custimg {
	opacity: 1;
	transform: scale(1);
}

.za-custories-data>li h4 {
	color: #0CB24B;
	font-family: var(--secondaryfont-bold);
	font-size: 30px;
	margin: 30px 0 0;
	position: relative;
}

.za-custories-data>li h4 svg {
	display: inline-block;
	vertical-align: text-top;
	width: 32px;
	height: 32px;
}

/* .za-custories-data>li h4:after {
	content: '';
	width: 11px;
	height: 11px;
	border-inline-end: 3px solid #0CB24B;
	border-bottom: 3px solid #0CB24B;
	position: absolute;
	inset-inline-start: 77.5px;
	top: 24px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform-origin: 0 0;
}

.za-custories-data>li h4:before {
	content: '';
	width: 3px;
	height: 18px;
	position: absolute;
	background: #0CB24B;
	inset-inline-start: 76px;
	top: 12px;
	border-radius: 10px;
} */

.za-custories-data>li p {
	max-width: 180px;
}

.za-custories-data>li a {
	color: #000;
	text-decoration: underline;
}

.za-custories-data>li:nth-child(2) h4::after {
	transform: rotate(45deg);
	top: 17px;
}



/* =============================================================================
   08. RATING SECTION
   ============================================================================= */

.za-rating-section {
	padding: 60px 0 0;
	max-width: 1680px;
	margin: 0 auto;
	position: relative;
}

.za-rating-section ul {
	display: flex;
	gap: 20px;
	width: 95%;
	margin: 0 auto;
	justify-content: center;
	text-align: center;
}

.za-rating-section ul li {
	width: 20%;
	position: relative;
}

.za-rating-section ul li:not(:first-child):before {
	content: '';
	width: 1px;
	height: 50px;
	background: #E5E5E5;
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.za-rating-section .rating-logo {
	min-height: 40px;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.za-rating-section ul li p {
	margin: 5px 0 0;
	font-family: var(--secondaryfont-bold);
	font-size: 16px;
}

.za-rating-section .rating-logo img {
	display: block;
	max-height: 40px;
	transform: scale(1.2);
	opacity: 0;
	transition: all .3s ease
}

.za-rating-section ul li:nth-child(2) .rating-logo img {
	transition-delay: .5s;
}

.za-rating-section ul li:nth-child(3) .rating-logo img {
	transition-delay: .7s;
}

.za-rating-section ul li:nth-child(4) .rating-logo img {
	transition-delay: .9s;
}

.za-rating-section ul li:nth-child(5) .rating-logo img {
	transition-delay: 1.1s;
}

.za-rating-section ul li:nth-child(6) .rating-logo img {
	transition-delay: 1.3s;
}

.za-rating-section ul li:nth-child(7) .rating-logo img {
	transition-delay: 1.5s;
}

.za-rating-section .zwe-om .rating-logo img {
	opacity: 1;
	transform: scale(1);
}

.rating-star {
	font-family: var(--secondaryfont-bold);
	color: #f8a927;
	text-transform: uppercase;
	margin: 0 auto 10px;
	max-width: 100%;
	line-height: normal;
	font-size: 18px;
	letter-spacing: 2px;
	display: inline-block;
	width: auto;
	height: auto;
	position: relative
}

.rating-star:before,
.rating-star:after {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	inset-inline-start: 0
}

.rating-star:before {
	color: #777;
	z-index: 0;
	width: auto;
	height: auto
}

.rating-star:after {
	color: #f9a826;
	overflow: hidden;
	-webkit-transition: width 2.5s ease 1s;
	transition: width 2.5s ease 1s;
	width: 0%;
	height: auto;
	direction: ltr;
	z-index: 1
}

.za-rating-section .zwe-om .rating-star.zfour-three:after,
.za-rating-section .zwe-om .rating-star.zfour-four:after {
	width: 88%;
}

.za-rating-section .zwe-om .rating-star.zfour-five:after {
	width: 90%;
}


/* =============================================================================
   09. MOBILE APPS SECTION
   ============================================================================= */

.za-mapps-section {
	padding: 160px 0;
}

.za-mapps-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

.za-mapps-cont {
	width: 40%;
}

.za-mapps-img {
	width: 50%;
	padding: 0;
	border-radius: 8px;
}

.za-mapps-img img {
	display: block;
	margin: auto;
	opacity: 0;
	transform: translateY(50px);
	transition: all 01s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

.middle-animated .za-mapps-img img {
	opacity: 1;
	transform: translateY(0);
}

.apps-download-links-wrap {
	margin: 30px 0 50px;
}

/* =============================================================================
   10. TRULY SECTION (What makes Zoho Analytics truly exceptional)
   ============================================================================= */

.za-truly-section {
	background: #4D5035;
	position: relative;
	overflow: hidden;
}

.za-truly-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	pointer-events: none;
	animation: truly-dot-pulse var(--dot-dur, 4s) ease-in-out var(--dot-delay, 0s) infinite;
}

@keyframes truly-dot-pulse {

	0%,
	100% {
		opacity: 0;
		transform: scale(0.6) translateY(0);
	}

	40% {
		opacity: 1;
	}

	60% {
		opacity: 0.8;
		transform: scale(1) translateY(-6px);
	}
}

.za-truly-section h2 {
	width: 50%;
	color: #fff;
	margin: 0;
}

.za-truly-box {
	overflow-x: auto;
	overflow-y: hidden;
}

.za-truly-section ul {
	display: flex;
	gap: 10px;
	margin: 50px 0 0;
	margin-inline-start: 230px;
	min-width: 1980px;
}
/* .za-truly-section .zwe-om ul {
	animation: rightToLeftMoveAim 1.5s linear forwards;
} */

@keyframes rightToLeftMoveAim {
	from {
		transform: translateX(250px)
	}

	to {
		transform: translateX(0)
	}
}

.za-truly-section ul>li {
	width: 25%;
	min-width: 405px;
	background: rgb(255 255 255 / 50%);
	border: 1px solid #e5e5e554;
	border-radius: 10px;
	padding: 40px 25px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.za-truly-section ul>li:last-child {
	margin-inline-end: 20px;
}

.za-truly-section ul>li::before {
	content: '';
	display: inline-block;
	width: 78px;
	height: 72px;
	margin: 0 0 20px;
	background: url(/sites/zweb/images/analytics/homepage/sprite-icons.png);
	background-repeat: no-repeat;
	background-size: 597px auto;
	background-position: 2px 0;
	opacity: 0;
	transition: all 1s ease;
	transform: scale(0)
}

.za-truly-section ul>li:nth-child(2)::before {
	background-position: -102px 0;
	transition-delay: .2s
}

.za-truly-section ul>li:nth-child(3)::before {
	background-position: -204px 0;
	transition-delay: .3s
}

.za-truly-section ul>li:nth-child(4)::before {
	background-position: -310px 0;
	transition-delay: .4s
}

.za-truly-section ul>li:nth-child(5)::before {
	background-position: -419px 0;
	transition-delay: .5s
}

.za-truly-section ul>li:nth-child(6)::before {
	background-position: -524px 0;
	transition-delay: .6s
}

.za-truly-section .zwe-om ul>li::before {
	opacity: 1;
	transform: scale(1);
}

.za-truly-section ul>li p {
	margin: 0;
}

.za-truly-section ul>li h3 {
	font-family: var(--zf-secondary-bold);
}

/* Mobile-only card navigation */
.za-truly-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

.za-truly-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.za-truly-nav__btn:hover:not(:disabled),
.za-truly-nav__btn:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.75);
	outline: none;
}

.za-truly-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.lang-ar .za-truly-nav__btn--prev svg,
.i18n-ar .za-truly-nav__btn--prev svg,
.lang-ar .za-truly-nav__btn--next svg,
.i18n-ar .za-truly-nav__btn--next svg {
	transform: scaleX(-1);
}

/* =============================================================================
   11. BOTTOM / CTA SECTION
   ============================================================================= */

.za-bottom-section {
	text-align: center;
	background-color: #CBCFC3;
}

.za-bottom-section p {
	font-size: 15px;
	margin: 10px 0 0;
}

/* =============================================================================
   12. @KEYFRAMES (banner float animations — used in banner section)
   ============================================================================= */

@-webkit-keyframes zeven {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, -12px);
		transform: translate(0, -12px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes zeven {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, -12px);
		transform: translate(0, -12px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@-webkit-keyframes zodd {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, 12px);
		transform: translate(0, 12px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes zodd {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	50% {
		-webkit-transform: translate(0, 12px);
		transform: translate(0, 12px);
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

/* =============================================================================
   13. MEDIA QUERIES
   Breakpoints: 1600, 1440, 1366, 1280, 1200, 1024, 991, 767, 480
   ============================================================================= */

@media only screen and (max-width : 1600px) {
	.za-journey-cont {
		padding: 0 0;
		max-width: 400px;
		margin: 0 auto;
	}

	.za-journey-img img,
	.za-journey-img video {
		max-width: 100%;
	}
}

@media only screen and (max-width : 1512px) {
	.za-banner-section .banner-grass-bg{
		z-index: 0;
	}
}

@media only screen and (max-width : 1440px) {
	.signup-box {
		top: 60px;
	}

	.za-banner-cont {
		width: 50%;
	}

	.za-banner-section{
		height: 90vh
	}

	.trust-icon .ae-icon {
		margin-inline-end: 120px;
	}


	.za-journey-nav ul li {
		padding: 15px 50px;
		font-size: 18px;
	}

	.za-journey-box {
		padding: 70px 0;
		min-height: 600px
	}

	.za-journey-cont>ul {
		max-width: 90%;
		margin: 30px 0 10px;
	}

	.za-integ-head>p {
		font-size: 18px;
	}

	.za-integ-diagram {
		grid-template-columns: repeat(2, calc(6 * 76px + 5 * 12px)) 96px;
		gap: 0;
	}

	.za-integ-row {
		grid-template-columns: repeat(6, 76px);
		column-gap: 12px;
	}

	.za-cell {
		width: 76px;
		height: 66px;
	}

	.za-cat-label {
		width: 76px;
		height: 66px;
	}

	.za-integ-panel {
		gap: 12px;
	}

	.za-integ-center {
		width: 96px;
		min-height: 540px;
	}

	.za-custories-testimonials {
		margin: 20px 0 0;
	}

	.za-mapps-section {
		padding: 140px 0;
	}

	.za-truly-section {
		padding: 120px 0;
	}

	.za-bottom-section {
		padding: 100px 0;
	}
}


@media only screen and (max-width : 1366px) {
	.za-banner-cont {
		padding: 40px 0 0;
	}

	.zpromo-strip {
		margin: 0 auto 40px;
	}

	.za-banner-cont>ul {
		gap: 10px 15px;
	}

	.za-cta-box .watch-btn {
		padding-block: 10px;
		padding-inline-start: 40px;
		padding-inline-end: 20px;
		border-radius: 5px;
		font-size: 15px;
	}

	.za-cta-box .watch-btn::after {
		inset-inline-start: 20px;
		top: 14px;
		border-block-width: 7px;
		border-inline-start-width: 10px;
		border-inline-end-width: 0;
	}

	.signup-box {
		max-width: 400px;
	}

	.za-db-wrap {
		transform: scale(.95);
	}

	.za-cust-counts ul>li>span {
		font-size: 42px;
		line-height: 42px;
	}

	.trust-icon .ae-icon img {
		transform: scale(1.05);
	}

	.za-gartner-wrap img {
		max-width: 160px;
	}
	
	.za-journey-nav {
		margin: 50px 0 0;
	}

	.za-journey-nav ul {
		margin: 80px 0 -70px;
	}

	.za-journey-nav ul li {
		padding: 12px 50px;
		font-size: 18px;
	}

	.za-journey-box {
		padding: 100px 0;
		min-height: 650px;
	}

	.za-journey-cont>ul {
		margin: 30px 0 0px;
	}

	#visualize .za-journey-cont {
		max-width: 380px;
	}

	.za-integ-diagram {
		grid-template-columns: repeat(2, calc(6 * 68px + 5 * 10px)) 80px;
	}

	.za-integ-row {
		grid-template-columns: repeat(6, 68px);
		column-gap: 10px;
	}

	.za-cell {
		width: 68px;
		height: 62px;
	}

	.za-cat-label {
		width: 68px;
		height: 62px;
		font-size: 12px;
	}

	.za-integ-center {
		width: 80px;
		min-height: 494px;
	}

	.za-custories-head {
		padding: 0 0 30px;
	}

	.za-rating-section ul {
		gap: 40px;
		width: 100%;
		transform: scale(.9);
	}

	.za-rating-section ul li:not(:first-child):before {
		inset-inline-start: -20px;
	}

	.za-mapps-section {
		padding: 120px 0;
	}

	.za-truly-section {
		padding: 100px 0;
	}

	.za-bottom-section {
		padding: 100px 0;
	}
}

@media only screen and (max-width : 1280px) {
	.za-page-wrapper .cta-btn {
		padding: 10px 25px;
		font-size: 16px;
	}

	.za-banner-cont>ul>li {
		font-size: 17px;
	}

	.za-banner-section{
		height: 90vh
	}

	.signup-box {
		max-width: 380px;
	}

	.zpromo-strip {
		max-width: 960px;
		margin: 50px auto 60px;
	}

	.zpromo-strip p {
		font-size: 21px;
		line-height: 31px;
		max-width: 600px;
		padding-inline-start: 90px;
	}

	.zpromo-strip p:before {
		width: 60px;
	}

	.zpromo-strip a {
		font-size: 15px;
	}

	.za-journey-nav ul li {
		padding: 12px 30px;
		font-size: 17px;
	}

	.za-journey-cont {
		max-width: 350px;
	}

	.za-journey-box {
		min-height: 680px;
	}

	.za-journey-nav {
		top: 110px;
	}

	#visualize .za-journey-cont {
		max-width: 340px;
	}

	.za-forall-section ul li {
		width: calc(50% - 5px);
		flex: unset;
	}

	/* 991px: reduce cell size */
	.za-integ-diagram {
		grid-template-columns: repeat(2, calc(6 * 60px + 5 * 10px)) 70px;
	}

	.za-integ-row {
		grid-template-columns: repeat(6, 60px);
		column-gap: 10px;
	}

	.za-cell {
		width: 60px;
		height: 54px;
	}

	.za-cat-label {
		width: 60px;
		height: 54px;
		font-size: 11px;
	}

	.za-integ-center {
		width: 70px;
		min-height: 440px;
	}

	.za-clogo {
		max-width: 220px;
	}

	.za-clogo img {
		max-width: 130px;
	}

	.za-custories-right>p {
		max-width: 350px;
	}

	.za-rating-section {
		padding: 40px 0 0;
	}

	.za-rating-section ul li {
		transform: scale(.8);
		transform-origin: top;
	}

	.za-rating-section ul li:not(:first-child):before {
		inset-inline-start: -30px;
	}

	.za-mapps-section {
		padding: 100px 0;
	}

	.za-mapps-cont {
		width: 45%;
	}

	.za-mapps-img {
		width: 50%;
	}

	.za-truly-section h2 .zcolor-txt {
		display: inline-block;
	}
}

@media only screen and (max-width : 1200px) {
	/* Collapse sticky scroll room — no banner scroll-reveal on ≤1200px */
	.za-banner-sticky-wrap {
		height: auto;
		padding-block-end: 0;
	}

	.za-banner-section {
		position: relative;
		top: auto;
		height: auto;
		min-height: auto;
		overflow: visible;
		padding-block-end: 90px;
	}

	.za-banner-section .content-wrap,
	.za-banner-content-box {
		transform: none !important;
		opacity: 1 !important;
		will-change: auto;
	}

	.za-banner-section .banner-grass-bg {
		bottom: -25px !important;
		transition: none;
	}
}

@media only screen and (max-width : 1024px) {
	.za-page-wrapper .cta-btn {
		padding: 10px 20px;
	}

	.za-banner-section {
		padding-block-start: 100px;
		border-end-start-radius: 60px;
		border-end-end-radius: 60px;
	}

	.za-banner-cont {
		width: 55%;
		padding: 30px 0 0;
	}

	.za-banner-img {
		width: 45%;
	}

	.signup-box {
		max-width: 360px;
		min-height: 400px;
	}

	.zpromo-strip {
		max-width: 900px;
		margin: 30px auto 60px;
		padding-block: 30px;
		padding-inline-start: 60px;
		padding-inline-end: 40px;
	}

	.zpromo-strip p {
		font-size: 19px;
		line-height: 29px;
		padding-inline-start: 90px;
		max-width: 540px;
	}

	.za-gartner-wrap img {
		max-width: 140px;
	}

	.za-gartner-wrap p {
		font-size: 16px;
	}

	.trust-icon .ae-icon {
		margin-inline-end: 80px;
	}

	.trust-icon .ae-icon img {
		transform: scale(.85);
	}

	.za-journey-nav {
		top: 20px;
	}

	.za-journey-img {
		padding: 40px 0 0;
	}

	.za-journey-box {
		top: 40px;
		padding: 80px 0;
	}

	.za-integ-head>p {
		font-size: 17px;
	}

	a.play-btn {
		position: absolute;
		inset-inline-end: 30px;
		top: 30px;
		font-size: 13px;
	}

	.za-custories-data>li {
		padding: 30px 20px;
	}

	.za-custories-data>li h4 {
		font-size: 26px;
	}

	.za-custories-data>li:nth-child(2) h4::after {
		top: 14px;
	}

	.za-custories-data>li h4.zmarketdojo:before {
		inset-inline-start: 45px;
	}

	.za-custories-data>li h4.zmarketdojo::after {
		inset-inline-start: 46.5px;
	}

	.za-truly-section h2 {
		max-width: 480px;
	}

	.za-bottom-section {
		padding: 80px 0;
	}
}

@media only screen and (max-width : 991px) {
	.za-banner-section {
		padding-block-start: 90px;
		border-end-start-radius: 48px;
		border-end-end-radius: 48px;
		padding-block-end: 75px;
	}

	.za-banner-section .banner-grass-bg {
		display: none;
	}

	.za-page-wrapper h2{
		font-size: 30px;
	}

	.za-journey-section h2{
		width: 100%;
	}

	.za-page-wrapper h1{
		font-size: 50px;
		letter-spacing: -2px;
		line-height: normal;
	}
	.za-banner-cont .ai-tag{
		font-size: 15px;
		margin-block: 4px;
	}

	.za-banner-content-box {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	.za-banner-cont {
		width: 100%;
		padding: 30px 0 0;
		text-align: center;
	}

	.za-banner-cont>ul {
		justify-content: center;
	}

	.za-cta-box {
		justify-content: center;
	}

	.za-page-wrapper .cta-btn {
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 15px;
	}

	.non-umain .za-cta-box .cta-btn {
		display: block;
	}

	.non-umain .ai-tag{
		margin-inline: auto;
	}

	.non-umain .za-banner-cont p{
		max-width: 100%;
	}

	.za-banner-img {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}

	.signup-box {
		max-width: 100%;
		min-height: 400px;
		max-height: none;
		overflow: visible;
		display: none;
	}

	.trust-icon .ae-icon {
		margin-inline-end: 60px;
	}

	.zdb-create,
	.zdb-tooltip,
	.za-db-wrap>div {
		display: none;
	}

	.za-db-wrap {
		transform: none;
		max-width: 100%;
		width: 90%;
	}

	.za-gartner-wrap {
		max-width: 600px;
	}

	.zag-promo-box {
		gap: 15px 30px;
		flex-wrap: wrap;
		flex-direction: column;
	}

	.za-gartner-wrap p {
		font-size: 16px;
		line-height: 26px;
		text-align: center;
	}

	.zag-promo-box>div:nth-child(2) {
		max-width: 340px;
	}

	.za-journey-nav {
		display: none;
		position: relative;
	}

	.za-journey-wrap {
		width: 95%;
		margin: 40px auto 0;
	}

	.za-journey-box {
		top: 0;
		padding: 60px 0 0;
		position: relative;
		flex-direction: column;
		min-height: auto;
		margin: 30px 0 0;
	}

	.za-journey-cont,
	#visualize .za-journey-cont {
		max-width: 550px;
		width: 100%;
	}

	#connect h3 {
		max-width: 380px;
	}

	.za-journey-cont>ul {
		margin: 20px 0 0;
	}

	.za-journey-img {
		width: 90%;
		margin-inline-start: auto;
	}

	.zpromo-strip {
		max-width: 500px;
		margin: 0 auto 40px;
		padding: 40px 50px;
		flex-direction: column;
		border-radius: 20px;
	}

	.zpromo-strip p {
		font-size: 17px;
		line-height: 24px;
		text-align: center;
		padding: 70px 0 20px;
		max-width: 400px;
	}

	.zpromo-strip p:before {
		inset-inline: 0;
		margin: auto;
		top: 0;
	}

	.zpromo-strip p span {
		margin: 10px auto;
	}

	.za-forall-section h2 {
		text-align: center;
		margin: 0 auto;
	}

	.za-integ-panel {
		gap: 10px;
	}

	.za-custories-left {
		width: 100%;
		text-align: center;
	}

	.za-custories-right {
		display: none;
	}

	.za-custories-head {
		padding: 0;
	}

	.za-custories-testimonials {
		margin: 40px 0 0;
	}

	.za-testi-cont {
		padding: 30px;
	}

	.za-testi-cont h4 {
		font-size: 21px;
		line-height: 32px;
		max-width: 280px;
	}

	#zcust-testimonials li:nth-child(2) h4 {
		max-width: 360px;
	}

	a.play-btn {
		inset-inline-end: 30px;
		top: 30px;
		display: none;
	}

	#zcust-testi-sm {
		bottom: 30px;
		inset-inline-start: 30px;
	}

	.za-testi-cont p>b {
		font-size: 17px;
	}

	.za-custories-data>li h4 {
		font-size: 22px;
	}

	.za-custories-data>li h4 svg {
		width: 25px;
		height: 25px;
	}

	.za-custories-data>li p {
		font-size: 14px;
		line-height: 20px;
		margin: 0 0 15px;
	}

	.za-custories-data>li a {
		font-size: 15px;
		padding-inline-end: 12px;
	}

	.za-rating-section ul {
		transform: scale(1);
		flex-wrap: wrap;
		max-width: 720px;
		gap: 15px 40px;
	}

	.za-rating-section ul li:nth-child(5):before {
		display: none;
	}

	.za-mapps-section {
		padding: 60px 0 80px;
	}

	.za-mapps-img {
		padding: 0;
		display: flex;
		align-items: flex-end;
	}

	.za-mapps-img img {
		margin: 0;
	}

	.p-120{
		padding: 90px 0px;
	}
}

@media only screen and (max-width : 767px) {
	.za-banner-section {
		padding-block-start: 80px;
		border-end-start-radius: 36px;
		border-end-end-radius: 36px;
	}

	.za-banner-cont>ul>li:before {
		top: 8px;
	}

	.za-page-wrapper h1{
		font-size: 35px;
	}

	.za-banner-cont .ai-tag{
		font-size: 12px;
		padding: 10px;
		line-height: normal;
		margin: auto;
	}

	.za-banner-cont img{
		width: 12px;
	}


	.za-banner-img {
		max-width: 400px;
	}

	.za-cta-box {
		flex-wrap: wrap;
	}

	.za-gartner-wrap {
		text-align: center;
		max-width: 450px;
		gap: 10px 20px;
	}

	.za-gartner-wrap p {
		line-height: 24px;
	}

	.za-cust-counts ul>li>span {
		font-size: 38px;
		line-height: 38px;
	}

	.za-cust-counts ul>li p {
		font-size: 17px;
	}

	.za-journey-box {
		padding: 60px 0 0;
	}

	.za-journey-img {
		width: 100%;
	}

	.za-journey-cont,
	#visualize .za-journey-cont {
		max-width: 420px;
		width: 100%;
	}

	#connect h3 {
		max-width: 350px;
	}

	.zpromo-strip {
		border-radius: 20px;
	}

	.zpromo-strip a {
		font-size: 15px;
	}

	.za-forall-section ul {
		margin: 30px 0 0;
	}

	.za-integ-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin: 0 auto;
	}

	.za-integ-links a+a {
		display: inline-block;
		margin: 0;
	}

	.za-custories-head {
		flex-direction: column-reverse;
	}

	.za-custories-left {
		width: 100%;
	}

	.za-custories-right {
		margin: 0 0 40px;
		width: 100%;
		text-align: center;
	}

	.za-custories-testimonials {
		margin: 40px 0 0;
	}

	.za-testi-cont {
		padding: 40px;
	}

	.za-testi-cont h4 {
		font-size: 19px;
		line-height: 28px;
	}

	#zcust-testimonials li:nth-child(2) h4 {
		max-width: 310px;
	}

	#zcust-testi-sm {
		inset-inline-start: auto;
		inset-inline-end: 20px;
	}

	.za-custories-data {
		gap: 10px;
		flex-wrap: wrap;
	}

	.za-custories-data>li {
		padding: 20px;
		width: calc(50% - 5px);
	}

	.za-custories-data>li h4 {
		font-size: 22px;
		margin: 10px 0 0;
	}

	.za-custories-data>li p {
		max-width: 100%;
	}

	a.play-btn {
		transform: scale(.8);
		transform-origin: top right;
	}

	.za-rating-section ul {
		flex-wrap: wrap;
		max-width: 600px;
	}

	.za-rating-section ul li {
		width: 25%;
	}

	.za-rating-section ul li:not(:first-child):before {
		display: none;
	}

	.rating-star {
		margin: 0 auto;
	}

	.za-mapps-section {
		padding: 60px 0;
	}

	.za-mapps-box {
		flex-direction: column;
		text-align: center;
	}

	.za-mapps-cont {
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	.apps-download-links-wrap {
		margin: 20px 0 10px;
	}

	.za-mapps-img {
		width: 100%;
		margin: 30px 0 0;
	}

	.za-mapps-img img {
		margin: 0 auto;
		max-width: 450px;
	}

	.za-truly-section h2 {
		max-width: 440px;
	}

	.za-truly-section ul>li {
		height: 300px;
		padding: 20px;
	}

	.za-truly-section ul>li h3 {
		font-size: 19px;
	}

	.za-truly-nav {
		display: flex;
	}

	.za-truly-box {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.za-truly-box::-webkit-scrollbar {
		display: none;
	}

	.p-120{
		padding: 60px 0px;
	}
}

@media only screen and (max-width : 565px) {
	.iframe-step-section{
		display: none;
	}
}

@media only screen and (max-width : 480px) {

	.za-banner-section {
		padding-block-start: 70px;
		border-end-start-radius: 24px;
		border-end-end-radius: 24px;
	}

	.za-page-wrapper h2{
		font-size: 25px;
	}

	.za-page-wrapper h3{
		font-size: 20px;
	}

	.za-journey-cont>ul>li{
		font-size: 15px;
	}

	.za-page-wrapper h1{
		font-size: 30px;
	}

	.za-banner-cont {
		padding: 20px 0 0;
		text-align: center;
	}

	.za-banner-cont p{
		font-size: 15px;
		margin-block-end: 8px;
	}

	.za-banner-cont>ul>li{
		font-size: 13px;
        letter-spacing: normal;
	}

	.za-banner-cont>ul {
		justify-content: center;
	}

	.za-cta-box {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}

	.za-page-wrapper .za-banner-section .cta-btn,
	.za-cta-box .watch-btn {
		display: block;
		width: 235px;
	}

	.za-cta-box .watch-btn::after {
		inset-inline-start: 38px;
	}

	.za-banner-img {
		max-width: 340px;
	}

	.signup-box {
		min-height: 380px;
	}

	.zpromo-strip {
		max-width: 300px;
		padding: 30px 10px;
		border-radius: 10px;
	}

	.za-gartner-wrap img {
		max-width: 120px;
	}

	.za-gartner-wrap>div:nth-child(2) {
		max-width: 200px;
	}

	.za-cust-counts ul>li>span {
		font-size: 30px;
		line-height: 30px;
	}

	.za-cust-counts ul>li p {
		font-size: 14px;
	}

	.za-gartner-wrap {
		max-width: 330px;
	}

	.trust-icon .ae-icon {
		margin-inline-end: 50px;
	}

	.za-journey-cont,
	#visualize .za-journey-cont {
		max-width: 270px;
		width: 100%;
	}

	.za-journey-box {
		padding: 40px 0 0;
	}

	.za-journey-cont>ul {
		max-width: 100%;
	}

	.za-journey-cont>ul>li {
		padding-block-end: 20px;
		padding-inline-start: 25px;
	}

	.za-journey-img {
		margin: 0 auto;
	}

	.za-forall-section ul li {
		width: 100%;
	}

	.za-integ-diagram {
		margin: 40px 0 30px;
		grid-template-columns: repeat(2, calc(6 * 50px + 5 * 8px)) 60px;
	}

	.za-integ-row {
		grid-template-columns: repeat(6, 50px);
		column-gap: 8px;
	}

	.za-cell {
		width: 50px;
		height: 46px;
	}

	.za-cat-label {
		width: 50px;
		height: 46px;
		font-size: 10px;
	}

	.za-integ-center {
		width: 60px;
		min-height: 380px;
	}

	.za-integ-panel {
		gap: 8px;
	}

	.zrmore-cta {
		padding-inline-end: 15px;
		font-size: 15px;
		line-height: 26px;
	}

	.za-testi-cont {
		position: relative;
		padding: 40px 30px 20px;
	}

	#zcust-testi-sm {
		inset-inline-start: 25px;
		position: relative;
		bottom: 0;
		padding: 0 0 20px;
		max-width: 150px;
	}

	a.play-btn {
		inset-inline-end: auto;
		top: -50px;
		inset-inline-start: 0;
	}

	.za-integ-head h2,
	.za-custories-section h2{
		width: 100%;
	}

	.za-custories-data>li:nth-child(1) img,
	.za-custories-data>li:nth-child(4) img {
		max-width: 100px;
	}

	.za-forall-section ul li h3{
		font-size: inherit;
	}

	.za-rating-section .rating-logo {
		margin: 0 0 10px;
	}

	.za-rating-section ul li {
		width: 34%;
	}

	.za-rating-section ul {
		max-width: 360px;
	}

	.za-mapps-cont {
		max-width: 320px;
		margin: 0 auto;
	}

	.za-mapps-img img {
		max-width: 320px;
	}

	.za-truly-section h2 {
		max-width: 240px;
	}
 
	.other-lang .za-banner-cont h1 {
		font-size: 32px;
	}
}

@media only screen and (max-width: 567px) {
	.za-banner-section {
		padding-block-start: 100px;
	}

	.za-truly-section h2 {
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 435px) {
	.za-truly-section h2 {
		width: 100%;
		max-width: 100%;
	}

	.za-cta-box {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
}

/* ── Integration diagram → logo marquee at ≤1300px ── */
@media only screen and (max-width: 1300px) {
	.za-integ-diagram {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
		max-width: 100%;
		width: 100%;
		margin: 40px auto 30px;
		overflow: hidden;
		grid-template-columns: none;
	}

	.za-integ-lines-wrap,
	.za-integ-panel,
	.za-integ-center {
		display: none;
	}

	.za-integ-marquee {
		display: block;
		width: 100%;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	}

	.za-integ-marquee__track {
		display: flex;
		align-items: center;
		gap: 12px;
		width: max-content;
		animation: za-integ-marquee 45s linear infinite;
	}

	.za-integ-marquee__track:hover {
		animation-play-state: paused;
	}

	.za-integ-marquee .za-cell--logo {
		flex: 0 0 auto;
		width: 72px;
		height: 64px;
		z-index: 1;
	}

	.za-integ-marquee .za-cell--logo img {
		max-width: 44px;
		max-height: 38px;
	}

	/* RTL: reverse scroll direction */
	[dir="rtl"] .za-integ-marquee__track,
	.i18n-ar .za-integ-marquee__track {
		animation-direction: reverse;
	}
}

@media only screen and (max-width: 767px) {
	.za-integ-marquee__track {
		gap: 10px;
		animation-duration: 35s;
	}

	.za-integ-marquee .za-cell--logo {
		width: 60px;
		height: 54px;
	}

	.za-integ-marquee .za-cell--logo img {
		max-width: 36px;
		max-height: 32px;
	}
}

/* ── Reduced motion: disable new animations for users who prefer it ── */
@media (prefers-reduced-motion: reduce) {
	.za-truly-dot {
		animation: none;
		opacity: 0.3;
	}

	.za-integ-marquee__track {
		animation: none;
	}

	.za-line.in-view {
		animation: none;
		opacity: 1;
		clip-path: inset(0 0% 0 0%);
	}
}

/* .zpromotion — hidden by default, used for promotional strips */
.zpromotion {
	display: none;
}