/*
Theme Name: SyntesAI
Theme URI: https://syntes.ai/
Author: SyntesAI
Author URI: https://syntes.ai/
Description: Custom theme for SyntesAI platform pages. Ships a flexible section builder ("General Style" page template) powered by ACF Pro with a visual layout picker in the admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syntesai
*/


body {
	font-family: var(--font-base);
	font-weight: 400;
	background-image: url("/syntesai/wp-content/uploads/2026/04/Background-BG.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
Fluid Typography with CSS clamp()
Scales between 375px (mobile) and 1320px (Bootstrap 5 container max)
========================================================================== */

:root {
	/* ── Typography ─────────────────────────────────────────── */
	--font-base: 'Inter', sans-serif;

	--fs-h1: clamp(2.5rem, 1.4327rem + 4.5536vw, 4.5rem);
	/* 40px → 72px */
	--fs-h2: clamp(1.875rem, 1.4783rem + 1.6927vw, 2.5rem);
	/* 30px → 40px */
	--fs-h3: clamp(1.5rem, 1.2024rem + 1.2698vw, 2rem);
	/* 24px → 32px */
	--fs-h4: clamp(1.375rem, 1.2263rem + 0.6349vw, 1.75rem);
	/* 22px → 28px */
	--fs-h5: 1rem;
	/* 16px fixed  */

	--fs-p-lg: clamp(1.125rem, 0.9763rem + 0.6349vw, 1.5rem);
	/* 18px → 24px */
	--fs-p: 1rem;
	/* 16px fixed  */

	/* ── Sub-body scale ────────────────────────────────────── */
	--fs-xl: 1.25rem;
	/* 20px — large labels, sub-headings  */
	--fs-lg: 1.0625rem;
	/* 17px — large body paragraphs       */
	--fs-md: 0.9375rem;
	/* 15px — buttons, medium body        */
	--fs-sm: 0.875rem;
	/* 14px — small card text, captions   */
	--fs-xs: 0.75rem;
	/* 12px — badges, eyebrow labels      */

	/* ── Brand palette ──────────────────────────────────────── */
	--clr-blue: #3296FA;
	/* legacy primary blue       */
	--clr-blue-dark: #0E1632;
	/* legacy dark navy          */
	--clr-blue-mid: #2563eb;
	/* new primary blue          */
	--clr-blue-light: #60a5fa;
	/* accent / eyebrow blue     */
	--clr-indigo: #6366f1;
	/* indigo accent             */
	--clr-violet: #7c3aed;

	/* ── Neutrals ───────────────────────────────────────────── */
	--clr-white: #fff;
	--clr-black: #000;
	--clr-navy: #0a0f1e;
	/* dark section background   */
	--clr-navy-alt: #0a1128;
	/* dark card background      */
	--clr-navy-deep: #1e1b4b;
	/* dark card gradient end    */

	--clr-text-dark: #111827;
	--clr-text-mid: #4b5563;
	--clr-text-muted: #6b7280;
	--clr-text-faint: #94a3b8;

	--clr-bg-light: #f8fafc;
	--clr-border: #e5e7eb;

	/* ── Gradient stops (legacy hero/cta animations) ─────────── */
	--clr-grad-red: #F13860;
	--clr-grad-yellow: #F6F17D;
	--clr-grad-cyan: #59FDDD;
	--clr-grad-blue: #435AFE;
}

/* Headings */
h1,
.h1 {
	font-size: var(--fs-h1);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2,
.h2 {
	font-size: var(--fs-h2);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
}

h3,
.h3 {
	font-size: var(--fs-h3);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
}

h4,
.h4 {
	font-size: var(--fs-h4);
	line-height: 1.35;
	font-weight: 600;
}

h5,
.h5 {
	font-size: var(--fs-h5);
	line-height: 1.4;
	font-weight: 600;
}

/* Paragraphs */
p {
	font-size: var(--fs-p);
	line-height: 1.6;
}

p.lead,
.p-large {
	font-size: var(--fs-p-lg);
	line-height: 1.5;
}

p.lead_small {
	font-size: var(--fs-xl);
	line-height: 1.5;
}

.custom-logo {
	width: 200px;
	height: auto;
}


/* ============================================================
HOMEPAGE — page-specific styles
Reuses .hero-section, .s7-cta from style.css
============================================================ */


/* ============================================================
SECTION 1: HERO (split layout — text left, visual right)
============================================================ */
.hp-hero {
	text-align: left;
	padding: 80px 0 64px;
}

.page-id-1092 .hero-section {
	text-align: left;
}

.hp-hero-content {
	position: relative;
	z-index: 2;
	padding-right: 32px;
}

.hp-hero-title {
	font-size: 64px;
	letter-spacing: -2px;
	line-height: 1.05;
	margin-bottom: 24px;
}

.hp-hero-desc {
	margin-left: 0;
	margin-right: 0;
}

.hp-hero-visual {
	position: relative;
	z-index: 2;
}

.hp-hero-visual img {
	width: 100%;
}

.hp-hero-img-placeholder {
	width: 100%;
	min-height: 380px;
	background: rgba(255, 255, 255, 0.4);
	border: 1px dashed #cbd5e1;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #94a3b8;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13px;
}


/* Shared image placeholder for feature rows / sections */
.hp-img-placeholder {
	width: 100%;
	min-height: 320px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #94a3b8;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13px;
}

.hp-img-placeholder--tall {
	min-height: 420px;
}


/* ============================================================
SECTION 2: BUILT FOR REAL OPERATIONAL CHALLENGES
============================================================ */
.hp-built {
	padding: 25px 0;
}

.hp-built-title {
	letter-spacing: -1.2px;
	text-align: center;
	margin-bottom: 16px;
}

.hp-built-sub {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 72px;
}

.hp-feature {
	margin-bottom: 56px;
	padding: 56px 48px;
	background-color: rgb(255 255 255 / 50%);
	border-radius: 16px;
}

.hp-feature:last-child {
	margin-bottom: 0;
}

.hp-feature-visual {
	padding-right: 48px;
}

.hp-feature--alt .hp-feature-visual {
	padding-right: 0;
	padding-left: 48px;
}

.hp-feature-visual img {
	width: 100%;
}

/* ── Animated gradient border on feature images ───────────── */
.hp-feature-img-wrap {
	display: block;
}

.hp-feature-img-wrap img {
	display: block;
	width: 100%;
	border-radius: 17px;
}

@keyframes hp-img-border-flow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-feature-img-wrap {
		animation: none;
		background: linear-gradient(135deg, #3296FA, #6366f1);
	}
}

.hp-feature-text {
	padding-left: 24px;
}

.hp-feature--alt .hp-feature-text {
	padding-left: 0;
	padding-right: 30px;
}

.hp-feature-text h3 {

	font-size: var(--fs-h2);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.hp-feature-text p {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: 1.5;
}


/* ============================================================
SECTION 3: HOW SYNTES DRIVES OPERATIONAL INTELLIGENCE
- Dark gradient bg, 6 cards in 3x2 grid
============================================================ */
.hp-drives {
	padding: 100px 0;
	position: relative;
	overflow: hidden;
}


.hp-drives-title {
	letter-spacing: -1px;
	text-align: center;
	margin-bottom: 64px;
	position: relative;
	z-index: 1;
}

.hp-drives-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	position: relative;
	z-index: 1;
}

.hp-drives-cta {
	margin-top: 30px;
	text-align: center;
}

.hp-drives-card {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 32px 28px 28px;
	transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.hp-drives-card:hover {
	background: rgba(255, 255, 255, 0.4);
	border-color: rgba(56, 189, 248, 0.25);
	transform: translateY(-3px);
}

.hp-drives-card h3 {
	font-size: 18px;
	margin-bottom: 12px;
	line-height: 1.35;
}

.hp-drives-card p {
	line-height: 1.65;
	margin: 0;
}


/* ============================================================
SECTION 4: STATS (dark bg, 3 big numbers)
============================================================ */
.hp-stats {
	padding: 25px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}


.hp-stats-eyebrow {
	position: relative;
	z-index: 1;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 14px;
	letter-spacing: 1px;
}

.hp-stats-title {
	position: relative;
	z-index: 1;
	letter-spacing: -0.6px;
	max-width: 720px;
	margin: 0 auto 64px;
}

.hp-stats-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.hp-stat-num {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	letter-spacing: -3px;
	background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 35%, #38BDF8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 18px;
}

.hp-stat-num span {
	font-size: 56px;
	font-weight: 600;
	letter-spacing: -1px;
}

.hp-stat-label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	max-width: 280px;
	margin: 0 auto;
}


/* ============================================================
SECTION 5: CONNECT TO YOUR DATA INSTANTLY (logo grid)
============================================================ */
.hp-logos {
	padding: 25px 0;
}

.hp-logos-title {
	letter-spacing: -0.8px;
	text-align: center;
	margin-bottom: 14px;
}

.hp-logos-sub {
	text-align: center;
	margin: 0 auto 56px;
	max-width: 600px;
}

.hp-logos-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position : relative ;
}
.hp-logos-rows::before {
	position: absolute;
	content: "";
	background: linear-gradient(90deg, #dbe7f4 0%, rgba(224, 234, 243, 0) 100%);
	left: 0;
	width: 25%;
	height: 272px;
	z-index: 9;
}
.hp-logos-rows::after {
	position: absolute;
	content: "";
	background: linear-gradient(270deg, #e0e9f6 0%, rgba(224, 234, 243, 0) 100%);
	right: 0;
	width: 25%;
	height: 272px;
	z-index: 9;
}

.hp-logos-track-wrap {
	overflow: hidden;
}

.hp-logos-track {
	display: flex;
	width: max-content;
	animation: hp-logos-rtl 40s linear infinite;
}

.hp-logos-track-wrap--reverse .hp-logos-track {
	animation: hp-logos-ltr 40s linear infinite;
}

@keyframes hp-logos-rtl {
	from {
		transform: translateX(0);
	}

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

@keyframes hp-logos-ltr {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-logos-track {
		animation: none;
	}
}

.hp-logo {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 160px !important;
	height: 80px;
	background: #f8f9fb;
	border-radius: 12px;
	padding: 16px;
	margin: 0 8px;
}

.home_architecture a {
	text-decoration: none !important;
}

.hp-logo img {
	max-height: 36px;
	max-width: 100%;
	filter: grayscale(1) opacity(0.65);
	transition: filter 0.2s ease;
}


/* ============================================================
SECTION 6: WHY MOST AI PILOTS FAIL
============================================================ */
.hp-pilots {
	padding: 25px 0;
}

.hp-pilots-text {
	padding-right: 48px;
}

.hp-pilots-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 38px;
	line-height: 1.2;
	color: #111827;
	letter-spacing: -1px;
	margin-bottom: 22px;
}

.hp-pilots-desc {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.6;
	color: #374151;
	margin-bottom: 18px;
}

.hp-pilots-body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0;
}

/* ==========================================================================
Pilots Crossfade Slider  (section-pilots-slider.php)
Ported from home.css — crossfade slide track, stagger animations,
progress dots, prev/next arrows. Stacks any number of slides.
========================================================================== */

.hp-pilots-slider {
	position: relative;
}

/* Every slide shares the same grid cell so they stack */
.hp-pilots-track {
	position: relative;
	display: grid;
}

.hp-pilots-slide {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateX(28px);
	pointer-events: none;
	visibility: hidden;
	transition:
		opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.7s;
}

.hp-pilots-slide.is-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	visibility: visible;
	transition:
		opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s,
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s,
		visibility 0s linear 0s;
}

.hp-pilots-slide.is-leaving {
	opacity: 0;
	transform: translateX(-28px);
	visibility: visible;
	transition:
		opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.6s;
}

/* Slide content: text left, visual right */
.hp-pilots-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.hp-pilots-eyebrow {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: #4361EE;
	margin-bottom: 18px;
}

/* Featured image inside the visual column */
.hp-pilots-img {
	width: 100%;
	min-height: 420px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 40px -16px rgba(99, 102, 241, 0.18);
	display: block;
}

.hp-pilots-img-placeholder {
	width: 100%;
	min-height: 420px;
	background:
		radial-gradient(circle at 30% 25%, rgba(195, 175, 245, 0.16) 0%, transparent 55%),
		radial-gradient(circle at 75% 80%, rgba(243, 192, 207, 0.14) 0%, transparent 55%),
		#ffffff;
	border: 1px dashed #cbd5e1;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #94a3b8;
	font-weight: 500;
	font-size: 13px;
	box-shadow: 0 18px 40px -16px rgba(99, 102, 241, 0.18);
}

/* Inner-slide stagger: text elements rise on enter */
.hp-pilots-slide.is-active .hp-pilots-eyebrow,
.hp-pilots-slide.is-active .hp-pilots-title,
.hp-pilots-slide.is-active .hp-pilots-desc,
.hp-pilots-slide.is-active .hp-pilots-body,
.hp-pilots-slide.is-active .hp-pilots-img,
.hp-pilots-slide.is-active .hp-pilots-img-placeholder {
	animation: hp-pilots-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hp-pilots-slide.is-active .hp-pilots-eyebrow {
	animation-delay: 0.10s;
}

.hp-pilots-slide.is-active .hp-pilots-title {
	animation-delay: 0.18s;
}

.hp-pilots-slide.is-active .hp-pilots-desc {
	animation-delay: 0.26s;
}

.hp-pilots-slide.is-active .hp-pilots-body {
	animation-delay: 0.32s;
}

.hp-pilots-slide.is-active .hp-pilots-img,
.hp-pilots-slide.is-active .hp-pilots-img-placeholder {
	animation-delay: 0.14s;
}

@keyframes hp-pilots-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Controls bar ───────────────────────────────────────── */
.hp-pilots-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.hp-pilots-counter {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: #475569;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.hp-pilots-counter-current {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.5px;
	background: linear-gradient(95deg, #873AA3 0%, #5651E6 50%, #4774F9 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hp-pilots-counter-sep {
	color: #cbd5e1;
}

.hp-pilots-counter-total {
	color: #94a3b8;
}

/* Progress dots */
.hp-pilots-dots {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.hp-pilots-dot {
	position: relative;
	width: 28px;
	height: 8px;
	padding: 0;
	border: 0;
	background: rgba(15, 23, 42, 0.1);
	border-radius: 999px;
	cursor: pointer;
	overflow: hidden;
	transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}

.hp-pilots-dot:hover {
	background: rgba(15, 23, 42, 0.18);
}

.hp-pilots-dot.is-active {
	width: 72px;
	background: rgba(99, 102, 241, 0.18);
}

.hp-pilots-dot-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #8B5CF6 0%, #6366F1 50%, #3B5BDB 100%);
	border-radius: 999px;
	transform-origin: left center;
	transform: scaleX(0);
}

.hp-pilots-dot.is-active .hp-pilots-dot-fill {
	animation: hp-pilots-dot-progress var(--pilots-interval, 6.5s) linear forwards;
}

@keyframes hp-pilots-dot-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Pause fill when user hovers the slider */
.hp-pilots-slider:hover .hp-pilots-dot.is-active .hp-pilots-dot-fill {
	animation-play-state: paused;
}

/* Prev/next arrows */
.hp-pilots-arrows {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hp-pilots-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #ffffff;
	color: #475569;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition:
		transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
		background 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.hp-pilots-arrow:hover {
	transform: translateY(-2px);
	background: #0f172a;
	color: #ffffff;
	border-color: #0f172a;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.hp-pilots-arrow:active {
	transform: translateY(0);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.hp-pilots-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hp-pilots-img,
	.hp-pilots-img-placeholder {
		min-height: 280px;
	}

	.hp-pilots-controls {
		margin-top: 28px;
		justify-content: center;
	}
}

@media (max-width: 767.98px) {
	.hp-pilots-title {
		font-size: 28px;
	}
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

	.hp-pilots-slide,
	.hp-pilots-slide.is-active,
	.hp-pilots-slide.is-leaving {
		transition: opacity 0.2s linear;
		transform: none !important;
	}

	.hp-pilots-slide.is-active .hp-pilots-eyebrow,
	.hp-pilots-slide.is-active .hp-pilots-title,
	.hp-pilots-slide.is-active .hp-pilots-desc,
	.hp-pilots-slide.is-active .hp-pilots-body,
	.hp-pilots-slide.is-active .hp-pilots-img,
	.hp-pilots-slide.is-active .hp-pilots-img-placeholder {
		animation: none;
	}

	.hp-pilots-dot.is-active .hp-pilots-dot-fill {
		transform: scaleX(1);
		animation: none;
	}
}


/* ============================================================
SECTION 7: OPERATIONAL AI, REALIZED
============================================================ */
.hp-realized {
	background: #f8f9fb;
	padding: 100px 0;
}

.hp-realized-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 1.2;
	color: #111827;
	letter-spacing: -1px;
	text-align: center;
	margin-bottom: 56px;
}

.hp-realized-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.hp-realized-item {
	position: relative;
	padding: 4px 0 4px 22px;
}

.hp-realized-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3296FA 1%, #F13860 59%, #F6F17D 100%);
	border-radius: 2px;
}

.hp-realized-item h5 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: #111827;
	margin-bottom: 8px;
	line-height: 1.3;
}

.hp-realized-item p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #6b7280;
	line-height: 1.65;
	margin: 0;
}


/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1199.98px) {
	.hp-hero-title {
		font-size: 52px;
	}

	.hp-stat-num {
		font-size: 80px;
	}

	.hp-stat-num span {
		font-size: 46px;
	}
}

