/* ----------------------------------------------------------------------------------------
* App / Auth / Settings screens — plain Blade + Bootstrap, matching the Artistic template
* theme variables (see custom.css :root) without any build step.
* ---------------------------------------------------------------------------------------- */

/* ---- Header contact offcanvas: the panel has a fixed height with 150px of
   vertical padding, and Bootstrap's default .offcanvas-body is
   overflow-y:visible (no scrollbar), so longer content (like our full
   address) gets clipped instead of scrolling into view. ---- */

.header-btn .offcanvas .offcanvas-body {
	height: 100%;
	overflow-y: auto;
}

/* ---- Main nav: push the menu to the right side of the header, next to the
   social icons/CTA button, instead of the template's default left-aligned
   placement right after the logo. ---- */

.main-menu .nav-menu-wrapper {
	flex: 0 0 auto;
	margin-left: auto;
}

/* ---- Logo chip: the Techluviz mark is dark-ink-on-transparent, so on this
   dark theme it needs a light backing panel to stay legible. ---- */

.logo-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color);
	border-radius: 12px;
	padding: 10px 16px;
	line-height: 0;
}

.logo-chip img {
	display: block;
	height: 28px;
	width: auto;
}

.logo-chip.logo-chip-sm {
	padding: 6px 12px;
	border-radius: 10px;
}

.logo-chip.logo-chip-sm img {
	height: 20px;
}

.logo-chip.logo-chip-lg {
	padding: 14px 22px;
	border-radius: 16px;
}

.logo-chip.logo-chip-lg img {
	height: 36px;
}

.app-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ---- Shared form controls ---- */

.app-page .form-label {
	color: var(--text-color);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

.app-page .form-control {
	font-family: var(--default-font);
	font-size: 16px;
	color: var(--text-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 14px 18px;
	box-shadow: none;
}

.app-page .form-control:focus {
	color: var(--text-color);
	background: transparent;
	border-color: var(--accent-color);
	box-shadow: none;
}

.app-page .form-control::placeholder {
	color: #9a9a9a;
}

.app-page .form-control[readonly] {
	opacity: 0.7;
}

.app-page .invalid-feedback {
	display: block;
	color: var(--error-color);
	font-size: 13px;
	margin-top: 6px;
}

.app-page .form-check-input {
	background-color: transparent;
	border: 1px solid var(--divider-color);
}

.app-page .form-check-input:checked {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.app-page .form-check-label {
	color: var(--text-color);
	font-size: 14px;
}

.app-page .status-message {
	color: var(--accent-color);
	font-weight: 600;
	font-size: 14px;
}

.app-page a {
	color: var(--accent-color);
}

.app-page a.link-muted {
	color: var(--text-color);
	text-decoration: underline;
}

.btn-highlighted:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- Auth screens ---- */

.auth-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}

.auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--dark-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px 36px;
}

.auth-card .auth-logo {
	margin: 0 auto 28px;
	width: fit-content;
}

.auth-card h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	text-align: center;
	margin-bottom: 8px;
}

.auth-card .auth-description {
	color: var(--text-color);
	opacity: 0.75;
	text-align: center;
	font-size: 14px;
	line-height: 1.5em;
	margin-bottom: 28px;
}

.auth-card .auth-footer {
	margin-top: 24px;
	text-align: center;
	font-size: 14px;
	color: var(--text-color);
	opacity: 0.8;
}

/* ---- App shell (dashboard / settings) ---- */

.app-navbar {
	background: var(--dark-color);
	border-bottom: 1px solid var(--divider-color);
	padding: 14px 0;
}

.app-navbar .nav-link {
	color: var(--text-color);
	font-weight: 600;
	font-size: 14px;
	text-transform: capitalize;
	padding: 8px 16px !important;
}

.app-navbar .nav-link.active {
	color: var(--dark-color);
	background: var(--accent-color);
	border-radius: 100px;
}

.app-navbar .nav-link:hover {
	color: var(--accent-color);
}

.app-navbar .nav-link.active:hover {
	color: var(--dark-color);
}

.app-main {
	flex: 1;
	padding: 40px 0 80px;
}

.app-heading-small h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 4px;
}

.app-heading-small p {
	color: var(--text-color);
	opacity: 0.75;
	font-size: 14px;
	margin-bottom: 0;
}

.app-card {
	background: var(--dark-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px;
}

.settings-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
}

.settings-nav a {
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 100px;
	text-decoration: none;
}

.settings-nav a.active {
	background: var(--accent-color);
	color: var(--dark-color);
}

.settings-nav a:not(.active):hover {
	color: var(--accent-color);
}

.danger-box {
	border: 1px solid rgba(230, 87, 87, 0.35);
	background: rgba(230, 87, 87, 0.08);
	border-radius: 14px;
	padding: 20px;
	margin-top: 32px;
}

.danger-box p.warning-title {
	color: var(--error-color);
	font-weight: 700;
	margin-bottom: 4px;
}

.danger-box p.warning-text {
	color: var(--error-color);
	opacity: 0.85;
	font-size: 14px;
	margin-bottom: 16px;
}

.btn-danger-outline {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--error-color);
	color: var(--error-color);
	border-radius: 100px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
}

.btn-danger-outline:hover {
	background: var(--error-color);
	color: var(--primary-color);
}

.placeholder-box {
	border: 1px dashed var(--divider-color);
	border-radius: 16px;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	opacity: 0.4;
}

.appearance-tabs {
	display: inline-flex;
	gap: 6px;
	background: var(--secondary-color);
	border-radius: 100px;
	padding: 4px;
}

.appearance-tabs button {
	background: transparent;
	border: none;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.appearance-tabs button.active {
	background: var(--accent-color);
	color: var(--dark-color);
}

/* Simple modal for delete-account confirmation (no JS framework required) */

.simple-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1050;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	padding: 20px;
}

.simple-modal.is-open {
	display: flex;
}

.simple-modal-dialog {
	width: 100%;
	max-width: 440px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px;
}

.simple-modal-dialog h5 {
	color: var(--primary-color);
	font-weight: 700;
	margin-bottom: 12px;
}

.simple-modal-dialog p {
	color: var(--text-color);
	opacity: 0.8;
	font-size: 14px;
	margin-bottom: 20px;
}

/* ---- Coming Soon page ---- */

.coming-soon {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 160px 0 120px;
}

.coming-soon-content {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.coming-soon-content h3 {
	color: var(--accent-color);
}

.coming-soon-content h1 {
	margin-top: 12px;
}

.coming-soon-content>p {
	max-width: 520px;
	margin: 20px auto 0;
	color: var(--text-color);
	opacity: 0.8;
}

.coming-soon-badge {
	position: relative;
	width: 110px;
	height: 110px;
	margin: 0 auto 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--dark-color);
	font-size: 40px;
	animation: comingSoonPulse 2.4s ease-in-out infinite;
}

.coming-soon-badge::before,
.coming-soon-badge::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--accent-color);
	animation: comingSoonRing 2.4s ease-out infinite;
}

.coming-soon-badge::after {
	animation-delay: 1.2s;
}

@keyframes comingSoonPulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.45);
	}

	50% {
		box-shadow: 0 0 0 18px rgba(191, 247, 71, 0);
	}
}

@keyframes comingSoonRing {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

.coming-soon-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 32px 0;
}

.coming-soon-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent-color);
	animation: comingSoonBounce 1.2s ease-in-out infinite;
}

.coming-soon-dots span:nth-child(2) {
	animation-delay: 0.15s;
}

.coming-soon-dots span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes comingSoonBounce {

	0%,
	80%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}

	40% {
		transform: translateY(-10px);
		opacity: 1;
	}
}

.coming-soon-shape {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	background: var(--accent-color);
	opacity: 0.08;
	filter: blur(2px);
	animation: comingSoonFloat 8s ease-in-out infinite;
}

.coming-soon-shape.shape-1 {
	width: 220px;
	height: 220px;
	top: -60px;
	left: -60px;
	animation-duration: 9s;
}

.coming-soon-shape.shape-2 {
	width: 140px;
	height: 140px;
	bottom: 12%;
	right: 8%;
	animation-duration: 7s;
	animation-delay: 1s;
}

.coming-soon-shape.shape-3 {
	width: 90px;
	height: 90px;
	top: 18%;
	right: 20%;
	animation-duration: 6s;
	animation-delay: 2s;
}

@keyframes comingSoonFloat {

	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	50% {
		transform: translateY(-25px) translateX(15px);
	}
}

/* ---- Project cards: show the whole image instead of cropping it to the
   card's 1 : 0.735 box (for square / logo-style images with a white backdrop). ---- */

.project-image figure img.img-contain {
	object-fit: contain;
	background: #fff;
}

/* ---------------------------------------------------------------------------
   Project detail page (/projects/{slug})
--------------------------------------------------------------------------- */

.pd-hero {
	position: relative;
	overflow: hidden;
	padding: 200px 0 120px;
	background: #050816;
}

.pd-hero-glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 520px at 78% 35%, rgba(104, 74, 255, 0.55), transparent 65%),
		radial-gradient(520px 420px at 95% 5%, rgba(46, 140, 255, 0.45), transparent 65%),
		radial-gradient(600px 400px at 5% 100%, rgba(80, 60, 200, 0.25), transparent 65%),
		linear-gradient(180deg, #060a1c 0%, #04050d 100%);
}

.pd-hero .container {
	position: relative;
	z-index: 1;
}

.pd-hero-badge {
	display: inline-block;
	margin-bottom: 22px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #bcd0ff;
	background: rgba(120, 140, 255, 0.14);
	border: 1px solid rgba(150, 170, 255, 0.28);
	border-radius: 100px;
}

.pd-hero h1 {
	margin-bottom: 26px;
	font-size: 68px;
	font-weight: 700;
	line-height: 1.04em;
	color: #fff;
}

.pd-hero h1 .pd-line {
	display: block;
}

.pd-hero h1 .pd-gradient {
	color: transparent;
	background: linear-gradient(90deg, #4f9bff 0%, #8b7bff 55%, #b872ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-hero-content p {
	max-width: 520px;
	margin-bottom: 40px;
	font-size: 20px;
	line-height: 1.6em;
	color: rgba(255, 255, 255, 0.78);
}

.pd-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 20px 48px;
	font-size: 17px;
	font-weight: 700;
	color: #0a0d1f;
	background: #fff;
	border-radius: 100px;
	box-shadow: 0 14px 40px -10px rgba(255, 255, 255, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pd-hero-btn img {
	width: 16px;
}

.pd-hero-btn:hover {
	color: #0a0d1f;
	transform: translateY(-3px);
	box-shadow: 0 18px 46px -8px rgba(255, 255, 255, 0.5);
}

.pd-hero-media {
	position: relative;
	padding: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(160, 170, 255, 0.28);
	border-radius: 34px;
	box-shadow: 0 40px 90px -20px rgba(70, 60, 220, 0.65);
	transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
}

.pd-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.8;
	object-fit: contain;
	background: #fff;
	border-radius: 22px;
}

.pd-overview,
.pd-features,
.pd-tech {
	padding: 100px 0 0;
}

.pd-overview-text p {
	margin-bottom: 18px;
	font-size: 17px;
	line-height: 1.75em;
}

.pd-info {
	padding: 36px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
}

.pd-info h3 {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
}

.pd-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-info li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 0;
	font-weight: 600;
	border-bottom: 1px solid var(--divider-color);
}

.pd-info li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pd-info li span {
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.55;
}

.pd-feature {
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 36px 32px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.pd-feature:hover {
	border-color: var(--accent-color);
	transform: translateY(-4px);
}

.pd-feature-icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 22px;
	font-size: 24px;
	color: var(--dark-color);
	background: var(--accent-color);
	border-radius: 50%;
}

.pd-feature h3 {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 700;
	text-transform: capitalize;
}

.pd-feature p {
	margin: 0;
}

.pd-tech-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	padding: 50px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
}

.pd-tech-title h3 {
	margin-bottom: 8px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-color);
}

.pd-tech-title h2 {
	margin: 0;
	font-size: 34px;
	font-weight: 300;
}

.pd-tech-title h2 span {
	font-weight: 700;
	color: var(--accent-color);
}

.pd-tech-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-tech-list li {
	padding: 10px 24px;
	font-weight: 600;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
}

.pd-more {
	padding-top: 100px;
}

@media only screen and (max-width: 991px) {
	.pd-hero {
		padding: 150px 0 80px;
	}

	.pd-hero h1 {
		font-size: 48px;
	}

	.pd-hero-media {
		margin-top: 50px;
		transform: none;
	}

	.pd-overview,
	.pd-features,
	.pd-tech,
	.pd-more {
		padding-top: 70px;
	}

	.pd-info {
		margin-top: 30px;
	}
}

@media only screen and (max-width: 575px) {
	.pd-hero h1 {
		font-size: 38px;
	}

	.pd-hero-content p {
		font-size: 17px;
	}

	.pd-tech-box {
		padding: 30px 24px;
	}
}

/* ---- Project detail banner with a full-width background image (hero_bg) ---- */

.pd-hero.pd-hero-bg {
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 150px 0 100px;
	background-color: #050816;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.pd-hero.pd-hero-bg .pd-hero-glow {
	background: linear-gradient(90deg, rgba(4, 6, 20, 0.88) 0%, rgba(4, 6, 20, 0.6) 38%, rgba(4, 6, 20, 0) 65%);
}

.pd-hero.pd-hero-bg .container {
	width: 100%;
}

.pd-hero.pd-hero-bg h1 {
	max-width: 640px;
	font-size: clamp(48px, 6vw, 108px);
	line-height: 1em;
	letter-spacing: -0.02em;
}

.pd-hero.pd-hero-bg h1 .pd-line {
	display: inline;
}

.pd-hero.pd-hero-bg .pd-hero-content p {
	max-width: 560px;
	font-size: 22px;
}

@media only screen and (max-width: 991px) {
	.pd-hero.pd-hero-bg {
		min-height: 0;
		padding: 140px 0 80px;
		background-position: 70% center;
	}

	.pd-hero.pd-hero-bg .pd-hero-glow {
		background: rgba(4, 6, 20, 0.7);
	}

	.pd-hero.pd-hero-bg h1 {
		font-size: 52px;
	}
}

@media only screen and (max-width: 575px) {
	.pd-hero.pd-hero-bg h1 {
		font-size: 40px;
	}

	.pd-hero.pd-hero-bg .pd-hero-content p {
		font-size: 17px;
	}
}

/* ---- Project detail: About section (card with text left, product image right) ---- */

.pd-about {
	padding: 100px 0;
	background: #050816;
}

.pd-about-card {
	padding: 70px 80px;
	background:
		radial-gradient(600px 400px at 70% 60%, rgba(60, 70, 200, 0.14), transparent 70%),
		linear-gradient(160deg, #080b22 0%, #04050f 100%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 60px;
}

.pd-about-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4f6bff;
}

.pd-about-label::after {
	content: '';
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, #4f6bff, transparent);
}

.pd-about-title {
	margin-bottom: 26px;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.04em;
}

.pd-about-title .pd-dim {
	display: block;
	color: #0e1230;
}

.pd-about-title .pd-gradient {
	display: block;
	color: transparent;
	background: linear-gradient(90deg, #3f6bff 0%, #7b5cff 55%, #a763ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-about-text {
	max-width: 480px;
	margin: 0;
	font-size: 18px;
	line-height: 1.75em;
	color: #6c7090;
}

.pd-about-image img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 50px rgba(60, 70, 220, 0.35));
}

