/* Custom development — concept two
 * Reference-led dark landing page using the existing development purple.
 */

html:has(body.page-template-template-custom-development-v2),
.page-template-template-custom-development-v2 {
	--pink: #7c3aed;
	--pink-bright: #a78bfa;
	--purple: #5b21b6;
	--navy: #18082c;
	--gradient: linear-gradient(115deg, #b99cff 0%, #7c3aed 48%, #3b0764 100%);
	--cd2-bg: #08070b;
	--cd2-bg-soft: #0d0a12;
	--cd2-panel: #121017;
	--cd2-panel-2: #18131f;
	--cd2-text: #f7f4fb;
	--cd2-muted: #9b94a4;
	--cd2-line: rgba(255, 255, 255, 0.1);
	--cd2-purple: #7c3aed;
	--cd2-purple-light: #b99cff;
	--cd2-purple-dark: #3b0764;
	--cd2-glow: rgba(124, 58, 237, 0.3);
	background: var(--cd2-bg);
	scrollbar-color: #6530bd #0b0910;
}

body.page-template-template-custom-development-v2 {
	overflow-x: clip;
	background: var(--cd2-bg);
	color: var(--cd2-text);
}

.page-template-template-custom-development-v2 .brand-line {
	height: 3px;
	background: linear-gradient(90deg, #2e1065, #a78bfa 48%, #4c1d95);
}

.page-template-template-custom-development-v2 .site-header {
	border-bottom-color: rgba(255, 255, 255, 0.06);
	background: rgba(9, 7, 13, 0.96);
	box-shadow: 0 12px 38px rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	backdrop-filter: blur(18px) saturate(135%);
}

.page-template-template-custom-development-v2 .site-header .brand img {
	filter: brightness(0) invert(1);
}

.page-template-template-custom-development-v2 .site-header.is-scrolled {
	border-bottom-color: rgba(255, 255, 255, 0.08);
	background: rgba(8, 7, 11, 0.94);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.page-template-template-custom-development-v2 .site-header .site-menu > li > a,
.page-template-template-custom-development-v2 .header-phone {
	color: rgba(255, 255, 255, 0.86);
}

.page-template-template-custom-development-v2 .site-header .site-menu > li > a:hover,
.page-template-template-custom-development-v2 .header-phone:hover {
	color: #fff;
}

.page-template-template-custom-development-v2 .site-header .button--small {
	background: linear-gradient(135deg, #8b5cf6, #5b21b6);
	box-shadow: 0 12px 28px rgba(91, 33, 182, 0.28);
	color: #fff;
}

.page-template-template-custom-development-v2 .site-header .review-badge--header {
	border-right-color: rgba(255, 255, 255, 0.14);
	background: transparent;
	color: #fff;
}

.page-template-template-custom-development-v2 .site-header .review-badge--header small {
	color: rgba(255, 255, 255, 0.64);
}

.page-template-template-custom-development-v2 .site-header .header-phone span {
	color: #b99cff;
}

.page-template-template-custom-development-v2 .menu-toggle {
	color: #fff;
}

.page-template-template-custom-development-v2 .menu-toggle__icon i {
	background: currentColor;
}

.page-template-template-custom-development-v2 .mega-menu__panel {
	color: var(--ink);
}

.page-template-template-custom-development-v2 .site-header__inner > .primary-nav.reveal-on-scroll {
	translate: none;
	will-change: opacity;
}

.page-template-template-custom-development-v2 .container {
	width: min(calc(100% - 64px), 1180px);
}

.cd2-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(96px, 10vw, 150px);
}

.cd2-section h2,
.cd2-capabilities h2 {
	margin: 0;
	color: var(--cd2-text);
	font-size: clamp(2.15rem, 4.2vw, 4.35rem);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1.02;
}

.cd2-section h2 em,
.cd2-capabilities h2 em,
.cd2-hero h1 em {
	background: linear-gradient(110deg, #d8c7ff 0%, #9b6cff 42%, #6d28d9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: "Kaushan Script", "Segoe Script", cursive;
	font-size: 0.82em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.18;
}

.cd2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cd2-eyebrow span {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cd2-purple-light);
	box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.1);
}

.cd2-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 54px;
	padding: 0 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9px;
	background: linear-gradient(135deg, #8b5cf6, #5b21b6);
	box-shadow: 0 14px 34px rgba(70, 28, 144, 0.28), inset 0 1px rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cd2-button:hover {
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 18px 40px rgba(83, 38, 163, 0.4), inset 0 1px rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
}

.cd2-button--ghost {
	border-color: rgba(255, 255, 255, 0.13);
	background: rgba(255, 255, 255, 0.055);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.88);
}

.cd2-button--ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: none;
}

.cd2-button--small {
	min-height: 48px;
	padding-inline: 19px;
}

.cd2-button__play {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.48rem;
}

.cd2-section-head {
	max-width: 700px;
	margin: 0 auto clamp(52px, 7vw, 80px);
	text-align: center;
}

.cd2-section-head > p:last-child {
	max-width: 65ch;
	margin: 22px auto 0;
	color: var(--cd2-muted);
	font-size: 0.87rem;
	line-height: 1.8;
}

.cd2-section-head--left {
	margin-inline: 0;
	text-align: left;
}

.cd2-section-head--split {
	display: flex;
	max-width: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	text-align: left;
}

/* Shared ambient stage details */
.cd2-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 10%, #000 0%, transparent 70%);
	pointer-events: none;
}

.cd2-ambient {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}

.cd2-ambient--one {
	top: -12rem;
	left: 22%;
	width: 34rem;
	height: 34rem;
	background: rgba(91, 33, 182, 0.32);
}

.cd2-ambient--two {
	top: 34rem;
	right: -18rem;
	width: 38rem;
	height: 38rem;
	background: rgba(124, 58, 237, 0.16);
}

.cd2-beam {
	position: absolute;
	z-index: -1;
	width: 380px;
	height: 600px;
	op: 18%;
	overflow: hidden;
	opacity: 0.6;
	pointer-events: none;
}

.cd2-beam::before,
.cd2-beam::after {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(185, 156, 255, 0.11);
	background: linear-gradient(120deg, transparent 15%, rgba(123, 76, 217, 0.1) 50%, transparent 70%);
	content: "";
	transform: rotate(28deg) skewY(-10deg);
}

.cd2-beam::after {
	inset: 54px -60px;
	opacity: 0.6;
}

.cd2-beam--left {
	left: -230px;
}

.cd2-beam--right {
	right: -230px;
	transform: scaleX(-1);
}

/* Hero */
.cd2-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 9vw, 130px) 0 58px;
	background:
		radial-gradient(ellipse 80% 42% at 50% 7%, rgba(76, 29, 149, 0.26), transparent 70%),
		linear-gradient(180deg, #09070d 0%, #0a080e 62%, #0d0a12 100%);
	color: var(--cd2-text);
}

.cd2-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	text-align: center;
}

.cd2-rating {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 25px;
	padding: 9px 32px 9px 12px;
	border: 1px solid rgba(167, 139, 250, 0.22);
	border-radius: 999px;
	background: rgba(20, 13, 29, 0.78);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
	color: #fff;
	transition: border-color 180ms ease, transform 180ms ease;
}

.cd2-rating:hover {
	border-color: rgba(167, 139, 250, 0.48);
	transform: translateY(-2px);
}

.cd2-rating__google-mark {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
}

.cd2-rating__google-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cd2-rating__score {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.cd2-rating__copy {
	display: grid;
	gap: 3px;
	text-align: left;
	line-height: 1;
}

.cd2-rating__stars {
	color: #f2b600;
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.cd2-rating__copy small {
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.56rem;
	font-weight: 650;
}

.cd2-rating__verified {
	position: absolute;
	top: -6px;
	right: 9px;
	display: grid;
	width: 16px;
	height: 16px;
	place-items: center;
	background: #4285f4;
	box-shadow: 0 5px 12px rgba(38, 98, 190, 0.28);
	color: #fff;
	clip-path: polygon(50% 0%, 61% 11%, 76% 5%, 82% 20%, 100% 24%, 94% 41%, 100% 52%, 88% 64%, 94% 82%, 76% 84%, 68% 100%, 51% 91%, 35% 100%, 27% 84%, 8% 81%, 13% 63%, 0% 50%, 12% 38%, 5% 21%, 23% 18%, 31% 4%);
	font-size: 0.42rem;
	transform: rotate(-8deg);
}

.cd2-rating__verified b {
	line-height: 1;
	transform: rotate(8deg);
}

.cd2-hero .cd2-eyebrow {
	display: flex;
	width: max-content;
	margin: 0 auto 18px;
}

.cd2-hero h1 {
	margin: 0;
	font-size: clamp(2.75rem, 6.45vw, 6rem);
	font-weight: 700;
	letter-spacing: -0.07em;
	line-height: 0.98;
}

.cd2-hero__lead {
	max-width: 650px;
	margin: 24px auto 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: clamp(0.86rem, 1.3vw, 1rem);
	line-height: 1.78;
}

.cd2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

.cd2-showreel {
	position: relative;
	z-index: 2;
	max-width: 930px;
	margin-top: clamp(54px, 7vw, 88px);
}

.cd2-showreel::before {
	position: absolute;
	top: -90px;
	left: 50%;
	z-index: -1;
	width: 80%;
	height: 180px;
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.24);
	filter: blur(70px);
	content: "";
	transform: translateX(-50%);
}

.cd2-showreel__frame {
	position: relative;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025));
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.52), 0 0 70px rgba(91, 33, 182, 0.14);
}

.cd2-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 8.4;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #17111e;
	cursor: pointer;
}

.cd2-video .video-facade__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.38) contrast(1.08) brightness(0.72) hue-rotate(18deg);
	transition: filter 500ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cd2-video:hover .video-facade__thumbnail {
	filter: saturate(0.58) contrast(1.06) brightness(0.82) hue-rotate(18deg);
	transform: scale(1.025);
}

.cd2-video__wash {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(14, 7, 24, 0.78), rgba(63, 24, 107, 0.1) 62%, rgba(14, 7, 24, 0.28)),
		linear-gradient(0deg, rgba(8, 5, 12, 0.88), transparent 45%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.cd2-video__top,
.cd2-video__caption,
.cd2-video__play {
	position: absolute;
	z-index: 2;
}

.cd2-video__top {
	top: 20px;
	left: 22px;
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cd2-video__top i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 12px #a78bfa;
}

.cd2-video__play {
	top: 50%;
	left: 50%;
	display: grid;
	width: clamp(58px, 7vw, 76px);
	height: clamp(58px, 7vw, 76px);
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.86);
	box-shadow: 0 16px 38px rgba(45, 13, 89, 0.5), 0 0 0 10px rgba(124, 58, 237, 0.12);
	color: #fff;
	font-size: 0.9rem;
	transform: translate(-50%, -50%);
	transition: transform 180ms ease;
}

.cd2-video:hover .cd2-video__play {
	transform: translate(-50%, -50%) scale(1.06);
}

.cd2-video__caption {
	right: 24px;
	bottom: 22px;
	left: 24px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	color: #fff;
	text-align: left;
}

.cd2-video__caption strong {
	font-size: clamp(0.85rem, 1.5vw, 1.1rem);
}

.cd2-video__caption small {
	color: rgba(255, 255, 255, 0.54);
	font-size: 0.6rem;
}

.cd2-video .video-facade__iframe {
	position: absolute;
	inset: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	border: 0;
}

.cd2-showreel__badge {
	position: absolute;
	right: -42px;
	bottom: -34px;
	display: grid;
	width: 102px;
	height: 102px;
	place-content: center;
	border: 1px solid rgba(185, 156, 255, 0.35);
	border-radius: 50%;
	background: #100c17;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), inset 0 0 28px rgba(124, 58, 237, 0.13);
	color: rgba(255, 255, 255, 0.52);
	font-size: 0.53rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}

.cd2-showreel__badge span {
	color: #b99cff;
	font-size: 1.05rem;
	letter-spacing: 0;
}

.cd2-client-strip {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(30px, 5vw, 70px);
	margin-top: clamp(68px, 8vw, 100px);
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.cd2-client-strip > span {
	max-width: 14ch;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.57rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cd2-client-strip > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-width: 0;
}

.cd2-client-strip img {
	width: auto;
	max-width: 100px;
	height: 40px;
	object-fit: contain;
	filter: grayscale(1) brightness(2.1);
	opacity: 0.34;
}

.cd2-client-strip > .cd2-client-strip__marquee {
	display: block;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.cd2-client-strip__track {
	display: flex;
	width: max-content;
	animation: cd2-client-logo-scroll 30s linear infinite;
	will-change: transform;
}

.cd2-client-strip__marquee:hover .cd2-client-strip__track {
	animation-play-state: paused;
}

.cd2-client-strip__group {
	display: flex;
	align-items: center;
	gap: clamp(42px, 5vw, 76px);
	padding-right: clamp(42px, 5vw, 76px);
}

.cd2-client-strip__group img,
.cd2-client-strip__group img:nth-child(n) {
	display: block;
	width: auto;
	max-width: 128px;
	height: 54px;
	flex: 0 0 auto;
	filter: grayscale(1) brightness(1.8);
	opacity: 0.46;
	transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.cd2-client-strip__group img:hover {
	filter: none;
	opacity: 1;
	transform: scale(1.08);
}

@keyframes cd2-client-logo-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 720px) {
	.cd2-client-strip__group {
		gap: 34px;
		padding-right: 34px;
	}

	.cd2-client-strip__group img,
	.cd2-client-strip__group img:nth-child(n) {
		max-width: 104px;
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cd2-client-strip__track {
		animation-play-state: paused;
	}
}

/* About */
.cd2-about {
	background:
		radial-gradient(circle at 15% 65%, rgba(91, 33, 182, 0.12), transparent 27rem),
		#0d0a12;
}

.cd2-about__grid {
	display: grid;
	grid-template-columns: 0.55fr 1.05fr 1.1fr;
	align-items: start;
	gap: clamp(36px, 6vw, 88px);
}

.cd2-about__label {
	position: sticky;
	top: 130px;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

.cd2-about__label .cd2-eyebrow {
	margin-bottom: 0;
}

.cd2-about__stat {
	margin-top: 24px;
}

.cd2-about__stat strong {
	display: block;
	color: #b99cff;
	font-size: clamp(3rem, 5vw, 5.6rem);
	letter-spacing: -0.08em;
	line-height: 0.9;
}

.cd2-about__stat sup {
	font-size: 0.38em;
}

.cd2-about__stat span {
	display: block;
	max-width: none;
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.44);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.55;
	white-space: nowrap;
	text-transform: uppercase;
}

.cd2-about__copy {
	padding-top: 5px;
}

.cd2-about__copy h2 {
	font-size: clamp(2rem, 3.4vw, 3.55rem);
}

.cd2-about__copy > p {
	margin: 28px 0 24px;
	color: var(--cd2-muted);
	font-size: 0.86rem;
	line-height: 1.88;
}

.cd2-about__platforms {
	display: flex;
	gap: 10px;
	margin: 0 0 22px;
}

.cd2-about__platforms span,
.cd2-hero__platforms span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border: 1px solid rgba(185, 156, 255, 0.27);
	border-radius: 999px;
	background: rgba(185, 156, 255, 0.08);
	color: #d7c8ff;
	font-size: 0.7rem;
	font-weight: 800;
}

.cd2-about__platforms svg,
.cd2-hero__platforms svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.cd2-about__platforms .is-android svg,
.cd2-hero__platforms .is-android svg {
	color: #a4e65e;
}

.cd2-about__platforms .is-ios svg,
.cd2-hero__platforms .is-ios svg {
	color: #fff;
}

.cd2-hero__platforms .is-google-play svg {
	color: #48d597;
}

.cd2-hero__platforms .is-app-store svg {
	color: #70b8ff;
}

.cd2-hero__platforms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 26px;
}

.cd2-text-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(185, 156, 255, 0.5);
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.7rem;
	font-weight: 700;
}