@media (max-width: 991.98px) {
	.hp-hero {
		padding: 60px 0 40px;
		text-align: center;
	}

	.hp-hero-content {
		padding-right: 0;
		margin-bottom: 40px;
	}

	.hp-hero-desc {
		margin: 0 auto 32px;
	}

	.hp-built {
		padding: 60px 0;
	}

	.hp-built-title {
		font-size: 34px;
	}

	.hp-feature-visual,
	.hp-feature--alt .hp-feature-visual {
		padding: 0;
		margin-bottom: 24px;
	}

	.hp-feature-text,
	.hp-feature--alt .hp-feature-text {
		padding: 0;
	}

	.hp-drives,
	.hp-stats,
	.hp-logos,
	.hp-pilots,
	.hp-realized {
		padding: 60px 0;
	}

	.hp-drives-title,
	.hp-stats-title,
	.hp-logos-title,
	.hp-pilots-title,
	.hp-realized-title {
		font-size: 30px;
	}

	.hp-drives-grid,
	.hp-realized-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-stats-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.hp-stat-num {
		font-size: 72px;
	}

	.hp-pilots-text {
		padding-right: 0;
		margin-bottom: 32px;
	}
}

@media (max-width: 575.98px) {
	.hp-hero-title {
		font-size: 40px;
	}

	.hp-drives-grid,
	.hp-realized-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	.hp-stat-num {
		font-size: 60px;
	}

	.hp-stat-num span {
		font-size: 36px;
	}
}



/* ===========================
SECTION 1: HERO
=========================== */
.new_hero_section {
	position: relative;
	padding: 90px 0 48px;
	margin-top: 80px;
	text-align: center;
	overflow: hidden;
}

.new_hero_content {
	position: relative;
	z-index: 2;
	margin: 0 auto;
}