@media only screen and (max-width: 991px) {
	.pd-about {
		padding: 60px 0;
	}

	.pd-about-card {
		padding: 40px 30px;
		border-radius: 36px;
	}

	.pd-about-title {
		font-size: 44px;
	}

	.pd-about-image {
		margin-top: 36px;
	}
}

/* ---- Project detail: Key benefits / capabilities cards (light panel) ---- */

.pd-caps {
	padding: 90px 0 100px;
	background: #fff;
	border-radius: 50px 50px 0 0;
}

.pd-caps-head {
	margin-bottom: 60px;
}

.pd-caps-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b4dff;
}

.pd-caps-label i {
	font-size: 11px;
}

.pd-caps-title {
	margin-bottom: 10px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
	color: #0f1535;
}

.pd-caps-title span {
	display: block;
}

.pd-caps-title .pd-caps-gradient {
	color: transparent;
	background: linear-gradient(90deg, #12b5a6 0%, #34d17a 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-caps-sub {
	margin: 0;
	font-size: 17px;
	color: #5a6285;
}

.pd-caps-intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.7em;
	text-align: right;
	color: #6a7295;
}

.pd-cap-card {
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 24px 24px 28px;
	background: #fff;
	border: 1px solid #eef0f7;
	border-radius: 28px;
	box-shadow: 0 10px 40px -14px rgba(40, 50, 110, 0.14);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pd-cap-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px -14px rgba(40, 50, 110, 0.22);
}

.pd-cap-image {
	margin-bottom: 22px;
}

.pd-cap-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.pd-cap-card h3 {
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: 700;
	color: #0f1535;
}

.pd-cap-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7em;
	color: #6a7295;
}

@media only screen and (max-width: 991px) {
	.pd-caps {
		padding: 60px 0 70px;
		border-radius: 36px 36px 0 0;
	}

	.pd-caps-title {
		font-size: 42px;
	}

	.pd-caps-head {
		margin-bottom: 40px;
	}

	.pd-caps-intro {
		margin-top: 20px;
		text-align: left;
	}
}

/* ---- Project detail: AI advantage section (dark panel, glowing feature cards) ---- */

.pd-adv {
	position: relative;
	margin-top: -50px;
	padding: 80px 0 110px;
	background:
		radial-gradient(700px 420px at 15% 0%, rgba(20, 90, 190, 0.28), transparent 70%),
		radial-gradient(600px 400px at 90% 100%, rgba(70, 60, 210, 0.22), transparent 70%),
		linear-gradient(180deg, #050b22 0%, #040716 100%);
	border-radius: 50px 50px 0 0;
}

.pd-adv-head {
	margin-bottom: 60px;
}

.pd-adv-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #38c6ff;
	background: rgba(56, 198, 255, 0.08);
	border: 1px solid rgba(56, 198, 255, 0.35);
	border-radius: 100px;
}

.pd-adv-title {
	margin-bottom: 20px;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
	color: #fff;
}

.pd-adv-title span {
	display: block;
}

.pd-adv-title .pd-adv-gradient {
	color: transparent;
	background: linear-gradient(90deg, #12b5e8 0%, #2ee0a0 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-adv-text {
	max-width: 620px;
	margin: 0;
	font-size: 17px;
	line-height: 1.65em;
	color: rgba(220, 232, 255, 0.82);
}

.pd-adv-image {
	max-width: 210px;
	margin-left: auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
}

.pd-adv-image img {
	display: block;
	width: 100%;
	height: auto;
}

.pd-adv-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}

.pd-adv-card {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 1 calc((100% - 44px) / 3);
	padding: 22px 24px;
	background: linear-gradient(160deg, rgba(14, 24, 58, 0.9), rgba(8, 13, 34, 0.9));
	border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
	border-radius: 24px;
	box-shadow: 0 0 34px -10px color-mix(in srgb, var(--c) 55%, transparent);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pd-adv-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 44px -6px color-mix(in srgb, var(--c) 70%, transparent);
}

.pd-adv-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 70px;
	height: 70px;
	font-size: 26px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
	border-radius: 18px;
}

.pd-adv-body {
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-adv-body h3 {
	margin-bottom: 8px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2em;
	color: #fff;
}

.pd-adv-body p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6em;
	color: rgba(200, 214, 245, 0.72);
}

