/* Utilities */
		.eyebrow {
			text-transform: uppercase;
			letter-spacing: .08em;
			font-weight: 600;
			opacity: .8;
		}

		.button-row {
			display: flex;
			gap: .75rem;
			flex-wrap: wrap;
		}

		.muted {
			opacity: .75;
		}

		.pill {
			display: inline-flex;
			align-items: center;
			gap: .5rem;
			padding: .35rem .65rem;
			border-radius: 999px;
			border: 1px solid rgba(0, 0, 0, .08);
		}

		.check {
			font-weight: 600;
		}

		.stat-num {
			font-size: 56px;
			line-height: 1;
		}

		/* Layout helpers */
		.hero-offset {
			margin-top: -80px;
		}

		@media (max-width:767px) {
			.hero-offset {
				margin-top: 0 !important;
			}
		}

		.page-padding {
			padding-left: clamp(16px, 4vw, 40px);
			padding-right: clamp(16px, 4vw, 40px);
		}

		.padding-vertical.padding-xhuge {
			padding-top: clamp(48px, 8vw, 120px);
			padding-bottom: clamp(48px, 8vw, 120px);
		}

		/* Hero */
		.home-hero-component {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: clamp(16px, 4vw, 56px);
			align-items: center;
		}

		@media (max-width:991px) {
			.home-hero-component {
				grid-template-columns: 1fr;
			}

			.home-hero-content {
				text-align: center;
			}

			.button-row {
				justify-content: center;
			}
		}

		.home-hero-content h1 {
			margin: 0;
			line-height: 1.12;
			font-size: clamp(28px, 3.2vw + 10px, 54px);
		}

		.home-hero-content .muted {
			font-size: clamp(14px, 1vw + 10px, 18px);
		}

		/* Lottie scales fluidly */
		.home-hero-section dotlottie-player {
			width: 100% !important;
			max-width: clamp(260px, 42vw, 560px) !important;
			height: auto !important;
		}

		@media (min-width:1400px) {
			.home-hero-section dotlottie-player {
				max-width: 640px !important;
			}
		}

		/* Grids */
		.features-grid,
		.services-grid,
		.work-grid {
			display: grid;
			gap: 24px;
			grid-template-columns: repeat(12, 1fr);
		}

		.feature-card,
		.service-card,
		.work-card {
			grid-column: span 12;
			border: 1px solid rgba(0, 0, 0, .06);
			border-radius: 12px;
			padding: 20px;
			background: var(--card, #fff);
			box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
		}

		@media (min-width:768px) {
			.feature-card {
				grid-column: span 4;
			}

			.service-card {
				grid-column: span 4;
			}

			.work-card {
				grid-column: span 6;
			}
		}

		.work-card img {
			width: 100%;
			height: auto;
			border-radius: 10px;
			margin-bottom: 12px;
		}

		/* Logos row */
		.logos-row {
			display: flex;
			gap: 28px;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}

		.logos-row img {
			height: clamp(22px, 3.2vw, 40px);
			width: auto;
			opacity: .9;
		}

		/* Red CTA */
		.button.w-button.is-red {
			background: #e11d48;
			border-color: #e11d48;
			color: #fff;
		}

		.button.w-button.is-red:hover {
			background: #be123c;
			border-color: #be123c;
		}

		.button.w-button.is-red:focus {
			outline: 2px solid #fecdd3;
			outline-offset: 2px;
		}

		/* CTA panel */
		.cta-panel {
			border: 1px solid rgba(0, 0, 0, .06);
			border-radius: 16px;
			text-align: center;
		}

		/* LOTTIE */
		.home-hero-section .hero-lottie {
			width: 100% !important;
			max-width: clamp(340px, 42vw, 560px) !important;
			aspect-ratio: 1 / 1;
			height: auto !important;
			display: block;
		}

		@media (min-width:1400px) {
			.home-hero-section .hero-lottie {
				max-width: 540px !important;
			}
		}

		.home-hero-content,
		.home-hero-content h1,
		.home-hero-content .muted {
			font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
		}

		.home-hero-content h1 {
			font-weight: 800;
			letter-spacing: -0.01em;
		}

		.home-hero-content .muted {
			font-weight: 500;
		}

		/* Section bands */
		.section-band {
			background: linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, 0));
		}

		.section-plain {
			background: transparent;
		}

		/* Cards */
		.card-elevated {
			border: 1px solid rgba(0, 0, 0, .06);
			border-radius: 16px;
			background: #fff;
			box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
			padding: 24px;
		}

		.card-quiet {
			border: 1px solid rgba(0, 0, 0, .06);
			border-radius: 14px;
			background: linear-gradient(180deg, #fff, #fafafa);
			padding: 20px;
		}

		/* Grids (theme-friendly) */
		.grid-3,
		.grid-2 {
			display: grid;
			gap: 24px;
			grid-template-columns: repeat(12, 1fr);
		}

		.grid-3>* {
			grid-column: span 12;
		}

		.grid-2>* {
			grid-column: span 12;
		}

		@media (min-width:768px) {
			.grid-3>* {
				grid-column: span 4;
			}

			.grid-2>* {
				grid-column: span 6;
			}
		}

		/* Icons & pills */
		.icon-circle {
			width: 44px;
			height: 44px;
			border-radius: 999px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border: 1px solid rgba(0, 0, 0, .08);
			margin-bottom: 12px;
		}

		.icon-24 {
			width: 24px;
			height: 24px;
		}

		/* Steps */
		.step {
			display: flex;
			gap: 14px;
			align-items: flex-start;
		}

		.step-number {
			width: 38px;
			height: 38px;
			border-radius: 999px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			border: 1px solid rgba(0, 0, 0, .08);
			background: #fff;
			flex: 0 0 auto;
		}

		.step-body h3 {
			margin: 0 0 6px;
		}

		/* Stat bar */
		.stat-bar {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border: 1px solid rgba(0, 0, 0, .06);
			border-radius: 16px;
			overflow: hidden;
			background: #fff;
		}

		.stat-item {
			padding: 22px;
			text-align: center;
		}

		.stat-item+.stat-item {
			border-left: 1px solid rgba(0, 0, 0, .06);
		}

		.stat-kpi {
			font-size: 40px;
			line-height: 1;
			font-weight: 800;
		}

		/* Work image cards with caption */
		.work-img {
			position: relative;
			overflow: hidden;
			border-radius: 16px;
		}

		.work-img img {
			display: block;
			width: 100%;
			height: auto;
		}

		.work-img .caption {
			position: absolute;
			left: 12px;
			bottom: 12px;
			background: rgba(0, 0, 0, .65);
			color: #fff;
			padding: 8px 12px;
			border-radius: 999px;
			font-size: 14px;
		}

		/* NEW: testimonials & badges */
		.testimonial {
			display: flex;
			gap: 14px;
		}

		.avatar {
			width: 44px;
			height: 44px;
			border-radius: 999px;
			object-fit: cover;
			flex: 0 0 auto;
			border: 1px solid rgba(0, 0, 0, .08);
		}

		.quote {
			font-weight: 500;
		}

		.badge {
			display: inline-flex;
			align-items: center;
			gap: .5rem;
			padding: .35rem .6rem;
			border-radius: 999px;
			background: #fff;
			border: 1px solid rgba(0, 0, 0, .06);
		}

		.badge-dot {
			width: 8px;
			height: 8px;
			border-radius: 999px;
			background: #22c55e;
		}

		/* Fixed image height (desktop + mobile) */
		.choose-us-grid .work-card img {
			height: 220px;
			width: 100%;
			object-fit: cover;
			display: block;
			border-radius: 10px;
		}

		/* Turn the grid into a horizontal scroller on mobile */
		@media (max-width: 767px) {
			.choose-us-grid {
				display: flex;
				gap: 16px;
				overflow-x: auto;
				padding: 0 12px 8px;
				scroll-snap-type: x mandatory;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
			}

			.choose-us-grid::-webkit-scrollbar {
				display: none;
			}

			.choose-us-grid .work-card {
				flex: 0 0 82%;
				scroll-snap-align: start;
			}

			.choose-us-grid .work-card img {
				height: 180px;
			}

			/* Hide 'How it works' illustration on mobile */
			.how-illustration {
				display: none;
			}
		}

		/* Optional: center the security Lottie nicely */
		.security-lottie-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px;
		}

		/* ---- Scoped theme just for chosen sections ---- */
		.theme-surface {
			--ts-bg-band-from: rgba(0, 0, 0, .03);
			--ts-bg-band-to: rgba(0, 0, 0, 0);
			--ts-card: #ffffff;
			--ts-card-fg: #0b0f14;
			--ts-muted: #5f6873;
			--ts-border: rgba(0, 0, 0, .08);
			--ts-shadow: 0 6px 18px rgba(0, 0, 0, .06);
		}

		@media (prefers-color-scheme: dark) {
			.theme-surface {
				--ts-bg-band-from: rgba(255, 255, 255, .05);
				--ts-bg-band-to: rgba(255, 255, 255, 0);
				--ts-card: #151a21;
				--ts-card-fg: #e7edf3;
				--ts-muted: rgba(231, 237, 243, .72);
				--ts-border: rgba(255, 255, 255, .12);
				--ts-shadow: 0 10px 24px rgba(0, 0, 0, .5);
			}
		}

		/* === Scoped theme ONLY for these two sections ===
   Light by default; dark only when html[data-theme="dark"] or body.dark is present. */
		.theme-surface {
			--ts-bg-band-from: rgba(0, 0, 0, .02);
			--ts-bg-band-to: rgba(0, 0, 0, 0);
			--ts-card: #ffffff;
			--ts-card-fg: #0b0f14;
			--ts-muted: #5f6873;
			--ts-border: rgba(0, 0, 0, .10);
			--ts-shadow: 0 6px 18px rgba(0, 0, 0, .06);
		}

		/* Activate dark look ONLY when you set the page theme */
		html[data-theme="dark"] .theme-surface,
		body.dark .theme-surface {
			--ts-bg-band-from: rgba(255, 255, 255, .05);
			--ts-bg-band-to: rgba(255, 255, 255, 0);
			--ts-card: #151a21;
			--ts-card-fg: #e7edf3;
			--ts-muted: rgba(231, 237, 243, .74);
			--ts-border: rgba(255, 255, 255, .12);
			--ts-shadow: 0 10px 24px rgba(0, 0, 0, .5);
		}

		/* Apply the scoped variables */
		.theme-surface {
			background: linear-gradient(180deg, var(--ts-bg-band-from), var(--ts-bg-band-to));
		}

		.theme-surface .card-elevated,
		.theme-surface .card-quiet,
		.theme-surface .feature-card,
		.theme-surface .service-card,
		.theme-surface .work-card,
		.theme-surface .stat-bar,
		.theme-surface .cta-panel,
		.theme-surface .icon-circle,
		.theme-surface .pill,
		.theme-surface .badge {
			background: var(--ts-card) !important;
			color: var(--ts-card-fg);
			border: 1px solid var(--ts-border);
			box-shadow: var(--ts-shadow);
		}

		.theme-surface .muted {
			color: var(--ts-muted);
			opacity: 1;
		}

		.theme-surface .stat-item+.stat-item {
			border-left: 1px solid var(--ts-border);
		}

		.theme-surface .work-img .caption {
			background: rgba(0, 0, 0, .65);
			color: #fff;
		}

		/* ---- Moving Clients Section ---- */
		.clients-section {
			background: #f7f8fc;
		}

		.clients-section .page-padding {
			padding-top: clamp(40px, 6vw, 72px);
			padding-bottom: clamp(40px, 6vw, 72px);
		}

		.clients-card {
			max-width: 1080px;
			margin: 0 auto;
			background: #fff;
			border-radius: 32px;
			padding: 30px 24px;
			box-shadow: 0 24px 70px rgba(15,23,42,.08);
			border: 1px solid rgba(15,23,42,.08);
		}

		.scroll-wrapper {
			overflow: hidden;
			position: relative;
			width: 100%;
			padding: 0 8px;
			mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
			-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
		}

		.scroll-track {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: clamp(56px, 6vw, 100px);
			animation: scroll 28s linear infinite;
			padding: 14px 0;
		}

		.client-logo-item {
			min-width: 180px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 18px 16px;
			border-radius: 24px;
			background: #f8fbff;
			box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
		}

		.scroll-track img {
			max-width: 240px;
			height: auto;
			object-fit: contain;
			filter: grayscale(100%) opacity(.72);
			transition: transform .3s ease, filter .3s ease, opacity .3s ease;
		}

		.scroll-track:hover img {
			opacity: 1;
			filter: grayscale(0%);
			transform: scale(1.03);
		}

		@keyframes scroll {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(-50%);
			}
		}

		/* Responsive adjustments */
		@media (max-width: 991px) {
			.scroll-track {
				gap: clamp(20px, 5vw, 30px);
				animation: scroll 30s linear infinite;
			}
		}

		@media (max-width: 767px) {
			.scroll-track img {
				height: clamp(26px, 4vw, 38px);
			}
		}

		/* Static Dynamic Grid similar to screenshot */
		.clients-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 30px;
			max-width: 900px;
			margin: 0 auto;
			text-align: center; /* Guarantee center alignment */
		}

		@media (max-width: 767px) {
			.clients-grid {
				gap: 20px;
			}
		}

		.client-logo-card {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			border: 1px solid #eaeaea; /* Fixed card outline */
			border-radius: 8px;
			width: 240px;    /* Fixed width */
			height: 120px;   /* Fixed height */
			padding: 20px;
			transition: all 0.3s ease;
			cursor: pointer;
		}

		.client-logo-card img {
			max-height: 80px; /* Increased for bigger logo */
			max-width: 200px; /* Increased for bigger logo */
			object-fit: contain;
			opacity: 1; /* Colorful by default */
			transition: all 0.3s ease;
		}

		.client-logo-card:hover {
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Dynamic hover */
			transform: translateY(-2px);
			border-color: #d1d5db;
		}

		.client-logo-card:hover img {
			transform: scale(1.05); /* Slight pop on hover */
		}