/* "PLATFORM OVERVIEW" label */
.hero-label {
	font-weight: 700;
	font-size: var(--fs-xl);
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Main heading — gradient */
.hero-title {
	margin-bottom: 22px;
	background-image: radial-gradient(circle at 1.5% 95%, #ff6a1a 0%, #ff3d2e 3%, #d62a6b 6%, #7b2fb8 10%, rgba(123, 47, 184, 0) 14%), linear-gradient(90deg, #5a3bd4 0%, #4a46e0 25%, #3f55ea 55%, #3f63ef 100%);
	width: fit-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* .hero-title span {
background: linear-gradient(95deg, #0d6efd 0%, #6366F1 30%, #3B5BDB 65%, #1e293b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} */

/* Subtitle */
.hero-desc {
	color: var(--clr-black);
	margin-bottom: 50px;
}

/* CTA button */
.btn-demo {
	display: inline-block;
	font-weight: 600;
	font-size: var(--fs-p);
	color: var(--clr-white);
	background: var(--clr-blue);
	padding: 15px 36px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 16px rgba(50, 150, 250, 0.25);
}

.btn-demo:hover {
	background: var(--clr-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(50, 150, 250, 0.35);
	color: var(--clr-white);
}


/* ===========================
SECTION 7: UNLOCK AGENTIC AI + WHY + KEY HIGHLIGHTS
=========================== */

/* --- 7A: Dark CTA Card --- */
.s7-cta {
	padding: 80px 0;
}

.page-id-1092 .s7-highlights {
	padding: 50px 0 !important;
}

.s7-cta-card {
	background: linear-gradient(135deg, var(--clr-navy-alt) 0%, #111d3a 100%);
	border-radius: 20px;
	padding: 72px 64px 56px;
	position: relative;
	overflow: hidden;
}

.s7-cta-bars {
	margin-top: 80px;
}

.s7-cta-bars img {
	width: 100%;
}

.s7-cta-title {
	font-weight: 600;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -2px;
	margin-bottom: 16px;
}

.s7-cta-desc {
	font-weight: 400;
	font-size: var(--fs-xl);
	line-height: 1.6;
	color: var(--clr-white);
	max-width: 620px;
	margin-bottom: 0;
}

.btn-demo-dark {
	display: inline-block;
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--clr-white);
	background: var(--clr-blue);
	padding: 14px 32px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
	box-shadow: 0 4px 16px rgba(50, 150, 250, 0.25);
}

.btn-demo-dark:hover {
	background: var(--clr-blue-dark);
	transform: translateY(-2px);
	color: var(--clr-white);
}

.btn-demo-dark--outline {
	background: transparent;
	color: var(--clr-white);
	border: 2px solid var(--clr-white);
	box-shadow: none;
}

.btn-demo-dark--outline:hover {
	background: var(--clr-white);
	color: var(--clr-blue);
	transform: translateY(-2px);
}

.btn-demo--outline {
	background: transparent;
	color: var(--clr-blue);
	border: 2px solid var(--clr-blue);
	box-shadow: none;
	display: inline-block;
	font-weight: 600;
	font-size: var(--fs-md);
	padding: 14px 32px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
	box-shadow: 0 4px 16px rgba(50, 150, 250, 0.25);
}

.btn-demo--outline:hover {
	background: var(--clr-white);
	color: var(--clr-blue);
	transform: translateY(-2px);
}

.s7-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.hp-feature-text a {
	margin-top: 30px;
}

/* --- 7B: Why AI-Generated Business Context --- */
.s7-why {
	/* 		background: #f8f9fb; */
	padding: 25px 0;
}

.s7-why-header {
	margin-bottom: 48px;
}

.s7-why-align-left {
	text-align: left;
}

.s7-why-align-center {
	text-align: center;
}

.s7-why-align-right {
	text-align: right;
}

.s7-why-align-center .s7-why-desc {
	margin-left: auto;
	margin-right: auto;
}

.s7-why-title {
	font-weight: 600;
	font-size: 40px;
	line-height: 1.2;
	color: var(--clr-text-dark);
	letter-spacing: -1px;
	margin-bottom: 12px;
}

.s7-why-subheading {
	font-weight: 600;
	font-size: var(--fs-p-lg);
	color: var(--clr-text-mid);
	line-height: 1.5;
	margin-bottom: 12px;
}

.s7-why-desc {
	font-size: var(--fs-p);
	color: var(--clr-text-muted);
	line-height: 1.7;
	max-width: 700px;
	margin-bottom: 24px;
}

.s7-why-header .btn-demo {
	margin-top: 8px;
}

.s7-why-grid {
	display: grid;
	grid-template-columns: repeat(var(--s7-why-cols, 3), 1fr);
	gap: 35px;
}

.s7-why-item {
	flex: 1;
	padding: 0 28px;
	position: relative;
}

.s7-why-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.s7-why-item h5 {
	font-weight: 700;
	color: var(--clr-black);
	margin-bottom: 8px;
	line-height: 1.4;
}

.s7-why-item p {
	font-weight: 400;
	font-size: var(--fs-p);
	color: var(--clr-black);
	line-height: 1.6;
	margin-bottom: 0;
}


/* --- 7C: Key Highlights --- */
.s7-highlights {
	/* 		background: #f8f9fb; */
	padding: 0 0 100px;
}

.s7-highlights-header {
	margin-bottom: 48px;
}

.s7-kh-align-left {
	text-align: left;
}

.s7-kh-align-center {
	text-align: center;
}

.s7-kh-align-right {
	text-align: right;
}

.s7-kh-align-center .s7-highlights-desc {
	margin-left: auto;
	margin-right: auto;
}

.s7-highlights-title {
	font-weight: 600;
	font-size: 40px;
	line-height: 1.2;
	color: var(--clr-text-dark);
	letter-spacing: -1px;
	margin-bottom: 12px;
}

.s7-highlights-subheading {
	font-weight: 600;
	font-size: var(--fs-p-lg);
	color: var(--clr-text-mid);
	line-height: 1.5;
	margin-bottom: 12px;
}

.s7-highlights-desc {
	font-size: var(--fs-p);
	color: var(--clr-text-muted);
	line-height: 1.7;
	max-width: 700px;
	margin-bottom: 24px;
}

.s7-highlights-header .btn-demo {
	margin-top: 8px;
}

.s7-highlights-grid {
	display: grid;
	grid-template-columns: repeat(var(--s7-kh-cols, 3), 1fr);
	gap: 35px;
}

.s7-highlight-item {
	padding: 0 28px;
	position: relative;
}

.s7-highlight-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3296FA 1%, #F13860 59%, #F6F17D 100%);
	border-radius: 2px;
}

.s7-highlight-item h5 {
	font-weight: 700;
	font-size: var(--fs-p);
	color: var(--clr-text-dark);
	margin-bottom: 8px;
	line-height: 1.4;
}

.s7-highlight-item p {
	font-weight: 400;
	font-size: var(--fs-p);
	color: var(--clr-black);
	line-height: 1.6;
	margin-bottom: 0;
}

/* --- Why It Works (4-col grid) --- */
.sol-works {
	padding: 40px 0;
}

.sol-works-title {
	font-weight: 600;
	line-height: 1.2;
	color: var(--clr-text-dark);
	letter-spacing: -1px;
	margin-bottom: 12px;
}

.sol-works-subheading {
	font-size: var(--fs-p-lg);
	color: var(--clr-text-mid);
	line-height: 1.5;
	margin-bottom: 48px;
}

/* .sol-works-title:last-child,
.sol-works-title+ :last-child {
margin-bottom: 48px;
} */

.sol-works-grid {
	display: grid;
	grid-template-columns: repeat(var(--sol-works-cols, 4), 1fr);
	gap: 30px;
	margin-top: 48px;
}

.sol-works-item {
	padding: 0 28px;
	position: relative;
	background: #ffffff;
	border-radius: 14px;
	padding: 28px 24px;
	border: 1px solid rgba(15, 23, 42, 0.05);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}


.sol-works-item h5 {
	font-weight: 700;
	font-size: 18px;
	color: var(--clr-text-dark);
	margin-bottom: 8px;
	line-height: 1.4;
}

.sol-works-item p {
	font-size: var(--fs-p);
	color: var(--clr-text-mid);
	line-height: 1.6;
	margin-bottom: 0;
}

/* --- Recommended Resources (post grid) --- */
.sol-resources {
	padding: 80px 0;
}

.sol-resources-title {
	font-weight: 600;
	line-height: 1.2;
	color: var(--clr-text-dark);
	letter-spacing: -1px;
	margin-bottom: 48px;
	text-align: center;
}

.sol-resources-grid {
	display: grid;
	grid-template-columns: repeat(var(--sol-res-cols, 3), 1fr);
	gap: 28px;
}

.sol-resource-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sol-resource-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.sol-resource-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.sol-resource-img {
	width: 100%;
	height: 180px;
	background: #f1f5f9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sol-resource-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sol-resource-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sol-resource-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sol-resource-label {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--clr-blue-mid);
	margin-bottom: 10px;
}

.sol-resource-body h5 {
	font-weight: 600;
	font-size: var(--fs-p-lg);
	color: var(--clr-text-dark);
	margin-bottom: 10px;
	line-height: 1.35;
}

.sol-resource-desc {
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	line-height: 1.6;
	margin-bottom: 0;
}

.s3-img-placeholder img {
	width: 100% !important;
	border-radius: 20px;
}

.frame_1563 {
	gap: 20px;
}

.s3-feature-text h5 {
	margin: 0;
	font-weight: 600;
	color: #111827;
}

.s3-feature-text p {
	font-size: 15px;
	color: #6b7280;
}

/* ===========================
RESPONSIVE
=========================== */
@media (max-width: 1199.98px) {
	.animated-gradient-text {
		font-size: 58px !important;
	}

	body.page-template-platform-overview {
		background-size: cover !important;
	}
}

@media (max-width: 991.98px) {
	.s7-cta-title {
		font-size: 42px;
	}

	.s7-cta-card {
		padding: 56px 40px 48px;
	}

	.s7-cta-desc {
		font-size: var(--fs-lg);
	}

	.s7-why-title,
	.s7-highlights-title {
		font-size: 32px;
	}

	.s7-highlights-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 0;
	}

	.sol-works-grid,
	.s7-why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}

	.sol-resources-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-section {
		padding: 70px 0 40px;
	}

	.animated-gradient-text {
		font-size: 46px !important;
		letter-spacing: -1.5px;
	}

	.hero-desc {
		font-size: var(--fs-lg);
	}

	.hero-desc br {
		display: none;
	}

	.row.frame_1563 {
		padding: 50px !important;
	}
}

@media (max-width: 767.98px) {
	.hero-section {
		padding: 56px 0 32px;
	}

	.animated-gradient-text {
		font-size: 34px !important;
		letter-spacing: -1px;
	}

	.hp-feature {
		padding: 32px 24px;
	}

	.hero-desc {
		font-size: var(--fs-p);
	}

	.btn-demo {
		font-size: var(--fs-md);
		padding: 13px 30px;
	}

	.s7-cta {
		padding: 48px 0 0;
	}

	.s7-cta-card {
		padding: 40px 24px 36px;
		border-radius: 16px;
	}

	.s7-cta-title {
		font-size: 30px;
		letter-spacing: -1px;
	}

	.s7-cta-desc {
		font-size: var(--fs-p);
	}

	.s7-cta-bars {
		height: 120px;
		margin: 28px 0 24px;
	}

	.s7-why {
		padding: 48px 0;
	}

	.s7-why-title,
	.s7-highlights-title {
		font-size: 26px;
		margin-bottom: 32px;
	}

	.s7-highlights-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sol-works-grid,
	.s7-why-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sol-resources-grid {
		grid-template-columns: 1fr;
	}

	.s7-highlights {
		padding: 0 0 60px;
	}

	.row.frame_1563 {
		padding: 20px !important;
		width: 100%;
		margin: auto;
		margin-top: 30px !important;
	}

	.decisions-row {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}

	.decisions-row h2 {
		font-size: 30px !important;
	}

	.ensure {
		padding: 60px 0 !important;
		position: relative;
	}

	.ensure::before {
		position: absolute;
		content: "";
		background-color: var(--clr-black);
		width: 100%;
		height: 100%;
		opacity: .5;
		top: 0;
	}

	.ensure .hero-desc {
		font-size: var(--fs-p);
		position: relative;
		z-index: 9;
		color: var(--clr-white);
		margin-bottom: 20px;
	}

	.ensure .btn-demo {
		position: relative;
		z-index: 9;
	}

	.row {
		gap: 20px !important;
	}

	body.page-template-ai-decisions,
	body.page-template-ai-pages,
	body.page-template-collaboration {
		background-size: cover !important;
	}

	.new_hero_section {
		padding: 50px 0;
		margin-top: 150px;
	}

	.exicution-foundation {
		display: block !important;
		margin-top: 60px !important;
	}

	.exicution-foundation h2 {
		text-align: center !important;
		width: 100% !important;
	}

	.exicution-foundation p {
		text-align: center !important;
		width: 100% !important;
	}

	.agentic_layer {
		margin-top: 60px !important;
		text-align: center !important;
	}

	.ai-application h2 {
		text-align: center !important;
		width: 100% !important;
		font-size: 30px !important;
	}

	.ai-application p {
		text-align: center !important;
		font-size: var(--fs-p) !important;
	}

	.ai-counter {
		margin-top: 30px !important;
		margin-bottom: 40px !important;
		justify-content: center !important;
	}

	.ai-counter .counter-content {
		padding: 20px !important;
	}

	.counter-content h3 {
		font-size: 30px !important;
	}

	.counter-content p {
		font-size: var(--fs-p) !important;
		font-weight: 500 !important;
	}

	.page-id-1092 .s7-highlights-header {
		margin-bottom: 0;
	}

	.page-id-1092 .hero-section {
		text-align: center;
	}
}

.animated-gradient-text {
	/* Typography from your design */
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 72px;
	letter-spacing: -0.02em;

	/* Gradient setup using your specific hex codes */
	background: linear-gradient(-45deg,
		#FF0000,
		/* Red-ish */
		#59FDDD,
		/* Cyan */
		#435AFE
		/* Blue */
	);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: flow 10s ease infinite;
	line-height: normal;
}

@keyframes flow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.platform-overview {
	/* Linear Gradient Fill */
	background: linear-gradient(90deg,
		#3296FA 0%,
		#4AA5C7 45%,
		#9FA967 100%);

	/* Clipping the background to the text */
	-webkit-background-clip: text;
	background-clip: text;

	/* Making the actual text color transparent to show the gradient */
	color: transparent;

	/* Ensures the gradient spans the text correctly */
	display: inline-block;
}


/* 1. ANIMATED GRADIENT TEXT */
.gradient-text {
	/* Use the colors from your Figma screenshot stops */
	background: conic-gradient(from 180deg at 50% 50%,
		#434AFF 0deg,
		/* Blue */
		#F13860 90deg,
		/* Pink/Red */
		#F6F17D 180deg,
		/* Yellow */
		#43FFEB 270deg,
		/* Cyan */
		#434AFF 360deg);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	/* Animation to make the gradient "rotate" or shift */
	animation: shimmer 6s linear infinite;

	/* The "Layer Blur" effect mentioned in your image (500 value) 
	Note: In CSS, we simulate this with a drop-shadow for a glow effect */
	filter: drop-shadow(0 0 15px rgba(67, 74, 255, 0.3));
}

@keyframes shimmer {
	to {
		background-position: 200% center;
	}
}

.ensure {
	background-size: cover !important;
	padding: 113px 0;
	background-position: center !important;
}

.decisions-row {
	padding-top: 95px;
	padding-bottom: 25px;
}

.decisions-row h2 {
	font-size: 40px;
}

.row.frame_1563 {
	background-color: #fff;
	padding: 106px 50px 57px 50px;
	border-radius: 16px;
	margin-top: 62px;
}

.page-template-ai-decisions .s7-cta-desc {
	max-width: 760px;
}

.page-template-ai-decisions .hero-desc {
	font-size: var(--fs-xl);
}

.page-template-ai-decisions .lp-feature-section {
	padding: 12.5px 0;
}

.exicution-foundation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 203px;
}

.exicution-foundation h2 {
	text-align: start;
	width: 50%;
}

.exicution-foundation p {
	text-align: start;
	width: 42%;
}

/* body.page-template-template-general-style {
background-image: url("/wp-content/uploads/2026/04/Background-BG.webp");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
} */

.feature-block {
	padding: 25px 0;
}

.feature-block-inner {
	padding: 56px 48px;
	border-radius: 16px;
}

/* Background style variants */
.feature-block .feature-block-inner {
	background-color: rgba(255, 255, 255, 0.5);
}

.feature-block.bg-light_dotted .feature-block-inner {
	background-color: rgba(255, 255, 255, 0.5);
	background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
	background-size: 20px 20px;
}

.feature-block.bg-gradient .feature-block-inner {
	background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(239, 246, 255, 0.9) 100%);
}

.feature-block.bg-dark .feature-block-inner {
	background: linear-gradient(135deg, #0a0f1e 0%, #111d3a 100%);
	color: #fff;
}

.feature-block.bg-transparent .feature-block-inner {
	background-color: transparent;
}

.s3-features {
	display: flex;
	flex-direction: column;
	gap: 28px;
	position: relative;
	padding-left: 20px;
	margin-top: 40px;
}

.s3-features::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.s3-feature-text p:last-child {
	margin-bottom: 0 !important;
}

.hero-section {
	padding: 50px 0;
	text-align: center;
}

.intro-desc {
	background-color: #fff;
	padding: 50px;
	border-radius: 16px;
	margin-top: 40px;
}

.intro-desc ul {
	padding-left: 0px;
	margin-bottom: 0;
	gap: 20px;
	display: flex;
	flex-direction: column;
}

.intro-desc ul li {
	position: relative;
	list-style: none;
	padding-left: 20px;
}

.intro-desc ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3296FA 1%, #F13860 59%, #F6F17D 100%);
	border-radius: 2px;
}

.agentic_layer {
	text-align: start;
	margin-top: 136px;
}

.ai-app-image img {
	width: 100% !important;
}

.ai-application {
	text-align: start;
}

.ai-counter {
	display: flex;
	gap: 27px;
	margin-top: 71px;
	margin-bottom: 56px;
}

.ai-counter .counter-content {
	background-color: rgba(50, 150, 250, 0.10);
	border-radius: 16px;
	padding: 24px;
}

.counter-content p {
	margin-bottom: 0 !important;
}

.ai_application_col {
	text-align: start;
}

.po-platform-card {
	background: #0a1128;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

/* Subtle blue radial glow on the right side of card */
.po-platform-card::before {
	content: '';
	position: absolute;
	top: 20%;
	right: 15%;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

/* Left text content */
.po-platform-content {
	position: relative;
	z-index: 2;
	padding: 56px 48px 56px 56px;
	color: #fff;
}


/* Feature list with single gradient left line */
.po-platform-features {
	list-style: none;
	padding: 0 0 0 14px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.po-platform-features::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;

	background: linear-gradient(15.02deg,
		#3296FA 5.56%,
		#F13860 76.94%,
		#F6F17D 127.08%);

	border-radius: 2px;
}

.po-platform-features li {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: var(--fs-sm);
	color: #ffffff;
	line-height: 1.5;
}

.po-diagram-col {
	display: flex;
	flex-direction: column;
}

.po-diagram-area {
	flex: 1;
	display: flex;
}

.po-diagram-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width : 991px) {
	.feature-block-inner {
		padding: 40px 32px;
	}

	.feature-block.visual-right .feature-block-inner .row {
		flex-direction: column-reverse;
	}
}

@media (max-width : 767px) {
	.feature-block-inner {
		padding: 32px 24px;
	}

	.s7-why-header {
		margin-bottom: 0;
	}
}


/* =========================================================
ABOUT PAGE — about.css
Follows the same design language as AI-Driven Analytics
========================================================= */


/* ─── WHY SYNTES AI ──────────────────────────────────────── */
.ab-why {
	padding: 80px 0;
}

.ab-why-header {
	text-align: center;
	margin-bottom: 16px;
}

.ab-why-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--clr-blue-light);
	margin-bottom: 10px;
}

.ab-why-title {
	margin-bottom: 0;
}

.ab-why-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 32px 28px;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s, background 0.3s;
}

.ab-why-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.ab-why-card:hover {
	background: rgba(37, 99, 235, 0.08);
	border-color: rgba(37, 99, 235, 0.3);
}

.ab-why-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--clr-blue-light);
	margin-bottom: 12px;
}