@media only screen and (max-width: 991px) {
	.pd-adv {
		margin-top: -36px;
		padding: 60px 0 80px;
		border-radius: 36px 36px 0 0;
	}

	.pd-adv-title {
		font-size: 40px;
	}

	.pd-adv-image {
		margin: 30px 0 0;
	}

	.pd-adv-card {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media only screen and (max-width: 575px) {
	.pd-adv-card {
		flex-basis: 100%;
	}
}

/* ---- Project detail: Mobile app section (copy + phone mockup with floating chips) ---- */

.pd-mob {
	padding: 70px 0 110px;
	background: linear-gradient(180deg, #040716 0%, #050816 100%);
}

.pd-mob-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4a8bff;
	background: rgba(74, 139, 255, 0.08);
	border: 1px solid rgba(74, 139, 255, 0.4);
	border-radius: 100px;
}

.pd-mob-title {
	margin-bottom: 22px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
	color: #fff;
}

.pd-mob-title span {
	display: block;
}

.pd-mob-title .pd-mob-gradient {
	color: transparent;
	background: linear-gradient(90deg, #12b5e8 0%, #2ee0a0 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-mob-text {
	margin-bottom: 34px;
	font-size: 16px;
	line-height: 1.7em;
	color: rgba(220, 232, 255, 0.85);
}

.pd-mob-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pd-mob-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
}

.pd-mob-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 17px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
	border-radius: 12px;
}

.pd-mob-item h3 {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.pd-mob-item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55em;
	color: rgba(200, 214, 245, 0.72);
}

.pd-mob-stage {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: 640px;
	padding: 20px 0;
}

.pd-phone {
	position: relative;
	z-index: 1;
	width: 250px;
	height: 520px;
	margin-top: 60px;
	padding: 9px;
	background: linear-gradient(160deg, #2a3354, #11172e);
	border-radius: 38px;
	box-shadow: 0 40px 80px -20px rgba(40, 90, 255, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pd-phone-screen {
	height: 100%;
	padding: 12px 12px 14px;
	overflow: hidden;
	color: #fff;
	background: #090d20;
	border-radius: 30px;
}

.pd-phone-screen small,
.pd-phone-screen b,
.pd-phone-screen p {
	display: block;
}

.pd-phone-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 8.5px;
	font-weight: 700;
}

.pd-phone-notch {
	width: 70px;
	height: 16px;
	background: #000;
	border-radius: 10px;
}

.pd-phone-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 10px;
}

.pd-phone-bar b {
	flex: 1;
}

.pd-phone-back {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-size: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

.pd-phone-id {
	padding: 3px 7px;
	font-size: 7.5px;
	font-weight: 700;
	color: #7aa7ff;
	background: rgba(74, 139, 255, 0.15);
	border: 1px solid rgba(74, 139, 255, 0.4);
	border-radius: 6px;
}

.pd-phone-card {
	margin-bottom: 8px;
	padding: 9px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}

.pd-phone-card b {
	font-size: 9px;
}

.pd-phone-card small {
	font-size: 7.5px;
	color: rgba(220, 230, 255, 0.6);
}

.pd-phone-card p {
	margin: 4px 0 0;
	font-size: 7.5px;
	line-height: 1.5em;
	color: rgba(220, 230, 255, 0.75);
}

.pd-phone-card p u {
	color: #5aa2ff;
}

.pd-phone-person {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-phone-person>div {
	flex: 1;
}

.pd-phone-avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 8px;
	font-weight: 700;
	background: linear-gradient(135deg, #2a9bff, #6a5cff);
	border-radius: 50%;
}

.pd-phone-tag {
	padding: 3px 6px;
	font-size: 6.5px;
	font-weight: 700;
	color: #34d399;
	background: rgba(52, 211, 153, 0.12);
	border: 1px solid rgba(52, 211, 153, 0.4);
	border-radius: 6px;
}

.pd-phone-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pd-phone-actions {
	display: flex;
	gap: 6px;
}

.pd-phone-actions i {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	font-size: 8px;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 50%;
}

.pd-phone-tabs {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	padding: 0 2px 5px;
	font-size: 7.5px;
	color: rgba(220, 230, 255, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-phone-tabs .is-active {
	color: #5aa2ff;
	border-bottom: 1px solid #5aa2ff;
}

.pd-phone-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.pd-phone-paid {
	color: #2ee0a0;
}

.pd-phone-ok {
	color: #2ee0a0 !important;
}

.pd-phone-progress {
	height: 4px;
	margin: 6px 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

.pd-phone-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #12c9b0, #2ee0a0);
	border-radius: 4px;
}

.pd-phone-btn {
	margin-top: 10px;
	padding: 10px;
	font-size: 9px;
	font-weight: 700;
	text-align: center;
	background: linear-gradient(90deg, #2f6bff, #8b3dff);
	border-radius: 10px;
	box-shadow: 0 10px 22px -8px rgba(110, 70, 255, 0.7);
}

.pd-chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	background: rgba(12, 18, 42, 0.92);
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
	border-radius: 14px;
	box-shadow: 0 0 26px -8px color-mix(in srgb, var(--c) 55%, transparent);
}

.pd-chip b,
.pd-chip small {
	display: block;
	line-height: 1.3em;
}

.pd-chip b {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

.pd-chip small {
	font-size: 9px;
	color: color-mix(in srgb, var(--c) 80%, #fff);
}

.pd-chip-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	font-size: 13px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 18%, transparent);
	border-radius: 10px;
}

.pd-chip-icon-solid {
	color: #fff;
	background: var(--c);
	width: 38px;
	height: 38px;
	font-size: 15px;
}

.pd-chip em {
	margin-left: 4px;
	padding: 1px 6px;
	font-size: 9px;
	font-style: normal;
	color: #2ee0a0;
	background: rgba(46, 224, 160, 0.14);
	border-radius: 6px;
}

.pd-chip-leads small {
	color: rgba(200, 214, 245, 0.7);
	font-size: 8.5px;
	letter-spacing: 0.04em;
}

.pd-chip-leads b {
	font-size: 17px;
}

.pd-chip-analysis {
	top: 4%;
	left: 4%;
}

.pd-chip-profile {
	top: 8%;
	right: 0;
}

.pd-chip-payment {
	top: 50%;
	left: 0;
}

.pd-chip-call {
	bottom: 7%;
	left: 6%;
}

.pd-chip-leads {
	bottom: 4%;
	right: 0;
}

/* ---- Project detail: "The bigger picture" closing section ---- */

.pd-big {
	padding: 90px 0 110px;
	background: #050816;
}

.pd-big-label {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a6bff;
}

.pd-big-title {
	margin-bottom: 24px;
	font-size: 58px;
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
	color: #fff;
}

.pd-big-text {
	max-width: 440px;
	margin-bottom: 34px;
	font-size: 16px;
	line-height: 1.7em;
	color: rgba(200, 210, 240, 0.7);
}

.pd-big-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #8b3dff, #2f6bff);
	border-radius: 100px;
	box-shadow: 0 16px 36px -12px rgba(110, 70, 255, 0.7);
	transition: transform 0.25s ease;
}

.pd-big-btn img {
	width: 13px;
	filter: invert(1);
}

.pd-big-btn:hover {
	color: #fff;
	transform: translateY(-3px);
}

.pd-big-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 340px;
	padding: 34px 30px 30px;
	overflow: hidden;
	background:
		radial-gradient(circle at 62% 56%, rgba(255, 196, 94, 0.95) 0 22px, rgba(255, 170, 70, 0.45) 60px, transparent 150px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%230a1226' d='M0 120V78l18-4v-14h14v14l12 2V50h18v30l16-6V62h16v-22h12v22l14 4v12l20-6V48h20v32l14-4V64h18v14l16-2V30l8-12 8 12v48l14-2V58h16v22l18-4V66h14v10l18 4V44h14v34l12-2V60h20v60z'/%3E%3C/svg%3E") center bottom / 100% 42% no-repeat,
		linear-gradient(180deg, #2f5f9e 0%, #6d8fb8 38%, #d9a56a 62%, #3a4660 78%, #0c1428 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
}

.pd-big-card h3 {
	position: relative;
	max-width: 280px;
	padding-bottom: 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.pd-big-card h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: #ffb400;
}

.pd-big-card-foot {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-top: 120px;
}

.pd-big-card-foot p {
	max-width: 260px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55em;
	color: #fff;
}

.pd-big-card-arrow {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 46px;
	height: 46px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.25s ease;
}

.pd-big-card-arrow img {
	width: 14px;
}

.pd-big-card-arrow:hover {
	transform: scale(1.1);
}

@media only screen and (max-width: 991px) {
	.pd-mob {
		padding: 40px 0 70px;
	}

	.pd-mob-title,
	.pd-big-title {
		font-size: 42px;
	}

	.pd-mob-stage {
		min-height: 0;
		margin-top: 50px;
	}

	.pd-phone {
		margin-top: 0;
	}

	.pd-chip {
		display: none;
	}

	.pd-big {
		padding: 60px 0 80px;
	}

	.pd-big-card {
		margin-top: 44px;
	}
}

/* ---- Fine-tuning to match the design references ---- */

.pd-mob-title {
	max-width: 400px;
}

.pd-big-title {
	max-width: 520px;
}

.pd-big-card h3 {
	max-width: 230px;
}

.pd-phone {
	height: 480px;
}

.pd-phone-screen {
	position: relative;
}

.pd-phone-screen::after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 90px;
	height: 3px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.35);
	border-radius: 3px;
}

/* ---- Request a demo modal ---- */

button.pd-hero-btn {
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

.dm-modal .modal-dialog {
	max-width: 640px;
}

.dm-modal .modal-backdrop,
.modal-backdrop.show {
	--bs-backdrop-opacity: 0.7;
}

.dm-content {
	position: relative;
	padding: 40px 44px 34px;
	color: #fff;
	background:
		radial-gradient(500px 300px at 85% 0%, rgba(80, 90, 255, 0.28), transparent 70%),
		linear-gradient(160deg, #0d1330 0%, #080c22 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 30px;
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9);
}

.dm-close {
	position: absolute;
	top: 22px;
	right: 22px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	font-size: 15px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease;
}

.dm-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.dm-eyebrow {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a7bff;
}

.dm-title {
	margin-bottom: 8px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15em;
	color: #fff;
}

.dm-title span {
	color: transparent;
	background: linear-gradient(90deg, #4f8bff 0%, #22c8ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.dm-sub {
	max-width: 440px;
	margin-bottom: 26px;
	font-size: 14px;
	line-height: 1.55em;
	color: rgba(220, 230, 255, 0.78);
}

.dm-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(235, 240, 255, 0.92);
}

.dm-field {
	position: relative;
}

.dm-field>i {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 13px;
	color: rgba(200, 212, 245, 0.6);
	pointer-events: none;
}

.dm-field input,
.dm-field textarea {
	display: block;
	width: 100%;
	padding: 12px 14px 12px 40px;
	font-family: inherit;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-field input::placeholder,
.dm-field textarea::placeholder {
	color: rgba(200, 212, 245, 0.42);
}

.dm-field input:focus,
.dm-field textarea:focus {
	border-color: #4f8bff;
	box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.2);
}

.dm-field-area>i {
	top: 18px;
	transform: none;
}

.dm-field textarea {
	min-height: 96px;
	padding-bottom: 28px;
	resize: none;
}

.dm-count {
	position: absolute;
	right: 14px;
	bottom: 9px;
	font-size: 11px;
	color: rgba(200, 212, 245, 0.55);
}

.dm-actions {
	margin-top: 24px;
	text-align: center;
}

.dm-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 40px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #8b3dff 0%, #2290ff 100%);
	border: 0;
	border-radius: 100px;
	box-shadow: 0 14px 34px -10px rgba(90, 100, 255, 0.8);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.dm-submit:hover {
	transform: translateY(-2px);
}

.dm-actions small {
	display: block;
	margin-top: 12px;
	font-size: 11.5px;
	color: rgba(200, 212, 245, 0.6);
}

@media only screen and (max-width: 575px) {
	.dm-content {
		padding: 30px 22px 26px;
		border-radius: 24px;
	}

	.dm-title {
		padding-right: 36px;
		font-size: 26px;
	}
}

/* ---- Key benefits: HTML/CSS mini mockups used as card images ---- */

.pd-mock {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1600 / 728;
	padding: 14px 14px 12px;
	overflow: hidden;
	font-size: 9px;
	color: #1c2340;
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 18px;
}

.pd-mock i {
	font-style: normal;
}

.pd-mock-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pd-mock-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-size: 8.5px;
	font-weight: 600;
	white-space: nowrap;
	background: #fff;
	border-radius: 100px;
	box-shadow: 0 3px 10px -4px rgba(40, 50, 110, 0.18);
}

.pd-mock-box {
	padding: 10px 11px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 14px -6px rgba(40, 50, 110, 0.18);
}

.pd-mock-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 8.5px;
	font-weight: 500;
}

/* Bulk lead import */
.pd-mock-import {
	background: linear-gradient(135deg, #fff1de 0%, #ffe7c8 100%);
}

.pd-mock-file em {
	padding: 2px 5px;
	font-size: 7.5px;
	font-style: normal;
	font-weight: 700;
	color: #b86a00;
	background: #fde6bf;
	border-radius: 5px;
}

.pd-mock-file {
	color: #b86a00;
}

.pd-mock-amber {
	color: #b86a00;
	background: #ffe3b4;
	box-shadow: none;
}

.pd-mock-import .pd-mock-label i {
	color: #e8920c;
}

.pd-mock-percent {
	font-size: 8px;
	font-weight: 700;
	color: #c27300;
}

.pd-mock-bar {
	height: 5px;
	margin-top: 7px;
	background: #ffe2b0;
	border-radius: 5px;
}

.pd-mock-bar span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #f5a623, #e8870c);
	border-radius: 5px;
}

/* Meta integrations */
.pd-mock-meta {
	background: linear-gradient(135deg, #f6eeff 0%, #efe6ff 100%);
}

.pd-mock-source {
	padding-left: 5px;
}

.pd-mock-dot {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	font-size: 7px;
	color: #fff;
	background: #4a3fd6;
	border-radius: 50%;
}

.pd-mock-connected {
	color: #7a3fd6;
}

.pd-mock-brand {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	font-size: 9px;
	color: #fff;
	border-radius: 5px;
}

.pd-mock-fb {
	background: #1877f2;
}

.pd-mock-ig {
	background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #7b3fe4);
}

.pd-mock-today {
	font-size: 8.5px;
	font-weight: 700;
	color: #8a3fd6;
}

/* Real-time analytics */
.pd-mock-analytics {
	background: linear-gradient(135deg, #f1efff 0%, #e8e6ff 100%);
}

.pd-mock-metric small {
	display: block;
	font-size: 7.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #6b7092;
}

.pd-mock-metric b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1c2340;
}

.pd-mock-growth {
	color: #0e8f5a;
	background: #d6f6e5;
	box-shadow: none;
}

.pd-mock-chart {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 56%;
	padding: 8px 10px 0;
	background: #fff;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 4px 14px -6px rgba(40, 50, 110, 0.15);
}

.pd-mock-chart span {
	flex: 1;
	background: linear-gradient(180deg, #8f8bff, #6b66f2);
	border-radius: 3px 3px 0 0;
}

.pd-mock-chart span:nth-child(1),
.pd-mock-chart span:nth-child(2),
.pd-mock-chart span:nth-child(3) {
	background: linear-gradient(180deg, #cfd2ff, #bcc0ff);
}

.pd-mock-chart span:nth-child(6) {
	background: linear-gradient(180deg, #5b52e8, #4338d4);
}

/* mockup text sized closer to the design reference */
.pd-mock-pill,
.pd-mock-label,
.pd-mock-today {
	font-size: 10px;
}

.pd-mock-file em,
.pd-mock-percent {
	font-size: 9px;
}

.pd-mock-metric small {
	font-size: 8.5px;
}

.pd-mock-metric b {
	font-size: 16px;
}

.pd-mock-box {
	padding: 12px 13px;
}

/* ---- Mobile polish ---- */

/* Footer contact details: keep emails and addresses exactly as typed (the theme capitalises list items). */
.footer-links.footer-contact-details ul li,
.footer-links.footer-contact-details ul li a {
	text-transform: none;
}

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

	/* The round "Get in touch" button floats over the big heading on desktop; on phones it hid part of the text,
	   so it drops below the heading instead. */
	.work-together-box .work-together-btn {
		position: static;
		transform: none;
		margin-top: 28px;
		display: flex;
		justify-content: center;
	}
}

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

	/* Project banner: darker overlay so the text stays readable over the bright laptop photo. */
	.pd-hero.pd-hero-bg {
		min-height: 560px;
		padding: 130px 0 70px;
		background-position: 68% center;
	}

	.pd-hero.pd-hero-bg .pd-hero-glow {
		background: linear-gradient(180deg, rgba(4, 6, 20, 0.55) 0%, rgba(4, 6, 20, 0.85) 55%, rgba(4, 6, 20, 0.92) 100%);
	}

	.pd-hero.pd-hero-bg .pd-hero-content p {
		color: rgba(255, 255, 255, 0.9);
	}
}

/* Demo modal on small screens: fit the viewport and scroll inside instead of overflowing. */
@media only screen and (max-width: 575px) {
	.dm-modal .modal-dialog {
		margin: 12px;
	}

	.dm-content {
		max-height: calc(100vh - 24px);
		overflow-y: auto;
	}

	.dm-submit {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Project detail: About section, light version (white card, features, product image) ---- */

.pd-about {
	padding: 90px 0 110px;
	background: #f1f3f9;
}

.pd-about-card {
	padding: 70px 60px;
	background: #fff;
	border: 1px solid #e8ebf5;
	border-radius: 44px;
	box-shadow: 0 30px 70px -40px rgba(40, 50, 110, 0.25);
}

.pd-about-label {
	color: #4a5af7;
}

.pd-about-label::after {
	background: linear-gradient(90deg, #4a5af7, transparent);
}

.pd-about-title {
	margin-bottom: 22px;
	font-size: 54px;
	line-height: 1.1em;
	letter-spacing: -0.02em;
	color: #12172f;
}

.pd-about-title .pd-gradient {
	display: inline;
	background: linear-gradient(90deg, #3f5bff 0%, #7b4dff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-about-text {
	max-width: 560px;
	margin-bottom: 36px;
	font-size: 17px;
	line-height: 1.7em;
	color: #555d7a;
}

.pd-about-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 28px;
}

.pd-about-point {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pd-about-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 56px;
	height: 56px;
	font-size: 22px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 11%, #fff);
	border-radius: 14px;
}

.pd-about-point h3 {
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25em;
	color: #12172f;
}

.pd-about-point p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5em;
	color: #6a7290;
}

.pd-about-image img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
	filter: none;
}

@media only screen and (max-width: 991px) {
	.pd-about {
		padding: 50px 0 70px;
	}

	.pd-about-card {
		padding: 36px 22px;
		border-radius: 30px;
	}

	.pd-about-title {
		font-size: 38px;
	}

	.pd-about-image {
		margin-top: 30px;
	}
}

@media only screen and (max-width: 575px) {
	.pd-about-points {
		grid-template-columns: 1fr;
	}
}

/* Fade the product photo's edges so no box shows against the white card. */
.pd-about-image img {
	-webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 70%, transparent 100%);
}

/* ---- Project detail: Powerful integrations (light card on dark page) ---- */

.pd-integ {
	padding: 40px 0 70px;
	background: #040716;
}

.pd-integ-card {
	padding: 60px 64px;
	background:
		radial-gradient(520px 320px at 100% 0%, rgba(120, 140, 255, 0.18), transparent 70%),
		radial-gradient(420px 300px at 0% 100%, rgba(170, 120, 255, 0.12), transparent 70%),
		#fff;
	border-radius: 56px;
}

.pd-integ-label {
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #4a47e0;
}

.pd-integ-title {
	margin-bottom: 20px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.02em;
	color: #0b0f24;
}

.pd-integ-gradient {
	color: transparent;
	background: linear-gradient(90deg, #2f6bff 0%, #8b3dff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.pd-integ-text {
	max-width: 560px;
	margin: 0;
	font-size: 20px;
	line-height: 1.55em;
	color: #565e7a;
}

.pd-integ-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.pd-integ-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	aspect-ratio: 1 / 1.1;
	background: #fff;
	border: 1px solid #eef0f8;
	border-radius: 24px;
	box-shadow: 0 14px 34px -16px rgba(40, 50, 110, 0.22);
	transition: transform 0.25s ease;
}

.pd-integ-tile:hover {
	transform: translateY(-4px);
}

.pd-integ-tile i {
	font-size: 38px;
}

.pd-integ-tile .pd-integ-solid {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 24px;
	color: #fff;
	border-radius: 14px;
}

.pd-integ-tile span {
	font-size: 16px;
	font-weight: 500;
	color: #0b0f24;
}

.pd-integ-more {
	background: transparent;
	box-shadow: none;
	border-color: #e8ecf8;
}

.pd-integ-more b {
	font-size: 34px;
	font-weight: 700;
	color: #2f5bff;
}

.pd-integ-more span {
	text-align: center;
	line-height: 1.4em;
	color: #4a5370;
}

@media only screen and (max-width: 991px) {
	.pd-integ-card {
		padding: 40px 28px;
		border-radius: 34px;
	}

	.pd-integ-title {
		font-size: 40px;
	}

	.pd-integ-text {
		font-size: 17px;
	}

	.pd-integ-grid {
		margin-top: 34px;
	}
}

@media only screen and (max-width: 575px) {
	.pd-integ-grid {
		gap: 12px;
	}

	.pd-integ-tile {
		gap: 10px;
		border-radius: 18px;
	}

	.pd-integ-tile i {
		font-size: 28px;
	}

	.pd-integ-tile span {
		font-size: 13px;
	}
}

/* ---- Trackit project page banner ---- */

.tk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 140px 0 90px;
	overflow: hidden;
	background-color: #050816;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.tk-hero-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 8, 22, 0.97) 0%, rgba(5, 8, 22, 0.86) 36%, rgba(5, 8, 22, 0.35) 70%, rgba(5, 8, 22, 0.55) 100%),
		linear-gradient(180deg, rgba(8, 14, 50, 0.55), rgba(5, 8, 22, 0.75));
}

.tk-hero .container {
	position: relative;
	z-index: 1;
}

.tk-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}

.tk-brand-icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	font-size: 22px;
	color: #fff;
	background: linear-gradient(135deg, #3f6bff, #8b3dff);
	border-radius: 14px;
	box-shadow: 0 10px 26px -8px rgba(100, 80, 255, 0.7);
}

.tk-brand-name {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}

.tk-hero h1 {
	margin-bottom: 26px;
	font-size: clamp(46px, 5.6vw, 92px);
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.02em;
	color: #fff;
}

.tk-hero h1 .tk-line {
	display: block;
}

.tk-hero h1 .tk-gradient {
	color: transparent;
	background: linear-gradient(90deg, #5aa2ff 0%, #8b7bff 60%, #b585ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.tk-hero-content p {
	max-width: 540px;
	margin-bottom: 38px;
	font-size: 19px;
	line-height: 1.6em;
	color: rgba(255, 255, 255, 0.82);
}

.tk-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 46px 0 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tk-tags li {
	padding: 0 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.tk-tags li:first-child {
	padding-left: 0;
	border-left: 0;
}

@media only screen and (max-width: 991px) {
	.tk-hero {
		min-height: 0;
		padding: 130px 0 70px;
		background-position: 72% center;
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.8);
	}

	.tk-hero h1 {
		font-size: 50px;
	}
}

@media only screen and (max-width: 575px) {
	.tk-hero h1 {
		font-size: 40px;
	}

	.tk-hero-content p {
		font-size: 17px;
	}

	.tk-tags li {
		padding: 4px 14px;
		font-size: 13px;
	}
}

/* Keep the product shot on the right half like the design reference, text on solid navy. */
.tk-hero {
	background-size: 74% auto;
	background-position: right 40%;
}

.tk-hero-shade {
	background:
		linear-gradient(90deg, #050816 0%, #050816 30%, rgba(5, 8, 22, 0.55) 52%, rgba(5, 8, 22, 0.28) 78%, rgba(5, 8, 22, 0.5) 100%),
		linear-gradient(180deg, rgba(5, 8, 22, 0.6) 0%, rgba(8, 14, 50, 0.25) 45%, #050816 100%);
}

@media only screen and (max-width: 991px) {
	.tk-hero {
		background-size: cover;
		background-position: 72% center;
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.8);
	}
}

/* Product shot as a faded layer so its edges melt into the navy page. */
.tk-hero {
	background-image: none;
}

.tk-hero::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 78%;
	background: var(--tk-bg) center right / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, transparent 6%, #000 30%, #000 72%, transparent 96%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, transparent 6%, #000 30%, #000 72%, transparent 96%);
	mask-composite: intersect;
}

.tk-hero-shade {
	background: linear-gradient(90deg, rgba(5, 8, 22, 0.55) 0%, rgba(5, 8, 22, 0) 55%), rgba(5, 8, 22, 0.28);
}

@media only screen and (max-width: 991px) {
	.tk-hero::before {
		width: 100%;
		background-position: 72% center;
		opacity: 0.45;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.55);
	}
}

@media only screen and (min-width: 992px) {
	.tk-hero::before {
		width: 64%;
		background-position: 65% center;
		-webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%), linear-gradient(180deg, transparent 6%, #000 30%, #000 72%, transparent 96%);
		mask-image: linear-gradient(90deg, transparent 8%, #000 55%), linear-gradient(180deg, transparent 6%, #000 30%, #000 72%, transparent 96%);
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.42);
	}
}

@media only screen and (min-width: 992px) {
	.tk-hero::before {
		top: 50%;
		bottom: auto;
		width: 68%;
		aspect-ratio: 2 / 1;
		transform: translateY(-50%);
		background-size: 100% 100%;
		background-position: center;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.25);
	}
}

@media only screen and (max-width: 991px) {
	.tk-hero::before {
		opacity: 0.3;
	}

	.tk-hero-shade {
		background: rgba(5, 8, 22, 0.62);
	}

	.tk-tags li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
}

/* ---- Trackit: Product preview carousel (centre slide + dimmed neighbours) ---- */

.tk-prev {
	padding: 80px 0 100px;
	overflow: hidden;
	background: #f8f9ff;
}

.tk-prev-head {
	margin-bottom: 36px;
}

.tk-prev-label {
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #4a47e0;
}

.tk-prev-title {
	margin: 0;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.04em;
	letter-spacing: -0.02em;
	color: #0b1230;
}

.tk-prev-text {
	margin: 0;
	font-size: 19px;
	line-height: 1.6em;
	color: #5a617d;
}

.tk-prev-nav {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
}

.tk-prev-btn {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	font-size: 18px;
	color: #0b1230;
	background: #fff;
	border: 1px solid #dfe3f1;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tk-prev-btn-next {
	color: #fff;
	background: #4a47e0;
	border-color: #4a47e0;
	box-shadow: 0 12px 26px -10px rgba(74, 71, 224, 0.7);
}

.tk-prev-btn:hover {
	transform: translateY(-2px);
}

.tk-prev-line {
	height: 1px;
	background: #e6e9f4;
}

.tk-stage {
	position: relative;
	width: 100%;
	height: 560px;
	margin-top: 50px;
}

.tk-slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(780px, 60vw);
	overflow: hidden;
	background: #0f1630;
	border: 6px solid #fff;
	border-radius: 34px;
	box-shadow: 0 30px 70px -30px rgba(30, 40, 110, 0.45);
	cursor: pointer;
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.25, 1), opacity 0.7s ease;
}