.cd2-text-link span {
	color: #b99cff;
	transition: transform 180ms ease;
}

.cd2-text-link:hover span {
	transform: translate(3px, -3px);
}

.cd2-about__portraits {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: end;
	gap: 14px;
	min-height: 420px;
}

.cd2-about__android-float {
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 4;
	display: grid;
	width: calc(42.5% - 7px);
	height: 112px;
	place-items: center;
	pointer-events: none;
}

.cd2-about__android-float > i {
	position: absolute;
	width: 82px;
	height: 82px;
	border: 1px solid rgba(164, 230, 94, 0.24);
	border-radius: 50%;
	box-shadow: 0 0 0 11px rgba(164, 230, 94, 0.035), 0 0 34px rgba(164, 230, 94, 0.12);
	animation: cd2-android-pulse 2.8s ease-in-out infinite;
}

.cd2-about__android-float > div {
	position: relative;
	z-index: 1;
	display: grid;
	width: 66px;
	height: 66px;
	place-items: center;
	border: 1px solid rgba(164, 230, 94, 0.32);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(164, 230, 94, 0.17), rgba(124, 58, 237, 0.12));
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
	animation: cd2-android-float 3.4s ease-in-out infinite;
}

.cd2-about__android-float svg {
	width: 43px;
	height: 43px;
	overflow: visible;
	fill: #a4e65e;
}

.cd2-about__android-float svg circle {
	fill: #17101f;
}

.cd2-about__android-float .cd2-android-antenna {
	fill: none;
	stroke: #a4e65e;
	stroke-linecap: round;
	stroke-width: 3;
	transform-box: fill-box;
}

.cd2-about__android-float .cd2-android-antenna--left {
	transform-origin: 100% 100%;
	animation: cd2-android-antenna-left 2.2s ease-in-out infinite;
}

.cd2-about__android-float .cd2-android-antenna--right {
	transform-origin: 0 100%;
	animation: cd2-android-antenna-right 2.2s ease-in-out infinite;
}

.cd2-about__android-float small {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	color: rgba(255, 255, 255, 0.46);
	font-size: 0.48rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

@keyframes cd2-android-float {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes cd2-android-pulse {
	0%, 100% { opacity: 0.55; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.08); }
}

@keyframes cd2-android-antenna-left {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-8deg); }
}

@keyframes cd2-android-antenna-right {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(8deg); }
}

.cd2-photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 14px;
	background: linear-gradient(155deg, #2a2035, #0e0b13);
}

.cd2-photo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(42, 16, 78, 0.78), transparent 62%);
	content: "";
	mix-blend-mode: color;
}

.cd2-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}

.cd2-photo--wide {
	height: 440px;
}

.cd2-photo--wide img {
	object-position: center;
	transform: rotate(90deg) scale(1.35);
}

.cd2-photo--small {
	height: 300px;
}

.cd2-photo--small img {
	object-position: 52% 18%;
}

.cd2-photo--discovery,
.cd2-photo--interface {
	background: #f7f4fa;
	color: #211827;
}

.cd2-photo--discovery::after,
.cd2-photo--interface::after {
	display: none;
}

.cd2-discovery,
.cd2-mini-product {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.cd2-discovery > header {
	display: flex;
	height: 42px;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border-bottom: 1px solid #e6dfeb;
	background: #fff;
}

.cd2-discovery > header > span {
	display: flex;
	gap: 4px;
}

.cd2-discovery > header > span i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c8bece;
}

.cd2-discovery > header small {
	color: #766b7d;
	font-size: 0.42rem;
	font-weight: 700;
}

.cd2-discovery > header em {
	padding: 4px 7px;
	border-radius: 20px;
	background: #efe8f8;
	color: #6d28d9;
	font-size: 0.34rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-discovery__intro {
	padding: 20px 18px 14px;
}

.cd2-discovery__intro small,
.cd2-discovery__flow small {
	display: block;
	color: #9a8fa1;
	font-size: 0.34rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cd2-discovery__intro strong {
	display: block;
	margin-top: 5px;
	font-size: 0.87rem;
	letter-spacing: -0.045em;
}

.cd2-discovery__intro > span {
	display: block;
	margin-top: 5px;
	color: #786e7e;
	font-size: 0.4rem;
}

.cd2-discovery__flow {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 2px 18px 12px;
}

.cd2-discovery__flow > div {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: 9px;
	padding: 9px 11px;
	border: 1px solid #e2d9e7;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(48, 31, 58, 0.04);
}

.cd2-discovery__flow > div > i {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 7px;
	background: #eee8f2;
	color: #7c3aed;
	font-size: 0.36rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-discovery__flow strong {
	display: block;
	margin-top: 2px;
	font-size: 0.49rem;
}

.cd2-discovery__flow > b {
	height: 12px;
	padding-left: 23px;
	color: #a994b7;
	font-size: 0.48rem;
	line-height: 12px;
}

.cd2-discovery__flow > div.is-active {
	border-color: #8b5cf6;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.cd2-discovery__flow > div.is-active > i {
	background: #7c3aed;
	color: #fff;
}

.cd2-discovery__flow > div > em {
	position: absolute;
	right: 9px;
	padding: 3px 5px;
	border-radius: 20px;
	background: #ede9fe;
	color: #6d28d9;
	font-size: 0.3rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-discovery > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: #1c1026;
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.34rem;
}

.cd2-discovery > footer > span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cd2-discovery > footer i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 8px #8b5cf6;
}

.cd2-discovery > footer strong {
	color: #c4b5fd;
	font-size: 0.35rem;
}

.cd2-photo--interface {
	background: linear-gradient(155deg, #f8f5fa, #eee8f2);
	box-shadow: 0 24px 55px rgba(0, 0, 0, 0.32);
}

.cd2-mini-product {
	padding: 14px;
}

.cd2-mini-product > header {
	display: grid;
	grid-template-columns: 27px 1fr 8px;
	align-items: center;
	gap: 7px;
}

.cd2-mini-product > header > b {
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	border-radius: 8px;
	background: #7c3aed;
	color: #fff;
	font-size: 0.52rem;
}

.cd2-mini-product > header span {
	display: flex;
	flex-direction: column;
}

.cd2-mini-product > header small,
.cd2-mini-product > header strong {
	font-size: 0.3rem;
	line-height: 1.3;
}

.cd2-mini-product > header small {
	color: #95899c;
}

.cd2-mini-product > header > i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d7cce0;
}

.cd2-mini-product__hello {
	padding: 19px 2px 13px;
}

.cd2-mini-product__hello small {
	display: block;
	margin-bottom: 3px;
	color: #8f8297;
	font-size: 0.31rem;
}

.cd2-mini-product__hello strong {
	display: block;
	font-size: 0.68rem;
	letter-spacing: -0.045em;
	line-height: 1.15;
}

.cd2-mini-product__progress {
	padding: 10px;
	border: 1px solid #dfd5e5;
	border-radius: 8px;
	background: #fff;
}

.cd2-mini-product__progress > span {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cd2-mini-product__progress span small,
.cd2-mini-product__progress span b {
	font-size: 0.32rem;
}

.cd2-mini-product__progress span b {
	color: #6d28d9;
}

.cd2-mini-product__progress > i {
	display: block;
	height: 4px;
	margin: 8px 0 6px;
	overflow: hidden;
	border-radius: 10px;
	background: #ece5f0;
}

.cd2-mini-product__progress > i em {
	display: block;
	width: 74%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #a78bfa, #6d28d9);
}

.cd2-mini-product__progress > small {
	display: block;
	color: #918596;
	font-size: 0.27rem;
}

.cd2-mini-product__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	margin-top: 8px;
}

.cd2-mini-product__actions > span {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: center;
	gap: 5px;
	padding: 8px;
	border: 1px solid #e0d7e5;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.68);
}

.cd2-mini-product__actions i {
	display: grid;
	width: 18px;
	height: 18px;
	place-items: center;
	border-radius: 5px;
	background: #ede9fe;
	color: #6d28d9;
	font-size: 0.31rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-mini-product__actions small {
	font-size: 0.27rem;
}

.cd2-mini-product > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 11px;
}

.cd2-mini-product > footer span {
	display: flex;
}

.cd2-mini-product > footer span i {
	width: 15px;
	height: 15px;
	margin-left: -3px;
	border: 2px solid #f3eef6;
	border-radius: 50%;
	background: #cdbfe0;
}

.cd2-mini-product > footer b {
	padding: 6px 8px;
	border-radius: 6px;
	background: #1c1026;
	color: #fff;
	font-size: 0.29rem;
}

.cd2-about__orbit {
	position: absolute;
	right: 21%;
	bottom: -48px;
	z-index: 3;
	display: grid;
	width: 108px;
	height: 108px;
	place-items: center;
	border: 1px solid rgba(185, 156, 255, 0.36);
	border-radius: 50%;
	background: #110d17;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.38);
}

.cd2-about__orbit svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-20deg);
}

.cd2-about__orbit text {
	fill: rgba(255, 255, 255, 0.58);
	font-family: inherit;
	font-size: 5.2px;
	font-weight: 700;
	letter-spacing: 0.45px;
}

.cd2-about__orbit b {
	position: relative;
	z-index: 1;
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: #7c3aed;
	font-size: 0.8rem;
}

/* Solutions */
.cd2-solutions {
	background:
		radial-gradient(ellipse 52% 32% at 50% 48%, rgba(91, 33, 182, 0.25), transparent 72%),
		linear-gradient(180deg, #09070d, #0b080f 65%, #09070d);
}

.cd2-solutions__stage {
	display: grid;
	grid-template-columns: minmax(210px, 0.8fr) minmax(360px, 1.25fr) minmax(210px, 0.8fr);
	align-items: center;
	gap: clamp(18px, 3vw, 34px);
}

.cd2-solutions__cards {
	display: grid;
	gap: 18px;
}

.cd2-service-card {
	position: relative;
	min-height: 240px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
		#100d15;
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
	transition: border-color 220ms ease, transform 220ms ease;
}

.cd2-service-card::before {
	position: absolute;
	inset: auto -30% -60% 10%;
	height: 170px;
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.15);
	filter: blur(40px);
	content: "";
}

.cd2-service-card:hover {
	border-color: rgba(167, 139, 250, 0.34);
	transform: translateY(-4px);
}

.cd2-service-card__number {
	position: absolute;
	top: 18px;
	right: 18px;
	color: rgba(255, 255, 255, 0.22);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.cd2-service-card__icon {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	margin-bottom: 22px;
	border: 1px solid rgba(167, 139, 250, 0.28);
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.1);
	color: #b99cff;
}

.cd2-service-card__icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.cd2-service-card h3 {
	position: relative;
	margin: 0 0 11px;
	color: #fff;
	font-size: clamp(1rem, 1.5vw, 1.22rem);
	letter-spacing: -0.04em;
}

.cd2-service-card p {
	position: relative;
	margin: 0 0 18px;
	color: var(--cd2-muted);
	font-size: 0.68rem;
	line-height: 1.75;
}

.cd2-service-card a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.62rem;
	font-weight: 700;
}

.cd2-service-card a span {
	color: #b99cff;
}

.cd2-product {
	position: relative;
	min-width: 0;
	padding: 26px 10px;
	perspective: 1200px;
}

.cd2-product::before {
	position: absolute;
	inset: 8% 0;
	z-index: -1;
	border: 1px solid rgba(167, 139, 250, 0.14);
	border-radius: 50%;
	box-shadow: 0 0 0 40px rgba(124, 58, 237, 0.025), 0 0 0 80px rgba(124, 58, 237, 0.015);
	content: "";
}

.cd2-product__shell {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background: #f5f2f8;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.52), 0 0 60px rgba(91, 33, 182, 0.18);
	transform: rotateY(-3deg) rotateX(2deg);
}

.cd2-product__bar {
	display: flex;
	height: 34px;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	border-bottom: 1px solid #e5e0ea;
	background: #fff;
	color: #706878;
}

.cd2-product__bar > span {
	display: flex;
	gap: 4px;
}

.cd2-product__bar i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #d0c8d7;
}

.cd2-product__bar small {
	font-size: 0.45rem;
	font-weight: 700;
}