.ab-why-card-desc {
	font-size: var(--fs-sm);
	color: var(--clr-text-faint);
	line-height: 1.7;
	margin: 0;
}

/* ─── STATS / EXPERTISE ──────────────────────────────────── */
.ab-stats {
	padding: 80px 0;
}

.ab-stats-card {
	background: linear-gradient(135deg, #0a0f1e 0%, #1e1b4b 100%);
	border-radius: 24px;
	padding: 64px 56px;
	text-align: center;
	border: 1px solid rgba(99, 102, 241, 0.2);
}

.ab-stats-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--clr-blue-light);
	margin-bottom: 12px;
}

.ab-stats-title {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	color: #fff;
	margin-bottom: 0;
}

.ab-stat-item {
	padding: 32px 16px;
	border-radius: 16px;
}

.ab-stat-item--mid {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-stat-number {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	color: var(--clr-blue-light);
	margin-bottom: 12px;
	line-height: 1.1;
}

.ab-stat-desc {
	font-size: var(--fs-sm);
	color: var(--clr-text-faint);
	line-height: 1.6;
	max-width: 220px;
	margin: 0 auto;
}

/* ─── VALUES ─────────────────────────────────────────────── */
.ab-values {
	padding: 80px 0;
}

.ab-values-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 16px;
}

.ab-values-title {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 16px;
}

.ab-values-desc {
	font-size: var(--fs-p);
	color: #475569;
	line-height: 1.75;
}

.ab-value-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.3s, border-color 0.3s;
}

.ab-value-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);

}

.ab-value-card:hover {
	border-color: #bfdbfe;
	box-shadow: 0 8px 32px rgba(37, 99, 235, 0.1);
}

.ab-value-card-inner {
	padding: 32px 28px;
}

.ab-value-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--clr-blue-mid);
	margin-bottom: 12px;
}

.ab-value-card-desc {
	font-size: var(--fs-sm);
	color: #64748b;
	line-height: 1.7;
	margin: 0;
}

/* ─── CTA ────────────────────────────────────────────────── */
.ab-cta {
	padding: 80px 0;
}

.ab-cta-card {
	background: linear-gradient(135deg, #0a0f1e 0%, #1e1b4b 100%);
	border-radius: 24px;
	padding: 80px 56px;
	text-align: center;
	border: 1px solid rgba(99, 102, 241, 0.2);
	position: relative;
	overflow: hidden;
}

.ab-cta-card::before {
	content: '';
	position: absolute;
	top: -60%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 200%;
	background: radial-gradient(ellipse, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

.ab-cta-title {
	font-size: clamp(28px, 3.5vw, 46px);
	font-weight: 800;
	color: #fff;
	margin-bottom: 16px;
	position: relative;
}

.ab-cta-desc {
	font-size: var(--fs-lg);
	color: var(--clr-text-faint);
	margin-bottom: 36px;
	position: relative;
}

.ab-btn-demo-dark {
	display: inline-block;
	font-size: var(--fs-md);
	font-weight: 700;
	color: #0a0f1e !important;
	background: #fff;
	border-radius: 10px;
	padding: 14px 36px;
	text-decoration: none;
	transition: background 0.2s, box-shadow 0.2s;
	position: relative;
}

.ab-btn-demo-dark:hover {
	background: #e0e7ff;
	box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}


/* ─── CAPABILITIES GRID (2×2) ────────────────────────────── */
.po-capabilities {
	padding: 80px 0;
}

.po-cap-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.po-cap-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 16px;
	padding: 40px 36px;
	transition: box-shadow 0.2s ease;
}

.po-cap-card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.po-cap-visual {
	flex-shrink: 0;
}

.po-cap-placeholder img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.po-cap-title {
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--clr-text-dark);
}

.po-cap-desc {
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--clr-text-mid);
	margin: 0;
}

@media (max-width: 767px) {
	.po-cap-grid {
		grid-template-columns: 1fr;
	}

	.po-cap-card {
		padding: 32px 24px;
	}
}

/* ═══════════════════════════════════════════════════════════
SOLUTION SINGLE  (ss-*)
═══════════════════════════════════════════════════════════ */

/* ─── Shared tokens ──────────────────────────────────────── */
.ss-eyebrow {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--clr-blue-light);
	margin-bottom: 12px;
}

.ss-eyebrow-dark {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--clr-blue-mid);
	margin-bottom: 12px;
}

.ss-section-heading {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	color: var(--clr-text-dark);
	margin-bottom: 16px;
	line-height: 1.2;
}

.ss-section-heading-white {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.2;
}

.ss-section-desc {
	color: var(--clr-text-mid);
	max-width: 780px;
	margin: 0 auto;
	text-align: start;
}

.ss-section-subtext {
	font-size: var(--fs-p);
	color: var(--clr-text-muted);
	margin-top: 8px;
}

.ss-section-desc ul {
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	list-style: none;
}

.ss-section-desc ul::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.ss-section-desc ul li {
	padding-left: 20px;
}

/* ─── Buttons ────────────────────────────────────────────── */
.ss-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	background: linear-gradient(135deg, #2563eb, #6366f1);
	color: #fff;
	font-weight: 600;
	font-size: var(--fs-md);
	border-radius: 8px;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.2s;
}

.ss-btn-primary:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: #fff;
}

.ss-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-weight: 600;
	font-size: var(--fs-md);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.ss-btn-ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.ss-btn-ghost-dark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border: 1.5px solid #d1d5db;
	color: #374151;
	font-weight: 600;
	font-size: var(--fs-md);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.ss-btn-ghost-dark:hover {
	border-color: var(--clr-blue-mid);
	color: var(--clr-blue-mid);
}

.ss-btn-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 32px;
	background: #fff;
	color: var(--clr-text-dark);
	font-weight: 700;
	font-size: var(--fs-md);
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.2s, transform 0.2s;
}

.ss-btn-white:hover {
	background: #f3f4f6;
	transform: translateY(-1px);
	color: var(--clr-text-dark);
}

/* ─── 1. Banner ──────────────────────────────────────────── */
.ss-banner {
	position: relative;
	padding: 80px 0;
	background: url(/wp-content/uploads/2026/05/Mask-group.webp);
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

.ss-banner-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 60% 50%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

.ss-banner-card {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	overflow: hidden;
}

.ss-banner-img-col {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.ss-banner-image {
	flex: 1;
	min-height: 340px;
}

.ss-banner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-banner-content {
	padding: 56px 48px;
}

.ss-banner-title {
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 20px;
}

.ss-banner-desc {
	font-size: var(--fs-lg);
	color: var(--clr-text-faint);
	line-height: 1.75;
	margin-bottom: 32px;
}

.ss-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ─── 2. Top Content ─────────────────────────────────────── */
.ss-top-content {
	padding: 80px 0;
}

.ss-top-content-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* ─── 3. Content Grid ────────────────────────────────────── */
.ss-grid {
	padding: 60px 0;
}

.ss-grid-row {
	margin-bottom: 40px;
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 16px;
	overflow: hidden;
}

.ss-grid-row:last-child {
	margin-bottom: 0;
}

.ss-grid-image {
	height: 100%;
}

.ss-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-grid-content {
	padding: 48px 44px;
}

.ss-grid-content--right {
	border-left: 1px solid #e5e7eb;
}

.ss-grid-content--left {
	border-right: 1px solid #e5e7eb;
}

.ss-grid-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 16px;
}

.ss-grid-desc {
	font-size: var(--fs-md);
	color: var(--clr-text-mid);
	line-height: 1.75;
	margin-bottom: 20px;
}

.ss-grid-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ss-grid-bullets::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.ss-grid-bullets li {
	position: relative;
	padding-left: 20px;
	font-size: 0.9rem;
	color: #374151;
	line-height: 1.6;
}

/* .ss-grid-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2563eb;
} */

/* ─── 4. Info Cards ──────────────────────────────────────── */
.ss-info-cards {
	padding: 80px 0;
}

.ss-info-cards-header {
	text-align: center;
	margin-bottom: 16px;
}

.ss-info-card {
	border-radius: 14px;
	padding: 32px 28px;
	height: 100%;
	transition: border-color 0.2s, background 0.2s;
	background: rgba(37, 99, 235, 0.08);
	border: 1px solid rgba(37, 99, 235, 0.3);
}


.ss-info-card-icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(37, 99, 235, 0.15);
	border-radius: 10px;
	margin-bottom: 20px;
	color: var(--clr-blue-light);
}

.ss-info-card-icon img {
	width: 100%;
	max-width: 50px;
}

.ss-info-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 10px;
}

.ss-info-card-desc {
	font-size: var(--fs-sm);
	color: var(--clr-text-faint);
	line-height: 1.7;
	margin: 0;
}

.ss-info-card-desc ul {
	position: relative;
	padding: 0;
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ss-info-card-desc ul::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(15.02deg, #3296FA 5.56%, #F13860 76.94%, #F6F17D 127.08%);
	border-radius: 2px;
}

.ss-info-card-desc ul li {
	padding-left: 20px;
}

/* ─── 5. Solution Cards ──────────────────────────────────── */
.ss-solution-cards {
	padding: 80px 0;
	background: var(--clr-bg-light);
}

.ss-solution-cards-header {
	text-align: center;
	margin-bottom: 16px;
}

.ss-sol-card {
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.2s;
}

.ss-sol-card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.ss-sol-card-img {
	height: 200px;
	overflow: hidden;
}

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

.ss-sol-card-body {
	padding: 24px 28px;
}

.ss-sol-card-body h5 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 10px;
}

.ss-sol-card-body p {
	font-size: 0.9rem;
	color: var(--clr-text-mid);
	line-height: 1.7;
	margin: 0;
}

/* ─── 6. Breakthrough ────────────────────────────────────── */
.ss-breakthrough {
	padding: 80px 0;
}

.ss-breakthrough-card {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	overflow: hidden;
}

.ss-breakthrough-left {
	padding: 48px 40px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	height: 100%;
}

.ss-breakthrough-title {
	font-size: clamp(22px, 2.5vw, 34px);
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.25;
}

.ss-breakthrough-intro {
	font-size: var(--fs-md);
	line-height: 1.7;
	margin: 0;
}

.ss-breakthrough-right {
	padding: 48px 40px;
}

.ss-bt-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 12px;
	padding: 24px 20px;
	height: 100%;
	transition: border-color 0.2s;
}

.ss-bt-card:hover {
	border-color: rgba(37, 99, 235, 0.4);
}

.ss-bt-card-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(37, 99, 235, 0.15);
	border-radius: 8px;
	margin-bottom: 14px;
	color: var(--clr-blue-light);
}

.ss-bt-card h6 {
	font-size: var(--fs-md);
	font-weight: 700;
	margin-bottom: 8px;
}

.ss-bt-card p {
	font-size: 0.85rem;
	line-height: 1.65;
	margin: 0;
}

/* ─── 7. Addon Cards ─────────────────────────────────────── */
.ss-addon-cards {
	padding: 80px 0;
}

.ss-addon-header {
	text-align: center;
	margin-bottom: 16px;
}

.ss-addon-card {
	background: #fff;
	border-radius: 14px;
	padding: 32px 28px;
	height: 100%;
	border-top: 4px solid transparent;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s, box-shadow 0.2s;
}

.ss-addon-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ss-addon-card--blue {
	border-top-color: var(--clr-blue-mid);
}

.ss-addon-card--indigo {
	border-top-color: #6366f1;
}

.ss-addon-card--violet {
	border-top-color: #7c3aed;
}

.ss-addon-card--cyan {
	border-top-color: #0891b2;
}

.ss-addon-card h5 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 12px;
}

.ss-addon-card p {
	font-size: 0.9rem;
	color: var(--clr-text-mid);
	line-height: 1.7;
	margin: 0;
}

/* ─── 8. Role Cards ──────────────────────────────────────── */
.ss-roles {
	padding: 80px 0;
	background: var(--clr-bg-light);
}

.ss-role-group {
	margin-bottom: 56px;
}

.ss-role-group:last-child {
	margin-bottom: 0;
}

.ss-role-group-title {
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 800;
	color: var(--clr-text-dark);
	margin-bottom: 4px;
}

.ss-role-card {
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 14px;
	padding: 28px 24px;
	height: 100%;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.ss-role-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	border-color: #dbeafe;
}