.tk-slide.is-active {
	cursor: default;
}

.tk-slide-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	color: #fff;
	background: #101934;
}

.tk-slide-bar b {
	flex: 1;
	font-size: 17px;
	font-weight: 600;
}

.tk-slide-bar em {
	padding: 5px 14px;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	color: #8f8cff;
	background: rgba(120, 110, 255, 0.14);
	border: 1px solid rgba(143, 140, 255, 0.4);
	border-radius: 8px;
}

.tk-slide-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background: #6a63ff;
	border-radius: 50%;
}

.tk-slide img {
	display: block;
	width: 100%;
	height: 440px;
	object-fit: cover;
	object-position: center;
	background: #fff;
}

@media only screen and (max-width: 991px) {
	.tk-prev {
		padding: 56px 0 70px;
	}

	.tk-prev-title {
		font-size: 40px;
	}

	.tk-prev-text {
		margin: 18px 0 22px;
		font-size: 17px;
	}

	.tk-prev-nav {
		justify-content: flex-start;
	}

	.tk-prev-btn {
		width: 54px;
		height: 54px;
	}

	.tk-stage {
		height: 360px;
		margin-top: 36px;
	}

	.tk-slide {
		width: 74vw;
		border-width: 4px;
		border-radius: 24px;
	}

	.tk-slide-bar {
		padding: 11px 14px;
	}

	.tk-slide-bar b {
		font-size: 13px;
	}

	.tk-slide-bar em {
		padding: 3px 9px;
		font-size: 11px;
	}

	.tk-slide img {
		height: 250px;
	}
}

/* ---- Trackit: Key benefits (dark section, three centred cards) ---- */

.tk-ben {
	padding: 90px 0 100px;
	background: #050b1c;
}

.tk-ben-head {
	margin-bottom: 60px;
}

.tk-ben-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7b7bff;
}

.tk-ben-dot {
	width: 8px;
	height: 8px;
	background: #6a63ff;
	border-radius: 50%;
}

.tk-ben-title {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.04em;
	letter-spacing: -0.02em;
	color: #fff;
}

.tk-ben-title span {
	color: var(--accent-color);
}

.tk-ben-text {
	max-width: 520px;
	margin: 0 0 6px auto;
	font-size: 19px;
	line-height: 1.6em;
	text-align: right;
	color: #8b93b8;
}

.tk-ben-card {
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 48px 34px 44px;
	text-align: center;
	background: linear-gradient(180deg, #0b1530 0%, #080f24 100%);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 40px;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tk-ben-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--c) 45%, transparent);
	box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--c) 60%, transparent);
}

.tk-ben-icon {
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	margin: 0 auto 38px;
	font-size: 44px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 14%, #0a1228);
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
	border-radius: 50%;
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--c) 55%, transparent);
}

.tk-ben-card h3 {
	margin-bottom: 16px;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
}

.tk-ben-card p {
	margin: 0;
	font-size: 19px;
	line-height: 1.65em;
	color: #8b93b8;
}

@media only screen and (max-width: 991px) {
	.tk-ben {
		padding: 60px 0 70px;
	}

	.tk-ben-head {
		margin-bottom: 36px;
	}

	.tk-ben-title {
		font-size: 42px;
	}

	.tk-ben-text {
		margin: 18px 0 0;
		font-size: 17px;
		text-align: left;
	}

	.tk-ben-card {
		padding: 36px 24px 34px;
		border-radius: 30px;
	}

	.tk-ben-icon {
		width: 96px;
		height: 96px;
		margin-bottom: 26px;
		font-size: 36px;
	}

	.tk-ben-card h3 {
		font-size: 26px;
	}

	.tk-ben-card p {
		font-size: 17px;
	}
}

.tk-ben-title {
	max-width: 560px;
}

.tk-ben-icon {
	position: relative;
}

.tk-ben-badge {
	position: absolute;
	top: 2px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: #ef4444;
	border-radius: 50%;
}

/* ---- Trackit: Technologies card (light card on dark page) ---- */

.tk-tech {
	padding: 10px 0 100px;
	background: #050b1c;
}

.tk-tech-card {
	padding: 80px 90px;
	background:
		radial-gradient(520px 320px at 100% 0%, rgba(120, 160, 255, 0.2), transparent 70%),
		radial-gradient(520px 340px at 0% 100%, rgba(150, 140, 255, 0.14), transparent 70%),
		#fff;
	border-radius: 80px;
}

.tk-tech-label {
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a47e0;
}

.tk-tech-title {
	margin-bottom: 28px;
	font-size: 68px;
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.02em;
	color: #0b1230;
}

.tk-tech-text {
	max-width: 560px;
	margin: 0;
	font-size: 21px;
	line-height: 1.6em;
	color: #4f5873;
}

.tk-tech-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 38px;
}

.tk-tech-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	aspect-ratio: 1 / 1.3;
	background: #fff;
	border-radius: 34px;
	box-shadow: 0 20px 44px -22px rgba(40, 60, 130, 0.3);
	transition: transform 0.25s ease;
}

.tk-tech-tile:hover {
	transform: translateY(-5px);
}

.tk-tech-logo {
	display: block;
	height: 76px;
	width: auto;
}

.tk-tech-icon {
	font-size: 80px;
	line-height: 76px;
}

.tk-tech-tile span {
	font-size: 22px;
	font-weight: 600;
	color: #0b1230;
}

@media only screen and (max-width: 1199px) {
	.tk-tech-card {
		padding: 60px 50px;
	}

	.tk-tech-title {
		font-size: 52px;
	}

	.tk-tech-grid {
		gap: 20px;
	}
}

@media only screen and (max-width: 991px) {
	.tk-tech {
		padding-bottom: 70px;
	}

	.tk-tech-card {
		padding: 44px 26px;
		border-radius: 40px;
	}

	.tk-tech-title {
		font-size: 40px;
	}

	.tk-tech-text {
		font-size: 17px;
	}

	.tk-tech-grid {
		margin-top: 34px;
	}
}

@media only screen and (max-width: 575px) {
	.tk-tech-grid {
		gap: 12px;
	}

	.tk-tech-tile {
		gap: 14px;
		border-radius: 20px;
	}

	.tk-tech-logo {
		height: 46px;
	}

	.tk-tech-icon {
		font-size: 48px;
		line-height: 46px;
	}

	.tk-tech-tile span {
		font-size: 14px;
	}
}

.tk-ben-title {
	max-width: 480px;
}

/* ---- Trackit: "How Trackit solves problems" (rotating card stack) ---- */

.tk-solve {
	padding: 90px 0;
	background:
		radial-gradient(700px 420px at 10% 20%, rgba(40, 80, 200, 0.16), transparent 70%),
		linear-gradient(180deg, #050b1c 0%, #060c22 100%);
}

.tk-solve-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #b4bfdc;
}

.tk-solve-label i {
	width: 6px;
	height: 6px;
	background: #b4bfdc;
	border-radius: 50%;
}

.tk-solve-title {
	margin-bottom: 30px;
	font-size: 80px;
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.02em;
	color: #fff;
}

.tk-solve-title span {
	color: transparent;
	background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 55%, #14b8d4 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.tk-solve-text {
	max-width: 620px;
	margin: 0;
	font-size: 23px;
	line-height: 1.6em;
	color: #c8d1ea;
}

.tk-solve-stack {
	position: relative;
	height: 600px;
}

.tk-solve-card {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 34px;
	height: 190px;
	padding: 0 38px;
	background: linear-gradient(160deg, rgba(14, 24, 56, 0.85), rgba(7, 12, 30, 0.85));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 40px;
	cursor: pointer;
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.9s ease, border-color 0.9s ease, box-shadow 0.9s ease, filter 0.9s ease;
}

.tk-solve-card img {
	flex: 0 0 auto;
	width: 170px;
	height: 128px;
	object-fit: cover;
	border-radius: 20px;
}

.tk-solve-card h3 {
	margin-bottom: 8px;
	font-size: 27px;
	font-weight: 700;
	color: #fff;
}

.tk-solve-card p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5em;
	color: #bcc7e6;
}

/* active card sits in the middle, glowing; the others wait above and below */
.tk-solve-card[data-pos="0"] {
	z-index: 3;
	transform: translateY(200px) scale(1.04);
	border-color: #3b82f6;
	box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 0 46px -4px rgba(59, 130, 246, 0.55);
}

.tk-solve-card[data-pos="1"] {
	z-index: 2;
	transform: translateY(410px) scale(0.97);
	opacity: 0.55;
	filter: saturate(0.7);
}

.tk-solve-card[data-pos="2"] {
	z-index: 1;
	transform: translateY(0) scale(0.97);
	opacity: 0.55;
	filter: saturate(0.7);
}

@media only screen and (max-width: 1199px) {
	.tk-solve-title {
		font-size: 62px;
	}

	.tk-solve-card {
		gap: 22px;
		padding: 0 26px;
	}

	.tk-solve-card img {
		width: 130px;
		height: 100px;
	}

	.tk-solve-card h3 {
		font-size: 22px;
	}
}

@media only screen and (max-width: 991px) {
	.tk-solve {
		padding: 60px 0 70px;
	}

	.tk-solve-title {
		font-size: 44px;
	}

	.tk-solve-text {
		font-size: 18px;
	}

	.tk-solve-stack {
		height: 540px;
		margin-top: 40px;
	}
}

@media only screen and (max-width: 575px) {
	.tk-solve-label {
		font-size: 12px;
		letter-spacing: 0.18em;
	}

	.tk-solve-stack {
		height: 560px;
	}

	.tk-solve-card {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 12px;
		height: 170px;
		padding: 18px 20px;
		border-radius: 26px;
	}

	.tk-solve-card img {
		display: none;
	}

	.tk-solve-card h3 {
		font-size: 20px;
	}

	.tk-solve-card p {
		font-size: 15px;
	}

	.tk-solve-card[data-pos="0"] {
		transform: translateY(185px) scale(1.02);
	}

	.tk-solve-card[data-pos="1"] {
		transform: translateY(370px) scale(0.97);
	}
}

/* ---- Trackit: "The bigger picture" with an image carousel card ---- */

.tk-big {
	padding: 80px 0 100px;
	background: #050816;
}

.tk-big-label {
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a6bff;
}

.tk-big-title {
	margin-bottom: 28px;
	font-size: 76px;
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.03em;
	color: #fff;
}

.tk-big-text {
	max-width: 620px;
	margin-bottom: 44px;
	font-size: 22px;
	line-height: 1.6em;
	color: #a7b0cc;
}

.tk-big-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 22px 48px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, #8b3dff, #2f6bff);
	border-radius: 100px;
	box-shadow: 0 18px 40px -14px rgba(110, 70, 255, 0.75);
	transition: transform 0.25s ease;
}

.tk-big-btn img {
	width: 16px;
	filter: invert(1);
}

.tk-big-btn:hover {
	color: #fff;
	transform: translateY(-3px);
}

.tk-big-card {
	position: relative;
	height: 520px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 44px;
	box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.85);
}

.tk-big-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 56px 56px 60px;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.tk-big-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 8, 22, 0.55) 0%, rgba(5, 8, 22, 0.35) 40%, rgba(5, 8, 22, 0.9) 100%);
}

.tk-big-slide.is-active {
	opacity: 1;
}

.tk-big-slide h3 {
	position: relative;
	max-width: 330px;
	padding-bottom: 22px;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.12em;
	color: #fff;
}

.tk-big-slide h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 5px;
	background: #6a63ff;
	border-radius: 5px;
}

.tk-big-slide p {
	position: relative;
	max-width: 330px;
	margin: 0;
	font-size: 20px;
	line-height: 1.5em;
	color: #fff;
}

.tk-big-arrow {
	position: absolute;
	right: 56px;
	bottom: 56px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.25s ease;
}

.tk-big-arrow img {
	width: 22px;
}

.tk-big-arrow:hover {
	transform: scale(1.08);
}

.tk-big-dots {
	position: absolute;
	top: 26px;
	right: 30px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.tk-big-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	background: rgba(255, 255, 255, 0.4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.tk-big-dots button.is-active {
	width: 28px;
	background: #fff;
	border-radius: 10px;
}

@media only screen and (max-width: 1199px) {
	.tk-big-title {
		font-size: 56px;
	}
}

@media only screen and (max-width: 991px) {
	.tk-big {
		padding: 50px 0 70px;
	}

	.tk-big-title {
		font-size: 42px;
	}

	.tk-big-text {
		font-size: 18px;
	}

	.tk-big-btn {
		padding: 16px 34px;
		font-size: 17px;
	}

	.tk-big-card {
		height: 420px;
		margin-top: 44px;
		border-radius: 30px;
	}

	.tk-big-slide {
		padding: 34px 28px 36px;
	}

	.tk-big-slide h3 {
		font-size: 30px;
	}

	.tk-big-slide p {
		font-size: 16px;
	}

	.tk-big-arrow {
		right: 28px;
		bottom: 30px;
		width: 56px;
		height: 56px;
	}
}

/* ---- MyFin project page banner ---- */

.mf-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 140px 0 90px;
	overflow: hidden;
	background-color: #03061c;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.mf-hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(3, 6, 28, 0.85) 0%, rgba(3, 6, 28, 0.45) 42%, rgba(3, 6, 28, 0) 70%);
}

.mf-hero .container {
	position: relative;
	z-index: 1;
}

.mf-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 30px;
}

.mf-brand-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, #2f80ff, #2a4fd8);
	border-radius: 15px;
	box-shadow: 0 10px 28px -8px rgba(47, 128, 255, 0.8);
}

.mf-brand-name {
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}

.mf-hero h1 {
	margin-bottom: 26px;
	font-size: clamp(46px, 5.4vw, 88px);
	font-weight: 700;
	line-height: 1.04em;
	letter-spacing: -0.02em;
	color: #fff;
}

.mf-hero h1 .mf-line {
	display: block;
}