.cd2-product__bar em {
	font-size: 0.55rem;
	font-style: normal;
	letter-spacing: 0.12em;
}

.cd2-product__body {
	display: grid;
	grid-template-columns: 44px 1fr;
	min-height: 390px;
}

.cd2-product__body aside {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 17px;
	padding: 13px 8px;
	background: #17111f;
}

.cd2-product__body aside b {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	margin-bottom: 8px;
	border-radius: 7px;
	background: #7c3aed;
	color: #fff;
	font-size: 0.6rem;
}

.cd2-product__body aside i {
	display: block;
	width: 16px;
	height: 4px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.14);
}

.cd2-product__body aside i.is-active {
	height: 16px;
	border-radius: 5px;
	background: rgba(167, 139, 250, 0.5);
}

.cd2-product__body aside span {
	width: 24px;
	height: 24px;
	margin-top: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.13);
}

.cd2-product__main {
	padding: 23px;
	background: #f6f3f8;
	color: #21192a;
}

.cd2-product__hello {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 17px;
}

.cd2-product__hello > span {
	display: grid;
}

.cd2-product__hello small {
	color: #9b92a2;
	font-size: 0.42rem;
}

.cd2-product__hello strong {
	font-size: 0.72rem;
}

.cd2-product__hello b {
	width: 26px;
	height: 26px;
	border: 1px solid #ded7e5;
	border-radius: 50%;
	background: #fff;
}

.cd2-product__metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.cd2-product__metrics article {
	display: grid;
	padding: 13px;
	border: 1px solid #e8e2ec;
	border-radius: 9px;
	background: #fff;
}

.cd2-product__metrics small,
.cd2-product__chart small {
	color: #9f97a6;
	font-size: 0.42rem;
}

.cd2-product__metrics strong {
	font-size: 0.95rem;
	letter-spacing: -0.04em;
}

.cd2-product__metrics em {
	color: #6d28d9;
	font-size: 0.42rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-product__chart {
	position: relative;
	display: flex;
	height: 120px;
	align-items: flex-end;
	gap: 7px;
	margin-top: 10px;
	padding: 14px;
	border: 1px solid #e8e2ec;
	border-radius: 9px;
	background: #fff;
}

.cd2-product__chart > div {
	position: absolute;
	display: grid;
	align-self: flex-start;
}

.cd2-product__chart > div strong {
	font-size: 0.55rem;
}

.cd2-product__chart > span {
	width: 100%;
	height: var(--h);
	border-radius: 3px 3px 1px 1px;
	background: linear-gradient(180deg, #8b5cf6, #4c1d95);
	opacity: 0.78;
}

.cd2-product__rows {
	display: grid;
	gap: 7px;
	margin-top: 12px;
}

.cd2-product__rows > strong {
	font-size: 0.52rem;
}

.cd2-product__rows > div {
	display: grid;
	grid-template-columns: 12px 1fr 28px;
	align-items: center;
	gap: 7px;
}

.cd2-product__rows i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: #ddd3e9;
}

.cd2-product__rows span,
.cd2-product__rows em {
	height: 4px;
	border-radius: 4px;
	background: #e4dfe8;
}

.cd2-product__rows em {
	background: #c4b5fd;
}

.cd2-product__float {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 9px;
	background: rgba(20, 15, 28, 0.94);
	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.cd2-product__float span {
	display: grid;
}

.cd2-product__float small {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.43rem;
}

.cd2-product__float strong {
	color: #fff;
	font-size: 0.56rem;
}

.cd2-product__float--one {
	top: 12px;
	left: -18px;
}

.cd2-product__float--one i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 12px #8b5cf6;
}

.cd2-product__float--two {
	right: -22px;
	bottom: 4px;
}

.cd2-product__float--two b {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
	font-size: 0.55rem;
}

.cd2-solutions__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin-top: 36px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
}

.cd2-solutions__cta > span {
	color: var(--cd2-muted);
	font-size: 0.7rem;
}

.cd2-solutions__cta b {
	margin-right: 6px;
	color: #fff;
}

/* Process */
.cd2-process {
	background:
		radial-gradient(circle at 78% 55%, rgba(124, 58, 237, 0.15), transparent 26rem),
		#0d0a12;
}

.cd2-process__layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: clamp(60px, 9vw, 130px);
}

.cd2-process__steps {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cd2-process__steps li {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 18px;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.025);
	transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.cd2-process__steps li:hover {
	border-color: rgba(167, 139, 250, 0.3);
	background: rgba(124, 58, 237, 0.06);
	transform: translateX(5px);
}

.cd2-process__steps li > span {
	display: grid;
	width: 37px;
	height: 37px;
	place-items: center;
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 50%;
	color: #b99cff;
	font-size: 0.55rem;
	font-weight: 700;
}

.cd2-process__steps h3 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 0.98rem;
	letter-spacing: -0.035em;
}

.cd2-process__steps p {
	margin: 0;
	color: var(--cd2-muted);
	font-size: 0.67rem;
	line-height: 1.7;
}

.cd2-process__visual {
	position: relative;
	min-height: 520px;
}

.cd2-process__visual::before {
	position: absolute;
	inset: 8% -8%;
	border: 1px solid rgba(167, 139, 250, 0.12);
	border-radius: 50%;
	box-shadow: 0 0 0 60px rgba(124, 58, 237, 0.025);
	content: "";
}

.cd2-process__journey {
	position: absolute;
	top: 5%;
	right: 5%;
	bottom: 6%;
	left: 5%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: #f7f4f9;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
	color: #211827;
	transform: rotate(3deg);
}

.cd2-journey__top {
	display: flex;
	height: 38px;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border-bottom: 1px solid #e7e0eb;
	background: #fff;
}

.cd2-journey__top > span {
	display: flex;
	gap: 4px;
}

.cd2-journey__top > span i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c9c1cf;
}

.cd2-journey__top small {
	color: #7d7385;
	font-size: 0.42rem;
	font-weight: 700;
}

.cd2-journey__top > em {
	padding: 4px 7px;
	border-radius: 20px;
	background: #eee8f5;
	color: #6d28d9;
	font-size: 0.34rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-journey__body {
	padding: 18px;
}

.cd2-journey__path {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 6px;
}

.cd2-journey__path > span {
	display: grid;
	grid-template-columns: 21px 1fr;
	align-items: center;
	column-gap: 6px;
	padding: 7px;
	border: 1px solid #e4dce9;
	border-radius: 7px;
	background: #fff;
}

.cd2-journey__path > span > i {
	display: grid;
	grid-row: 1 / 3;
	width: 21px;
	height: 21px;
	place-items: center;
	border-radius: 50%;
	background: #eee9f2;
	color: #817488;
	font-size: 0.3rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-journey__path > span > b {
	font-size: 0.42rem;
	line-height: 1;
}

.cd2-journey__path > span > small {
	margin-top: 2px;
	color: #9a919f;
	font-size: 0.3rem;
	line-height: 1;
}

.cd2-journey__path > span.is-done {
	border-color: #d6c8e8;
	background: #f8f4fc;
}

.cd2-journey__path > span.is-done > i {
	background: #6d28d9;
	color: #fff;
}

.cd2-journey__path > span.is-active {
	border-color: #8b5cf6;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}

.cd2-journey__path > span.is-active > i {
	background: #8b5cf6;
	color: #fff;
}

.cd2-journey__path > em {
	color: #b2a8b8;
	font-size: 0.54rem;
	font-style: normal;
}

.cd2-journey__canvas {
	display: grid;
	grid-template-columns: 0.9fr 0.9fr 1fr;
	grid-template-rows: 1fr 0.75fr;
	gap: 8px;
	margin-top: 12px;
}

.cd2-journey__canvas > div {
	padding: 11px;
	border: 1px solid #e4dce9;
	border-radius: 8px;
	background: #fff;
}

.cd2-journey__canvas small {
	display: block;
	margin-bottom: 6px;
	color: #9b91a1;
	font-size: 0.34rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cd2-journey__brief {
	grid-row: 1 / 3;
}

.cd2-journey__brief > strong {
	display: block;
	margin-bottom: 14px;
	font-size: 0.62rem;
	letter-spacing: -0.04em;
	line-height: 1.35;
}

.cd2-journey__brief > span {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	color: #786e7e;
	font-size: 0.34rem;
}

.cd2-journey__brief > span i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #a78bfa;
}

.cd2-journey__wireframe {
	grid-row: 1 / 3;
}

.cd2-journey__wireframe > div {
	overflow: hidden;
	border: 1px solid #ded5e3;
	border-radius: 6px;
	background: #faf8fb;
}

.cd2-journey__wireframe header {
	display: flex;
	gap: 3px;
	padding: 5px;
	border-bottom: 1px solid #e7e1ea;
}

.cd2-journey__wireframe header i {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #c9c0cf;
}

.cd2-journey__wireframe > div > span {
	display: block;
	width: 56%;
	height: 9px;
	margin: 11px auto 8px;
	border-radius: 3px;
	background: #ddd5e3;
}

.cd2-journey__wireframe section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	padding: 0 8px;
}

.cd2-journey__wireframe section i {
	height: 38px;
	border: 1px solid #ddd5e3;
	border-radius: 4px;
}

.cd2-journey__wireframe footer {
	display: flex;
	gap: 4px;
	padding: 8px;
}

.cd2-journey__wireframe footer i {
	width: 100%;
	height: 4px;
	border-radius: 3px;
	background: #e1dbe5;
}

.cd2-journey__wireframe > b {
	display: block;
	margin-top: 7px;
	color: #6d28d9;
	font-size: 0.34rem;
}

.cd2-journey__sprint {
	display: flex;
	flex-direction: column;
	grid-column: 3;
	grid-row: 1;
}

.cd2-journey__sprint > strong {
	margin-bottom: 6px;
	font-size: 0.54rem;
}

.cd2-journey__sprint > span {
	display: grid;
	grid-template-columns: 13px 1fr;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
}

.cd2-journey__sprint > span i {
	display: grid;
	width: 12px;
	height: 12px;
	place-items: center;
	border: 1px solid #ded5e3;
	border-radius: 3px;
	color: #fff;
	font-size: 0.3rem;
	font-style: normal;
}

.cd2-journey__sprint > span i.is-done {
	border-color: #7c3aed;
	background: #7c3aed;
}

.cd2-journey__sprint > span em {
	color: #756a7c;
	font-size: 0.32rem;
	font-style: normal;
}

.cd2-journey__sprint > b {
	margin-top: auto;
	padding-top: 7px;
	border-top: 1px solid #ece6ef;
	color: #6d28d9;
	font-size: 0.33rem;
}

.cd2-journey__sprint > b i {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #8b5cf6;
}

.cd2-journey__release {
	position: relative;
	grid-column: 3;
	grid-row: 2;
	overflow: hidden;
	background: linear-gradient(140deg, #24122f, #130b1a) !important;
	color: #fff;
}

.cd2-journey__release > span {
	position: absolute;
	top: 9px;
	right: 9px;
	padding: 3px 5px;
	border-radius: 4px;
	background: #7c3aed;
	font-size: 0.3rem;
	font-weight: 700;
}

.cd2-journey__release > strong {
	display: block;
	font-size: 0.56rem;
}

.cd2-journey__release > div {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.54);
	font-size: 0.3rem;
}

.cd2-journey__release > div i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 8px #8b5cf6;
}

.cd2-journey__release > div em {
	font-style: normal;
}

.cd2-journey__release > b {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 8px;
	color: #c4adff;
	font-size: 0.82rem;
}

.cd2-journey__release > b small {
	margin: 0;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.28rem;
	letter-spacing: 0;
	text-transform: none;
}

.cd2-journey__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid #e7e0ea;
	color: #8b818f;
	font-size: 0.34rem;
}

.cd2-journey__footer > span:first-child {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #5a4f60;
	font-weight: 700;
}

.cd2-journey__footer > span:first-child i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #7c3aed;
}

.cd2-process__cards {
	position: absolute;
	inset: 0;
}

.cd2-process__cards span {
	position: absolute;
	display: grid;
	width: 65px;
	height: 65px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	background: rgba(17, 12, 24, 0.92);
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
	color: #b99cff;
	font-size: 0.67rem;
	font-weight: 700;
}

.cd2-process__cards span:nth-child(1) { top: 4%; left: 3%; transform: rotate(-8deg); }
.cd2-process__cards span:nth-child(2) { top: 28%; right: 0; transform: rotate(9deg); }
.cd2-process__cards span:nth-child(3) { bottom: 16%; left: 0; transform: rotate(-4deg); }
.cd2-process__cards span:nth-child(4) { right: 8%; bottom: 0; background: #6d28d9; color: #fff; transform: rotate(5deg); }

.cd2-process__stamp {
	position: absolute;
	right: -18px;
	top: -15px;
	display: grid;
	width: 112px;
	height: 112px;
	place-content: center;
	border: 1px solid rgba(185, 156, 255, 0.3);
	border-radius: 50%;
	background: #0f0c14;
	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.36);
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.47rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
}

.cd2-process__stamp strong {
	color: #b99cff;
	font-size: 1.25rem;
}

/* Capabilities marquee */
.cd2-capabilities {
	overflow: hidden;
	padding: clamp(80px, 8vw, 120px) 0;
	border-block: 1px solid rgba(255, 255, 255, 0.07);
	background:
		radial-gradient(ellipse 80% 100% at 50% 100%, rgba(91, 33, 182, 0.18), transparent 70%),
		#09070d;
}

.cd2-capabilities__intro {
	max-width: 760px;
	margin-bottom: 50px;
	text-align: center;
}

.cd2-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.cd2-marquee__track {
	display: flex;
	width: max-content;
	animation: cd2-marquee 38s linear infinite;
}

.cd2-marquee__set {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	padding-right: 12px;
}

.cd2-marquee span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 17px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.64);
	font-size: 0.65rem;
	font-weight: 700;
	white-space: nowrap;
}

.cd2-marquee i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8b5cf6;
	box-shadow: 0 0 9px #8b5cf6;
}

@keyframes cd2-marquee {
	to { transform: translateX(-50%); }
}