.ss-role-card-tag {
	display: inline-block;
	padding: 4px 12px;
	background: #eff6ff;
	color: var(--clr-blue-mid);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 20px;
	margin-bottom: 14px;
}

.ss-role-card h5 {
	font-size: var(--fs-p);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 10px;
}

.ss-role-card p {
	font-size: var(--fs-sm);
	color: var(--clr-text-mid);
	line-height: 1.7;
	margin: 0;
}

/* ─── 9. Related Resources ───────────────────────────────── */
.ss-related {
	padding: 80px 0;
}

.ss-related-header {
	text-align: center;
	margin-bottom: 16px;
}

.ss-resource-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	transition: box-shadow 0.2s, transform 0.2s;
}

.ss-resource-card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.ss-resource-img {
	position: relative;
	height: 200px;
	overflow: hidden;
}

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

.ss-resource-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 12px;
	background: #2563eb;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 20px;
}

.ss-resource-body {
	padding: 24px 24px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ss-resource-body h5 {
	font-size: var(--fs-p);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 10px;
	line-height: 1.4;
}

.ss-resource-body p {
	font-size: var(--fs-sm);
	color: var(--clr-text-mid);
	line-height: 1.65;
	margin-bottom: 16px;
	flex: 1;
}

.ss-resource-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--clr-blue-mid);
	text-decoration: none;
}

/* ─── 10. CTA Split ──────────────────────────────────────── */
.ss-cta-split {
	padding: 80px 0;
	background: var(--clr-bg-light);
}

.ss-cta-split-card {
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.ss-cta-split-content {
	padding: 56px 48px;
}

.ss-cta-split-title {
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	color: var(--clr-text-dark);
	margin-bottom: 16px;
	line-height: 1.2;
}

.ss-cta-split-desc {
	font-size: var(--fs-p);
	color: var(--clr-text-mid);
	line-height: 1.75;
	margin-bottom: 32px;
}

.ss-cta-split-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ss-cta-split-image {
	height: 100%;
	min-height: 320px;
}

.ss-cta-split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── 11. Bottom Banner ──────────────────────────────────── */
.ss-bottom-banner {
	padding: 80px 0;
}

.ss-bottom-banner-card {
	background: var(--clr-navy);
	border-radius: 20px;
	padding: 72px 40px;
	text-align: center;
}

.ss-bottom-banner-title {
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 800;
	color: #fff;
	margin-bottom: 16px;
	line-height: 1.2;
}

.ss-bottom-banner-desc {
	font-size: var(--fs-lg);
	color: var(--clr-text-faint);
	line-height: 1.75;
	max-width: 680px;
	margin: 0 auto 36px;
}

/* ─── Generic section padding (target .ss-section for global overrides) ─ */
@media (max-width: 991px) {
	.ss-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.ss-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* ─── Solution responsive ────────────────────────────────── */
@media (max-width: 991px) {
	.ss-banner-content {
		padding: 40px 32px;
	}

	.ss-breakthrough-left {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.ss-grid-content--right,
	.ss-grid-content--left {
		border: none;
		border-top: 1px solid #e5e7eb;
	}

	.ss-cta-split-content {
		padding: 40px 32px;
	}
}

@media (max-width: 767px) {
	.ss-banner {
		padding: 60px 0;
	}

	.ss-banner-image {
		min-height: 240px;
	}

	.ss-banner-content {
		padding: 32px 24px;
	}

	.ss-grid-content {
		padding: 32px 24px;
	}

	.ss-breakthrough-left,
	.ss-breakthrough-right {
		padding: 32px 24px;
	}

	.ss-cta-split-content {
		padding: 32px 24px;
	}

	.ss-bottom-banner-card {
		padding: 48px 24px;
	}
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991px) {
	.ab-leveling-card {
		padding: 40px 32px;
	}

	.ab-leveling-content {
		padding-right: 0;
		margin-bottom: 32px;
	}

	.ab-stats-card {
		padding: 48px 32px;
	}

	.ab-stat-item--mid {
		border-left: none;
		border-right: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.ab-cta-card {
		padding: 56px 32px;
	}
}

@media (max-width: 767px) {
	.ab-stats-card {
		padding: 40px 24px;
	}

	.ab-cta-card {
		padding: 48px 24px;
	}
}

/* ═══════════════════════════════════════════════════════════
SINGLE POST  (sp-*)
═══════════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────────── */
.sp-hero {
	position: relative;
	padding: 80px 0 64px;
	overflow: hidden;
}

.sp-hero-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 60% 30%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

.sp-hero-inner {
	position: relative;
	z-index: 1;
}

/* Categories */
.sp-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	justify-content: center;
}

.sp-cat-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	background: rgba(37, 99, 235, 0.2);
	border: 1px solid rgba(37, 99, 235, 0.35);
	color: var(--clr-blue-light);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s;
}

.sp-cat-badge:hover {
	background: rgba(37, 99, 235, 0.35);
	color: var(--clr-blue-light);
}

/* Title */
.sp-title {
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
	text-align: center;
}

/* Meta row */
.sp-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}

.sp-author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}

.sp-meta-text {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--fs-sm);
	color: var(--clr-text-faint);
}

.sp-author-name {
	font-weight: 600;
}

.sp-meta-divider {
	opacity: 0.4;
}

/* ─── Featured image ─────────────────────────────────────── */
.sp-featured {
	margin-top: -32px;
	padding-bottom: 0;
}

.sp-featured-img {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
	max-height: 520px;
}

.sp-featured-img img {
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

/* ─── Body / content ─────────────────────────────────────── */
.sp-body {
	padding: 64px 0 80px;
}

.sp-content {
	max-width: 780px;
	margin: 0 auto;
}

/* ── Prose typography ─────────────────────────────────────── */
.entry-content p {
	font-size: var(--fs-lg);
	line-height: 1.8;
	color: var(--clr-text-mid);
	margin-bottom: 1.5em;
}

.entry-content h2 {
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin: 2em 0 0.6em;
	line-height: 1.25;
}

.entry-content h3 {
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin: 1.75em 0 0.5em;
	line-height: 1.3;
}

.entry-content h4 {
	font-size: var(--fs-p-lg);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin: 1.5em 0 0.4em;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.5em 1.25em;
	padding: 0;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	font-size: var(--fs-lg);
	line-height: 1.75;
	color: var(--clr-text-mid);
	margin-bottom: 0.4em;
}

.entry-content a {
	color: var(--clr-blue-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s;
}

.entry-content a:hover {
	color: var(--clr-blue-light);
}

.entry-content strong {
	font-weight: 700;
	color: var(--clr-text-dark);
}

.entry-content em {
	font-style: italic;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 24px 28px;
	border-left: 4px solid var(--clr-blue-mid);
	background: #f0f6ff;
	border-radius: 0 12px 12px 0;
}

.entry-content blockquote p {
	font-size: var(--fs-p-lg);
	color: #1e3a5f;
	font-style: italic;
	margin: 0;
}

.entry-content img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 1.5em 0;
	display: block;
}

.entry-content figure {
	margin: 2em 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	margin-top: 8px;
}

.entry-content hr {
	border: none;
	border-top: 1px solid var(--clr-border);
	margin: 2.5em 0;
}

.entry-content code {
	font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
	font-size: 0.875em;
	background: #f3f4f6;
	color: #be123c;
	padding: 2px 6px;
	border-radius: 4px;
}

.entry-content pre {
	background: #1e293b;
	border-radius: 12px;
	padding: 24px;
	overflow-x: auto;
	margin: 1.75em 0;
}

.entry-content pre code {
	background: none;
	color: #e2e8f0;
	padding: 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75em 0;
	font-size: var(--fs-md);
}

.entry-content th {
	background: #f3f4f6;
	font-weight: 700;
	color: var(--clr-text-dark);
	padding: 10px 16px;
	text-align: left;
	border-bottom: 2px solid var(--clr-border);
}

.entry-content td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--clr-border);
	color: var(--clr-text-mid);
	vertical-align: top;
}

/* ─── Footer area ────────────────────────────────────────── */
.sp-footer-area {
	padding: 0 0 80px;
}

/* Tags */
.sp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--clr-border);
	max-width: 780px;
	margin-inline: auto;
	margin-bottom: 48px;
}

.sp-tag {
	display: inline-block;
	padding: 5px 14px;
	background: #f3f4f6;
	color: var(--clr-text-mid);
	border-radius: 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.sp-tag:hover {
	background: #dbeafe;
	color: var(--clr-blue-mid);
}

/* Post navigation */
.sp-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 780px;
	margin: 0 auto;
}

.sp-nav-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 12px;
	text-decoration: none;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.sp-nav-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border-color: #bfdbfe;
}

.sp-nav-card--next {
	text-align: right;
}

.sp-nav-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--clr-blue-mid);
}

.sp-nav-card--next .sp-nav-label {
	justify-content: flex-end;
}

.sp-nav-title {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--clr-text-dark);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Single post responsive ─────────────────────────────── */
@media (max-width: 767px) {
	.sp-hero {
		padding: 60px 0 48px;
	}

	.sp-featured {
		margin-top: -20px;
	}

	.sp-body {
		padding: 48px 0 60px;
	}

	.sp-post-nav {
		grid-template-columns: 1fr;
	}

	.sp-nav-card--next {
		text-align: left;
	}

	.sp-nav-card--next .sp-nav-label {
		justify-content: flex-start;
	}
}

/* ==========================================================================
Feature Block Post Slider  (section-feature-block-post.php)
========================================================================== */

.feature-block-post-section {
	padding: 56px 0;
}

.fbp-slider-wrap {
	position: relative;
}

/* hide arrows when only 1 post */
.fbp-slider-wrap--single .fbp-arrow {
	display: none;
}

/* Arrow buttons */
.fbp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	color: #64748b;
	padding: 0;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fbp-arrow:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #1e293b;
}

.fbp-prev {
	left: -56px;
}

.fbp-next {
	right: -56px;
}

/* Dots */
.fbp-slider .slick-dots {
	display: flex !important;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 32px 0 0;
}

.fbp-slider .slick-dots li button {
	width: 8px;
	height: 8px;
	background: #cbd5e1;
	border: none;
	border-radius: 50%;
	padding: 0;
	font-size: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.fbp-slider .slick-dots li.slick-active button {
	background: var(--clr-blue);
	transform: scale(1.3);
}

/* Slide content inherits existing .feature-block-inner, .s3-left, .s3-right */
.fbp-slide .feature-block-inner {
	padding: 56px 48px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 16px;
}

@media (max-width: 1199.98px) {
	.fbp-prev {
		left: -20px;
	}

	.fbp-next {
		right: -20px;
	}
}

@media (max-width: 991.98px) {

	.fbp-prev,
	.fbp-next {
		display: none;
	}

	.fbp-slide .feature-block-inner {
		padding: 40px 32px;
	}
}

@media (max-width: 767.98px) {
	.fbp-slide .feature-block-inner {
		padding: 32px 24px;
	}
}

/* ==========================================================================
Split Content + Form  (section-split-form.php)
========================================================================== */

.bd-section {
	padding-bottom: 80px;
}

.bd-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* ── Shared card shell ─────────────────────────────────── */
.bd-info-card,
.bd-form-card {
	background: rgb(255 255 255 / 50%);
	border-radius: 20px;
	padding: 48px 40px;
	border: 1px solid rgba(15, 23, 42, 0.07);
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

/* ── Left card content ─────────────────────────────────── */
.bd-panel-headline {
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 700;
	color: var(--clr-text-dark);
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin-bottom: 14px;
}

.bd-panel-subhead {
	font-size: var(--fs-p);
	color: var(--clr-text-muted);
	line-height: 1.7;
	margin-bottom: 28px;
}

/* ── Section labels ────────────────────────────────────── */
.bd-section-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--clr-text-faint);
	margin-bottom: 16px;
}

/* ── Expect list ───────────────────────────────────────── */
.bd-expect-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bd-expect-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bd-expect-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f0f6ff;
	border: 1px solid rgba(50, 150, 250, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bd-expect-icon svg {
	width: 16px;
	height: 16px;
	stroke: var(--clr-blue);
}

.bd-expect-text {
	flex: 1;
	padding-top: 6px;
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	line-height: 1.6;
}

.bd-expect-text strong {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--clr-text-dark);
	margin-bottom: 3px;
	line-height: 1.4;
}

/* ── Divider ───────────────────────────────────────────── */
.bd-divider {
	border: 0;
	border-top: 1px solid var(--clr-border);
	margin: 28px 0;
}

/* ── Proof grid ────────────────────────────────────────── */
.bd-proof-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.bd-proof-card {
	background: #fff;
	border: 1px solid var(--clr-border);
	border-radius: 12px;
	padding: 18px 16px;
}

.bd-proof-stat {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	color: var(--clr-blue);
	letter-spacing: -1px;
	line-height: 1.1;
	margin-bottom: 6px;
}

.bd-proof-label {
	font-size: 12px;
	color: var(--clr-text-muted);
	line-height: 1.5;
	margin-bottom: 0;
}