.mf-hero h1 .mf-gradient {
	color: transparent;
	background: linear-gradient(90deg, #4f9bff 0%, #8fb4ff 50%, #b9a6ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.mf-hero h1 b {
	color: #2f80ff;
}

.mf-hero-content>p {
	max-width: 500px;
	margin-bottom: 36px;
	font-size: 18px;
	line-height: 1.65em;
	color: rgba(255, 255, 255, 0.86);
}

.mf-points {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0 0 38px;
	padding: 0;
	list-style: none;
}

.mf-points li {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mf-point-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 20px;
	color: #5aa2ff;
	background: rgba(40, 80, 200, 0.2);
	border: 1px solid rgba(90, 150, 255, 0.35);
	border-radius: 14px;
}

.mf-points li>span:last-child {
	font-size: 13px;
	line-height: 1.35em;
	color: rgba(255, 255, 255, 0.75);
}

.mf-points b {
	display: block;
	font-weight: 700;
	color: #fff;
}

@media only screen and (max-width: 991px) {
	.mf-hero {
		min-height: 0;
		padding: 130px 0 70px;
		background-position: 72% center;
	}

	.mf-hero-shade {
		background: rgba(3, 6, 28, 0.66);
	}

	.mf-hero h1 {
		font-size: 50px;
	}
}

@media only screen and (max-width: 575px) {
	.mf-hero h1 {
		font-size: 42px;
	}

	.mf-hero-content>p {
		font-size: 16px;
	}

	.mf-points {
		gap: 20px;
	}
}

@media only screen and (max-width: 991px) {
	.mf-hero-shade {
		background: rgba(3, 6, 28, 0.78);
	}
}

/* ---- MyFin: continuously moving image cards (same size, no pause) ---- */

.mf-cards {
	padding: 60px 0 80px;
	overflow: hidden;
	background: #050816;
}

.mf-track {
	display: flex;
	gap: 28px;
	width: max-content;
	animation: mf-scroll 40s linear infinite;
}

.mf-card {
	flex: 0 0 auto;
	width: 560px;
	height: 420px;
	overflow: hidden;
	background: #0a1226;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 28px;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

.mf-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes mf-scroll {
	from {
		transform: translateX(0);
	}

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

@media only screen and (max-width: 991px) {
	.mf-cards {
		padding: 40px 0 56px;
	}

	.mf-track {
		gap: 18px;
		animation-duration: 30s;
	}

	.mf-card {
		width: 280px;
		height: 210px;
		border-radius: 20px;
	}

	@keyframes mf-scroll {
		from {
			transform: translateX(0);
		}

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

/* ---- MyFin: "The problem" section (copy + four photo cards with notes) ---- */

.mf-prob {
	padding: 90px 0 100px;
	background: linear-gradient(135deg, #031a38 0%, #04284f 55%, #06356a 100%);
}

.mf-prob-label {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5ab4ff;
}

.mf-prob-label::after {
	content: '';
	width: 90px;
	height: 1px;
	background: #5ab4ff;
}

.mf-prob-title {
	margin-bottom: 28px;
	font-size: 54px;
	font-weight: 800;
	line-height: 1.08em;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #fff;
}

.mf-prob-title span {
	color: #7fc4ff;
}

.mf-prob-text {
	max-width: 440px;
	margin: 0;
	font-size: 18px;
	line-height: 1.65em;
	color: rgba(235, 244, 255, 0.92);
}

.mf-prob-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.mf-prob-card {
	position: relative;
	height: 280px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 26px;
	box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.7);
}

.mf-prob-card>img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.mf-prob-card:hover>img {
	transform: scale(1.06);
}

.mf-prob-note {
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 18px;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}

.mf-prob-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 16%, #fff);
	border-radius: 12px;
}

.mf-prob-note b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25em;
	color: #0b1230;
}

.mf-prob-note small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.35em;
	color: #6a7290;
}

@media only screen and (max-width: 1199px) {
	.mf-prob-title {
		font-size: 44px;
	}

	.mf-prob-card {
		height: 240px;
	}
}

@media only screen and (max-width: 991px) {
	.mf-prob {
		padding: 56px 0 70px;
	}

	.mf-prob-title {
		font-size: 36px;
	}

	.mf-prob-text {
		font-size: 16px;
	}

	.mf-prob-grid {
		margin-top: 36px;
	}
}

@media only screen and (max-width: 575px) {
	.mf-prob-grid {
		grid-template-columns: 1fr;
	}

	.mf-prob-card {
		height: 250px;
	}
}

/* ---- MyFin: "What you gain" key benefits (image cards in framed tiles) ---- */

.mf-gain {
	padding: 80px 0 100px;
	background: #050b1c;
}

.mf-gain-head {
	margin-bottom: 50px;
}

.mf-gain-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7b7bff;
}

.mf-gain-dot {
	width: 8px;
	height: 8px;
	background: #6a63ff;
	border-radius: 50%;
}

.mf-gain-title {
	max-width: 520px;
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.04em;
	letter-spacing: -0.02em;
	color: #fff;
}

.mf-gain-title span {
	color: var(--accent-color);
}

.mf-gain-text {
	max-width: 560px;
	margin: 0 0 6px auto;
	font-size: 18px;
	line-height: 1.65em;
	text-align: right;
	color: #8b93b8;
}

.mf-gain-card {
	margin-bottom: 30px;
	padding: 20px;
	background: #0a1530;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 34px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mf-gain-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 50px -26px rgba(74, 139, 255, 0.55);
}

.mf-gain-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

@media only screen and (max-width: 991px) {
	.mf-gain {
		padding: 56px 0 70px;
	}

	.mf-gain-head {
		margin-bottom: 34px;
	}

	.mf-gain-title {
		font-size: 42px;
	}

	.mf-gain-text {
		margin: 18px 0 0;
		font-size: 16px;
		text-align: left;
	}

	.mf-gain-card {
		padding: 14px;
		border-radius: 26px;
	}
}

/* ---- MyFin: special feature (instant help chat) ---- */

.mf-help {
	padding: 90px 0 100px;
	background: linear-gradient(135deg, #031a38 0%, #04284f 60%, #052f5e 100%);
}

.mf-help-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5ac8fa;
	background: rgba(40, 110, 200, 0.28);
	border: 1px solid rgba(90, 170, 255, 0.45);
	border-radius: 100px;
}

.mf-help-badge i {
	font-size: 11px;
}

.mf-help-title {
	margin-bottom: 20px;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.02em;
	letter-spacing: -0.02em;
	color: #fff;
}

.mf-help-title span {
	color: transparent;
	background: linear-gradient(90deg, #22b8f0 0%, #25d4ee 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.mf-help-bar {
	width: 70px;
	height: 5px;
	margin-bottom: 28px;
	background: linear-gradient(90deg, #22b8f0, #4a6bff);
	border-radius: 5px;
}

.mf-help-text {
	max-width: 520px;
	margin-bottom: 34px;
	font-size: 18px;
	line-height: 1.7em;
	color: rgba(225, 238, 255, 0.9);
}

.mf-help-perks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	max-width: 540px;
}

.mf-help-perk {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.35em;
	color: rgba(200, 220, 250, 0.75);
	background: rgba(4, 22, 52, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
}

.mf-help-perk b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.mf-help-perk-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 17px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 14%, #06193a);
	border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
	border-radius: 12px;
}

.mf-help-stage {
	position: relative;
	padding: 90px 0 30px 70px;
}

.mf-help-photo {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 38px;
	box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.7);
}

.mf-help-photo img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
	object-position: 50% 45%;
}

.mf-help-step {
	position: absolute;
	z-index: 2;
	width: 232px;
	padding: 14px 16px;
	background: rgba(6, 18, 46, 0.94);
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
	border-radius: 16px;
	box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.7);
}

.mf-help-step-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.mf-help-step-head b {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.mf-help-step-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
	border-radius: 50%;
}

.mf-help-step p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5em;
	color: rgba(200, 220, 250, 0.78);
}

.mf-help-step-1 {
	left: 0;
	top: 54%;
}

.mf-help-step-2 {
	left: 20%;
	top: 0;
}

.mf-help-step-3 {
	right: 0;
	top: 0;
	width: 210px;
}

@media only screen and (max-width: 1199px) {
	.mf-help-title {
		font-size: 48px;
	}

	.mf-help-stage {
		padding-left: 40px;
	}
}

@media only screen and (max-width: 991px) {
	.mf-help {
		padding: 56px 0 70px;
	}

	.mf-help-title {
		font-size: 40px;
	}

	.mf-help-text {
		font-size: 16px;
	}

	.mf-help-stage {
		margin-top: 40px;
		padding: 0;
	}

	.mf-help-photo img {
		height: 340px;
	}

	.mf-help-step {
		position: static;
		width: auto !important;
		margin-top: 14px;
	}
}

@media only screen and (max-width: 575px) {
	.mf-help-perks {
		grid-template-columns: 1fr;
	}
}

/* MyFin special feature: the three step cards float continuously */
@keyframes mf-float-a {

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

	25% {
		transform: translate(8px, -12px);
	}

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

	75% {
		transform: translate(-8px, -10px);
	}
}

@keyframes mf-float-b {

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

	25% {
		transform: translate(-10px, 8px);
	}

	50% {
		transform: translate(0, 18px);
	}

	75% {
		transform: translate(10px, 8px);
	}
}

.mf-help-step-1 {
	animation: mf-float-a 5s ease-in-out infinite;
}

.mf-help-step-2 {
	animation: mf-float-b 6s ease-in-out -2s infinite;
}

.mf-help-step-3 {
	animation: mf-float-a 5.5s ease-in-out -1s infinite;
}

@media (prefers-reduced-motion: reduce) {

	.mf-help-step-1,
	.mf-help-step-2,
	.mf-help-step-3 {
		animation: none;
	}
}

/* MyFin on phones: stacked step cards stay still (floating made them overlap), carousel captions get a darker backdrop */
@media only screen and (max-width: 991px) {

	.mf-help-step-1,
	.mf-help-step-2,
	.mf-help-step-3 {
		animation: none;
	}

	.tk-big-slide::before {
		background: linear-gradient(180deg, rgba(5, 8, 22, 0.78) 0%, rgba(5, 8, 22, 0.55) 45%, rgba(5, 8, 22, 0.92) 100%);
	}
}

/* ---- Legal pages (privacy policy, terms) ---- */

.legal-page {
	padding: 80px 0 100px;
}

.legal-card {
	max-width: 960px;
	margin: 0 auto;
	padding: 56px 60px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
}

.legal-meta {
	margin-bottom: 40px;
	padding: 24px 28px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
}

.legal-meta p {
	margin: 0 0 8px;
	font-size: 16px;
}

.legal-meta p:last-child {
	margin-bottom: 0;
}

.legal-card h2 {
	margin: 40px 0 16px;
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-color);
}

.legal-meta+h2 {
	margin-top: 0;
}

.legal-card p,
.legal-card li {
	font-size: 17px;
	line-height: 1.75em;
	color: rgba(245, 245, 244, 0.82);
}

.legal-card p {
	margin-bottom: 16px;
}

.legal-card ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

.legal-card li {
	margin-bottom: 10px;
}

.legal-card b {
	color: var(--primary-color);
}

.legal-card a {
	color: var(--accent-color);
	word-break: break-word;
}

@media only screen and (max-width: 767px) {
	.legal-page {
		padding: 50px 0 70px;
	}

	.legal-card {
		padding: 30px 22px;
		border-radius: 22px;
	}

	.legal-card h2 {
		margin-top: 30px;
		font-size: 22px;
	}

	.legal-card p,
	.legal-card li {
		font-size: 15px;
	}
}

/* ---- Active page in the main menu (desktop + mobile menu) shows in green ---- */

.main-menu ul li.nav-item a.active,
.main-menu ul li.active>a,
.slicknav_nav li.active>a,
.slicknav_nav a.active {
	color: var(--accent-color) !important;
}

/* Phone menu has a green background, so the open page shows as bold, underlined dark text instead of green */
.slicknav_nav li.active>a,
.slicknav_nav a.active {
	color: var(--dark-color) !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* ---- Header "three dots" contact panel (redesigned; scoped to .hc-panel only) ---- */

.header-btn .offcanvas.hc-panel {
	max-width: 420px;
	padding: 0;
	background: linear-gradient(180deg, #0d0d0d 0%, #070707 100%) !important;
	border-left: 1px solid var(--divider-color);
	box-shadow: -30px 0 70px -20px rgba(0, 0, 0, 0.8);
}

.header-btn .offcanvas.hc-panel .btn-close {
	top: 24px;
	right: 28px;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.header-btn .offcanvas.hc-panel .btn-close:hover {
	background-color: rgba(255, 255, 255, 0.12);
	transform: rotate(90deg);
}

.hc-panel .offcanvas-body {
	display: flex !important;
	flex-direction: column;
	padding: 96px 30px 34px;
}

.hc-head {
	margin-bottom: 30px;
}

.hc-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-color);
	background: rgba(191, 247, 71, 0.1);
	border: 1px solid rgba(191, 247, 71, 0.3);
	border-radius: 100px;
}

.hc-head h2 {
	margin-bottom: 10px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--primary-color);
}

.hc-head h2 span {
	color: var(--accent-color);
}

.hc-head p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6em;
	color: rgba(245, 245, 244, 0.65);
}

.hc-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.hc-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--divider-color);
	border-radius: 18px;
	transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.hc-item:hover {
	transform: translateX(-4px);
	background: rgba(191, 247, 71, 0.06);
	border-color: rgba(191, 247, 71, 0.45);
}

.hc-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 50px;
	height: 50px;
	background: rgba(191, 247, 71, 0.12);
	border-radius: 14px;
}

.hc-icon img {
	max-width: 24px;
}

.hc-text {
	flex: 1;
	min-width: 0;
}

.hc-text small {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(245, 245, 244, 0.5);
}

.hc-text b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45em;
	color: var(--primary-color);
	overflow-wrap: anywhere;
}

.hc-go {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--accent-color);
	opacity: 0;
	transform: translateX(-6px) rotate(-45deg);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hc-item:hover .hc-go {
	opacity: 1;
	transform: translateX(0) rotate(-45deg);
}

.hc-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: auto;
	padding: 17px 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--dark-color);
	background: var(--accent-color);
	border-radius: 100px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hc-cta:hover {
	color: var(--dark-color);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -14px rgba(191, 247, 71, 0.7);
}

@media only screen and (max-width: 575px) {
	.hc-panel .offcanvas-body {
		padding: 84px 20px 26px;
	}

	.hc-head h2 {
		font-size: 32px;
	}

	.hc-item {
		padding: 14px;
	}
}

/* hc-panel fixes: beat Bootstrap's navbar offcanvas-body padding, and sit flush with the right edge */
.header-btn .offcanvas.hc-panel {
	right: 0;
}

.header-btn .offcanvas.hc-panel .offcanvas-body {
	display: flex !important;
	flex-direction: column;
	padding: 96px 30px 34px;
}

@media only screen and (max-width: 575px) {
	.header-btn .offcanvas.hc-panel .offcanvas-body {
		padding: 84px 20px 26px;
	}
}

/* ---- Homepage services: title row on top, four cards in one row underneath (scoped to .our-services) ---- */

.our-services .our-services-list {
	gap: 24px;
}

.our-services .our-services-list .service-item {
	width: calc(25% - 18px);
	padding: 24px;
}

.our-services .service-item .icon-box {
	margin-bottom: 22px;
}

.our-services .service-item .service-title {
	min-height: 3.1em;
	margin-bottom: 22px;
}

.our-services .service-item .service-title h3 {
	font-size: 20px;
	line-height: 1.3em;
}

@media only screen and (max-width: 1199px) {
	.our-services .our-services-list .service-item {
		width: calc(50% - 12px);
	}
}

@media only screen and (max-width: 575px) {
	.our-services .our-services-list .service-item {
		width: 100%;
	}

	.our-services .service-item .service-title {
		min-height: 0;
	}
}

.our-services .our-services-list .service-item {
	display: flex;
	flex-direction: column;
}