/* Integrations */
.cd2-integrations {
	position: relative;
	overflow: hidden;
	padding: clamp(92px, 9vw, 136px) 0;
	border-block: 1px solid rgba(255, 255, 255, 0.07);
	background:
		radial-gradient(ellipse 52% 46% at 50% 42%, rgba(91, 33, 182, 0.22), transparent 72%),
		linear-gradient(180deg, #0a080e, #0e0914 55%, #09070d);
}

.cd2-integrations::before {
	position: absolute;
	inset: 0;
	opacity: 0.17;
	background-image: linear-gradient(rgba(185, 156, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 156, 255, 0.13) 1px, transparent 1px);
	background-size: 54px 54px;
	content: "";
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cd2-integrations .container {
	position: relative;
}

.cd2-integrations__intro {
	max-width: 800px;
	margin: 0 auto 52px;
	text-align: center;
}

.cd2-integrations__intro > p:last-child {
	max-width: 620px;
	margin: 21px auto 0;
	color: var(--cd2-muted);
	font-size: 0.84rem;
	line-height: 1.8;
}

.cd2-integrations__intro h2 {
	font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.cd2-integrations__intro h2 em {
	display: inline-block;
	background: linear-gradient(110deg, #d8c7ff 0%, #9b6cff 42%, #6d28d9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: "Kaushan Script", "Segoe Script", cursive;
	font-size: 0.9em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.15;
}

.cd2-integrations__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

.cd2-integration-card {
	position: relative;
	display: grid;
	min-height: 150px;
	grid-template-rows: 1fr auto;
	padding: 17px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: rgba(19, 14, 25, 0.9);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
	transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.cd2-integration-card::before {
	position: absolute;
	right: -22px;
	bottom: -32px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--cd2-integration-brand);
	content: "";
	filter: blur(34px);
	opacity: 0.16;
	transition: opacity 180ms ease;
}

.cd2-integration-card:hover {
	border-color: color-mix(in srgb, var(--cd2-integration-brand) 68%, #fff 10%);
	background: rgba(27, 18, 36, 0.96);
	transform: translateY(-5px);
}

.cd2-integration-card:hover::before {
	opacity: 0.3;
}

.cd2-integration-card__logo {
	position: relative;
	display: flex;
	height: 58px;
	align-items: center;
	justify-content: flex-start;
}

.cd2-integration-card__logo img {
	max-width: 118px;
	max-height: 38px;
	object-fit: contain;
	object-position: left center;
}

.cd2-integration-card.is-logo-asset .cd2-integration-card__logo {
	width: 100%;
	height: 54px;
	padding: 8px 10px;
	border-radius: 8px;
	background: linear-gradient(135deg, #fff, #f2edf7);
}

.cd2-integration-card.is-logo-asset .cd2-integration-card__logo img {
	max-width: 100%;
	max-height: 31px;
}

.cd2-integration-card > div:last-child {
	position: relative;
	display: grid;
	gap: 3px;
}

.cd2-integration-card > div:last-child > strong {
	color: #fff;
	font-size: 0.64rem;
	letter-spacing: -0.025em;
}

.cd2-integration-card > div:last-child > small {
	color: rgba(255, 255, 255, 0.43);
	font-size: 0.5rem;
}

.cd2-integration-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cd2-integration-brand);
	line-height: 1;
}

.cd2-integration-wordmark strong {
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -0.07em;
}

.cd2-integration-wordmark--courier-guy strong {
	color: #f4a81d;
	font-size: 0.95rem;
	font-style: italic;
	letter-spacing: -0.055em;
}

.cd2-integration-wordmark--courier-guy strong::before {
	margin-right: 4px;
	color: #fff;
	content: "THE";
	font-size: 0.45rem;
	font-style: normal;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.cd2-integration-wordmark--react i {
	font-size: 1.7rem;
	font-style: normal;
	line-height: 0.8;
}

.cd2-integration-wordmark--laravel strong {
	letter-spacing: -0.08em;
}

.cd2-integration-wordmark--next strong {
	color: #fff;
	font-family: Georgia, serif;
	font-size: 1.15rem;
	font-weight: 700;
}

.cd2-integration-wordmark--node strong {
	color: #8cc84b;
	letter-spacing: -0.08em;
}

.cd2-integration-wordmark--api i {
	padding: 6px 7px;
	border: 1px solid rgba(185, 156, 255, 0.38);
	border-radius: 6px;
	color: #c4adff;
	font-size: 0.52rem;
	font-style: normal;
	font-weight: 800;
}

@media (max-width: 1080px) {
	.cd2-integrations__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.cd2-integrations__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 9px;
	}

	.cd2-integration-card {
		min-height: 130px;
		padding: 13px;
	}

	.cd2-integration-card__logo img {
		max-width: 88px;
		max-height: 31px;
	}

	.cd2-integration-wordmark strong {
		font-size: 0.78rem;
	}
}

@media (max-width: 420px) {
	.cd2-integrations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Work */
.cd2-work {
	overflow: hidden;
	background: #0d0a12;
}

.cd2-work__grid {
	--cd2-work-card-width: clamp(260px, 32vw, 430px);
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 30px);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 42px calc(50% - (var(--cd2-work-card-width) / 2)) 50px;
	cursor: grab;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x;
	-webkit-overflow-scrolling: touch;
}

.cd2-work__grid::-webkit-scrollbar {
	display: none;
}

.cd2-work__grid.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.cd2-work-card {
	position: relative;
	z-index: var(--cd2-carousel-z, 1);
	width: var(--cd2-work-card-width);
	min-width: var(--cd2-work-card-width);
	flex: 0 0 var(--cd2-work-card-width);
	opacity: var(--cd2-carousel-opacity, 0.35);
	filter: blur(var(--cd2-carousel-blur, 0));
	transform: translateY(var(--cd2-carousel-lift, 18px)) scale(var(--cd2-carousel-scale, 0.72));
	transform-origin: center;
	scroll-snap-align: center;
	transition: opacity 120ms linear, filter 160ms ease, transform 160ms ease;
	will-change: transform, opacity;
}

.cd2-work-card.is-featured {
	z-index: var(--cd2-carousel-z, 2);
}

.cd2-work-card:hover {
	z-index: 30;
}

.cd2-work-card.is-featured:hover {
	z-index: 30;
}

.cd2-work-card a {
	position: relative;
	isolation: isolate;
	display: block;
	aspect-ratio: 0.88;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 15px;
	background: #17111e;
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.28);
}

.cd2-work-card a::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(13, 7, 21, 0.98) 0%, rgba(17, 8, 29, 0.74) 23%, transparent 57%);
	content: "";
	pointer-events: none;
}

.cd2-work-card__visual {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 75% 20%, rgba(124, 58, 237, 0.22), transparent 45%),
		#120d19;
}

.cd2-work-card__visual::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 26px 26px;
	content: "";
	-webkit-mask-image: linear-gradient(#000, transparent 88%);
	mask-image: linear-gradient(#000, transparent 88%);
}

.cd2-demo {
	position: absolute;
	top: 62px;
	right: -12%;
	left: 8%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 12px;
	background: #f5f2f7;
	box-shadow: 0 28px 65px rgba(0, 0, 0, 0.42), 0 0 45px rgba(91, 33, 182, 0.18);
	color: #211828;
	transform: rotate(-3deg);
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cd2-work-card:hover .cd2-demo {
	transform: rotate(-1deg) translateY(-6px) scale(1.015);
}

.cd2-work-card.is-featured .cd2-demo {
	top: 48px;
	right: 6%;
	left: 6%;
	transform: rotate(1.5deg);
}

.cd2-work-card.is-featured:hover .cd2-demo {
	transform: rotate(0.5deg) translateY(-7px) scale(1.012);
}

/* Operations dashboard example */
.cd2-demo__top {
	display: flex;
	height: 28px;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	border-bottom: 1px solid #e3dce8;
	background: #fff;
	color: #8f8696;
}

.cd2-demo__top > span {
	display: flex;
	gap: 3px;
}

.cd2-demo__top i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c7bfcf;
}

.cd2-demo__top small {
	font-size: 0.37rem;
	font-weight: 700;
}

.cd2-demo__top > b {
	font-size: 0.42rem;
	letter-spacing: 0.08em;
}

.cd2-demo__layout {
	display: grid;
	grid-template-columns: 34px 1fr;
	min-height: 330px;
}

.cd2-demo__layout > aside {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 14px;
	padding: 10px 6px;
	background: #1a1222;
}

.cd2-demo__layout > aside strong {
	display: grid;
	width: 21px;
	height: 21px;
	place-items: center;
	margin-bottom: 6px;
	border-radius: 6px;
	background: #7c3aed;
	color: #fff;
	font-size: 0.48rem;
}

.cd2-demo__layout > aside i {
	width: 13px;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.13);
}

.cd2-demo__layout > aside i.is-on {
	height: 13px;
	border-radius: 4px;
	background: #8b5cf6;
}

.cd2-demo__layout > aside span {
	width: 19px;
	height: 19px;
	margin-top: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
}

.cd2-demo__content {
	padding: 15px;
}

.cd2-demo__content > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.cd2-demo__content > header > span {
	display: grid;
}

.cd2-demo__content > header small,
.cd2-demo__kpis small,
.cd2-portal__content small,
.cd2-sheet-fit__body small {
	color: #9990a0;
	font-size: 0.37rem;
}

.cd2-demo__content > header b {
	font-size: 0.58rem;
}

.cd2-demo__content > header em {
	width: 21px;
	height: 21px;
	border: 1px solid #dfd8e4;
	border-radius: 50%;
	background: #fff;
}

.cd2-demo__kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
}

.cd2-demo__kpis > span {
	display: grid;
	padding: 9px;
	border: 1px solid #e5dfe9;
	border-radius: 7px;
	background: #fff;
}

.cd2-demo__kpis b {
	font-size: 0.82rem;
	letter-spacing: -0.04em;
}