/* ── Quote block ───────────────────────────────────────── */
.bd-quote-block {
	background: #f8fafc;
	border-left: 3px solid var(--clr-blue);
	border-radius: 0 10px 10px 0;
	padding: 16px 18px;
}

.bd-quote-text {
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--clr-text-mid);
	line-height: 1.65;
	margin-bottom: 8px;
}

.bd-quote-attr {
	font-size: 12px;
	color: var(--clr-text-muted);
	margin-bottom: 0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.bd-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 767.98px) {

	.bd-info-card,
	.bd-form-card {
		padding: 32px 24px;
	}

	.bd-proof-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
WPForms — global styles applied to every .wpforms-container on the site
========================================================================== */

/* ── Container reset ───────────────────────────────────── */
.wpforms-container {
	margin: 0 !important;
}

/* ── Labels ────────────────────────────────────────────── */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label legend {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	margin-bottom: 6px;
	display: block;
	float: none;
	width: auto;
}

.wpforms-container .wpforms-required-label {
	color: #e53935;
	margin-left: 2px;
}

/* ── Text / Email / Tel inputs ─────────────────────────── */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container input[type="password"] {
	font-size: 14px !important;
	color: #111827 !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	width: 100% !important;
	height: auto !important;
	box-sizing: border-box !important;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="password"]:focus {
	border-color: #4361EE !important;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1) !important;
}

/* ── Textarea ──────────────────────────────────────────── */
.wpforms-container textarea {
	font-size: 14px !important;
	color: #111827 !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
	resize: vertical !important;
}

.wpforms-container textarea:focus {
	border-color: #4361EE !important;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1) !important;
}

/* ── Select ────────────────────────────────────────────── */
.wpforms-container select {
	font-size: 14px !important;
	color: #111827 !important;
	background-color: #ffffff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	padding: 10px 36px 10px 14px !important;
	outline: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 100% !important;
	cursor: pointer !important;
	height: auto !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
}

.wpforms-container select:focus {
	border-color: #4361EE !important;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1) !important;
}

/* ── Name field row (First / Last side by side) ─────────── */
.wpforms-container .wpforms-field-name .wpforms-field-row {
	display: flex !important;
	gap: 12px !important;
}

.wpforms-container .wpforms-field-name .wpforms-field-row-block {
	flex: 1 !important;
	min-width: 0 !important;
}

/* ── Sub-labels ────────────────────────────────────────── */
.wpforms-container .wpforms-field-sublabel {
	font-size: 11px !important;
	color: #9ca3af !important;
	margin-top: 4px !important;
	display: block !important;
	font-weight: 400 !important;
}

/* ── Checkbox & Radio fields ───────────────────────────── */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wpforms-container .wpforms-field-checkbox ul li,
.wpforms-container .wpforms-field-radio ul li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-bottom: 8px !important;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px !important;
	accent-color: #4361EE !important;
	cursor: pointer !important;
}

.wpforms-container .wpforms-field-label-inline {
	font-size: 12.5px !important;
	line-height: 1.6 !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
	cursor: pointer !important;
}

/* ── Submit button ─────────────────────────────────────── */
.wpforms-container .wpforms-submit-container {
	margin-top: 8px !important;
}

.wpforms-container .wpforms-submit {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	background: var(--clr-blue) !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 13px 36px !important;
	cursor: pointer !important;
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
	box-shadow: 0 4px 16px rgba(67, 97, 238, 0.3) !important;
	height: auto !important;
}

.wpforms-container .wpforms-submit:hover {
	background: #0E1632 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(67, 97, 238, 0.35) !important;
}

/* ── Error states ──────────────────────────────────────── */
.wpforms-container .wpforms-error {
	font-size: 12px !important;
	color: #e53935 !important;
	margin-top: 4px !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
	border-color: #e53935 !important;
}

/* ── Confirmation message ──────────────────────────────── */
.wpforms-container .wpforms-confirmation-container-full {
	background: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	font-size: 14px !important;
	color: #166534 !important;
}

/* ── Spinner ───────────────────────────────────────────── */
.wpforms-container .wpforms-submit-spinner {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
}

/* ── Mobile: stack half-width columns ──────────────────── */
@media (max-width: 767px) {
	.wpforms-container .wpforms-field.wpforms-one-half,
	.wpforms-container .wpforms-field.wpforms-one-half.wpforms-first {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================================
Contact Option Cards  (section-contact-options.php)
========================================================================== */

.cu-options-section {}

.cu-options-header {
	text-align: center;
	margin-bottom: 52px;
}

.cu-options-heading {
	letter-spacing: -0.8px;
	margin-bottom: 12px;
}

.cu-options-subheading {
	color: var(--clr-text-muted);
	max-width: 600px;
	margin: 0 auto;
}

.cu-options-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cu-option-card {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 16px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cu-option-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.cu-option-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #eef2ff;
	color: #4361EE;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.cu-option-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--clr-text-dark);
	letter-spacing: -0.3px;
	margin-bottom: 10px;
}

.cu-option-desc {
	font-size: var(--fs-sm);
	color: var(--clr-text-muted);
	line-height: 1.7;
	margin-bottom: 24px;
	flex: 1;
}

.cu-option-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #4361EE;
	text-decoration: none;
	margin-top: auto;
	transition: color 0.2s ease, gap 0.2s ease;
}

.cu-option-link:hover {
	color: var(--clr-blue-dark);
	gap: 9px;
}

@media (max-width: 991.98px) {
	.cu-options-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.cu-options-section {}

	.cu-options-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
Contact Options — modal button + modal overlay (section-contact-options.php)
========================================================================== */

.cu-option-modal-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	padding: 0;
	background: none;
	border: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #4361EE;
	cursor: pointer;
	transition: color 0.2s ease, gap 0.2s ease;
	white-space: nowrap;
}

.cu-option-modal-btn:hover {
	color: var(--clr-blue-dark);
	gap: 9px;
}

.cu-option-modal-btn:focus-visible {
	outline: 3px solid rgba(67, 97, 238, 0.4);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Overlay */
.cu-form-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 15, 40, 0.55);
	backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cu-form-modal-overlay[hidden] {
	display: none;
}

/* Modal box */
.cu-form-modal {
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(10, 15, 40, 0.2);
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 48px 40px 40px;
	animation: cuModalIn 0.22s ease;
}

@keyframes cuModalIn {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Close button */
.cu-form-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: transparent;
	color: var(--clr-text-muted, #64748b);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cu-form-modal-close:hover {
	background: #f1f5f9;
	color: var(--clr-text-dark, #0f172a);
}

.cu-form-modal-close:focus-visible {
	outline: 3px solid rgba(67, 97, 238, 0.4);
	outline-offset: 2px;
}

/* Form body */
.cu-form-modal-body {
	min-height: 80px;
}

@media (max-width: 575.98px) {
	.cu-form-modal {
		padding: 40px 24px 32px;
	}
}

/* ==========================================================================
Team Grid  (section-team-grid.php)
========================================================================== */

.lt-team-section {}

.lt-team-header {
	text-align: center;
	margin-bottom: 56px;
}

.lt-team-heading {
	letter-spacing: -0.8px;
	margin-bottom: 12px;
}

.lt-team-subheading {
	color: var(--clr-text-muted);
	max-width: 600px;
	margin: 0 auto;
}

.lt-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--lt-cols, 4), 1fr);
	gap: 28px;
}

.lt-member-card {
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.05);
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lt-member-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

.lt-member-avatar-area {
	background: #f0f3f8;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 0 36px;
	position: relative;
}

.lt-member-avatar-area::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #3296FA 0%, #6366F1 50%, #8B5CF6 100%);
	opacity: 0.6;
}

.lt-member-avatar {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: #dce5f0;
	border: 4px solid #ffffff;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lt-member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-member-body {
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.lt-member-name {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: #111827;
	margin-bottom: 6px;
}

.lt-member-role {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #4361EE;
	margin-bottom: 16px;
}

.lt-member-bio {
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.7;
	color: #6b7280;
	margin-bottom: 20px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lt-member-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid rgba(15, 23, 42, 0.1);
	color: #6b7280;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	margin-top: auto;
}

.lt-member-linkedin:hover {
	background: #0A66C2;
	border-color: #0A66C2;
	color: #ffffff;
}

@media (max-width: 1199.98px) {
	.lt-team-grid {
		gap: 22px;
	}
}

@media (max-width: 991.98px) {
	.lt-team-section {}

	.lt-team-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px;
	}
}

@media (max-width: 575.98px) {
	.lt-team-section {}

	.lt-team-grid {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}

	.lt-member-avatar {
		width: 96px;
		height: 96px;
	}

	.lt-member-name {
		font-size: 17px;
	}

	.lt-member-bio {
		font-size: 13px;
	}
}

/* ==========================================================================
Team Member Modal
========================================================================== */

.lt-team-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px 16px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lt-team-modal-overlay:not([hidden]) {
	opacity: 1;
}

.lt-team-modal-overlay[hidden] {
	display: none;
}

.lt-team-modal {
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
	max-width: 780px;
	width: 100%;
	display: flex;
	gap: 40px;
	padding: 48px 44px;
	position: relative;
	transform: translateY(16px);
	transition: transform 0.25s ease;
	max-height: 90vh;
	overflow-y: auto;
}

.lt-team-modal-overlay:not([hidden]) .lt-team-modal {
	transform: translateY(0);
}

.lt-modal-close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
	padding: 0;
}

.lt-modal-close:hover {
	background: #f3f4f6;
	color: #111827;
}

/* Left column */
.lt-modal-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 160px;
	text-align: center;
}

.lt-modal-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 4px solid #3296FA;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dce5f0;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.lt-modal-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-modal-avatar-placeholder svg {
	width: 64px;
	height: 64px;
}

.lt-modal-name {
	font-weight: 700;
	font-size: 17px;
	color: #111827;
	margin-bottom: 6px;
	line-height: 1.3;
}

.lt-modal-role {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #4361EE;
	margin-bottom: 20px;
}

.lt-modal-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(15, 23, 42, 0.12);
	color: #6b7280;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	margin-top: auto;
}

.lt-modal-linkedin:hover {
	background: #0A66C2;
	border-color: #0A66C2;
	color: #ffffff;
}

/* Right column */
.lt-modal-right {
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding-top: 4px;
}

.lt-modal-bio {
	font-size: 15px;
	line-height: 1.75;
	color: #374151;
}

.lt-modal-bio p {
	margin-bottom: 1em;
}

.lt-modal-bio p:last-child {
	margin-bottom: 0;
}

.lt-modal-bio ul,
.lt-modal-bio ol {
	padding-left: 1.4em;
	margin-bottom: 1em;
}

.lt-modal-bio li {
	margin-bottom: 0.4em;
}

.lt-modal-bio strong {
	font-weight: 700;
	color: #111827;
}

.lt-modal-bio a {
	color: #4361EE;
	text-decoration: underline;
}

/* Card click affordance */
.lt-member-card {
	cursor: pointer;
}

@media (max-width: 639.98px) {
	.lt-team-modal {
		flex-direction: column;
		align-items: center;
		padding: 36px 24px 32px;
		gap: 24px;
	}

	.lt-modal-left {
		width: 100%;
	}

	.lt-modal-right {
		padding-top: 0;
	}
}

/* ==========================================================================
Context Frame Visualization  (section-context-frame.php)
Ported from home.css — browser window, capability cards, sphere,
industry rotator, and footer band. Available on all pages via style.css.
========================================================================== */

.cf-section {}

.hp-context-frame {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 30px 60px -20px rgba(99, 102, 241, 0.32),
		0 18px 40px -16px rgba(243, 192, 207, 0.4),
		0 6px 14px rgba(15, 23, 42, 0.06);
	max-width: 85%;
	margin: auto;
}