.our-services .service-item .service-title {
	min-height: 0;
	margin-bottom: 22px;
}

.our-services .service-item .service-image {
	margin-top: auto;
}

.our-services .our-service-footer {
	margin-top: 40px;
}

/* ---- Homepage services: heading on a single line, button tucked into the top-right corner (desktop) ---- */

@media only screen and (min-width: 992px) {
	.our-services .section-row {
		position: relative;
	}

	.our-services .section-row .section-title h2 {
		font-size: clamp(30px, 2.9vw, 52px);
		white-space: nowrap;
	}

	.our-services .section-row .svc-btn-col {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
	}
}

@media only screen and (min-width: 992px) {
	.our-services .section-row .section-title h2 {
		font-size: clamp(28px, 2.75vw, 50px);
	}

	.our-services .section-row .svc-btn-col {
		top: -16px;
	}
}

/* ---- Homepage projects: three smaller cards per row ---- */

.our-projects .project-item {
	margin-bottom: 30px;
}

.our-projects .project-image {
	margin-bottom: 20px;
	border-radius: 24px;
}

.our-projects .project-image::before,
.our-projects .project-image figure img {
	border-radius: 24px;
}

.our-projects .project-content h3 {
	font-size: 20px;
	line-height: 1.35em;
}

.our-projects .project-content p {
	margin-bottom: 8px;
	font-size: 14px;
}

.our-projects .project-item {
	padding: 24px;
}

/* ---- Projects listing page ---- */

.projects-listing {
	padding: 80px 0 60px;
}

@media only screen and (max-width: 767px) {
	.projects-listing {
		padding: 50px 0 30px;
	}
}

/* ---- Homepage "Company benefits": aligned check points + three standard cards (no long overlapping bar) ---- */

.home-benefits .company-benefit-box {
	align-items: center;
}

.home-benefits .company-benefit-body ul {
	gap: 18px 30px;
}

.home-benefits .company-benefit-body ul li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-left: 0;
	font-size: 17px;
	line-height: 1.45em;
}

.home-benefits .company-benefit-body ul li::before {
	position: static;
	flex: 0 0 auto;
	margin-top: 1px;
	font-size: 20px;
	line-height: 1.2em;
	transform: none;
}

.home-benefits .company-benefit-list {
	position: static;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: none;
	padding: 0;
	background: none;
	border-radius: 0;
}

.home-benefits .company-benefit-list::before {
	display: none;
}

.home-benefits .company-benefit-item {
	flex-direction: column;
	justify-content: flex-start;
	width: auto;
	padding: 26px 18px;
	text-align: center;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 24px;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.home-benefits .company-benefit-item:hover {
	transform: translateY(-5px);
	border-color: rgba(191, 247, 71, 0.5);
}

.home-benefits .company-benefit-item .icon-box {
	width: 68px;
	height: 68px;
	margin: 0 0 18px;
}

.home-benefits .company-benefit-item .icon-box img {
	max-width: 32px;
}

.home-benefits .company-benefit-item-content {
	width: 100%;
}

.home-benefits .company-benefit-item-content h3 {
	font-size: 18px;
	line-height: 1.35em;
}

.home-benefits .company-benefit-images {
	padding: 0;
}

@media only screen and (max-width: 991px) {
	.home-benefits .company-benefit-body ul li {
		width: 100%;
	}
}

@media only screen and (max-width: 575px) {
	.home-benefits .company-benefit-list {
		grid-template-columns: 1fr;
	}

	.home-benefits .company-benefit-item {
		flex-direction: row;
		gap: 16px;
		padding: 16px 18px;
		text-align: left;
	}

	.home-benefits .company-benefit-item .icon-box {
		flex: 0 0 auto;
		width: 56px;
		height: 56px;
		margin: 0;
	}

	.home-benefits .company-benefit-item-content {
		width: auto;
	}
}

.home-benefits .company-benefit-list {
	align-items: stretch;
}

.home-benefits .company-benefit-item {
	justify-content: center;
}

.home-benefits .company-benefit-item {
	justify-content: flex-start;
}

@media only screen and (max-width: 575px) {
	.home-benefits .company-benefit-item {
		justify-content: flex-start;
		align-items: center;
	}
}

/* ---- BOSS project page banner ---- */

.bs-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 140px 0 90px;
	overflow: hidden;
	background-color: #030b1f;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

.bs-hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(3, 11, 31, 0.72) 0%, rgba(3, 11, 31, 0.3) 40%, rgba(3, 11, 31, 0) 65%);
}

.bs-hero .container {
	position: relative;
	z-index: 1;
}

.bs-brand {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 44px;
}

.bs-brand-icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	font-size: 30px;
	font-weight: 800;
	color: #f5b82e;
	background: rgba(8, 14, 32, 0.85);
	border: 1px solid rgba(245, 184, 46, 0.25);
	border-radius: 16px;
	box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.8);
}

.bs-brand-name {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
}

.bs-hero h1 {
	margin-bottom: 26px;
	font-size: clamp(42px, 4.6vw, 76px);
	font-weight: 700;
	line-height: 1.05em;
	letter-spacing: -0.02em;
	color: #fff;
}

.bs-hero h1 .bs-line {
	display: block;
}

.bs-hero h1 .bs-gradient {
	color: transparent;
	background: linear-gradient(90deg, #2f9bff 0%, #2a6bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.bs-hero-content>p {
	max-width: 480px;
	margin-bottom: 36px;
	font-size: 18px;
	line-height: 1.65em;
	color: rgba(255, 255, 255, 0.86);
}

@media only screen and (max-width: 991px) {
	.bs-hero {
		min-height: 0;
		padding: 130px 0 70px;
		background-position: 72% center;
	}

	.bs-hero-shade {
		background: rgba(3, 11, 31, 0.78);
	}

	.bs-hero h1 {
		font-size: 44px;
	}

	.bs-brand {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 575px) {
	.bs-hero h1 {
		font-size: 36px;
	}

	.bs-hero-content>p {
		font-size: 16px;
	}
}

/* BOSS banner: match the artwork's own shape on desktop so the laptop doesn't slide under the heading */
@media only screen and (min-width: 992px) {
	.bs-hero {
		min-height: 700px;
		aspect-ratio: 1671 / 941;
		padding: 120px 0 60px;
		background-position: center;
	}

	.bs-brand {
		margin-bottom: 36px;
	}

	.bs-hero h1 {
		font-size: clamp(40px, 4.2vw, 74px);
	}
}

@media only screen and (min-width: 992px) {
	.bs-hero h1 {
		font-size: clamp(38px, 3.8vw, 68px);
	}

	.bs-hero-content>p {
		max-width: 440px;
	}

	.bs-hero-shade {
		background: linear-gradient(90deg, rgba(3, 11, 31, 0.82) 0%, rgba(3, 11, 31, 0.5) 34%, rgba(3, 11, 31, 0) 56%);
	}
}

/* ---- BOSS: continuously moving image strip (reuses the MyFin marquee, smaller cards, no pause) ---- */

.bs-cards {
	padding: 50px 0 60px;
	background: #040b1c;
}

.bs-cards .mf-track {
	animation-duration: 70s;
}

.bs-cards .mf-card {
	width: 460px;
	height: 280px;
	border-radius: 24px;
}

@media only screen and (max-width: 991px) {
	.bs-cards {
		padding: 34px 0 44px;
	}

	.bs-cards .mf-track {
		animation-duration: 50s;
	}

	.bs-cards .mf-card {
		width: 260px;
		height: 170px;
		border-radius: 18px;
	}
}

/* ---- BOSS: introduction card (light) ---- */

.bf-intro {
	padding: 40px 0 70px;
	background: #040b1c;
}

.bf-intro-card {
	padding: 60px 70px;
	overflow: hidden;
	background:
		radial-gradient(520px 340px at 100% 100%, rgba(120, 160, 255, 0.28), transparent 70%),
		linear-gradient(135deg, #ffffff 0%, #eef3ff 100%);
	border-radius: 44px;
}

.bf-intro-label {
	margin-bottom: 16px;
	font-size: 17px;
	font-weight: 700;
	color: #2f5bff;
}

.bf-intro-title {
	margin-bottom: 22px;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: -0.02em;
	color: #0b1230;
}

.bf-intro-title span {
	color: #2f6bff;
}

.bf-intro-text {
	max-width: 480px;
	margin: 0;
	font-size: 18px;
	line-height: 1.7em;
	color: #4f5873;
}

.bf-intro-image {
	text-align: center;
}

.bf-intro-image img {
	display: inline-block;
	width: 100%;
	max-width: 520px;
	height: auto;
}

/* ---- BOSS: key features coverflow carousel ---- */

.bf-feat {
	padding: 70px 0 90px;
	overflow: hidden;
	background:
		radial-gradient(700px 360px at 50% 40%, rgba(40, 80, 220, 0.2), transparent 70%),
		linear-gradient(180deg, #040b1c 0%, #060a1e 100%);
}

.bf-feat-head {
	margin-bottom: 44px;
	text-align: center;
}

.bf-feat-pill {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6fc4ff;
	background: rgba(40, 110, 220, 0.18);
	border: 1px solid rgba(90, 170, 255, 0.4);
	border-radius: 100px;
}

.bf-feat-title {
	margin: 0;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.15em;
	color: #fff;
}

.bf-feat-title span {
	color: transparent;
	background: linear-gradient(90deg, #4a9bff 0%, #9a6bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.bf-stage {
	position: relative;
	width: 100%;
	height: 400px;
	perspective: 1600px;
}

.bf-slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(560px, 44vw);
	height: 100%;
	overflow: hidden;
	background: #0a1226;
	border: 2px solid rgba(170, 195, 255, 0.35);
	border-radius: 24px;
	box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.85);
	cursor: pointer;
	transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.25, 1), opacity 0.9s ease;
}

.bf-slide.is-active {
	cursor: default;
	border-color: rgba(200, 220, 255, 0.7);
	box-shadow: 0 0 0 1px rgba(120, 160, 255, 0.35), 0 34px 80px -24px rgba(40, 90, 255, 0.55);
}

.bf-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bf-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin: 34px 0 26px;
}

.bf-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	background: rgba(255, 255, 255, 0.25);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease;
}

.bf-dots button.is-active {
	background: #4a9bff;
	transform: scale(1.35);
}

.bf-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.bf-caption-text {
	flex: 0 1 560px;
	min-height: 96px;
	text-align: center;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.bf-caption-text.is-changing {
	opacity: 0;
	transform: translateY(8px);
}

.bf-caption-text h3 {
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}

.bf-caption-text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6em;
	color: rgba(210, 222, 250, 0.78);
}

.bf-arrow {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.bf-arrow:hover {
	background: rgba(74, 155, 255, 0.35);
	transform: scale(1.08);
}

@media only screen and (max-width: 991px) {
	.bf-intro-card {
		padding: 38px 24px;
		border-radius: 30px;
	}

	.bf-intro-title {
		font-size: 36px;
	}

	.bf-intro-text {
		font-size: 16px;
	}

	.bf-intro-image {
		margin-top: 26px;
	}

	.bf-feat {
		padding: 50px 0 60px;
	}

	.bf-feat-title {
		font-size: 32px;
	}

	.bf-stage {
		height: 260px;
	}

	.bf-slide {
		width: 70vw;
		border-radius: 18px;
	}

	.bf-caption {
		gap: 14px;
	}

	.bf-caption-text {
		min-height: 120px;
	}

	.bf-caption-text h3 {
		font-size: 21px;
	}

	.bf-caption-text p {
		font-size: 14px;
	}

	.bf-arrow {
		width: 38px;
		height: 38px;
	}
}

/* ---- BOSS: closing statement banner (image background, three highlighted lines) ---- */

.bs-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	padding: 80px 0;
	overflow: hidden;
	background-color: #050a1e;
	background-image: var(--bs-cta-bg);
	background-size: cover;
	background-position: center;
}

.bs-cta-shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 300px at 12% 100%, rgba(120, 60, 255, 0.35), transparent 70%),
		radial-gradient(600px 300px at 90% 0%, rgba(40, 90, 255, 0.3), transparent 70%),
		rgba(5, 10, 30, 0.72);
}

.bs-cta .container {
	position: relative;
	z-index: 1;
}

.bs-cta-title {
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.bs-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 16px;
	margin-bottom: 14px;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15em;
	letter-spacing: -0.01em;
	color: #fff;
}

.bs-cta-row:last-child {
	margin-bottom: 0;
}

.bs-cta-row b {
	padding: 4px 26px 6px;
	font-weight: 700;
	background: linear-gradient(90deg, #3a7bff 0%, #22b8f0 100%);
	border-radius: 100px;
}

@media only screen and (max-width: 991px) {
	.bs-cta {
		min-height: 0;
		padding: 56px 0;
	}

	.bs-cta-row {
		font-size: 34px;
	}
}

@media only screen and (max-width: 575px) {
	.bs-cta-row {
		gap: 6px 10px;
		font-size: 24px;
	}

	.bs-cta-row b {
		padding: 3px 16px 5px;
	}
}

/* ---- Homepage "How it works": animated four-step timeline (scoped to .home-steps) ---- */

.home-steps .hs-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	padding-top: 34px;
}

/* the line the steps hang on: a faint track plus a lime fill that draws across */
.home-steps .hs-line {
	position: absolute;
	top: 34px;
	left: 28px;
	right: 28px;
	height: 2px;
	background: var(--divider-color);
}

.home-steps .hs-line span {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--accent-color), rgba(191, 247, 71, 0.2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 2s cubic-bezier(0.55, 0, 0.2, 1) 0.3s;
}

.home-steps .hs-grid.is-in .hs-line span {
	transform: scaleX(1);
}

.home-steps .hs-card {
	position: relative;
	padding: 56px 26px 30px;
	overflow: hidden;
	background: linear-gradient(170deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
	border: 1px solid var(--divider-color);
	border-radius: 26px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.8, 0.25, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
	transition-delay: calc(var(--i) * 0.28s + 0.2s), calc(var(--i) * 0.28s + 0.2s), 0s, 0s, 0s;
}

.home-steps .hs-grid.is-in .hs-card {
	opacity: 1;
	transform: none;
}

.home-steps .hs-grid.is-in .hs-card:hover {
	transform: translateY(-8px);
	transition-delay: 0s;
	background: linear-gradient(170deg, rgba(191, 247, 71, 0.12) 0%, rgba(191, 247, 71, 0.02) 100%);
	border-color: rgba(191, 247, 71, 0.55);
	box-shadow: 0 26px 50px -28px rgba(191, 247, 71, 0.55);
}

/* the circle sitting on the line */
.home-steps .hs-node {
	position: absolute;
	top: -34px;
	left: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	font-size: 20px;
	color: var(--dark-color);
	background: var(--accent-color);
	border: 6px solid #000;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(191, 247, 71, 0.5);
	transform: scale(0);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: calc(var(--i) * 0.45s + 0.3s);
}

.home-steps .hs-grid.is-in .hs-node {
	transform: scale(1);
}

/* soft pulse ring that keeps the line feeling alive */
.home-steps .hs-node::after {
	content: '';
	position: absolute;
	inset: -10px;
	border: 2px solid rgba(191, 247, 71, 0.55);
	border-radius: 50%;
	opacity: 0;
}

.home-steps .hs-grid.is-in .hs-node::after {
	animation: hs-pulse 3.2s ease-out infinite;
	animation-delay: calc(var(--i) * 0.8s + 2s);
}

@keyframes hs-pulse {
	0% {
		transform: scale(0.7);
		opacity: 0.8;
	}

	70%,
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.home-steps .hs-num {
	display: block;
	margin-bottom: 14px;
	font-size: 78px;
	font-weight: 700;
	line-height: 0.9em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(191, 247, 71, 0.75);
	transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}

.home-steps .hs-card:hover .hs-num {
	color: var(--accent-color);
}

.home-steps .hs-body h3 {
	margin-bottom: 12px;
	font-size: 22px;
	line-height: 1.25em;
	color: var(--primary-color);
}

.home-steps .hs-body p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7em;
	color: rgba(245, 245, 244, 0.72);
}

@media only screen and (max-width: 1199px) {
	.home-steps .hs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 56px;
	}

	.home-steps .hs-line {
		display: none;
	}

	.home-steps .hs-num {
		font-size: 64px;
	}
}