.cd2-demo__kpis em {
	color: #6d28d9;
	font-size: 0.34rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-demo__graph {
	display: flex;
	height: 86px;
	align-items: flex-end;
	gap: 5px;
	margin-top: 7px;
	padding: 10px;
	border: 1px solid #e5dfe9;
	border-radius: 7px;
	background:
		linear-gradient(rgba(80, 55, 96, 0.05) 1px, transparent 1px),
		#fff;
	background-size: 100% 18px;
}

.cd2-demo__graph span {
	width: 100%;
	height: var(--h);
	border-radius: 3px 3px 1px 1px;
	background: linear-gradient(180deg, #9b6cff, #5b21b6);
}

.cd2-demo__table {
	display: grid;
	gap: 5px;
	margin-top: 8px;
}

.cd2-demo__table > b {
	font-size: 0.4rem;
}

.cd2-demo__table > span {
	display: grid;
	grid-template-columns: 10px 1fr 25px;
	align-items: center;
	gap: 6px;
}

.cd2-demo__table i {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: #ddd2e9;
}

.cd2-demo__table em,
.cd2-demo__table small {
	height: 3px;
	border-radius: 4px;
	background: #ddd7e2;
}

.cd2-demo__table small {
	background: #c4b5fd;
}

/* Slabify stone design tool */
.cd2-demo--slabify {
	top: 52px;
	right: -10%;
	bottom: 70px;
	left: 5%;
	border-color: rgba(255, 255, 255, 0.2);
	background: #f8f8f8;
	color: #343434;
	transform: rotate(-2deg);
}

.cd2-work-card:hover .cd2-demo--slabify {
	transform: rotate(-0.5deg) translateY(-6px) scale(1.015);
}

.cd2-demo--slabify > header {
	display: grid;
	height: 38px;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 0 11px;
	background: #686868;
	color: #fff;
}

.cd2-demo--slabify > header strong {
	display: flex;
	align-items: center;
	font-size: 0.47rem;
	letter-spacing: -0.04em;
}

.cd2-demo--slabify > header strong i {
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	margin-right: 4px;
	border-radius: 50%;
	background: #fff;
	color: #666;
	font-size: 0.36rem;
	font-style: normal;
}

.cd2-demo--slabify > header strong span {
	color: #f36c21;
}

.cd2-demo--slabify > header > em {
	min-width: 0;
	padding: 5px 9px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.28);
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.27rem;
	font-style: normal;
}

.cd2-demo--slabify > header > b {
	display: grid;
	width: 19px;
	height: 19px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: #666;
	font-size: 0.26rem;
}

.cd2-slabify__toolbar {
	display: grid;
	min-height: 48px;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 1.25fr;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border-bottom: 1px solid #d9d9d9;
	background: #fff;
}

.cd2-slabify__toolbar > span,
.cd2-slabify__toolbar > strong {
	display: grid;
	gap: 2px;
}

.cd2-slabify__toolbar small {
	color: #8c8c8c;
	font-size: 0.22rem;
	font-weight: 500;
}

.cd2-slabify__toolbar > span b {
	padding: 4px 5px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fafafa;
	font-size: 0.28rem;
	font-weight: 600;
}

.cd2-slabify__toolbar > strong {
	justify-items: end;
	color: #11a56c;
	font-size: 0.43rem;
}

.cd2-slabify__workspace {
	display: grid;
	min-height: 216px;
	grid-template-columns: 1fr 88px;
}

.cd2-slabify__canvas {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(rgba(85, 85, 85, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(85, 85, 85, 0.09) 1px, transparent 1px),
		linear-gradient(rgba(85, 85, 85, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(85, 85, 85, 0.035) 1px, transparent 1px),
		#fcfcfc;
	background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
}

.cd2-slabify__counter {
	position: absolute;
	display: grid;
	place-items: center;
	border: 1px solid #8c8c8c;
	font-size: 0.27rem;
	text-align: center;
}

.cd2-slabify__counter span,
.cd2-slabify__counter b {
	position: relative;
	z-index: 2;
}

.cd2-slabify__counter b {
	font-size: 0.24rem;
}

.cd2-slabify__counter--primary {
	bottom: 42px;
	left: 18%;
	width: 62%;
	height: 68px;
	border-color: #ee6617;
	background: linear-gradient(135deg, #ff993d, #f47623);
}

.cd2-slabify__counter--primary::before,
.cd2-slabify__counter--primary::after {
	position: absolute;
	background: rgba(211, 65, 10, 0.55);
	content: "";
}

.cd2-slabify__counter--primary::before {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	border-left: 1px dashed #dc4d13;
}

.cd2-slabify__counter--primary::after {
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	border-top: 1px dashed #dc4d13;
}

.cd2-slabify__counter--primary i,
.cd2-slabify__counter--primary em {
	position: absolute;
	width: 6px;
	height: 6px;
	border: 1px solid #fff;
	border-radius: 50%;
	background: #8a8a8a;
}

.cd2-slabify__counter--primary i { top: -4px; left: -4px; }
.cd2-slabify__counter--primary em { right: -4px; bottom: -4px; }

.cd2-slabify__counter--secondary {
	top: 35px;
	left: 42%;
	width: 31%;
	height: 35px;
	background: rgba(255, 255, 255, 0.86);
}

.cd2-slabify__measure {
	position: absolute;
	top: 82px;
	left: 35%;
	width: 42%;
	border-top: 1px solid #666;
	color: #606060;
	font-size: 0.22rem;
	text-align: center;
}

.cd2-slabify__measure::before,
.cd2-slabify__measure::after {
	position: absolute;
	top: -3px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	content: "";
}

.cd2-slabify__measure::before { left: 0; transform: rotate(-45deg); }
.cd2-slabify__measure::after { right: 0; transform: rotate(135deg); }

.cd2-slabify__tools {
	position: absolute;
	right: 8px;
	bottom: 7px;
	left: 8px;
	display: flex;
	justify-content: center;
	gap: 2px;
}

.cd2-slabify__tools span {
	display: grid;
	width: 23px;
	height: 18px;
	place-items: center;
	background: #f36c21;
	color: #fff;
	font-size: 0.31rem;
}

.cd2-slabify__tools span:first-child { border-radius: 5px 0 0 5px; }
.cd2-slabify__tools span:last-child { border-radius: 0 5px 5px 0; }

.cd2-slabify__panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 6px;
	border-left: 1px solid #ddd;
	background: #f0f0f0;
}

.cd2-slabify__panel strong,
.cd2-slabify__panel span,
.cd2-slabify__panel i {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 6px;
	border-radius: 4px;
	background: #fff;
	font-size: 0.24rem;
	font-style: normal;
}

.cd2-slabify__panel strong {
	background: #dedede;
}

.cd2-slabify__panel strong em {
	font-size: 0.2rem;
	font-style: normal;
}

.cd2-slabify__panel span b {
	color: #f36c21;
}

.cd2-slabify__panel strong.is-orange {
	margin-top: auto;
	background: #f36c21;
	color: #fff;
}

/* Client portal example */
.cd2-demo--portal {
	top: 45px;
	bottom: 70px;
	display: grid;
	grid-template-columns: 76px 1fr;
	background: #f7f5f9;
}

.cd2-portal__nav {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 18px 10px;
	background: #1a1222;
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.36rem;
}

.cd2-portal__nav > b {
	margin-bottom: 12px;
	color: #fff;
	font-size: 0.52rem;
}

.cd2-portal__nav > span:first-of-type {
	margin-inline: -5px;
	padding: 6px 5px;
	border-radius: 5px;
	background: #7c3aed;
	color: #fff;
}

.cd2-portal__nav i {
	width: 22px;
	height: 22px;
	margin-top: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

.cd2-portal__content {
	padding: 18px;
}

.cd2-portal__welcome {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.cd2-portal__welcome > span {
	display: grid;
}

.cd2-portal__welcome strong {
	font-size: 0.76rem;
	letter-spacing: -0.04em;
}

.cd2-portal__welcome > b {
	padding: 4px 6px;
	border-radius: 5px;
	background: #ede6f5;
	color: #6d28d9;
	font-size: 0.35rem;
}

.cd2-portal__progress {
	display: grid;
	grid-template-columns: 1.45fr 0.55fr;
	gap: 7px;
	margin-top: 15px;
}

.cd2-portal__progress > span {
	display: grid;
	align-content: start;
	padding: 11px;
	border: 1px solid #e5dfe9;
	border-radius: 8px;
	background: #fff;
}

.cd2-portal__progress strong {
	margin-top: 2px;
	font-size: 0.54rem;
}

.cd2-portal__progress b {
	margin-top: 5px;
	color: #6d28d9;
	font-size: 0.35rem;
}

.cd2-portal__progress i {
	display: block;
	height: 5px;
	margin-top: 13px;
	overflow: hidden;
	border-radius: 8px;
	background: #eee9f1;
}

.cd2-portal__progress i em {
	display: block;
	width: 74%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #6d28d9, #a78bfa);
}

.cd2-portal__bottom {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 7px;
	margin-top: 7px;
}

.cd2-portal__bottom > div,
.cd2-portal__bottom > aside {
	padding: 10px;
	border: 1px solid #e5dfe9;
	border-radius: 8px;
	background: #fff;
}

.cd2-portal__bottom > div > small,
.cd2-portal__bottom > aside > small {
	display: block;
	margin-bottom: 7px;
}

.cd2-portal__bottom > div > span {
	display: grid;
	grid-template-columns: 19px 1fr 11px;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
}

.cd2-portal__bottom > div i {
	display: grid;
	height: 17px;
	place-items: center;
	border-radius: 4px;
	background: #ede7f3;
	color: #6d28d9;
	font-size: 0.26rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-portal__bottom > div em {
	height: 3px;
	border-radius: 3px;
	background: #dfd9e3;
}

.cd2-portal__bottom > div b {
	color: #7c3aed;
	font-size: 0.42rem;
}

.cd2-portal__bottom aside > span {
	display: flex;
	padding-left: 7px;
}

.cd2-portal__bottom aside i,
.cd2-portal__bottom aside b {
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	margin-left: -7px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #c4b5fd;
	font-size: 0.28rem;
	font-style: normal;
}

.cd2-portal__bottom aside i:nth-child(2) { background: #8b5cf6; }
.cd2-portal__bottom aside i:nth-child(3) { background: #ddd6fe; }

.cd2-portal__bottom aside em {
	display: block;
	margin-top: 8px;
	padding: 5px;
	border-radius: 5px;
	background: #ede9f1;
	color: #6d28d9;
	font-size: 0.3rem;
	font-style: normal;
	font-weight: 700;
	text-align: center;
}

/* Live sheet fit calculator */
.cd2-demo--sheet-fit {
	top: 58px;
	right: 7%;
	left: -10%;
	background: #f7f4fa;
	transform: rotate(3deg);
}

.cd2-work-card:hover .cd2-demo--sheet-fit {
	transform: rotate(1deg) translateY(-6px) scale(1.015);
}

.cd2-demo--sheet-fit > header {
	display: flex;
	height: 48px;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	background: #1a1222;
	color: #fff;
}

.cd2-demo--sheet-fit > header > span {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cd2-demo--sheet-fit > header b {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border-radius: 7px;
	background: #7c3aed;
	font-size: 0.52rem;
}

.cd2-demo--sheet-fit > header small {
	font-size: 0.42rem;
	font-weight: 700;
}

.cd2-demo--sheet-fit > header em {
	padding: 4px 7px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	color: #c4b5fd;
	font-size: 0.3rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-sheet-fit__body {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 8px;
	padding: 12px;
}

.cd2-sheet-fit__form,
.cd2-sheet-fit__preview {
	padding: 10px;
	border: 1px solid #e4dce9;
	border-radius: 8px;
	background: #fff;
}

.cd2-sheet-fit__form > small {
	display: block;
	margin-bottom: 8px;
	color: #261b2d;
	font-weight: 700;
}

.cd2-sheet-fit__sizes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.cd2-sheet-fit__sizes span {
	padding: 5px 2px;
	border: 1px solid #e7e0eb;
	border-radius: 4px;
	background: #faf8fb;
	color: #77707d;
	font-size: 0.29rem;
	font-weight: 700;
	text-align: center;
}

.cd2-sheet-fit__sizes span.is-on {
	border-color: #8b2a9d;
	background: #f4e9f7;
	color: #6d197a;
}

.cd2-sheet-fit__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	margin-top: 7px;
}

.cd2-sheet-fit__fields label {
	display: grid;
	gap: 3px;
	color: #918798;
	font-size: 0.27rem;
}

.cd2-sheet-fit__fields b {
	display: flex;
	justify-content: space-between;
	padding: 7px;
	border: 1px solid #e7e0eb;
	border-radius: 5px;
	background: #faf8fb;
	color: #2d2631;
	font-size: 0.38rem;
}

.cd2-sheet-fit__fields i {
	color: #9a939e;
	font-size: 0.26rem;
	font-style: normal;
	font-weight: 500;
}

.cd2-sheet-fit__stock {
	display: grid;
	grid-template-columns: 31px 1fr;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 7px;
	border-radius: 5px;
	background: #f1edf4;
}

.cd2-sheet-fit__stock > b {
	display: grid;
	height: 29px;
	place-items: center;
	border: 1px solid #7a1788;
	color: #6d197a;
	font-size: 0.28rem;
}

.cd2-sheet-fit__stock > span {
	display: grid;
	color: #322b36;
	font-size: 0.3rem;
	font-weight: 700;
}

.cd2-sheet-fit__stock small {
	margin-top: 1px;
	font-weight: 400;
}

.cd2-sheet-fit__preview {
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: linear-gradient(150deg, #2a1632, #190f20);
	color: #fff;
	text-align: center;
}

.cd2-sheet-fit__preview > header {
	display: grid;
	text-align: left;
}

.cd2-sheet-fit__preview > header small {
	color: #f15379;
	font-size: 0.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cd2-sheet-fit__preview > header strong {
	font-size: 0.43rem;
}

.cd2-sheet-fit__sheet {
	display: grid;
	width: 76px;
	min-height: 110px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 3px;
	align-self: center;
	justify-self: center;
	margin-block: 7px;
	padding: 5px;
	border: 2px solid #fff;
	background: #f9f8f7;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.cd2-sheet-fit__sheet span {
	border: 1px solid #a72f91;
	background: linear-gradient(145deg, #f0b9cd, #dec8e0);
}

.cd2-sheet-fit__preview > footer {
	display: grid;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cd2-sheet-fit__preview > footer b {
	color: #f2bddc;
	font-size: 0.39rem;
}

.cd2-sheet-fit__preview > footer span {
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.24rem;
}

/* ManageSync management system */
.cd2-demo--managesync {
	top: 52px;
	right: -8%;
	bottom: 70px;
	left: 6%;
	display: grid;
	grid-template-columns: 68px 1fr;
	border-color: rgba(255, 255, 255, 0.12);
	background: #151516;
	color: #f8f8fa;
	transform: rotate(-2deg);
}

.cd2-work-card:hover .cd2-demo--managesync {
	transform: rotate(-0.5deg) translateY(-6px) scale(1.015);
}

.cd2-managesync__nav {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 13px 8px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	background: #0f0f10;
	color: rgba(255, 255, 255, 0.48);
}

.cd2-managesync__nav > strong {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 9px;
	color: #fff;
	font-size: 0.4rem;
	letter-spacing: -0.03em;
}

.cd2-managesync__nav > strong i {
	color: #ff0a69;
	font-size: 0.76rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-managesync__nav > strong span,
.cd2-managesync__nav > strong small {
	display: block;
}

.cd2-managesync__nav > strong small {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.2rem;
	letter-spacing: 0.12em;
}

.cd2-managesync__nav > span {
	padding: 5px 6px;
	border-radius: 4px;
	font-size: 0.29rem;
	font-weight: 600;
}

.cd2-managesync__nav > span.is-on {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.cd2-managesync__nav > em {
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	margin-top: auto;
	border: 1px solid rgba(255, 10, 105, 0.4);
	border-radius: 50%;
	color: #ff0a69;
	font-size: 0.28rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-managesync__main {
	padding: 13px;
}

.cd2-managesync__main > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cd2-managesync__main > header > span {
	display: grid;
}

.cd2-managesync__main small {
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.29rem;
}

.cd2-managesync__main > header b {
	font-size: 0.7rem;
	letter-spacing: -0.04em;
}

.cd2-managesync__main > header > em {
	padding: 5px 7px;
	border-radius: 4px;
	background: linear-gradient(90deg, #ff6a00, #ff0069);
	color: #fff;
	font-size: 0.28rem;
	font-style: normal;
	font-weight: 700;
}

.cd2-managesync__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
	margin-top: 11px;
}

.cd2-managesync__stats > span {
	display: grid;
	padding: 7px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 6px;
	background: #212123;
}

.cd2-managesync__stats b {
	margin-top: 2px;
	font-size: 0.66rem;
}

.cd2-managesync__stats > span:last-child b {
	color: #ff3b7f;
}

.cd2-managesync__overview {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 6px;
	margin-top: 6px;
}

.cd2-managesync__overview > div,
.cd2-managesync__overview > aside {
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 6px;
	background: #212123;
}

.cd2-managesync__overview > div {
	display: grid;
}

.cd2-managesync__overview > div strong {
	margin-top: 4px;
	font-size: 0.42rem;
}

.cd2-managesync__overview > div > span {
	display: block;
	height: 5px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 8px;
	background: #111;
}

.cd2-managesync__overview > div > span i {
	display: block;
	width: 68%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ff6a00, #ff0069);
}

.cd2-managesync__overview > div > em {
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.48);
	font-size: 0.26rem;
	font-style: normal;
}

.cd2-managesync__overview > aside {
	display: grid;
	place-items: center;
	text-align: center;
}

.cd2-managesync__overview > aside > i {
	display: block;
	width: 36px;
	height: 36px;
	margin: 4px 0;
	border-radius: 50%;
	background: conic-gradient(#ff0069 0 25%, #ff6a00 25% 38%, #1684ff 38% 100%);
	box-shadow: 0 0 0 8px #212123 inset;
}

.cd2-managesync__overview > aside > span {
	display: grid;
}

.cd2-managesync__overview > aside b {
	font-size: 0.46rem;
}

.cd2-managesync__overview > aside em {
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.22rem;
	font-style: normal;
}

.cd2-managesync__projects {
	display: grid;
	gap: 4px;
	margin-top: 7px;
}

.cd2-managesync__projects > strong {
	font-size: 0.32rem;
}

.cd2-managesync__projects > span {
	display: grid;
	grid-template-columns: 9px 1fr auto;
	align-items: center;
	gap: 5px;
	padding: 4px 5px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.035);
}

.cd2-managesync__projects > span i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff0a69;
}

.cd2-managesync__projects > span:nth-of-type(2) i { background: #ff6a00; }
.cd2-managesync__projects > span:nth-of-type(3) i { background: #1684ff; }

.cd2-managesync__projects > span b,
.cd2-managesync__projects > span em {
	font-size: 0.26rem;
}

.cd2-managesync__projects > span em {
	color: rgba(255, 255, 255, 0.36);
	font-style: normal;
}

/* MailSync email migration platform */
.cd2-demo--mailsync {
	top: 53px;
	right: 5%;
	bottom: 70px;
	left: -8%;
	border-color: rgba(74, 222, 173, 0.2);
	background:
		linear-gradient(rgba(63, 191, 151, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(63, 191, 151, 0.035) 1px, transparent 1px),
		#0b1a16;
	background-size: 21px 21px;
	color: #edf7f3;
	transform: rotate(2deg);
}

.cd2-work-card:hover .cd2-demo--mailsync {
	transform: rotate(0.5deg) translateY(-6px) scale(1.015);
}

.cd2-demo--mailsync > header {
	display: flex;
	height: 43px;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border-bottom: 1px solid rgba(134, 239, 204, 0.12);
	background: rgba(7, 20, 16, 0.82);
}

.cd2-demo--mailsync > header strong {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.51rem;
}

.cd2-demo--mailsync > header strong i {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 7px 3px 7px 3px;
	background: #2fd09b;
	color: #072017;
	font-size: 0.32rem;
	font-style: normal;
	font-weight: 800;
}

.cd2-demo--mailsync > header > span {
	padding: 4px 7px;
	border: 1px solid rgba(74, 222, 173, 0.28);
	border-radius: 999px;
	color: #74e5bd;
	font-size: 0.27rem;
	font-weight: 700;
}

.cd2-mailsync__body {
	display: grid;
	grid-template-columns: 0.78fr 1.22fr;
	align-items: center;
	gap: 9px;
	padding: 14px;
}

.cd2-mailsync__intro {
	display: grid;
	align-content: center;
}

.cd2-mailsync__intro > small {
	margin-bottom: 8px;
	color: #67ddb4;
	font-size: 0.29rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cd2-mailsync__intro > strong {
	font-size: 0.78rem;
	letter-spacing: -0.055em;
	line-height: 1.06;
}

.cd2-mailsync__intro > strong em {
	color: #31d09a;
	font-style: normal;
}

.cd2-mailsync__intro > span {
	margin-top: 10px;
	color: rgba(226, 244, 237, 0.48);
	font-size: 0.29rem;
	line-height: 1.55;
}

.cd2-mailsync__transfer {
	padding: 10px;
	border: 1px solid rgba(123, 217, 185, 0.18);
	border-radius: 9px;
	background: rgba(20, 40, 34, 0.92);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.cd2-mailsync__transfer > header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 5px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cd2-mailsync__transfer > header > span {
	display: grid;
	min-width: 0;
}

.cd2-mailsync__transfer > header > span:last-child {
	text-align: right;
}

.cd2-mailsync__transfer > header small {
	color: rgba(221, 241, 233, 0.4);
	font-size: 0.23rem;
}

.cd2-mailsync__transfer > header b {
	overflow: hidden;
	font-size: 0.28rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cd2-mailsync__transfer > header > i {
	color: #75d9b7;
	font-size: 0.5rem;
	font-style: normal;
}

.cd2-mailsync__progress {
	margin-top: 10px;
}

.cd2-mailsync__progress > span {
	display: flex;
	justify-content: space-between;
	font-size: 0.31rem;
}

.cd2-mailsync__progress > span em {
	color: #84e7c4;
	font-style: normal;
}

.cd2-mailsync__progress > i {
	display: block;
	height: 5px;
	margin-top: 5px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
}

.cd2-mailsync__progress > i b {
	display: block;
	width: 74%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #22c78f, #57ddb0);
}

.cd2-mailsync__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin-top: 8px;
}

.cd2-mailsync__metrics > span {
	display: grid;
	place-items: center;
	padding: 7px 3px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.045);
}

.cd2-mailsync__metrics b {
	font-size: 0.44rem;
}

.cd2-mailsync__metrics small {
	color: rgba(226, 244, 237, 0.38);
	font-size: 0.21rem;
	text-transform: uppercase;
}

.cd2-mailsync__transfer > footer {
	display: grid;
	gap: 4px;
	margin-top: 8px;
	color: rgba(226, 244, 237, 0.48);
	font-size: 0.24rem;
}

.cd2-mailsync__transfer > footer i {
	display: inline-grid;
	width: 10px;
	height: 10px;
	place-items: center;
	margin-right: 3px;
	border: 1px solid #2fd09b;
	border-radius: 50%;
	color: #2fd09b;
	font-size: 0.18rem;
	font-style: normal;
}

.cd2-work-card__arrow {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: rgba(15, 10, 21, 0.72);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	color: #fff;
	z-index: 3;
	transition: background 180ms ease, transform 180ms ease;
}

.cd2-work-card:hover .cd2-work-card__arrow {
	background: #7c3aed;
	transform: rotate(8deg);
}

.cd2-work-card__copy {
	position: absolute;
	right: 22px;
	bottom: 21px;
	left: 22px;
	display: grid;
	gap: 4px;
	z-index: 3;
}

.cd2-work-card__copy small {
	color: #b99cff;
	font-size: 0.51rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.cd2-work-card__copy strong {
	color: #fff;
	font-size: clamp(0.85rem, 1.5vw, 1.15rem);
	line-height: 1.25;
}

.cd2-work-card__copy em {
	max-width: 32ch;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.55rem;
	font-style: normal;
	line-height: 1.55;
}

.cd2-work__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 4px;
}

.cd2-work__controls button {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid rgba(185, 156, 255, 0.32);
	border-radius: 50%;
	background: rgba(20, 14, 28, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #d8c7ff;
	cursor: pointer;
	font-size: 1rem;
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.cd2-work__controls button:hover {
	border-color: #9b6cff;
	background: #6d28d9;
	color: #fff;
	transform: translateY(-2px);
}

.cd2-work__controls span {
	color: rgba(255, 255, 255, 0.42);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Product proof */
.cd2-proof {
	background: #09070d;
}

.cd2-proof__layout {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(60px, 9vw, 130px);
}

.cd2-proof__visual {
	position: relative;
	min-height: 500px;
}

.cd2-proof__orb {
	position: absolute;
	top: 50%;
	left: 48%;
	width: 380px;
	height: 380px;
	border: 1px solid rgba(167, 139, 250, 0.13);
	border-radius: 50%;
	background: radial-gradient(circle at 36% 32%, rgba(167, 139, 250, 0.38), rgba(91, 33, 182, 0.14) 44%, transparent 72%);
	box-shadow: 0 0 0 55px rgba(124, 58, 237, 0.025), 0 0 0 110px rgba(124, 58, 237, 0.012);
	transform: translate(-50%, -50%);
}

.cd2-proof__screen {
	position: absolute;
	top: 18%;
	right: 0;
	width: 72%;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	background: rgba(21, 15, 29, 0.94);
	box-shadow: 0 32px 68px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transform: rotate(5deg);
}

.cd2-proof__screen-bar {
	display: flex;
	gap: 5px;
	margin-bottom: 36px;
}

.cd2-proof__screen-bar i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
}

.cd2-proof__screen > strong,
.cd2-proof__screen > span,
.cd2-proof__screen > b,
.cd2-proof__screen > small {
	display: block;
}

.cd2-proof__screen > strong {
	color: #fff;
	font-size: 0.82rem;
}

.cd2-proof__screen > span,
.cd2-proof__screen > small {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.5rem;
}

.cd2-proof__screen > b {
	margin-top: 18px;
	color: #b99cff;
	font-size: 3rem;
	letter-spacing: -0.07em;
	line-height: 1;
}

.cd2-proof__screen > div:last-child {
	display: grid;
	gap: 8px;
	margin-top: 22px;
}

.cd2-proof__screen em {
	display: block;
	width: var(--w);
	height: 5px;
	border-radius: 10px;
	background: linear-gradient(90deg, #6d28d9, #b99cff);
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.24);
}

.cd2-proof__phone {
	position: absolute;
	bottom: 7%;
	left: 5%;
	width: 150px;
	height: 295px;
	padding: 30px 17px;
	border: 5px solid #d9d3df;
	border-radius: 27px;
	background: linear-gradient(165deg, #f7f4fb, #e9e1f1);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.44);
	color: #1f1725;
	transform: rotate(-8deg);
}

.cd2-proof__phone > span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 43px;
	height: 10px;
	border-radius: 8px;
	background: #251b2c;
	transform: translateX(-50%);
}

.cd2-proof__phone strong {
	display: block;
	margin: 12px 0 28px;
	font-size: 0.85rem;
	line-height: 1.25;
}

.cd2-proof__phone i {
	display: block;
	height: 42px;
	margin-top: 8px;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 5px 12px rgba(61, 39, 74, 0.08);
}

.cd2-proof__copy h2 {
	font-size: clamp(2.1rem, 3.7vw, 3.9rem);
}

.cd2-proof__copy > p {
	margin: 24px 0 28px;
	color: var(--cd2-muted);
	font-size: 0.84rem;
	line-height: 1.85;
}

.cd2-proof__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 30px;
}

.cd2-proof__stats article {
	display: grid;
	gap: 6px;
	padding-top: 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.cd2-proof__stats strong {
	color: #b99cff;
	font-size: 1.1rem;
	letter-spacing: -0.04em;
}

.cd2-proof__stats span {
	color: rgba(255, 255, 255, 0.43);
	font-size: 0.55rem;
	line-height: 1.45;
}

/* Testimonial */
.cd2-testimonial {
	background:
		radial-gradient(circle at 18% 62%, rgba(91, 33, 182, 0.15), transparent 26rem),
		#0d0a12;
}

.cd2-testimonial__card {
	display: grid;
	grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

.cd2-testimonial__image {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, #332044, #15101b 70%);
}

.cd2-testimonial__image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(67, 25, 119, 0.65), transparent 62%);
	content: "";
	mix-blend-mode: color;
}

.cd2-testimonial__image img {
	position: absolute;
	right: -8%;
	bottom: -10%;
	width: 112%;
	height: 112%;
	object-fit: contain;
	object-position: bottom center;
	filter: grayscale(1) contrast(1.05);
}

.cd2-testimonial__image span {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: #7c3aed;
	color: #fff;
	font-size: 2rem;
	font-family: Georgia, serif;
	line-height: 1;
}

.cd2-testimonial figure {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0;
	padding: clamp(42px, 7vw, 82px);
}

.cd2-testimonial__stars {
	margin-bottom: 22px;
	color: #f2c45c;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
}

.cd2-testimonial blockquote {
	margin: 0 0 26px;
	color: #f7f4fb;
	font-size: clamp(1.25rem, 2.5vw, 2.15rem);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.35;
}

.cd2-testimonial figcaption {
	display: grid;
	gap: 3px;
	margin-bottom: 27px;
}

.cd2-testimonial figcaption strong {
	color: #fff;
	font-size: 0.72rem;
}

.cd2-testimonial figcaption span {
	color: var(--cd2-muted);
	font-size: 0.58rem;
}

.cd2-testimonial figure > a {
	display: inline-flex;
	width: max-content;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(185, 156, 255, 0.42);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.63rem;
	font-weight: 700;
}

.cd2-testimonial figure > a span {
	color: #b99cff;
}

/* Insights */
.cd2-insights {
	background: #09070d;
}

.cd2-insights__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.cd2-insight-card {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	background: #100d15;
	transition: border-color 220ms ease, transform 220ms ease;
}

.cd2-insight-card:hover {
	border-color: rgba(167, 139, 250, 0.28);
	transform: translateY(-5px);
}

.cd2-insight-card__image {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: #18121f;
}

.cd2-insight-card__image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(34, 11, 59, 0.7), transparent 70%);
	content: "";
	mix-blend-mode: color;
}

.cd2-insight-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.7) brightness(0.72);
	transition: filter 400ms ease, transform 600ms ease;
}

.cd2-insight-card:hover img {
	filter: grayscale(0.2) brightness(0.82);
	transform: scale(1.035);
}

.cd2-insight-card__image > span {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(14, 9, 20, 0.8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
}

.cd2-insight-card__copy {
	padding: 24px;
}

.cd2-insight-card__copy small {
	color: #9b6cff;
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cd2-insight-card__copy h3 {
	margin: 10px 0 20px;
	color: #fff;
	font-size: clamp(1rem, 1.8vw, 1.35rem);
	line-height: 1.32;
}

.cd2-insight-card__copy > span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.6rem;
	font-weight: 700;
}

.cd2-insight-card__copy b {
	color: #b99cff;
}

/* Final CTA */
.cd2-final {
	padding-top: 60px;
	background: #0d0a12;
}

.cd2-final__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
	align-items: center;
	min-height: 430px;
	overflow: hidden;
	padding: clamp(44px, 7vw, 78px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 20px;
	background:
		radial-gradient(circle at 85% 55%, rgba(185, 156, 255, 0.22), transparent 35%),
		linear-gradient(125deg, #171020, #291143 58%, #401575);
	box-shadow: 0 34px 80px rgba(0, 0, 0, 0.32);
}

.cd2-final__panel::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 40px 40px;
	content: "";
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 72%);
	mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.cd2-final__copy {
	position: relative;
	z-index: 3;
}

.cd2-final__copy h2 {
	font-size: clamp(3rem, 6vw, 6.1rem);
	line-height: 0.88;
}

.cd2-final__copy h2 em {
	color: #c4adff;
	-webkit-text-fill-color: transparent;
}

.cd2-final__copy > p {
	max-width: 48ch;
	margin: 24px 0 28px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.8rem;
	line-height: 1.8;
}

.cd2-final__image {
	position: absolute;
	right: -5%;
	bottom: -14%;
	z-index: 2;
	width: 58%;
	height: 112%;
}

.cd2-final__image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #1c1028 0%, transparent 34%), linear-gradient(0deg, #35125e 0%, transparent 32%);
	content: "";
	pointer-events: none;
}

.cd2-final__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: grayscale(1) contrast(1.08);
}

.cd2-final__orbit {
	position: absolute;
	right: 38%;
	top: 42px;
	z-index: 4;
	display: grid;
	width: 105px;
	height: 105px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	background: rgba(18, 11, 25, 0.78);
	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.cd2-final__orbit span {
	position: absolute;
	inset: 10px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.45rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	transform: rotate(-20deg);
}

.cd2-final__orbit b {
	color: #c4adff;
	font-size: 1.2rem;
}

/* Footer tuned to the page palette */
.page-template-template-custom-development-v2 .site-footer {
	padding-top: 0;
	background:
		radial-gradient(circle at 86% 9%, rgba(91, 33, 182, 0.24), transparent 25rem),
		linear-gradient(145deg, #0b0910 0%, #09070d 58%, #120a1a 100%);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta {
	border-color: rgba(255, 255, 255, 0.12);
	background: linear-gradient(120deg, #5b21b6, #6d28d9 52%, #2e1065);
}

.page-template-template-custom-development-v2 .site-footer .site-footer__location i,
.page-template-template-custom-development-v2 .whatsapp-link {
	background: #7c3aed;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 span,
.page-template-template-custom-development-v2 .site-footer .site-footer__email:hover .dashicons,
.page-template-template-custom-development-v2 .site-footer .site-footer__phone:hover .dashicons {
	color: #fff;
}

/* Scroll reveals */
.cd2-motion-ready [data-cd2-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 720ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cd2-motion-ready [data-cd2-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Responsive */
@media (max-width: 1080px) {
	.cd2-solutions__stage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cd2-product {
		grid-column: 1 / -1;
		grid-row: 1;
		width: min(100%, 620px);
		margin: 0 auto 20px;
	}

	.cd2-solutions__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cd2-service-card {
		min-height: 230px;
	}

	.cd2-about__grid {
		grid-template-columns: 0.55fr 1.1fr;
	}

	.cd2-about__portraits {
		grid-column: 1 / -1;
		width: min(100%, 620px);
		margin-left: auto;
	}
}

@media (max-width: 900px) {
	.page-template-template-custom-development-v2 .site-header .primary-nav {
		background:
			radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.1), transparent 42%),
			#fff;
	}

	body.page-template-template-custom-development-v2.menu-open .site-header {
		border-bottom-color: rgba(16, 16, 21, 0.08);
		background: #fff;
		color: #101015;
	}

	body.page-template-template-custom-development-v2.menu-open .site-header .brand img {
		filter: none;
	}

	body.page-template-template-custom-development-v2.menu-open .site-header .menu-toggle {
		color: #101015;
	}

	.page-template-template-custom-development-v2 .primary-nav .site-menu > li > a {
		color: #101015;
	}

	.page-template-template-custom-development-v2 .mobile-drawer__panel,
	.page-template-template-custom-development-v2 .mobile-menu > .menu-item > a {
		color: #101015;
	}

	.cd2-client-strip img:nth-child(n+7) {
		display: none;
	}

	.cd2-about__grid,
	.cd2-process__layout,
	.cd2-proof__layout {
		grid-template-columns: 1fr;
	}

	.cd2-about__label {
		position: static;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
	}

	.cd2-about__stat {
		margin-top: 24px;
		text-align: left;
	}

	.cd2-about__stat span {
		margin-left: 0;
	}

	.cd2-process__steps {
		order: 2;
	}

	.cd2-process__visual {
		width: min(100%, 560px);
		margin: 0 auto;
	}

	.cd2-work__grid {
		--cd2-work-card-width: min(76vw, 360px);
		padding-top: 30px;
		padding-bottom: 38px;
		scroll-snap-type: x mandatory;
	}

	.cd2-work-card {
		scroll-snap-align: center;
	}

	.cd2-proof__visual {
		width: min(100%, 590px);
		margin: 0 auto;
	}

	.cd2-final__panel {
		grid-template-columns: 1fr 0.75fr;
	}
}

@media (max-width: 720px) {
	.page-template-template-custom-development-v2 .container {
		width: min(calc(100% - 36px), 1180px);
	}

	.cd2-section {
		padding-block: 82px;
	}

	.cd2-section-head--split {
		align-items: flex-start;
		flex-direction: column;
	}

	.cd2-showreel__badge {
		right: -4px;
		bottom: -50px;
		width: 86px;
		height: 86px;
	}

	.cd2-client-strip {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 90px;
	}

	.cd2-client-strip > span {
		max-width: none;
	}

	.cd2-client-strip > div {
		justify-content: flex-start;
		overflow: hidden;
	}

	.cd2-client-strip img {
		max-width: 78px;
	}

	.cd2-client-strip img:nth-child(n+5) {
		display: none;
	}

	.cd2-about__grid {
		gap: 42px;
	}

	.cd2-about__label {
		align-items: center;
	}

	.cd2-about__stat strong {
		font-size: 3rem;
	}

	.cd2-about__portraits {
		min-height: 390px;
	}

	.cd2-photo--wide {
		height: 380px;
	}

	.cd2-photo--small {
		height: 260px;
	}

	.cd2-solutions__stage,
	.cd2-solutions__cards {
		grid-template-columns: 1fr;
	}

	.cd2-product {
		grid-column: auto;
		width: 100%;
		padding-inline: 0;
	}

	.cd2-product__shell {
		transform: none;
	}

	.cd2-product__float--one {
		left: -8px;
	}

	.cd2-product__float--two {
		right: -8px;
	}

	.cd2-solutions__cta {
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.cd2-solutions__cta .cd2-button {
		width: 100%;
	}

	.cd2-process__visual {
		min-height: 430px;
	}

	.cd2-proof__visual {
		min-height: 440px;
	}

	.cd2-proof__orb {
		width: 310px;
		height: 310px;
	}

	.cd2-testimonial__card {
		grid-template-columns: 1fr;
	}

	.cd2-testimonial__image {
		min-height: 310px;
	}

	.cd2-insights__grid {
		grid-template-columns: 1fr;
	}

	.cd2-final__panel {
		grid-template-columns: 1fr;
		min-height: 650px;
		align-items: start;
		padding: 42px 28px;
	}

	.cd2-final__copy {
		max-width: 480px;
	}

	.cd2-final__image {
		right: -12%;
		bottom: -8%;
		width: 105%;
		height: 62%;
	}

	.cd2-final__image::after {
		background: linear-gradient(180deg, #21102f 0%, transparent 28%), linear-gradient(0deg, #35125e 0%, transparent 24%);
	}

	.cd2-final__orbit {
		right: 24px;
		top: auto;
		bottom: 255px;
	}
}

/* Match the established custom-development footer CTA from the v1 page. */
.page-template-template-custom-development-v2 .site-footer {
	border-top: 0;
	background: #101015;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta {
	width: min(calc(100% - 64px), var(--container));
	margin: 0 auto;
	overflow: visible;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
	gap: clamp(48px, 8vw, 110px);
	padding: clamp(64px, 8vw, 96px) 0;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 {
	max-width: 16ch;
	font-family: inherit;
	font-size: clamp(2.25rem, 3.7vw, 3.9rem);
	font-style: normal;
	font-weight: 750;
	letter-spacing: -0.06em;
	line-height: 1;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 span {
	display: inline-block;
	margin-top: 0;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: "Kaushan Script", "Segoe Script", cursive;
	font-size: 0.9em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
	gap: 16px;
	padding-left: clamp(28px, 4vw, 52px);
	border-top: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white {
	border-color: #fff;
	background: #fff;
	box-shadow: none;
	color: #101015;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white:hover {
	border-color: #fff;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	color: #101015;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__phone {
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
	.page-template-template-custom-development-v2 .site-footer .footer-cta {
		width: min(calc(100% - 36px), var(--container));
		margin: 0 auto;
		border-radius: 0;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 54px 0;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
		padding-top: 22px;
		padding-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		border-left: 0;
	}
}

/* Keep V2 headline scale consistent with the established Custom Development page. */
.cd2-hero h1 {
	font-size: clamp(2.4rem, 4.8vw, 3.8rem);
}

.cd2-hero h1 em {
	font-size: 1.05em;
}

.cd2-section h2,
.cd2-capabilities h2 {
	font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 {
	font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}

/* Scrolling integration marks — two centred logo rows inspired by the capabilities reference. */
.cd2-integrations__marquee {
	width: min(100vw, 1600px);
	margin-inline: 50%;
	overflow: hidden;
	transform: translateX(-50%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.cd2-integrations__row {
	overflow: hidden;
}

.cd2-integrations__row + .cd2-integrations__row {
	margin-top: 16px;
}

.cd2-integrations__track {
	display: flex;
	width: max-content;
	animation: cd2-integration-scroll 38s linear infinite;
	will-change: transform;
}

.cd2-integrations__row.is-reverse .cd2-integrations__track {
	animation-direction: reverse;
	animation-duration: 42s;
}

.cd2-integrations__marquee:hover .cd2-integrations__track {
	animation-play-state: paused;
}

.cd2-integrations__group {
	display: flex;
	gap: 16px;
	padding-right: 16px;
}

.cd2-integration-card {
	position: relative;
	display: grid;
	width: clamp(164px, 12vw, 196px);
	min-height: 82px;
	place-items: center;
	overflow: hidden;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(234, 224, 249, 0.67)),
		rgba(255, 255, 255, 0.58);
	-webkit-backdrop-filter: blur(18px) saturate(145%);
	backdrop-filter: blur(18px) saturate(145%);
	box-shadow: 0 14px 32px rgba(31, 17, 50, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cd2-integration-card::before {
	position: absolute;
	inset: 0;
	display: block;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.62), transparent 31%),
		radial-gradient(circle at 82% 112%, color-mix(in srgb, var(--cd2-integration-brand) 20%, transparent), transparent 52%);
	content: "";
	pointer-events: none;
}

.cd2-integration-card:hover {
	border-color: rgba(124, 58, 237, 0.48);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 229, 252, 0.82)),
		rgba(255, 255, 255, 0.76);
	box-shadow: 0 16px 34px rgba(58, 28, 98, 0.18);
	transform: translateY(-3px);
}

.cd2-integration-card__logo,
.cd2-integration-card.is-logo-asset .cd2-integration-card__logo {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 46px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.cd2-integration-card__logo img,
.cd2-integration-card.is-logo-asset .cd2-integration-card__logo img {
	width: auto;
	max-width: 48px;
	max-height: 34px;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
	filter: grayscale(1) contrast(0.82);
	transition: filter 180ms ease;
}

.cd2-integration-card__name {
	min-width: 0;
	color: #29222f;
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.15;
	white-space: nowrap;
}

.cd2-integration-wordmark {
	filter: grayscale(1) contrast(0.82);
	transition: filter 180ms ease;
}

.cd2-integration-wordmark i {
	display: inline-grid;
	min-width: 1.35rem;
	height: 1.35rem;
	place-items: center;
	font-size: 0.78rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: -0.05em;
}

.cd2-integration-wordmark--react-native strong {
	font-size: 0.92rem;
	letter-spacing: -0.055em;
}

.cd2-integration-wordmark--mongodb i,
.cd2-integration-wordmark--firebase i {
	font-size: 1.05rem;
}

.cd2-integration-wordmark--php strong {
	font-family: Arial, sans-serif;
	font-style: italic;
	letter-spacing: -0.03em;
}

.cd2-integration-wordmark--auth0 strong,
.cd2-integration-wordmark--nextauth strong,
.cd2-integration-wordmark--typescript strong,
.cd2-integration-wordmark--postgresql strong {
	font-size: 0.9rem;
	letter-spacing: -0.045em;
}

.cd2-integration-card:hover .cd2-integration-card__logo img,
.cd2-integration-card:hover .cd2-integration-wordmark {
	filter: none;
}

/* The supplied SVG marks are monochrome, so restore each brand's dominant colour on hover. */
.cd2-integration-card--payfast:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(38%) sepia(77%) saturate(1681%) hue-rotate(319deg) brightness(91%) contrast(97%);
}

.cd2-integration-card--yoco:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(34%) sepia(77%) saturate(2062%) hue-rotate(231deg) brightness(87%) contrast(96%);
}

.cd2-integration-card--paypal:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(31%) sepia(96%) saturate(1260%) hue-rotate(170deg) brightness(89%) contrast(103%);
}

.cd2-integration-card--woocommerce:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(42%) sepia(17%) saturate(1402%) hue-rotate(258deg) brightness(91%) contrast(83%);
}

.cd2-integration-card--shopify:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(67%) sepia(29%) saturate(836%) hue-rotate(51deg) brightness(91%) contrast(86%);
}

.cd2-integration-card--wordpress:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(37%) sepia(42%) saturate(1020%) hue-rotate(154deg) brightness(87%) contrast(90%);
}

.cd2-integration-card--elementor:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(12%) sepia(81%) saturate(4186%) hue-rotate(327deg) brightness(78%) contrast(112%);
}

.cd2-integration-card--google-analytics:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(50%) sepia(96%) saturate(2856%) hue-rotate(9deg) brightness(95%) contrast(101%);
}

.cd2-integration-card--google-ads:hover .cd2-integration-card__logo img,
.cd2-integration-card--meta:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(39%) sepia(88%) saturate(1870%) hue-rotate(202deg) brightness(101%) contrast(94%);
}

.cd2-integration-card--mailchimp:hover .cd2-integration-card__logo img {
	filter: brightness(0) saturate(100%) invert(82%) sepia(93%) saturate(1683%) hue-rotate(2deg) brightness(100%) contrast(102%);
}

.cd2-integration-card--next-js:hover .cd2-integration-wordmark strong {
	color: #6d28d9;
}

.cd2-integration-wordmark--courier-guy strong::before,
.cd2-integration-wordmark--next strong {
	color: #4c4850;
}

@keyframes cd2-integration-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 720px) {
	.cd2-integrations__marquee {
		mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
	}

	.cd2-integrations__row + .cd2-integrations__row {
		margin-top: 10px;
	}

	.cd2-integrations__group {
		gap: 10px;
		padding-right: 10px;
	}

	.cd2-integration-card {
		width: 158px;
		min-height: 74px;
		padding: 12px 14px;
		border-radius: 15px;
	}

	.cd2-integration-card__logo,
	.cd2-integration-card.is-logo-asset .cd2-integration-card__logo {
		height: 38px;
	}

	.cd2-integration-card__logo img,
	.cd2-integration-card.is-logo-asset .cd2-integration-card__logo img {
		max-width: 40px;
		max-height: 29px;
	}

	.cd2-integration-card__name {
		font-size: 0.66rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cd2-integrations__track {
		animation-play-state: paused;
	}
}

@media (max-width: 520px) {
	.cd2-hero {
		padding-top: 68px;
	}

	.cd2-rating {
		gap: 9px;
		padding: 8px 27px 8px 10px;
	}

	.cd2-rating__google-mark {
		width: 21px;
		height: 21px;
	}

	.cd2-rating__copy small {
		font-size: 0.49rem;
	}

	.cd2-hero h1 br {
		display: none;
	}

	.cd2-hero__actions .cd2-button {
		width: 100%;
	}

	.cd2-video {
		aspect-ratio: 4 / 3;
	}

	.cd2-video__caption {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}

	.cd2-video .video-facade__thumbnail {
		object-position: 67% center;
	}

	.cd2-about__label {
		align-items: flex-start;
		flex-direction: column;
	}

	.cd2-about__stat {
		text-align: left;
	}

	.cd2-about__stat span {
		margin-left: 0;
	}

	.cd2-about__portraits {
		grid-template-columns: 1fr 0.72fr;
		min-height: 390px;
	}

	.cd2-photo--wide {
		height: 390px;
	}

	.cd2-photo--small {
		height: 245px;
	}

	.cd2-discovery__intro {
		padding: 14px 12px 10px;
	}

	.cd2-discovery__intro > span {
		display: none;
	}

	.cd2-discovery__flow {
		padding: 0 12px 8px;
	}

	.cd2-discovery__flow > div {
		grid-template-columns: 24px 1fr;
		gap: 7px;
		padding: 7px 8px;
	}

	.cd2-discovery__flow > div > i {
		width: 24px;
		height: 24px;
	}

	.cd2-discovery__flow > div > em {
		display: none;
	}

	.cd2-discovery__flow > b {
		height: 9px;
		line-height: 9px;
	}

	.cd2-discovery > footer {
		padding: 9px 10px;
	}

	.cd2-discovery > footer strong {
		display: none;
	}

	.cd2-mini-product {
		padding: 10px;
	}

	.cd2-mini-product__hello {
		padding: 13px 0 9px;
	}

	.cd2-mini-product__hello strong {
		font-size: 0.54rem;
	}

	.cd2-mini-product__actions > span {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 2px;
		padding: 5px 2px;
		text-align: center;
	}

	.cd2-mini-product > footer {
		padding-top: 7px;
	}

	.cd2-about__orbit {
		right: 12%;
		bottom: -42px;
		width: 92px;
		height: 92px;
	}

	.cd2-product__body {
		grid-template-columns: 34px 1fr;
		min-height: 350px;
	}

	.cd2-product__main {
		padding: 14px;
	}

	.cd2-product__float {
		display: none;
	}

	.cd2-product__metrics strong {
		font-size: 0.78rem;
	}

	.cd2-process__steps li {
		grid-template-columns: 36px 1fr;
		gap: 12px;
		padding: 17px;
	}

	.cd2-process__visual {
		min-height: 360px;
	}

	.cd2-process__journey {
		top: 3%;
		right: 0;
		bottom: 3%;
		left: 0;
		transform: rotate(1.5deg);
	}

	.cd2-journey__body {
		padding: 12px;
	}

	.cd2-journey__path {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 5px;
	}

	.cd2-journey__path > em,
	.cd2-journey__path > span > small {
		display: none;
	}

	.cd2-journey__path > span {
		grid-template-columns: 18px 1fr;
		padding: 5px;
	}

	.cd2-journey__path > span > i {
		grid-row: auto;
		width: 18px;
		height: 18px;
	}

	.cd2-journey__canvas {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 0.9fr;
		gap: 6px;
		margin-top: 8px;
	}

	.cd2-journey__canvas > div {
		padding: 8px;
	}

	.cd2-journey__brief,
	.cd2-journey__wireframe,
	.cd2-journey__sprint,
	.cd2-journey__release {
		grid-column: auto;
		grid-row: auto;
	}

	.cd2-journey__brief > span {
		display: none;
	}

	.cd2-journey__brief > strong {
		margin-bottom: 0;
	}

	.cd2-journey__wireframe section i {
		height: 22px;
	}

	.cd2-journey__wireframe > div > span {
		margin-block: 6px;
	}

	.cd2-journey__footer {
		margin-top: 7px;
		padding-top: 6px;
	}

	.cd2-journey__footer > span:last-child {
		display: none;
	}

	.cd2-process__cards span {
		width: 53px;
		height: 53px;
	}

	.cd2-process__stamp {
		width: 90px;
		height: 90px;
	}

	.cd2-proof__visual {
		min-height: 340px;
	}

	.cd2-proof__orb {
		left: 50%;
		width: 250px;
		height: 250px;
	}

	.cd2-proof__screen {
		top: 10%;
		right: 3%;
		width: 68%;
		padding: 17px;
	}

	.cd2-proof__screen > b {
		font-size: 2.3rem;
	}

	.cd2-proof__phone {
		bottom: 8%;
		left: 5%;
		width: 92px;
		height: 214px;
		padding: 20px 10px;
		transform: rotate(-5deg);
	}

	.cd2-proof__phone strong {
		margin: 8px 0 13px;
		font-size: 0.72rem;
	}

	.cd2-proof__phone i {
		height: 27px;
		margin-top: 6px;
	}

	.cd2-proof__stats {
		grid-template-columns: 1fr;
	}

	.cd2-testimonial figure {
		padding: 34px 26px;
	}

	.cd2-final__panel {
		min-height: 610px;
	}

	.cd2-final__orbit {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cd2-marquee__track {
		animation-play-state: paused;
	}

	.cd2-about__android-float > i,
	.cd2-about__android-float > div,
	.cd2-about__android-float .cd2-android-antenna {
		animation: none;
	}

	.cd2-motion-ready [data-cd2-reveal],
	.cd2-motion-ready [data-cd2-reveal].is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Footer: carry the custom-development page through its final conversion point. */
.page-template-template-custom-development-v2 .site-footer {
	border-top: 1px solid rgba(167, 139, 250, 0.13);
	background:
		radial-gradient(ellipse 55% 24% at 50% 0%, rgba(91, 33, 182, 0.14), transparent 74%),
		#08070b;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta {
	width: min(calc(100% - 64px), 1180px);
	margin: clamp(56px, 7vw, 94px) auto 0;
	overflow: hidden;
	border: 1px solid rgba(167, 139, 250, 0.24);
	border-radius: 18px;
	background:
		radial-gradient(circle at 88% 10%, rgba(124, 58, 237, 0.34), transparent 34%),
		linear-gradient(135deg, #17101f 0%, #100b18 72%);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.72fr);
	gap: clamp(36px, 6vw, 86px);
	padding: clamp(38px, 5vw, 66px);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta .kicker {
	color: rgba(255, 255, 255, 0.56);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2,
.page-template-template-custom-development-v2 .site-footer .footer-cta h2 span {
	font-family: inherit;
	font-style: normal;
	font-weight: 750;
	letter-spacing: -0.06em;
	line-height: 0.98;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 {
	max-width: 12ch;
	color: #f7f4fb;
	font-size: clamp(2.35rem, 4vw, 4.4rem);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 span {
	display: block;
	margin-top: 3px;
	background: linear-gradient(110deg, #d8c7ff 0%, #a78bfa 44%, #6d28d9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
	padding-left: clamp(28px, 4vw, 52px);
	border-left-color: rgba(167, 139, 250, 0.2);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.84rem;
	line-height: 1.75;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white {
	border-color: #7c3aed;
	background: linear-gradient(135deg, #8b5cf6, #5b21b6);
	box-shadow: 0 14px 28px rgba(91, 33, 182, 0.28);
	color: #fff;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white:hover {
	border-color: #a78bfa;
	background: linear-gradient(135deg, #a78bfa, #6d28d9);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__phone {
	color: #c4adff;
}

.page-template-template-custom-development-v2 .site-footer .site-footer__top {
	padding-block: clamp(54px, 6vw, 76px);
}

@media (max-width: 720px) {
	.page-template-template-custom-development-v2 .site-footer .footer-cta {
		width: min(calc(100% - 36px), 1180px);
		margin-top: 52px;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 34px 28px;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
		padding-top: 22px;
		padding-left: 0;
		border-top: 1px solid rgba(167, 139, 250, 0.2);
		border-left: 0;
	}
}

/* Centred client review — the portrait is intentionally removed for a review-first layout. */
.cd2-testimonial .cd2-section-head.cd2-section-head--left {
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.cd2-testimonial__card {
	position: relative;
	display: block;
	max-width: 940px;
	margin: 52px auto 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.2), transparent 42%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

.cd2-testimonial__card::before {
	position: absolute;
	top: -58px;
	left: 50%;
	z-index: 2;
	display: grid;
	width: 118px;
	height: 118px;
	place-items: end center;
	padding-bottom: 11px;
	border: 1px solid rgba(185, 156, 255, 0.26);
	border-radius: 50%;
	background: #1b1028;
	color: #b99cff;
	content: "“";
	font-size: 4.8rem;
	font-family: Georgia, serif;
	line-height: 1;
	transform: translateX(-50%);
}

.cd2-testimonial figure {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0;
	padding: clamp(78px, 9vw, 112px) clamp(28px, 8vw, 100px) clamp(54px, 7vw, 78px);
	text-align: center;
}

.cd2-testimonial blockquote {
	max-width: 790px;
}

.cd2-testimonial figcaption {
	text-align: center;
}

/* FAQ — buyer-focused answers, tuned to the V2 dark-purple palette. */
.cd2-faq {
	background:
		radial-gradient(ellipse 46% 56% at 16% 50%, rgba(105, 48, 208, 0.16), transparent 72%),
		#0a080e;
}

.cd2-faq__layout {
	display: grid;
	grid-template-columns: minmax(260px, 0.76fr) minmax(0, 1.24fr);
	gap: clamp(52px, 9vw, 140px);
	align-items: start;
}

.cd2-faq__intro {
	position: sticky;
	top: 120px;
}

.cd2-faq__intro h2 {
	margin: 0;
}

.cd2-faq__intro > p:not(.cd2-eyebrow) {
	max-width: 31rem;
	margin: 22px 0 0;
	color: var(--cd2-muted);
	font-size: 1rem;
	line-height: 1.7;
}

.cd2-faq__intro .cd2-text-link {
	display: inline-flex;
	margin-top: 28px;
}

.cd2-faq__list {
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.cd2-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.cd2-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 24px 0;
	cursor: pointer;
	color: #f8f5ff;
	font-size: clamp(0.94rem, 1.2vw, 1.06rem);
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
}

.cd2-faq__item summary::-webkit-details-marker {
	display: none;
}

.cd2-faq__item summary i {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.cd2-faq__item summary i::before,
.cd2-faq__item summary i::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: #a78bfa;
	content: "";
	transform: translateY(-50%);
	transition: transform 180ms ease;
}

.cd2-faq__item summary i::after {
	transform: translateY(-50%) rotate(90deg);
}

.cd2-faq__item[open] summary i::after {
	transform: translateY(-50%) rotate(0deg);
}

.cd2-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 220ms ease, padding-bottom 220ms ease;
}

.cd2-faq__answer p {
	min-height: 0;
	max-width: 62ch;
	margin: 0;
	overflow: hidden;
	color: var(--cd2-muted);
	font-size: 0.92rem;
	line-height: 1.78;
}

.cd2-faq__item[open] .cd2-faq__answer {
	grid-template-rows: 1fr;
	padding-bottom: 26px;
}

@media (max-width: 720px) {
	.cd2-faq__layout {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.cd2-faq__intro {
		position: static;
	}

	.cd2-faq__item summary {
		padding: 20px 0;
		gap: 18px;
	}
}

/* Footer CTA: match the v1 custom-development page. */
.page-template-template-custom-development-v2 .site-footer {
	border-top: 0;
	background: #101015;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta {
	width: min(calc(100% - 64px), var(--container));
	margin: 0 auto;
	overflow: visible;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
	gap: clamp(48px, 8vw, 110px);
	padding: clamp(64px, 8vw, 96px) 0;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 {
	max-width: 16ch;
	font-family: inherit;
	font-size: clamp(2.25rem, 3.7vw, 3.9rem);
	font-style: normal;
	font-weight: 750;
	letter-spacing: -0.06em;
	line-height: 1;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta h2 span {
	display: inline-block;
	margin-top: 0;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: "Kaushan Script", "Segoe Script", cursive;
	font-size: 0.9em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
	gap: 16px;
	padding-left: clamp(28px, 4vw, 52px);
	border-top: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white,
.page-template-template-custom-development-v2 .site-footer .footer-cta__actions .button--white:hover {
	border-color: #fff;
	background: #fff;
	box-shadow: none;
	color: #101015;
}

.page-template-template-custom-development-v2 .site-footer .footer-cta__phone {
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
	.page-template-template-custom-development-v2 .site-footer .footer-cta {
		width: min(calc(100% - 36px), var(--container));
		margin: 0 auto;
		border-radius: 0;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 54px 0;
	}

	.page-template-template-custom-development-v2 .site-footer .footer-cta__actions {
		padding-top: 22px;
		padding-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		border-left: 0;
	}
}