.hp-browser-chrome {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: linear-gradient(180deg, #FBFAF6 0%, #F4F1EB 100%);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.hp-browser-dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hp-browser-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 2px rgba(15, 23, 42, 0.18);
}

.hp-browser-dot--red {
	background: linear-gradient(180deg, #FF6058, #E14A40);
}

.hp-browser-dot--yellow {
	background: linear-gradient(180deg, #FFBD2E, #E3A116);
}

.hp-browser-dot--green {
	background: linear-gradient(180deg, #28C940, #1BA72E);
}

.hp-browser-url {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 999px;
	font-size: 12.5px;
	color: #475569;
	letter-spacing: 0.01em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(15, 23, 42, 0.04);
	min-width: 260px;
	justify-content: center;
}

.hp-browser-url svg {
	color: #6b7280;
	flex-shrink: 0;
}

.hp-browser-url-host {
	font-weight: 600;
	color: #0f172a;
}

.hp-browser-body {
	position: relative;
	padding: 56px 48px 40px;
	background:
		radial-gradient(ellipse 700px 400px at 50% 35%, rgba(216, 220, 255, 0.4) 0%, transparent 60%),
		radial-gradient(ellipse 500px 400px at 90% 50%, rgba(195, 175, 245, 0.25) 0%, transparent 55%),
		radial-gradient(ellipse 500px 400px at 8% 50%, rgba(243, 218, 199, 0.22) 0%, transparent 55%),
		#ffffff;
	overflow: hidden;
}

.hp-context-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 760 / 480;
	margin: 0 auto;
	max-width: 920px;
}

@media (max-width: 767.98px) {
	.hp-context-stage {
		aspect-ratio: 1 / 1;
	}

	.hp-context-frame {
		max-width: 100%;
		margin: auto;
	}

	.hp-cap-card--tr,
	.hp-cap-card--tl {
		top: 0 !important;
		display: flex !important;
		flex-direction: column;
	}

	.hp-cap-card--bl,
	.hp-cap-card--br {
		bottom: 0 !important;
		display: flex !important;
		flex-direction: column;
	}
}

@media (max-width: 575.98px) {
	.hp-context-stage {
		aspect-ratio: 1 / 1.25;
	}
}

.hp-context-arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.hp-arc {
	fill: none;
	stroke: url(#hp-arc-grad);
	stroke-width: 1.6;
	stroke-dasharray: 4 8;
	opacity: 0.85;
	animation: hp-arc-dash 14s linear infinite;
}

@keyframes hp-arc-dash {
	to {
		stroke-dashoffset: -200;
	}
}

.hp-arc-pulse {
	filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.9));
}

.hp-cap-card {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 1.2vw, 12px);
	width: clamp(125px, 30%, 240px);
	padding: clamp(9px, 1.2vw, 14px) clamp(11px, 1.4vw, 16px);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(99, 102, 241, 0.14);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 32px -8px rgba(99, 102, 241, 0.22);
	z-index: 3;
	animation: hp-cap-float 6s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-cap-card:hover {
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 20px 40px -8px rgba(99, 102, 241, 0.32), 0 0 0 4px rgba(99, 102, 241, 0.06);
}

@keyframes hp-cap-float {

	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -6px;
	}
}

.hp-cap-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(24px, 2.4vw, 30px);
	height: clamp(24px, 2.4vw, 30px);
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, rgba(56, 189, 248, 0.14) 100%);
	border: 1px solid rgba(99, 102, 241, 0.18);
	color: #4361EE;
	flex-shrink: 0;
}

.hp-cap-card-text h5 {
	font-weight: 700;
	font-size: clamp(11px, 1.25vw, 14px);
	line-height: 1.25;
	color: #0f172a;
	margin: 0 0 4px;
	letter-spacing: -0.1px;
}

.hp-cap-card-text p {
	font-weight: 400;
	font-size: clamp(9.5px, 1.1vw, 12.5px);
	line-height: 1.4;
	color: #6b7280;
	margin: 0;
}

.hp-cap-card--tl {
	top: 6%;
	left: 0;
}

.hp-cap-card--tr {
	top: 6%;
	right: 0;
}

.hp-cap-card--bl {
	bottom: 6%;
	left: 0;
}

.hp-cap-card--br {
	bottom: 6%;
	right: 0;
}

.hp-sphere {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(150px, 30%, 280px);
	aspect-ratio: 1;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.hp-sphere-aura {
	position: absolute;
	inset: -28%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(125, 211, 252, 0.35) 0%, rgba(56, 189, 248, 0.08) 45%, transparent 70%);
	filter: blur(8px);
	animation: hp-sphere-aura 4.6s ease-in-out infinite;
	pointer-events: none;
}

.hp-sphere-aura--2 {
	inset: -16%;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
	animation-delay: -2.3s;
}

@keyframes hp-sphere-aura {

	0%,
	100% {
		opacity: 0.55;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

.hp-sphere-orb {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(186, 230, 253, 0.85) 0%, rgba(56, 189, 248, 0.55) 22%, rgba(37, 99, 235, 0.95) 55%, #0A1F6B 90%);
	box-shadow:
		0 0 60px rgba(56, 189, 248, 0.55),
		0 0 0 1px rgba(125, 211, 252, 0.35) inset,
		0 30px 60px -10px rgba(8, 21, 80, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	animation: hp-sphere-breathe 5.4s ease-in-out infinite;
}

@keyframes hp-sphere-breathe {

	0%,
	100% {
		box-shadow: 0 0 60px rgba(56, 189, 248, 0.55), 0 0 0 1px rgba(125, 211, 252, 0.35) inset, 0 30px 60px -10px rgba(8, 21, 80, 0.5);
	}

	50% {
		box-shadow: 0 0 90px rgba(56, 189, 248, 0.85), 0 0 0 1px rgba(125, 211, 252, 0.5) inset, 0 30px 60px -10px rgba(8, 21, 80, 0.5);
	}
}

.hp-sphere-shine {
	position: absolute;
	top: 8%;
	left: 12%;
	width: 36%;
	height: 26%;
	background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
	filter: blur(2px);
	border-radius: 50%;
	pointer-events: none;
	animation: hp-sphere-shine-drift 9s ease-in-out infinite alternate;
}

@keyframes hp-sphere-shine-drift {
	0% {
		transform: translate(0, 0) rotate(-4deg);
	}

	100% {
		transform: translate(6px, -3px) rotate(4deg);
	}
}

.hp-sphere-content {
	position: relative;
	text-align: center;
	padding: 0 clamp(10px, 1.6vw, 22px);
	z-index: 2;
}

.hp-sphere-title {
	font-weight: 700;
	font-size: clamp(11px, 1.4vw, 16px);
	line-height: 1.2;
	color: #ffffff;
	margin: 0 0 clamp(6px, 0.8vw, 10px);
	text-shadow: 0 2px 8px rgba(8, 21, 80, 0.6);
}

.hp-sphere-desc {
	font-weight: 400;
	font-size: clamp(9px, 1vw, 11.5px);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	text-shadow: 0 1px 4px rgba(8, 21, 80, 0.4);
}

.hp-context-industry {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px auto 0;
	text-align: center;
	position: relative;
	z-index: 3;
}

.hp-context-industry-pre,
.hp-context-industry-post {
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	color: #475569;
}

.hp-context-industry-rotator {
	display: inline-grid;
	grid-template-areas: "industry";
	vertical-align: baseline;
	line-height: 1.1;
	overflow: hidden;
}

.hp-industry {
	grid-area: industry;
	white-space: nowrap;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.5px;
	background: linear-gradient(95deg, #8B5CF6 0%, #6366F1 50%, #3B5BDB 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0;
	transform: translateY(40%);
	animation: hp-industry-cycle 18s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes hp-industry-cycle {
	0% {
		opacity: 0;
		transform: translateY(40%);
	}

	3% {
		opacity: 1;
		transform: translateY(0);
	}

	16% {
		opacity: 1;
		transform: translateY(0);
	}

	19% {
		opacity: 0;
		transform: translateY(-40%);
	}

	100% {
		opacity: 0;
		transform: translateY(-40%);
	}
}

.hp-context-foot {
	position: relative;
	z-index: 2;
	margin-top: 56px;
	text-align: center;
}

.hp-context-brands {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 56px;
	margin-bottom: 28px;
}

.hp-brand {
	height: 26px;
	width: auto;
	max-width: 110px;
	filter: grayscale(1) opacity(0.62);
	transition: filter 0.25s ease, transform 0.25s ease;
}

.hp-brand:hover {
	filter: grayscale(0) opacity(1);
	transform: translateY(-2px);
}

.hp-context-types {
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.22em;
	color: #475569;
	margin: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hp-context-sep {
	color: rgba(99, 102, 241, 0.45);
	font-weight: 400;
}

.hp-context-more {
	background: linear-gradient(95deg, #8B5CF6, #3B5BDB);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hp-context-clouds {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
	padding: 16px 32px;
	background: #ffffff;
	border: 1px solid rgba(99, 102, 241, 0.1);
	border-radius: 14px;
	box-shadow: 0 14px 30px rgba(99, 102, 241, 0.12);
}

.hp-cloud {
	height: 28px;
	width: auto;
	flex-shrink: 0;
}

.hp-cloud-label {
	font-weight: 600;
	font-size: 18px;
	color: #5f6368;
	letter-spacing: -0.3px;
}

.hp-cloud-label--azure {
	color: #0078D4;
}

.hp-context-clouds-sep {
	width: 1px;
	height: 24px;
	background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 991.98px) {
	.hp-browser-body {
		padding: 36px 22px 28px;
	}

	.hp-browser-url {
		min-width: 0;
		font-size: 11.5px;
		padding: 5px 12px;
	}

	.hp-context-brands {
		gap: 32px;
	}
}

@media (max-width: 575.98px) {
	.hp-browser-body {
		padding: 26px 14px 22px;
	}

	.hp-industry {
		font-size: 11px;
	}

	.hp-context-industry-pre,
	.hp-context-industry-post {
		font-size: 11px;
	}

	.hp-context-brands {
		gap: 20px;
	}

	.hp-brand {
		height: 20px;
	}

	.hp-context-types {
		font-size: 11px;
		gap: 10px;
		letter-spacing: 0.16em;
	}

	.hp-context-clouds {
		padding: 12px 16px;
		gap: 14px;
	}

	.hp-cloud {
		height: 20px;
	}

	.hp-cloud-label {
		font-size: 14px;
	}
}

/* ==========================================================================
Platform Stack Section  (section-architecture.php)
Ported from home.css .hp-stack-section so it's available on all pages.
========================================================================== */

.hp-stack-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hp-stack-glow {
	position: absolute;
	top: -10%;
	right: -8%;
	width: 760px;
	height: 760px;
	background:
		radial-gradient(circle, rgba(243, 192, 207, 0.45) 0%, transparent 55%),
		radial-gradient(circle, rgba(195, 175, 245, 0.32) 0%, transparent 70%);
	filter: blur(60px);
	z-index: -1;
	pointer-events: none;
}

.hp-stack-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 80px;
	align-items: center;
}

.hp-stack-eyebrow {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: #4361EE;
	margin-bottom: 18px;
}

.hp-stack-headline {
	font-weight: 600;
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -1.6px;
	color: #111827;
	margin-bottom: 24px;
	max-width: 520px;
}

.hp-stack-headline-accent {
	display: block;
	background: linear-gradient(95deg, #8B5CF6 0%, #6366F1 35%, #3B5BDB 70%, #1e293b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hp-stack-sub {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
	color: #6b7280;
	max-width: 440px;
	margin-bottom: 36px;
}

.hp-stack-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	text-decoration: none;
	background: #3296FA;
	border-radius: 50px;
	box-shadow: 0 6px 18px rgba(50, 150, 250, 0.28);
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.25s ease,
		background 0.25s ease;
}

.hp-stack-btn:hover {
	transform: translateY(-2px);
	background: #0E1632;
	box-shadow: 0 12px 28px rgba(50, 150, 250, 0.38);
	color: #ffffff;
}

.hp-stack-btn svg {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.hp-stack-btn:hover svg {
	transform: translateX(3px);
}

.hp-stack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin-left: auto;
}

.hp-stack-row {
	display: grid;
	gap: 10px;
}

.hp-stack-row--2x2 {
	grid-template-columns: 1fr 1fr;
}

.hp-stack-row--single {
	grid-template-columns: 1fr;
}

.hp-stack-connector {
	position: relative;
	height: 22px;
}

.hp-stack-connector::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background: linear-gradient(180deg, rgba(99, 102, 241, 0.45) 0%, rgba(99, 102, 241, 0.1) 100%);
}

.hp-stack-connector::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	width: 1px;
	background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.95) 50%, transparent 100%);
	animation: hp-stack-sweep 4.2s ease-in-out infinite;
}

@keyframes hp-stack-sweep {
	0% {
		transform: translateX(-50%) translateY(-100%);
		opacity: 0;
	}

	20% {
		opacity: 0.9;
	}

	70% {
		transform: translateX(-50%) translateY(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(-50%) translateY(100%);
		opacity: 0;
	}
}

/* ── Pills ── */
.hp-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	font-weight: 500;
	font-size: 14px;
	color: #111827;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		background 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	cursor: default;
}

.hp-pill:hover {
	transform: translateY(-2px);
	border-color: rgba(99, 102, 241, 0.35);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* When pill is an <a> tag — strip browser link defaults */
a.hp-pill {
	text-decoration: none;
	cursor: pointer;
}

a.hp-pill--ghost {
	color: #111827;
}

a.hp-pill--primary {
	color: #ffffff;
}

a.hp-pill--lavender {
	color: #2D2F66;
}

a.hp-pill--deep {
	color: #ffffff;
}

/* Icon wrapper that wraps admin-pasted SVG inside a pill */
.hp-pill-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: #4361EE;
	opacity: 0.9;
}

.hp-pill-icon svg {
	width: 16px;
	height: 16px;
}

.hp-pill--primary .hp-pill-icon {
	color: #ffffff;
	opacity: 1;
}

.hp-pill--lavender .hp-pill-icon {
	color: #4F52C9;
	opacity: 1;
}

.hp-pill--deep .hp-pill-icon {
	color: rgba(255, 255, 255, 0.85);
	opacity: 1;
}

.hp-pill--full {
	width: 100%;
	justify-content: flex-start;
	padding: 16px 22px;
	font-size: 15px;
	border-radius: 14px;
}

.hp-pill--ghost {
	background: #ffffff;
	border-color: rgba(15, 23, 42, 0.08);
}

.hp-pill--primary {
	background: linear-gradient(180deg, #3B5BFF 0%, #2A3FCC 100%);
	border-color: rgba(120, 140, 255, 0.5);
	color: #ffffff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 14px 28px -10px rgba(59, 91, 255, 0.4);
	position: relative;
}

.hp-pill--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 30px rgba(88, 118, 255, 0.5);
	opacity: 0.4;
	pointer-events: none;
	animation: hp-pill-glow 3.6s ease-in-out infinite;
}

@keyframes hp-pill-glow {

	0%,
	100% {
		opacity: 0.25;
	}

	50% {
		opacity: 0.55;
	}
}

.hp-pill--primary:hover {
	background: linear-gradient(180deg, #5876FF 0%, #3B5BFF 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.24) inset,
		0 20px 36px -8px rgba(59, 91, 255, 0.5);
}

.hp-pill--lavender {
	background: linear-gradient(180deg, #E7E8FF 0%, #D5D6F9 100%);
	border-color: rgba(146, 152, 234, 0.35);
	color: #2D2F66;
}

.hp-pill--lavender:hover {
	background: linear-gradient(180deg, #EFF0FF 0%, #DDDEFC 100%);
	border-color: rgba(146, 152, 234, 0.55);
}

.hp-pill--deep {
	background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
	border-color: rgba(15, 23, 42, 0.3);
	color: #ffffff;
}

.hp-pill--deep:hover {
	background: linear-gradient(180deg, #243149 0%, #142036 100%);
}

@media (max-width: 991.98px) {
	.hp-stack-section {
		padding: 60px 0;
	}

	.hp-stack-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.hp-stack {
		margin: 0 auto;
	}

	.hp-stack-headline {
		font-size: 34px;
	}
}

@media (max-width: 575.98px) {
	.hp-stack-row--2x2 {
		grid-template-columns: 1fr;
	}

	.hp-pill {
		font-size: 13px;
		padding: 11px 14px;
		white-space: normal;
	}

	.hp-pill--full {
		padding: 14px 18px;
		font-size: 14px;
	}
}

/* ==========================================================================
Architecture Diagram Section
========================================================================== */

.home_architecture {
	background-image: url(/syntesai/wp-content/uploads/2026/05/Platform-Overview-BG-scaled-1.webp);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding: 100px 0;
}

.home_architecture h2 {
	color: #fff;
	max-width: 80%;
}

/* Diagram layout */
.diagram-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.diagram-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.diagram-row a {
	padding: 15px 10px;
	border: 1px solid #fff;
	border-radius: 10px;
	color: #fff;
	transition: 0.3s;
}

.diagram-row a:first-child {
	width: 36%;
}

.diagram-row a:hover {
	background-image: linear-gradient(90deg, #343ced 30%, #343ced00);
	transition: 0.3s;
	transform: scale(1.1);
}

.diagram-row a img,
.diagram-row_middle img {
	width: 100%;
	max-width: 20px;
	margin-right: 4px;
}

/* Middle row */
.diagram-row_middle {
	width: 100%;
	gap: 10px;
	display: flex;
	flex-direction: column;
}

.diagram-row_middle a {
	display: flex;
	width: 100%;
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 15px 30px;
	text-align: center;
	justify-content: center;
	color: #fff;
}

.diagram-row_middle a:nth-child(1),
.diagram-row_middle a:nth-child(2) {
	background-image: linear-gradient(90deg, #343ced 30%, #343ced00);
}

.diagram-row_middle a:nth-child(3) {
	background-color: #a5a8f7;
	color: #1a1e73;
}

.diagram-row_middle a:hover {
	background: transparent !important;
	color: #fff !important;
}

.diagram-row_middle a:nth-child(3):hover img {
	filter: invert(1) brightness(9);
}

/* Connector line between rows */
.diagram-connector {
	width: 3px;
	height: 30px;
	background-color: #fff;
}

/* Utility item variants (kept for backwards compat) */
.diagram-item {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	background-color: rgba(78, 86, 212, 0.2);
	backdrop-filter: blur(5px);
	text-align: center;
}

.diagram-item-main {
	width: 100%;
	max-width: 400px;
	padding: 1rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 500;
	background-color: #4f56d4;
	border: none;
}

.diagram-item-main.level-2 {
	background-color: #3b42b8;
}

.diagram-item-main.level-3 {
	background-color: #a4affb;
	color: #0d103b;
	border: 1px solid #4f56d4;
}

/* --------------------------------------------------------------------------
Responsive — tablet (768px–1199px)
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
	.home_architecture h2 {
		max-width: 100%;
	}

	.diagram-wrapper {
		margin-top: 50px;
	}

	.diagram-wrapper .diagram-row a:first-child {
		width: 30%;
	}
}

/* --------------------------------------------------------------------------
Responsive — below 1199px
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.home_architecture h2 {
		max-width: 100%;
	}

	.diagram-wrapper {
		margin-top: 50px;
	}
}

/* ============================================================
SINGLE CAREER PAGE  (scp- prefix)
Reuses .btn-demo, .s7-cta, .s7-why, .s7-highlights from style.css
============================================================ */


/* ============================================================
BACK NAV BAR
============================================================ */
.scp-back-bar {
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	padding: 14px 0;
}

.scp-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: #000000;
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

.scp-back-link:hover {
	color: var(--clr-blue);
	gap: 9px;
}


/* ============================================================
MAIN SECTION
============================================================ */
.scp-section {
	padding: 52px 0 0 0;
}

/* Two-column layout */
.scp-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	align-items: start;
}


/* ============================================================
LEFT: MAIN CONTENT
============================================================ */
.scp-main {
	min-width: 0;
}

/* Job header */
.scp-header {
	margin-bottom: 48px;
}

.scp-dept-badge {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #4361EE;
	background: #eef2ff;
	border-radius: 6px;
	padding: 4px 10px;
	margin-bottom: 14px;
}

.scp-job-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -1.5px;
	color: #111827;
	margin-bottom: 18px;
}

.scp-meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.scp-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12.5px;
	border-radius: 999px;
	padding: 5px 12px;
}

.scp-tag-loc {
	color: #374151;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.1);
}

.scp-tag-remote {
	color: #0369a1;
	background: #e0f2fe;
}

.scp-tag-type {
	color: #047857;
	background: #d1fae5;
}

/* Apply button group */
.scp-apply-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Apply button override — smaller variant */
.scp-apply-top {
	font-size: 14px !important;
	padding: 12px 28px !important;
}

/* LinkedIn button */
.scp-linkedin-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
	background: #0A66C2;
	border-radius: 50px;
	padding: 12px 24px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 14px rgba(10, 102, 194, 0.3);
	white-space: nowrap;
}

.scp-linkedin-btn:hover {
	background: #004182;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4);
	color: #ffffff;
}


/* ============================================================
CONTENT BLOCKS
============================================================ */
.scp-block {
	margin-bottom: 36px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.scp-block--last {
	border-bottom: none;
	margin-bottom: 32px;
}

.scp-block-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: #111827;
	letter-spacing: -0.3px;
	margin-bottom: 18px;
}

.scp-text {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: #4b5563;
	margin-bottom: 14px;
}

.scp-text:last-child {
	margin-bottom: 0;
}

.scp-text strong {
	font-weight: 600;
	color: #111827;
}


/* ============================================================
RESPONSIBILITIES
============================================================ */
.scp-responsibility {
	margin-bottom: 18px;
}

.scp-responsibility:last-child {
	margin-bottom: 0;
}

.scp-resp-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #111827;
	margin-bottom: 5px;
	display: inline;
}


/* ============================================================
QUALIFICATION LIST
============================================================ */
.scp-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.scp-list li {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
	padding-left: 22px;
	position: relative;
}

.scp-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4361EE;
	opacity: 0.6;
}


/* ============================================================
WHAT WE OFFER LIST
============================================================ */
.scp-offer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scp-offer-list li {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.scp-offer-dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: #eef2ff;
	border: 2px solid #c7d2fe;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.scp-offer-dot::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4361EE;
}


/* ============================================================
BOTTOM APPLY CTA
============================================================ */
.scp-apply-bottom-wrap {
	padding-top: 8px;
}


/* ============================================================
RIGHT: SIDEBAR
============================================================ */
.scp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 75px;
}


/* ============================================================
SIDEBAR CARDS
============================================================ */
.scp-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 24px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

/* Card heading */
.scp-card-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 16px;
}