@media only screen and (max-width: 575px) {
	.home-steps .hs-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.home-steps .hs-card {
		padding: 50px 22px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.home-steps .hs-line span,
	.home-steps .hs-card,
	.home-steps .hs-node {
		transition: none;
		transform: none;
		opacity: 1;
	}

	.home-steps .hs-node::after {
		animation: none;
	}
}

/* how-it-works fixes: let the node circle overhang the card, and centre it on the line */
.home-steps .hs-card {
	overflow: visible;
}

.home-steps .hs-grid {
	padding-top: 28px;
}

.home-steps .hs-line {
	top: 28px;
}

.home-steps .hs-node {
	top: -28px;
	left: 24px;
}

.home-steps .hs-card {
	padding-top: 48px;
}

@media only screen and (max-width: 1199px) {
	.home-steps .hs-grid {
		row-gap: 52px;
	}
}

/* ---- How it works, classic horizontal version: four steps on one line, no cards ---- */

.home-steps .hs-grid {
	gap: 0 40px;
}

.home-steps .hs-line {
	top: 28px;
	left: 28px;
	right: 28px;
}

.home-steps .hs-card {
	padding: 52px 0 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.home-steps .hs-grid.is-in .hs-card:hover {
	transform: none;
	background: none;
	border: 0;
	box-shadow: none;
}

.home-steps .hs-node {
	top: -28px;
	left: 0;
}

.home-steps .hs-num {
	margin-bottom: 18px;
	font-size: 84px;
}

.home-steps .hs-body h3 {
	margin-bottom: 14px;
	font-size: 24px;
	transition: color 0.3s ease;
}

.home-steps .hs-card:hover .hs-body h3 {
	color: var(--accent-color);
}

.home-steps .hs-body p {
	font-size: 16px;
	line-height: 1.75em;
}

@media only screen and (max-width: 1199px) {
	.home-steps .hs-grid {
		column-gap: 32px;
		row-gap: 56px;
	}

	.home-steps .hs-line {
		display: none;
	}

	.home-steps .hs-card {
		padding-top: 50px;
	}

	.home-steps .hs-node {
		top: 0;
	}

	.home-steps .hs-num {
		font-size: 66px;
	}
}

@media only screen and (max-width: 575px) {
	.home-steps .hs-grid {
		gap: 44px;
	}
}

/* ---- Homepage benefit cards: glowing, animated icons (scoped to .home-benefits) ---- */

.home-benefits .company-benefit-item .icon-box {
	position: relative;
	width: 78px;
	height: 78px;
	overflow: visible;
	font-size: 30px;
	color: var(--dark-color);
	background: radial-gradient(circle at 30% 25%, #e6ff9a 0%, var(--accent-color) 55%, #9bd62a 100%);
	box-shadow: 0 0 0 6px rgba(191, 247, 71, 0.12), 0 14px 32px -8px rgba(191, 247, 71, 0.65);
	animation: hb-float 4s ease-in-out infinite;
}

.home-benefits .company-benefit-item:nth-child(2) .icon-box {
	animation-delay: -1.3s;
}

.home-benefits .company-benefit-item:nth-child(3) .icon-box {
	animation-delay: -2.6s;
}

/* slowly rotating dashed ring around the circle */
.home-benefits .company-benefit-item .icon-box::before {
	content: '';
	position: absolute;
	inset: -10px;
	width: auto;
	height: auto;
	background: none;
	border: 2px dashed rgba(191, 247, 71, 0.6);
	border-radius: 50%;
	transform: none;
	z-index: 0;
	animation: hb-spin 14s linear infinite;
}

.home-benefits .company-benefit-item:hover .icon-box::before {
	transform: none;
	border-color: var(--accent-color);
	animation-duration: 5s;
}

/* expanding pulse ring */
.home-benefits .company-benefit-item .icon-box::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid rgba(191, 247, 71, 0.7);
	border-radius: 50%;
	opacity: 0;
	animation: hb-pulse 3s ease-out infinite;
}

.home-benefits .company-benefit-item:nth-child(2) .icon-box::after {
	animation-delay: 1s;
}

.home-benefits .company-benefit-item:nth-child(3) .icon-box::after {
	animation-delay: 2s;
}

.home-benefits .company-benefit-item .icon-box i {
	position: relative;
	z-index: 1;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-benefits .company-benefit-item:hover .icon-box i {
	transform: scale(1.2) rotate(-10deg);
}

@keyframes hb-float {

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

	50% {
		transform: translateY(-8px);
	}
}

@keyframes hb-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes hb-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@media only screen and (max-width: 575px) {
	.home-benefits .company-benefit-item .icon-box {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}

	.home-benefits .company-benefit-item .icon-box::before {
		inset: -7px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.home-benefits .company-benefit-item .icon-box,
	.home-benefits .company-benefit-item .icon-box::before,
	.home-benefits .company-benefit-item .icon-box::after {
		animation: none;
	}
}

/* ---- Homepage FAQ + contact form: compact form on the left, tidier accordion on the right (scoped to .home-faq) ---- */

.home-faq {
	padding: 70px 0 80px;
}

.home-faq .faqs-contact-box {
	margin-right: 10px;
	padding: 30px;
	border-radius: 26px;
}

.home-faq .faqs-contact-box .section-title {
	margin-bottom: 22px;
}

.home-faq .faqs-contact-box .section-title h2 {
	margin-bottom: 10px;
	font-size: 40px;
}

.home-faq .faqs-contact-box .section-title p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6em;
}

.home-faq .faqs-contact-form .form-group {
	margin-bottom: 14px !important;
}

.home-faq .faqs-contact-form .form-control {
	padding: 12px 16px;
	font-size: 14.5px;
	border-radius: 12px;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.home-faq .faqs-contact-form .form-control:focus {
	background: rgba(191, 247, 71, 0.04);
	border-color: var(--accent-color);
	color: var(--primary-color);
}

.home-faq .faqs-contact-form textarea.form-control {
	min-height: 96px;
	resize: vertical;
}

.home-faq .faqs-contact-form .btn-highlighted {
	display: block;
	width: 100%;
	padding: 14px 24px;
	font-size: 15px;
}

.home-faq .faqs-contact-form .help-block {
	display: none;
}

.home-faq .faqs-contact-form .help-block.with-errors:not(:empty) {
	display: block;
	margin-top: 4px;
	font-size: 12px;
}

/* right side: heading and answers line up with the form card */

.home-faq .faqs-contant .section-title {
	margin-bottom: 26px;
}

.home-faq .faqs-contant .section-title h2 {
	font-size: 44px;
}

.home-faq .faq-accordion .accordion-item {
	margin-bottom: 14px;
	border-radius: 16px;
}

.home-faq .faq-accordion .accordion-item:hover {
	border-color: rgba(191, 247, 71, 0.4);
}

.home-faq .faq-accordion .accordion-header .accordion-button {
	min-height: 66px;
	padding: 18px 64px 18px 24px;
	font-size: 18px;
	line-height: 1.35em;
	box-shadow: none;
}

.home-faq .faq-accordion .accordion-header .accordion-button:not(.collapsed) {
	color: var(--accent-color);
}

.home-faq .faq-accordion .accordion-item .accordion-button::after,
.home-faq .faq-accordion .accordion-item .accordion-button.collapsed::after {
	right: 22px;
	width: 28px;
	height: 28px;
	transition: transform 0.35s ease, background-color 0.3s ease;
}

.home-faq .faq-accordion .accordion-button:not(.collapsed)::after {
	transform: translateY(-50%) rotate(180deg);
}

.home-faq .faq-accordion .accordion-item .accordion-body {
	padding: 0 64px 22px 24px;
}

.home-faq .faq-accordion .accordion-item .accordion-body p {
	font-size: 15.5px;
	line-height: 1.7em;
	color: rgba(245, 245, 244, 0.8);
}

.home-faq .faq-accordion .accordion-item:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
	.home-faq {
		padding: 44px 0 56px;
	}

	.home-faq .faqs-contact-box {
		margin: 0 0 40px;
		padding: 24px 20px;
	}

	.home-faq .faqs-contant .section-title h2 {
		font-size: 34px;
	}

	.home-faq .faq-accordion .accordion-header .accordion-button {
		padding: 16px 56px 16px 18px;
		font-size: 16px;
	}

	.home-faq .faq-accordion .accordion-item .accordion-body {
		padding: 0 56px 18px 18px;
	}
}

/* ---- Project cards on phones/tablets: no hover exists, so show a "Tap to know more" cue that gently animates ---- */

@media only screen and (max-width: 991px),
(hover: none) {

	.our-projects .project-item .readmore-btn,
	.our-projects .project-item:hover .readmore-btn {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}

	/* the whole picture becomes the tap target, with a soft fade at the bottom so the cue reads clearly */
	.our-projects .project-item .readmore-btn a {
		position: relative;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-bottom: 14px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.62) 100%);
		border-radius: 0;
	}

	.our-projects .project-item .readmore-btn a:hover {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.62) 100%);
	}

	.our-projects .project-item .readmore-btn a img {
		display: none;
	}

	.our-projects .project-item .readmore-btn a::after {
		content: 'Tap to know more';
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 9px 18px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		color: var(--dark-color);
		white-space: nowrap;
		background: var(--accent-color);
		border-radius: 100px;
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.6), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
		animation: proj-tap 2.4s ease-in-out infinite;
	}

	.our-projects .project-image::before {
		display: none;
	}
}

@keyframes proj-tap {

	0%,
	100% {
		transform: translateY(0);
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.55), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
	}

	50% {
		transform: translateY(-5px);
		box-shadow: 0 0 0 10px rgba(191, 247, 71, 0), 0 12px 24px -6px rgba(0, 0, 0, 0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.our-projects .project-item .readmore-btn a::after {
		animation: none;
	}
}

/* ---- Homepage "How it works": mobile layout, icon beside the content (not over the number) ---- */
@media only screen and (max-width: 767px) {
	.home-steps .hs-grid {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-top: 0;
	}

	.home-steps .hs-card {
		overflow: visible;
		padding: 22px 20px 24px 88px;
		border-radius: 22px;
	}

	.home-steps .hs-node {
		top: 22px;
		left: 20px;
		width: 52px;
		height: 52px;
		font-size: 19px;
		border-width: 4px;
	}

	.home-steps .hs-node::after {
		inset: -6px;
	}

	/* connector running down to the next step */
	.home-steps .hs-card:not(:last-child)::before {
		content: '';
		position: absolute;
		top: 80px;
		left: 45px;
		bottom: -20px;
		width: 2px;
		background: linear-gradient(180deg, rgba(191, 247, 71, 0.6), rgba(191, 247, 71, 0.1));
	}

	.home-steps .hs-num {
		margin-bottom: 8px;
		font-size: 34px;
		line-height: 1em;
		-webkit-text-stroke-width: 1px;
	}

	.home-steps .hs-body h3 {
		margin-bottom: 8px;
		font-size: 20px;
	}

	.home-steps .hs-body p {
		font-size: 15px;
		line-height: 1.65em;
	}
}

/* ---- Homepage services: "Tap to view" cue on mobile / touch (same pill as the project cards) ---- */
@media only screen and (max-width: 991px),
(hover: none) {

	.our-services .service-item .readmore-btn,
	.our-services .service-item:hover .readmore-btn {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}

	.our-services .service-image .readmore-btn a {
		position: relative;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-bottom: 14px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.62) 100%);
		border-radius: 0;
	}

	.our-services .service-image .readmore-btn a:hover {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.62) 100%);
	}

	.our-services .service-image .readmore-btn a img {
		display: none;
	}

	.our-services .service-image .readmore-btn a::after {
		content: 'Tap to view';
		display: inline-flex;
		align-items: center;
		padding: 9px 18px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		color: var(--dark-color);
		white-space: nowrap;
		background: var(--accent-color);
		border-radius: 100px;
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.6), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
		animation: proj-tap 2.4s ease-in-out infinite;
	}

	.our-services .service-image::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.our-services .service-image .readmore-btn a::after {
		animation: none;
	}
}

/* ---- Footer "Let's Work Together": compact pill button under the heading instead of a large circle over it ---- */
.footer-work-together .work-together-box .work-together-btn {
	position: static;
	transform: none;
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

.footer-work-together .work-together-btn a {
	display: inline-flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 14px 28px;
	border-radius: 100px;
}

.footer-work-together .work-together-btn a span {
	width: auto;
	font-size: 16px;
	line-height: 1;
}

.footer-work-together .work-together-btn a img {
	width: 18px;
	max-width: 18px;
	height: 18px;
}

@media only screen and (max-width: 767px) {
	.footer-work-together .work-together-btn a {
		padding: 12px 22px;
	}

	.footer-work-together .work-together-btn a span {
		font-size: 14px;
	}
}

/* ---- Legal pages: table (Terms and Conditions) ---- */
.legal-table-wrap {
	margin: 0 0 22px;
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

.legal-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.legal-table th,
.legal-table td {
	padding: 14px 18px;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid var(--divider-color);
}

.legal-table th {
	color: var(--dark-color);
	background: var(--accent-color);
}

.legal-table tr:last-child td {
	border-bottom: 0;
}

.legal-table td:first-child {
	width: 28%;
	white-space: nowrap;
}

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

	.legal-table th,
	.legal-table td {
		padding: 12px 14px;
	}

	.legal-table td:first-child {
		white-space: normal;
	}
}

/* ---- Footer "Get in Touch" button: smaller ---- */
.footer-work-together .work-together-box .work-together-btn {
	margin-top: 18px;
}

.footer-work-together .work-together-btn a {
	gap: 8px;
	padding: 9px 20px;
}

.footer-work-together .work-together-btn a span {
	font-size: 13px;
}

.footer-work-together .work-together-btn a img {
	width: 14px;
	max-width: 14px;
	height: 14px;
}

@media only screen and (max-width: 767px) {
	.footer-work-together .work-together-btn a {
		padding: 8px 16px;
	}

	.footer-work-together .work-together-btn a span {
		font-size: 12px;
	}
}

/* ---- Testimonials: company name fallback (no logo), quote stays right-aligned ---- */
.testimonial-company-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.testimonial-header .testimonial-quote {
	margin-left: auto;
}

/* ---- Testimonial slider: long words/text wrap inside the card instead of overflowing ---- */
.testimonial-slider .swiper-slide {
	min-width: 0;
	height: auto;
}

.testimonial-slider .testimonial-item {
	min-width: 0;
	overflow: hidden;
}

.testimonial-slider .testimonial-content p,
.testimonial-slider .author-content h3,
.testimonial-slider .author-content p,
.testimonial-slider .testimonial-company-name {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.testimonial-slider .testimonial-body {
	gap: 16px;
}

.testimonial-slider .author-content {
	min-width: 0;
}

.testimonial-slider .testimonial-rating {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---- Testimonial slider: equal-height cards, quote clamped to 5 lines, "Read more" for long ones ---- */
.testimonial-slider .swiper-wrapper {
	align-items: stretch;
}

.testimonial-slider .swiper-slide {
	height: auto;
}

.testimonial-slider .testimonial-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.testimonial-slider .testimonial-content {
	flex: 1 1 auto;
	margin-bottom: 24px;
}

.testimonial-slider .testimonial-content p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	margin-bottom: 0;
}

.testimonial-slider .testimonial-body {
	margin-top: auto;
}

.tm-more {
	margin-top: 10px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent-color);
	background: none;
	border: 0;
	cursor: pointer;
}

.tm-more[hidden] {
	display: none;
}

.tm-more:hover {
	text-decoration: underline;
}

.tm-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(4px);
}