/* Summary list */
.scp-summary-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.scp-summary-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.scp-summary-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.scp-summary-list li:first-child {
	padding-top: 0;
}

.scp-summary-label {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #9ca3af;
	flex-shrink: 0;
}

.scp-summary-value {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #111827;
	text-align: right;
}


/* Company card */
.scp-card--company {
	background: #f0f3f8;
	border-color: transparent;
	box-shadow: none;
}

.scp-company-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #111827;
	margin-bottom: 14px;
	letter-spacing: -0.2px;
}

.scp-company-blurb {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.7;
	color: #6b7280;
	margin-bottom: 0;
}


/* Culture card */
.scp-card--culture {
	background: linear-gradient(135deg, #0a1128 0%, #111d3a 100%);
	border-color: transparent;
	box-shadow: 0 8px 32px rgba(10, 17, 40, 0.2);
}

.scp-culture-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.scp-culture-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.45;
	color: #ffffff;
	margin-bottom: 10px;
	letter-spacing: -0.1px;
}

.scp-culture-desc {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 20px;
}

.scp-culture-link {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #6ea8fe;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.2s ease, gap 0.2s ease;
}

.scp-culture-link:hover {
	color: #ffffff;
	gap: 9px;
}


/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1199.98px) {
	.scp-layout {
		grid-template-columns: 1fr 300px;
		gap: 36px;
	}

	.scp-job-title {
		font-size: 36px;
	}
}

@media (max-width: 991.98px) {
	.scp-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.scp-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.scp-card--culture {
		grid-column: 1 / -1;
	}

	.scp-job-title {
		font-size: 32px;
	}
}

@media (max-width: 767.98px) {
	.scp-section {
		padding: 40px 0 0 0;
	}

	.scp-job-title {
		font-size: 26px;
		letter-spacing: -0.8px;
	}

	.scp-block-title {
		font-size: 19px;
	}

	.scp-text,
	.scp-list li,
	.scp-offer-list li {
		font-size: 14px;
	}

	.scp-sidebar {
		grid-template-columns: 1fr;
	}

	.scp-card--culture {
		grid-column: auto;
	}
}

.page-id-3 .intro-section,
.page-id-226 .intro-section {
	padding-top: 0 !important;
	margin: 0 !important;
	padding-bottom: 80px;
}

.page-id-3 .intro-desc,
.page-id-226 .intro-desc {
	margin-top: 0;
}

.page-id-3 h1,
.page-id-226 h1 {
	margin: 0;
}

/* ==========================================================================
Feature Block Slider  (section-feature-block-slider.php)
Two-column infinite-scroll ticker: left track scrolls up, right scrolls down.
========================================================================== */

/* ── Scroll animations ──────────────────────────────────── */
@keyframes fbs-scroll-up {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
	}
}

@keyframes fbs-scroll-down {
	0% {
		transform: translateY(-50%);
	}

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

/* ── Visual container ───────────────────────────────────── */
.feature-block-slider .fbs-visual {
	display: flex;
	gap: 16px;
	height: 480px;
	overflow: hidden;
	position: relative;
	/* Soft fade at top and bottom edges */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* ── Each scroll track ──────────────────────────────────── */
.fbs-track {
	flex: 1;
	overflow: hidden;
	min-width: 0;
}

.fbs-track-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	will-change: transform;
}

.fbs-track--up .fbs-track-inner {
	animation: fbs-scroll-up 22s linear infinite;
}

.fbs-track--down .fbs-track-inner {
	animation: fbs-scroll-down 22s linear infinite;
}

/* Pause on hover */
.feature-block-slider .fbs-visual:hover .fbs-track-inner {
	animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

	.fbs-track--up .fbs-track-inner,
	.fbs-track--down .fbs-track-inner {
		animation: none;
	}
}

/* ── Individual card ────────────────────────────────────── */
.fbs-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

.fbs-card-body {
	padding: 10px 14px;
}

.fbs-card-title {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--clr-text-dark);
	margin: 0;
	line-height: 1.4;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.feature-block-slider .fbs-visual {
		height: 360px;
		margin-top: 32px;
	}
}

@media (max-width: 767.98px) {
	.feature-block-slider .fbs-visual {
		height: 300px;
		gap: 10px;
	}

	.fbs-track-inner {
		gap: 10px;
	}
	.home .s7-why .row{
		padding : 25px !important;
	}
	.s7-highlights-header{
		margin-bottom : 0 !important ;
	}
}
.section-animation{
	padding-bottom : 50px ;
}
.home .s7-highlights{
	padding-top : 50px ;
}
.home .s7-why .row{
	padding : 70px ;
	background-color : #ffffff30;
	border : 1px solid #ffffff ;
	border-radius: 16px;
}
.home .s7-cta{
	padding-top : 25px !important ;

}