.tm-modal[hidden] {
	display: none;
}

.tm-modal-box {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 38px 34px 30px;
	background: #0b0c0b;
	border: 1px solid var(--divider-color);
	border-radius: 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.tm-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	color: var(--primary-color);
	background: rgba(255, 255, 255, 0.08);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tm-modal-close:hover {
	color: var(--dark-color);
	background: var(--accent-color);
}

.tm-modal-quote-icon {
	display: block;
	width: 36px;
	margin-bottom: 18px;
}

.tm-modal-text {
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.75em;
	color: rgba(245, 245, 244, 0.85);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.tm-modal-author {
	padding-top: 18px;
	border-top: 1px solid var(--divider-color);
}

.tm-modal-author h3 {
	margin: 0 0 4px;
	font-size: 20px;
	color: var(--primary-color);
}

.tm-modal-author p {
	margin: 0;
	color: rgba(245, 245, 244, 0.7);
}

@media only screen and (max-width: 575px) {
	.tm-modal-box {
		padding: 32px 22px 24px;
	}

	.tm-modal-text {
		font-size: 16px;
	}
}

/* ---- Testimonial slider: cap the name, designation and company so no card can stretch the others ---- */
.testimonial-slider .author-content h3,
.testimonial-slider .author-content p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.testimonial-slider .author-content h3 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.testimonial-slider .author-content p {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.testimonial-slider .testimonial-company-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.testimonial-slider .testimonial-company-logo {
	min-width: 0;
	max-width: calc(100% - 60px);
}

.testimonial-slider .testimonial-company-logo img {
	max-height: 40px;
	object-fit: contain;
}

/* Home page service cards: whole card is a link, with a lift / glow / shine hover. */
.service-item {
	cursor: pointer;
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1), border-color 0.35s ease, box-shadow 0.45s ease;
}

.service-item .service-title h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.service-item .service-title h3 a {
	transition: color 0.3s ease;
}

.service-item::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent, rgba(191, 247, 71, 0.16), transparent);
	transform: skewX(-20deg);
	transition: left 0.9s ease;
}

.service-item .icon-box img {
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3), filter 0.4s ease;
}

.service-item:hover,
.service-item:focus-within {
	transform: translateY(-10px);
	border-color: rgba(191, 247, 71, 0.65);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 32px rgba(191, 247, 71, 0.22);
}

.service-item:hover::after {
	left: 140%;
}

.service-item:hover .service-title h3 a,
.service-item:focus-within .service-title h3 a {
	color: var(--accent-color, #BFF747);
}

.service-item:hover .icon-box img {
	transform: translateY(-4px) rotate(-8deg) scale(1.18);
	filter: drop-shadow(0 0 10px rgba(191, 247, 71, 0.7));
	animation: svcIconWiggle 1.2s ease-in-out infinite;
}

.service-item:hover .readmore-btn a {
	animation: svcArrowPulse 1.4s ease-in-out infinite;
}

.service-item a:focus-visible::after {
	outline: 2px solid #BFF747;
	outline-offset: -4px;
	border-radius: 30px;
}

@keyframes svcIconWiggle {

	0%,
	100% {
		transform: translateY(-4px) rotate(-8deg) scale(1.18);
	}

	50% {
		transform: translateY(-8px) rotate(8deg) scale(1.22);
	}
}

@keyframes svcArrowPulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.55);
	}

	50% {
		box-shadow: 0 0 0 14px rgba(191, 247, 71, 0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.service-item,
	.service-item::after,
	.service-item .icon-box img {
		transition: none;
	}

	.service-item:hover .icon-box img,
	.service-item:hover .readmore-btn a {
		animation: none;
	}
}

/* Home hero text: glowing shimmer on the highlighted headline, drawn accent bar, animated keywords. */
.hero-content .section-title h1 span,
.hero-content .section-title h1 span * {
	color: #BFF747;
	text-shadow: 0 0 26px rgba(191, 247, 71, 0.35);
	animation: heroShimmer 4.5s ease-in-out infinite;
}

.hero-content .section-title h1::after {
	content: '';
	display: block;
	width: 140px;
	height: 5px;
	margin-top: 22px;
	border-radius: 5px;
	background: linear-gradient(90deg, #BFF747, #2ec4b6, #BFF747);
	background-size: 200% 100%;
	transform-origin: left center;
	animation: heroBarDraw 1.2s 1.6s cubic-bezier(0.2, 0.9, 0.3, 1) backwards, heroBarFlow 3s linear infinite;
}

.hero-content .hero-lead {
	border-left: 3px solid #BFF747;
	padding-left: 20px;
	max-width: 720px;
}

.hero-content .hero-lead .hl {
	position: relative;
	font-weight: 700;
	color: #BFF747;
	white-space: nowrap;
}

.hero-content .hero-lead .hl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: #BFF747;
	transform: scaleX(0);
	transform-origin: left center;
	animation: heroUnderline 0.7s ease forwards;
}

.hero-content .hero-lead .hl:nth-of-type(1)::after {
	animation-delay: 1.8s;
}

.hero-content .hero-lead .hl:nth-of-type(2)::after {
	animation-delay: 2.2s;
}

.hero-content .hero-lead .hl:nth-of-type(3)::after {
	animation-delay: 2.6s;
}

.hero-content .hero-lead .hl:nth-of-type(4)::after {
	animation-delay: 3s;
}

.hero-content .hero-lead .hl:nth-of-type(5)::after {
	animation-delay: 3.4s;
}

.hero-content .hero-lead .hl:nth-of-type(6)::after {
	animation-delay: 3.8s;
}

@keyframes heroShimmer {

	0%,
	100% {
		color: #BFF747;
		text-shadow: 0 0 18px rgba(191, 247, 71, 0.25);
	}

	50% {
		color: #e4ff9c;
		text-shadow: 0 0 40px rgba(191, 247, 71, 0.65);
	}
}

@keyframes heroBarDraw {
	from {
		transform: scaleX(0);
	}
}

@keyframes heroBarFlow {
	to {
		background-position: -200% 0;
	}
}

@keyframes heroUnderline {
	to {
		transform: scaleX(1);
	}
}

@media (max-width: 767px) {
	.hero-content .hero-lead {
		padding-left: 14px;
	}

	.hero-content .hero-lead .hl {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero-content .section-title h1 span,
	.hero-content .section-title h1 span *,
	.hero-content .section-title h1::after {
		animation: none;
	}

	.hero-content .hero-lead .hl::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* ---- Home page motion ---- */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	z-index: 2000;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, #BFF747, #2ec4b6);
	box-shadow: 0 0 12px rgba(191, 247, 71, 0.7);
	pointer-events: none;
}

/* Hero: drifting glow orbs behind the text */
.hero .hero-content::before,
.hero .hero-content::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}

.hero .hero-content::before {
	width: 320px;
	height: 320px;
	top: -60px;
	left: -90px;
	background: rgba(191, 247, 71, 0.16);
	animation: orbDrift 14s ease-in-out infinite alternate;
}

.hero .hero-content::after {
	width: 260px;
	height: 260px;
	bottom: -40px;
	right: 5%;
	background: rgba(46, 196, 182, 0.14);
	animation: orbDrift 17s ease-in-out infinite alternate-reverse;
}

/* Hero button: pulsing ring + shine */
.hero-btn .btn-default {
	position: relative;
	animation: btnRing 2.4s ease-out infinite;
}

.hero-btn .btn-default:hover {
	animation: none;
	transform: translateY(-3px);
}

/* About: floating photos, sliding feature rows */
.about-us-images .about-img-1 {
	animation: floatY 7s ease-in-out infinite;
}

.about-us-images .about-img-2 {
	animation: floatY 8s ease-in-out infinite reverse;
}

.about-agency-item,
.company-benefit-item {
	transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.4s ease;
}

.about-agency-item:hover,
.company-benefit-item:hover {
	transform: translateX(10px);
	box-shadow: -4px 0 0 #BFF747, 0 14px 34px rgba(0, 0, 0, 0.4);
}

.about-agency-item .icon-box img,
.company-benefit-item .icon-box i {
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.about-agency-item:hover .icon-box img,
.company-benefit-item:hover .icon-box i {
	transform: scale(1.2) rotate(-10deg);
}

/* How it works: pulsing nodes, lifting cards */
.hs-node {
	animation: nodePulse 2.8s ease-out infinite;
}

.hs-card:nth-child(3n) .hs-node {
	animation-delay: 0.6s;
}

.hs-card:nth-child(3n+1) .hs-node {
	animation-delay: 1.2s;
}

.hs-card {
	transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.hs-card:hover {
	transform: translateY(-8px);
}

/* Projects: tilt (set by JS), glow and image zoom */
.project-item {
	transition: transform 0.25s ease-out, box-shadow 0.4s ease;
	transform-style: preserve-3d;
	will-change: transform;
}

.project-item:hover {
	box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55), 0 0 30px rgba(191, 247, 71, 0.2);
}

.project-item .project-image img {
	transition: transform 0.6s ease;
}

.project-item:hover .project-image img {
	transform: scale(1.08);
}

@keyframes orbDrift {
	to {
		transform: translate(60px, 40px) scale(1.25);
	}
}

@keyframes floatY {
	50% {
		transform: translateY(-14px);
	}
}

@keyframes btnRing {
	0% {
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.55);
	}

	70%,
	100% {
		box-shadow: 0 0 0 18px rgba(191, 247, 71, 0);
	}
}

@keyframes nodePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(191, 247, 71, 0.5);
	}

	70%,
	100% {
		box-shadow: 0 0 0 16px rgba(191, 247, 71, 0);
	}
}

@media (max-width: 991px) {

	.about-us-images .about-img-1,
	.about-us-images .about-img-2 {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero .hero-content::before,
	.hero .hero-content::after,
	.hero-btn .btn-default,
	.about-us-images .about-img-1,
	.about-us-images .about-img-2,
	.hs-node {
		animation: none;
	}

	.scroll-progress {
		display: none;
	}
}

@media (max-width: 991px) {
	.hero-content-btn {
		justify-content: center;
	}
}

/* Tighter gap between the hero and the robot strip */
.hero {
	padding-bottom: 70px;
}

@media (max-width: 991px) {
	.hero {
		padding-bottom: 40px;
	}
}

/* Scroll progress bar (scroll-animations.js) */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 9999;
	background: var(--accent-color, #6c63ff);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* Robot eye background (robot-3d.js) */
.robot-bg, .robot-scrim { transition: opacity .9s ease; }
.robot-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .8; }
.robot-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.15) 72%, rgba(0,0,0,0) 100%); }
body.has-robot h1, body.has-robot h2, body.has-robot h3 { text-shadow: 0 1px 6px rgba(0,0,0,.9); }
body.has-robot .hero .hero-bg-video {
	opacity: .25;
}

.robot-hud-back {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	--c: #BFF747;
}

.rb-scanline {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	top: 10%;
	opacity: 0;
	background: linear-gradient(90deg, transparent, var(--c), transparent);
	box-shadow: 0 0 10px 1px var(--c);
}

.rb-corner {
	position: absolute;
	width: 46px;
	height: 46px;
	border: 2px solid var(--c);
	opacity: .5;
}

.rb-corner.tl {
	top: 96px;
	left: 20px;
	border-right: 0;
	border-bottom: 0;
}

.rb-corner.tr {
	top: 96px;
	right: 20px;
	border-left: 0;
	border-bottom: 0;
}

.rb-corner.bl {
	bottom: 20px;
	left: 20px;
	border-right: 0;
	border-top: 0;
}

.rb-corner.br {
	bottom: 20px;
	right: 20px;
	border-left: 0;
	border-top: 0;
}

.robot-hud-chip {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 40;
	pointer-events: none;
	--c: #BFF747;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font: 600 11px/1 monospace;
	letter-spacing: .12em;
	color: var(--c);
	background: rgba(0, 0, 0, .6);
	border: 1px solid var(--c);
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

.rb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 8px var(--c);
	animation: rbBlink 1s infinite;
}

.rb-pct {
	min-width: 34px;
	text-align: right;
}

.robot-hud-warning {
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	pointer-events: none;
	opacity: 0;
	padding: 12px 28px;
	font: 700 15px/1 monospace;
	letter-spacing: .2em;
	color: #fff;
	white-space: nowrap;
	background: repeating-linear-gradient(45deg, rgba(255, 43, 43, .9) 0 14px, rgba(120, 0, 0, .9) 14px 28px);
	border: 2px solid #ff2b2b;
	box-shadow: 0 0 30px #ff2b2b;
}

@keyframes rbBlink {
	50% {
		opacity: .2;
	}
}

@media (max-width: 767px) {
	.robot-hud-chip {
		font-size: 9px;
		left: 12px;
		bottom: 12px;
	}

	.robot-hud-warning {
		font-size: 11px;
		padding: 9px 14px;
	}

	.rb-corner {
		display: none;
	}
}

/* ---------- Works page cards ---------- */
.wk-page .row > [class*="col-"] {
	margin-bottom: 30px;
}

.wk-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.wk-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent-color);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.wk-image {
	position: relative;
	display: block;
	height: 200px;
	overflow: hidden;
	background: #101010;
}

/* blurred copy of the image fills the side space so nothing looks empty */
.wk-image::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: var(--wk-img) center / cover no-repeat;
	filter: blur(18px) brightness(.6);
}

.wk-image img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .5s ease;
}

.wk-card:hover .wk-image img {
	transform: scale(1.03);
}

.wk-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}

.wk-body h3 {
	font-size: 17px;
	line-height: 1.3;
	margin-bottom: 8px;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wk-body p {
	flex: 1;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 14px;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--accent-color);
	color: #0b0b0b;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	transition: gap .3s ease, background .3s ease;
}

.wk-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
	transform: skewX(-20deg);
	animation: wk-sheen 3s ease-in-out infinite;
}

.wk-btn:hover {
	gap: 12px;
	color: #0b0b0b;
}

@keyframes wk-sheen {
	0%, 60% { left: -80%; }
	100% { left: 140%; }
}

.wk-empty {
	text-align: center;
	padding: 70px 20px;
	border: 1px dashed var(--divider-color);
	border-radius: 20px;
}

.wk-empty i {
	font-size: 44px;
	color: var(--accent-color);
	margin-bottom: 16px;
}

.wk-empty h3 {
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	.wk-card {
		max-width: 340px;
		margin: 0 auto;
	}
}

/* phones: the robot sits centred behind the content, so use an even, lighter overlay instead of the left-to-right gradient */
@media (max-width: 767px) {
	.robot-bg { opacity: .7; }
	.robot-scrim { background: rgba(0, 0, 0, .5); }
}