@charset "utf-8";
/* CSS Document 

TemplateMo 603 Nexaverse

https://templatemo.com/tm-603-nexaverse

*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary: #00f0ff;
	--secondary: #ff00d4;
	--accent: #9d4edd;
	--dark-1: #0a0a12;
	--dark-2: #12121f;
	--dark-3: #1a1a2e;
	--glass-bg: rgba(255, 255, 255, 0.03);
	--glass-border: rgba(255, 255, 255, 0.08);
	--glow-cyan: rgba(0, 240, 255, 0.4);
	--glow-magenta: rgba(255, 0, 212, 0.4);
}

body {
	font-family: 'Outfit', sans-serif;.logo {
    text-align: center;
}

.logo img {
    width: 220px;   /* Increased from 150px */
    height: auto;   /* Maintains aspect ratio */
    border-radius: 8px;
}
	background: var(--dark-1);
	color: #ffffff;
	overflow-x: hidden;
	min-height: 100vh;
}

/* Ambient Background */
.ambient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	animation: float 20s ease-in-out infinite;
}

.orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 70%);
	top: -200px;
	left: -200px;
	animation-delay: 0s;
}

.orb-2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, var(--glow-magenta) 0%, transparent 70%);
	bottom: -150px;
	right: -150px;
	animation-delay: -7s;
}

.orb-3 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(157, 78, 221, 0.3) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-delay: -14s;
}

@keyframes float {

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

	25% {
		transform: translate(50px, -30px) scale(1.05);
	}

	50% {
		transform: translate(-30px, 50px) scale(0.95);
	}

	75% {
		transform: translate(-50px, -20px) scale(1.02);
	}
}

/* The Background Grid Pattern Overlay */
.grid-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 1;
}

/* Loading Screen */
.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--dark-1);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-screen.hidden {
	opacity: 0;
	visibility: hidden;
}

.loader-ring {
	width: 80px;
	height: 80px;
	position: relative;
}

.loader-ring::before,
.loader-ring::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 2px solid transparent;
}

.loader-ring::before {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-top-color: var(--primary);
	border-right-color: var(--primary);
	animation: spin 1.2s linear infinite;
}

.loader-ring::after {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	border-bottom-color: var(--secondary);
	border-left-color: var(--secondary);
	animation: spin 0.8s linear infinite reverse;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.loading-text {
	margin-top: 30px;
	font-family: 'Syne', sans-serif;
	font-size: 14px;
	letter-spacing: 4px;
	color: var(--primary);
	text-transform: uppercase;
}

/* Main Container */
.container {
	position: relative;
	z-index: 10;
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Header */
.header {
	text-align: center;
	margin-bottom: 60px;
	opacity: 0;
	animation: fadeUp 0.8s ease-out 1s forwards;
}

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

	from {
		transform: translateY(30px);
	}
}

.logo {
	width: 90px;
	height: 90px;
	margin: 0 auto 25px;
	position: relative;
}

.logo svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 20px var(--glow-cyan));
}

.brand-name {
	font-family: 'Syne', sans-serif;
	font-size: 52px;
	font-weight: 600;
	letter-spacing: 6px;
	margin-bottom: 12px;
	background: linear-gradient(135deg, var(--primary) 0%, #ffffff 50%, var(--secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-transform: uppercase;
}

.tagline {
	font-size: 33px;
	letter-spacing: 5px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-weight: 300;
}

/* Menu Grid */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 200px);
	gap: 30px;
	margin: 0 auto 40px;
	justify-content: center;
}

.menu-item {
	height: 200px;
	width: 200px;
	/* Glass base */
	background:
		radial-gradient(ellipse at 38% 32%,
			rgba(80,120,220,0.18) 0%,
			rgba(30,60,160,0.22) 30%,
			rgba(10,18,70,0.55) 65%,
			rgba(4,8,30,0.75) 100%),
		/* Vein/circuit lines via repeating SVG-like gradients */
		repeating-linear-gradient(
			32deg,
			transparent 0px, transparent 18px,
			rgba(0,200,255,0.055) 18px, rgba(0,200,255,0.055) 19px,
			transparent 19px, transparent 38px
		),
		repeating-linear-gradient(
			-58deg,
			transparent 0px, transparent 22px,
			rgba(120,80,255,0.05) 22px, rgba(120,80,255,0.05) 23px,
			transparent 23px, transparent 44px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0px, transparent 30px,
			rgba(0,180,255,0.04) 30px, rgba(0,180,255,0.04) 31px,
			transparent 31px, transparent 60px
		),
		repeating-linear-gradient(
			0deg,
			transparent 0px, transparent 30px,
			rgba(0,180,255,0.04) 30px, rgba(0,180,255,0.04) 31px,
			transparent 31px, transparent 60px
		);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(80,140,255,0.25);
	box-shadow:
		0 8px 32px rgba(0,0,0,0.6),
		inset 0 1px 0 rgba(255,255,255,0.12),
		inset 0 -2px 8px rgba(0,0,0,0.35),
		0 0 40px rgba(20,80,200,0.2),
		0 0 0 1px rgba(60,120,255,0.15);
}

/* Glossy glass top highlight band */
.menu-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 45%;
	background: linear-gradient(180deg,
			rgba(255,255,255,0.10) 0%,
			rgba(160,200,255,0.04) 55%,
			transparent 100%);
	border-radius: 16px 16px 0 0;
	pointer-events: none;
	z-index: 0;
}

/* Glow ring on hover */
.menu-item::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 18px;
	background: transparent;
	border: 2px solid transparent;
	border-top-color: rgba(0, 200, 255, 0.5);
	border-right-color: rgba(100, 80, 255, 0.35);
	border-bottom-color: rgba(0, 200, 255, 0.15);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 3;
}

.menu-item:hover {
	transform: translateY(-12px) scale(1.07);
	background:
		radial-gradient(ellipse at 38% 32%,
			rgba(100,160,255,0.22) 0%,
			rgba(40,80,200,0.28) 30%,
			rgba(12,24,88,0.62) 65%,
			rgba(4,10,38,0.78) 100%),
		repeating-linear-gradient(
			32deg,
			transparent 0px, transparent 18px,
			rgba(0,220,255,0.13) 18px, rgba(0,220,255,0.13) 19px,
			transparent 19px, transparent 38px
		),
		repeating-linear-gradient(
			-58deg,
			transparent 0px, transparent 22px,
			rgba(140,100,255,0.12) 22px, rgba(140,100,255,0.12) 23px,
			transparent 23px, transparent 44px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0px, transparent 30px,
			rgba(0,200,255,0.09) 30px, rgba(0,200,255,0.09) 31px,
			transparent 31px, transparent 60px
		),
		repeating-linear-gradient(
			0deg,
			transparent 0px, transparent 30px,
			rgba(0,200,255,0.09) 30px, rgba(0,200,255,0.09) 31px,
			transparent 31px, transparent 60px
		);
	border-color: rgba(0,220,255,0.5);
	box-shadow:
		0 20px 50px rgba(0,0,0,0.65),
		0 0 55px rgba(0,180,255,0.35),
		0 0 90px rgba(80,100,255,0.18),
		inset 0 1px 0 rgba(255,255,255,0.18),
		inset 0 -2px 8px rgba(0,0,0,0.4);
}

.menu-item.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.menu-item.initial-load {
	animation: menuAppear 0.5s ease-out forwards;
}

.menu-item.initial-load:nth-child(1) {
	animation-delay: 1.1s;
}

.menu-item.initial-load:nth-child(2) {
	animation-delay: 1.2s;
}

.menu-item.initial-load:nth-child(3) {
	animation-delay: 1.3s;
}

.menu-item.initial-load:nth-child(4) {
	animation-delay: 1.4s;
}

.menu-item.initial-load:nth-child(5) {
	animation-delay: 1.5s;
}

.menu-item.initial-load:nth-child(6) {
	animation-delay: 1.6s;
}

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

/* Menu Badge - Replaces Icons */
.menu-badge {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Syne', sans-serif;
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 14px;
	position: relative;
	background:
		radial-gradient(circle at 38% 30%,
			rgba(0,220,255,0.45) 0%,
			rgba(0,140,255,0.55) 40%,
			rgba(20,60,180,0.70) 70%,
			rgba(10,30,100,0.85) 100%);
	border: 1.5px solid rgba(0,220,255,0.55);
	color: #ffffff;
	text-shadow: 0 0 14px rgba(0,220,255,0.9), 0 1px 2px rgba(0,0,0,0.6);
	transition: all 0.4s ease;
	overflow: hidden;
	backdrop-filter: blur(4px);
	box-shadow:
		0 0 18px rgba(0,180,255,0.45),
		0 4px 10px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.35),
		inset 0 -2px 6px rgba(0,0,0,0.3);
	z-index: 1;
}

/* Inner glossy shine */
.menu-badge::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 10%;
	right: 10%;
	height: 45%;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.3) 0%,
			transparent 100%);
	border-radius: 50%;
	pointer-events: none;
}

/* Animated ring */
.menu-badge::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--primary);
	border-right-color: rgba(0, 200, 220, 0.5);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.menu-item:hover .menu-badge {
	background:
		radial-gradient(circle at 38% 30%,
			rgba(0,240,255,0.55) 0%,
			rgba(0,170,255,0.65) 40%,
			rgba(30,80,200,0.75) 70%,
			rgba(10,40,120,0.88) 100%);
	transform: scale(1.12) translateY(-2px);
	box-shadow:
		0 0 28px rgba(0,220,255,0.7),
		0 0 50px rgba(0,180,255,0.35),
		0 4px 10px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.45);
}

.menu-item:hover .menu-badge::after {
	opacity: 1;
	animation: badgeSpin 2s linear infinite;
}
.menu-item:hover::after {
	opacity: 1;
	animation: menuRingSpin 3s linear infinite;
}
@keyframes menuRingSpin {
	to { transform: rotate(360deg); }
}

@keyframes badgeSpin {
	to {
		transform: rotate(360deg);
	}
}

.menu-title {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.3s ease;
}

.menu-item:hover .menu-title {
	color: #ffffff;
	letter-spacing: 4px;
}

/* Content Sections */
.content-section {
	display: none;
	opacity: 0;
	padding: 80px 20px;
	position: relative;
}

.content-section.active {
	display: block;
	animation: sectionIn 0.6s ease-out forwards;
}

@keyframes sectionIn {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

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

/* Section Header Small */
.section-header-small {
	position: fixed;
	top: 20px;
	left: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 100;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 12px 20px;
	border-radius: 50px;
	border: 1px solid var(--glass-border);
}

.small-logo {
	height: 64px;
	width: auto;
	display: flex;
	align-items: center;
}

.small-logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 10px var(--glow-cyan));
}

.small-brand h3 {
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--primary);
}

.small-brand p {
	font-size: 10px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 2px;
}

/* Back Button */
.back-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 12px 24px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.8);
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 100;
}

.back-btn:hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 0 20px var(--glow-cyan);
}

/* Section Content */
.section-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-title {
	font-family: 'Syne', sans-serif;
	font-size: 42px;
	font-weight: 600;
	margin-bottom: 15px;
	background: linear-gradient(135deg, var(--primary) 0%, #ffffff 50%, var(--secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.section-subtitle {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 2px;
}

/* Glass Cards */
.glass-card {
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 30px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.glass-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.glass-card:hover {
	background: rgba(255, 255, 255, 0.05);
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ===== NEW INTRODUCTION SECTION STYLES ===== */

/* Hero Banner */
.intro-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 60px;
	padding: 40px 0;
}

.intro-hero-content {
	max-width: 550px;
}

.intro-badge {
	display: inline-block;
	padding: 8px 18px;
	background: rgba(0, 240, 255, 0.1);
	border: 1px solid rgba(0, 240, 255, 0.3);
	border-radius: 50px;
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--primary);
	margin-bottom: 25px;
}

.intro-headline {
	font-family: 'Syne', sans-serif;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 25px;
	color: #ffffff;
}

.intro-headline span {
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.intro-subtext {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 35px;
}

.intro-cta-group {
	display: flex;
	gap: 15px;
}

.intro-cta-primary {
	padding: 14px 32px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--primary);
	border-radius: 50px;
	color: var(--primary);
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.intro-cta-primary:hover {
	background: rgba(0, 240, 255, 0.15);
	box-shadow: 0 0 25px rgba(0, 200, 220, 0.3);
	transform: translateY(-2px);
}

.intro-cta-secondary {
	padding: 14px 32px;
	background: transparent;
	border: 1px solid var(--glass-border);
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.intro-cta-secondary:hover {
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

/* Hero Visual */
.intro-hero-visual {
	position: relative;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.intro-orb {
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.3), rgba(157, 78, 221, 0.2) 50%, transparent 70%);
	filter: blur(40px);
	animation: orbPulse 4s ease-in-out infinite;
}

@keyframes orbPulse {

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

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

.intro-floating-card {
	position: absolute;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	padding: 16px 22px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	animation: floatCard 6s ease-in-out infinite;
}

.intro-floating-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
	border-radius: 14px 14px 0 0;
	pointer-events: none;
}

.card-icon {
	font-size: 20px;
}

.card-text {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.5px;
}

.card-1 {
	top: 30px;
	left: 10%;
	animation-delay: 0s;
}

.card-2 {
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	animation-delay: -2s;
}

.card-3 {
	bottom: 30px;
	left: 20%;
	animation-delay: -4s;
}

@keyframes floatCard {

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

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

.card-2 {
	animation-name: floatCardAlt;
}

@keyframes floatCardAlt {

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

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

/* Metrics Strip */
.intro-metrics {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
	padding: 40px 50px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	margin-bottom: 60px;
	position: relative;
	overflow: hidden;
}

.intro-metrics::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.metric-item {
	text-align: center;
}

.metric-value {
	font-family: 'Syne', sans-serif;
	font-size: 42px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline;
}

.metric-suffix {
	font-family: 'Syne', sans-serif;
	font-size: 28px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.metric-label {
	display: block;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 8px;
	letter-spacing: 1px;
}

.metric-divider {
	width: 1px;
	height: 50px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* Core Values */
.intro-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	margin-bottom: 60px;
}

.value-card {
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 35px 30px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.value-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 240, 255, 0.2);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.value-number {
	font-family: 'Syne', sans-serif;
	font-size: 48px;
	font-weight: 700;
	color: rgba(0, 240, 255, 0.15);
	margin-bottom: 15px;
	line-height: 1;
}

.value-card h3 {
	font-family: 'Syne', sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 12px;
}

.value-card p {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

/* Tech Stack */
.intro-tech {
	text-align: center;
}

.tech-label {
	font-size: 14px;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	margin-bottom: 20px;
}

.tech-marquee {
	overflow: hidden;
	position: relative;
	padding: 20px 0;
}

.tech-marquee::before,
.tech-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;
	z-index: 2;
	pointer-events: none;
}

.tech-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--dark-1), transparent);
}

.tech-marquee::after {
	right: 0;
	background: linear-gradient(-90deg, var(--dark-1), transparent);
}

.tech-track {
	display: flex;
	gap: 40px;
	animation: marquee 20s linear infinite;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

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

.tech-item {
	font-family: 'Syne', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.3);
	white-space: nowrap;
	transition: color 0.3s ease;
}

.tech-item:hover {
	color: var(--primary);
}

/* Services Row Layout */
.services-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.service-row {
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.service-row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.service-row::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--primary), var(--accent));
	border-radius: 20px 0 0 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.service-row:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(0, 240, 255, 0.2);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.service-row:hover::after {
	opacity: 1;
}

.service-row-icon {
	width: 240px;
	height: 180px;
	min-width: 140px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(157, 78, 221, 0.1));
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.service-row-icon::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 10%;
	right: 10%;
	height: 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
	border-radius: 12px 12px 50% 50%;
}

.service-row-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}

.service-row-content {
	flex: 1;
}

.service-row-content h4 {
	font-family: 'Syne', sans-serif;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--primary);
}

.service-row-content p {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
}

.service-row-arrow {
	display: none;
}

/* Tabs */
.tabs-container {
	margin-bottom: 30px;
}

.tab-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.tab-btn {
	padding: 12px 28px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.6);
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tab-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
	border-radius: 50px 50px 0 0;
}

.tab-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

.tab-btn.active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 212, 0.2));
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: 0 0 20px var(--glow-cyan);
}

.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
	animation: tabFade 0.4s ease-out;
}

@keyframes tabFade {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

/* Gallery */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.gallery-item {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1;
	cursor: pointer;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	transition: all 0.4s ease;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	border-color: var(--primary);
}

.gallery-item:hover img {
	transform: scale(1.1);
}

.gallery-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 40%, rgba(10, 10, 18, 0.9) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
	opacity: 1;
}

.gallery-overlay h4 {
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	color: var(--primary);
	margin-bottom: 5px;
}

.gallery-overlay p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

/* Filter Buttons */
.filter-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.filter-btn {
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--glass-border);
	border-radius: 30px;
	color: rgba(255, 255, 255, 0.6);
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
	background: rgba(0, 240, 255, 0.1);
	border-color: var(--primary);
	color: var(--primary);
}

/* Testimonials */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}

.testimonial-card {
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	padding: 30px;
	position: relative;
	overflow: hidden;
}

.testimonial-card::before {
	content: '"';
	position: absolute;
	top: 20px;
	right: 30px;
	font-family: 'Syne', sans-serif;
	font-size: 80px;
	color: rgba(0, 240, 255, 0.1);
	line-height: 1;
}

.testimonial-text {
	font-size: 17px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 20px;
	font-style: italic;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 15px;
}

.author-avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--primary);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-info h5 {
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary);
}

.author-info p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

/* About Section */
.about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.about-text h3 {
	font-family: 'Syne', sans-serif;
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 20px;
	color: var(--primary);
}

.about-text p {
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.8;
	margin-bottom: 15px;
}

.about-text a {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.about-text a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease;
}

.about-text a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.about-text a:hover::after {
    width: 100%;
}

.about-image {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

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

.about-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(157, 78, 221, 0.1));
}

/* Contact Form */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-group {
	position: relative;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 16px 20px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	color: #ffffff;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 20px var(--glow-cyan);
}

.form-group textarea {
	min-height: 150px;
	resize: vertical;
}

.submit-btn {
	padding: 16px 40px;
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 50px;
	color: var(--primary);
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.submit-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
	border-radius: 50px 50px 0 0;
}

.submit-btn:hover {
	background: rgba(0, 240, 255, 0.1);
	border-color: var(--primary);
	transform: translateY(-3px);
	box-shadow:
		0 15px 30px rgba(0, 0, 0, 0.3),
		0 0 30px rgba(0, 200, 220, 0.25);
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.contact-item {
	background: var(--glass-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	padding: 25px;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: all 0.3s ease;
}

.contact-item:hover {
	border-color: var(--primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.contact-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(157, 78, 221, 0.2));
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: var(--primary);
	position: relative;
	overflow: hidden;
}

.contact-icon::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 10%;
	right: 10%;
	height: 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
	border-radius: 50%;
}

.contact-details h4 {
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 5px;
}

.contact-details p {
	color: #ffffff;
	font-size: 17px;
}

/* Exit animations */
.menu-item.exit-up {
	animation: exitDown 0.5s ease-out forwards !important;
	pointer-events: none;
}

@keyframes exitDown {
	to {
		transform: translateY(50px);
		opacity: 0;
	}
}

.menu-item.return {
	animation: menuReturn 0.4s ease-out forwards !important;
}

@keyframes menuReturn {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.9);
	}

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

/* Footer */
.footer {
	margin-top: auto;
	padding: 30px 0;
	text-align: center;
	opacity: 0;
	animation: fadeUp 0.5s ease-out 1.7s forwards;
}

.footer p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 1px;
}

.footer a {
	color: var(--primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer a:hover {
	color: var(--secondary);
}

/* Responsive Design */
@media (max-width: 992px) {
	.menu-grid {
		grid-template-columns: repeat(3, 170px);
	}

	.menu-item {
		height: 145px;
	}

	.intro-hero {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.intro-hero-content {
		text-align: center;
		max-width: 100%;
	}

	.intro-cta-group {
		justify-content: center;
	}

	.intro-hero-visual {
		height: 300px;
	}

	.intro-metrics {
		flex-wrap: wrap;
		gap: 30px;
	}

	.metric-divider {
		display: none;
	}

	.intro-values {
		grid-template-columns: 1fr;
	}

	.services-list {
		grid-template-columns: 1fr;
	}

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

	.about-content,
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.brand-name {
		font-size: 36px;
		letter-spacing: 4px;
	}

	.menu-grid {
		grid-template-columns: repeat(2, 155px);
		gap: 15px;
	}

	.menu-item {
		height: 135px;
	}

	.menu-badge {
		width: 50px;
		height: 50px;
		font-size: 18px;
	}

	.section-title {
		font-size: 28px;
	}

	.intro-headline {
		font-size: 36px;
	}

	.intro-hero-visual {
		display: none;
	}

	.intro-metrics {
		padding: 30px 25px;
	}

	.metric-value {
		font-size: 32px;
	}

	.service-row {
		flex-direction: column;
		text-align: center;
	}

	.service-row-icon {
		width: 200px;
		height: 150px;
		min-width: 120px;
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	.section-header-small {
		position: relative;
		top: auto;
		left: auto;
		margin-bottom: 20px;
		justify-content: center;
	}

	.back-btn {
		position: relative;
		top: auto;
		right: auto;
		display: block;
		width: fit-content;
		margin: 0 auto 30px;
	}

	.content-section {
		padding-top: 20px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 20px 15px;
	}

	.brand-name {
		font-size: 28px;
		letter-spacing: 3px;
	}

	.tagline {
		font-size: 12px;
		letter-spacing: 3px;
	}

	.menu-grid {
		grid-template-columns: repeat(2, 130px);
		gap: 12px;
	}

	.menu-item {
		height: 120px;
	}

	.menu-badge {
		width: 45px;
		height: 45px;
		font-size: 16px;
	}

	.menu-title {
		font-size: 12px;
		letter-spacing: 2px;
	}

	.intro-headline {
		font-size: 28px;
	}

	.intro-subtext {
		font-size: 17px;
	}

	.intro-cta-group {
		flex-direction: column;
		align-items: center;
	}

	.intro-cta-primary,
	.intro-cta-secondary {
		width: 100%;
		max-width: 250px;
		text-align: center;
	}

	.intro-metrics {
		flex-direction: column;
		gap: 25px;
	}

	.metric-value {
		font-size: 36px;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}

	.tab-buttons {
		flex-direction: column;
		align-items: center;
	}

	.tab-btn {
		width: 100%;
		max-width: 250px;
	}
}

/* ════════ Inline page styles ════════ */

/* ── Product Detail Banner ── */
        .product-detail-banner {
            display: flex;
            align-items: center;
            gap: 48px;
            margin-top: 48px;
            padding: 44px 48px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.04) 0%, rgba(255, 0, 212, 0.04) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }

        .product-detail-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #00f0ff, #ff00d4);
            border-radius: 4px 0 0 4px;
        }

        /* Left side */
        .product-detail-left {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .product-detail-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            border: 1px solid rgba(0, 240, 255, 0.35);
            color: #00f0ff;
            font-size: 13px;
            font-family: 'Syne', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            width: fit-content;
        }

        .product-detail-heading {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.4rem, 2.5vw, 2rem);
            font-weight: 700;
            color: #ffffff;
            line-height: 1.25;
            margin: 0;
        }

        .product-detail-heading span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .product-detail-desc {
            font-size: 1.14rem;
            color: rgba(255, 255, 255, 0.65);
            line-height: 1.7;
            margin: 0;
        }

        .product-detail-features {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .product-detail-features li {
            font-size: 1.06rem;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }

        .product-detail-cta {
            align-self: flex-start;
            margin-top: 8px;
            padding: 12px 28px;
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            border: none;
            border-radius: 30px;
            color: #0a0a12;
            font-family: 'Syne', sans-serif;
            font-size: 1.02rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .product-detail-cta:hover {
            opacity: 0.85;
            transform: translateY(-2px);
        }

        /* Right side */
        .product-detail-right {
            flex: 0 0 380px;
            position: relative;
        }

        .product-detail-right img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: block;
        }

        .product-detail-img-badge {
            position: absolute;
            bottom: 14px;
            right: 14px;
            background: rgba(10, 10, 18, 0.85);
            border: 1px solid rgba(0, 240, 255, 0.3);
            color: #00f0ff;
            font-size: 12px;
            font-family: 'Syne', sans-serif;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 20px;
            backdrop-filter: blur(8px);
        }

        @keyframes bannerFadeIn {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

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

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


        /* ── PF Card Carousel (consulting tab) ── */
        .pf-carousel-section {
            display: none;
            margin-top: 52px;
        }

        .tab-pane.active .pf-carousel-section {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.12s both;
        }

        /* dots row */
        .pf-dots-row {
            display: flex;
            justify-content: center;
            gap: 9px;
            margin-bottom: 36px;
        }

        .pf-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: background .25s, transform .25s;
        }

        .pf-dot.active {
            background: #7c5fff;
            transform: scale(1.4);
        }

        /* stage */
        .pf-stage {
            position: relative;
            height: 460px;
            perspective: 1200px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        /* card */
        .pf-card {
            position: absolute;
            width: 240px;
            background: #12121e;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 20px;
            overflow: hidden;
            transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.55s ease,
                box-shadow 0.55s ease;
            cursor: pointer;
            will-change: transform, opacity;
        }

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

        .pf-card-body {
            padding: 18px 18px 22px;
        }

        .pf-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }

        .pf-card-tag {
            font-size: 10px;
            font-family: 'Syne', sans-serif;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 20px;
            border: 1px solid rgba(124, 95, 255, 0.45);
            color: #a78bff;
        }

        .pf-card-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px;
            line-height: 1.25;
        }

        .pf-card-title span {
            color: #00f0ff;
        }

        .pf-card-desc {
            font-size: 0.94rem;
            color: rgba(255, 255, 255, 0.52);
            line-height: 1.6;
            margin: 0 0 16px;
        }

        .pf-card-btn {
            display: inline-block;
            padding: 9px 22px;
            border-radius: 30px;
            border: none;
            background: linear-gradient(90deg, #7c5fff, #00f0ff);
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            text-transform: uppercase;
            transition: opacity .2s, transform .2s;
        }

        .pf-card-btn:hover {
            opacity: .85;
            transform: translateY(-2px);
        }

        /* position states */
        .pf-card[data-pos="0"] {
            /* far-left */
            transform: translateX(-420px) translateZ(-160px) rotateY(28deg) scale(0.78);
            opacity: 0.35;
            z-index: 1;
        }

        .pf-card[data-pos="1"] {
            /* left */
            transform: translateX(-230px) translateZ(-70px) rotateY(16deg) scale(0.88);
            opacity: 0.62;
            z-index: 2;
        }

        .pf-card[data-pos="2"] {
            /* centre */
            transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
            opacity: 1;
            z-index: 5;
            box-shadow: 0 20px 60px rgba(124, 95, 255, 0.28), 0 0 0 1px rgba(0, 240, 255, 0.2);
        }

        .pf-card[data-pos="3"] {
            /* right */
            transform: translateX(230px) translateZ(-70px) rotateY(-16deg) scale(0.88);
            opacity: 0.62;
            z-index: 2;
        }

        .pf-card[data-pos="4"] {
            /* far-right */
            transform: translateX(420px) translateZ(-160px) rotateY(-28deg) scale(0.78);
            opacity: 0.35;
            z-index: 1;
        }

        /* nav arrows below stage */
        .pf-nav {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-top: 32px;
        }

        .pf-nav-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(124, 95, 255, 0.4);
            background: rgba(124, 95, 255, 0.08);
            color: #a78bff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s, border-color .2s, transform .15s;
        }

        .pf-nav-btn:hover {
            background: rgba(124, 95, 255, 0.22);
            border-color: rgba(124, 95, 255, 0.7);
            transform: scale(1.1);
        }

        @media (max-width: 768px) {
            .pf-stage {
                height: 400px;
            }

            .pf-card {
                width: 200px;
            }

            .pf-card[data-pos="0"] {
                transform: translateX(-300px) translateZ(-120px) rotateY(25deg) scale(0.72);
            }

            .pf-card[data-pos="1"] {
                transform: translateX(-170px) translateZ(-55px) rotateY(14deg) scale(0.84);
            }

            .pf-card[data-pos="3"] {
                transform: translateX(170px) translateZ(-55px) rotateY(-14deg) scale(0.84);
            }

            .pf-card[data-pos="4"] {
                transform: translateX(300px) translateZ(-120px) rotateY(-25deg) scale(0.72);
            }
        }

        @media (max-width: 540px) {
            .pf-stage {
                height: 380px;
                overflow: hidden;
            }

            .pf-card {
                width: 185px;
            }

            .pf-card[data-pos="0"],
            .pf-card[data-pos="4"] {
                opacity: 0;
                pointer-events: none;
            }

            .pf-card[data-pos="1"] {
                transform: translateX(-140px) translateZ(-40px) rotateY(12deg) scale(0.82);
            }

            .pf-card[data-pos="3"] {
                transform: translateX(140px) translateZ(-40px) rotateY(-12deg) scale(0.82);
            }
        }



        /* ── SmartFA Feature Content (support tab) ── */
        .fa-feature-section {
            display: none;
            margin-top: 48px;
        }

        .tab-pane.active .fa-feature-section {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.1s both;
        }

        .fa-feature-heading {
            text-align: center;
            margin-bottom: 32px;
        }

        .fa-feature-heading h3 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.1rem, 2vw, 1.5rem);
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px;
        }

        .fa-feature-heading h3 span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .fa-feature-heading p {
            font-size: 1.06rem;
            color: rgba(255, 255, 255, 0.45);
            margin: 0;
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.65;
        }

        /* large hero card spanning full row */
        .fa-hero-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 240, 255, 0.14);
            border-radius: 18px;
            padding: 32px 36px;
            margin-bottom: 18px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .fa-hero-card::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .fa-hero-icon {
            font-size: 3rem;
            flex-shrink: 0;
            filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.4));
        }

        .fa-hero-content h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px;
        }

        .fa-hero-content h4 span {
            background: linear-gradient(90deg, #00f0ff, #7c5fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .fa-hero-content p {
            font-size: 1.01rem;
            color: rgba(255, 255, 255, 0.55);
            line-height: 1.7;
            margin: 0 0 16px;
        }

        .fa-hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .fa-hero-tag {
            font-size: 12px;
            font-family: 'Syne', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid rgba(0, 240, 255, 0.3);
            color: #00f0ff;
            background: rgba(0, 240, 255, 0.05);
        }

        /* 3-col grid of feature cards */
        .fa-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .fa-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 26px 22px;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        .fa-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(124, 95, 255, 0.04));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .fa-card:hover {
            border-color: rgba(0, 240, 255, 0.28);
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0, 240, 255, 0.07);
        }

        .fa-card:hover::after {
            opacity: 1;
        }

        .fa-card-top {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            position: relative;
            z-index: 1;
        }

        .fa-card-icon {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            background: rgba(0, 240, 255, 0.08);
            border: 1px solid rgba(0, 240, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            flex-shrink: 0;
        }

        /* alternate icon colours */
        .fa-card:nth-child(2) .fa-card-icon {
            background: rgba(124, 95, 255, 0.1);
            border-color: rgba(124, 95, 255, 0.25);
        }

        .fa-card:nth-child(3) .fa-card-icon {
            background: rgba(255, 171, 0, 0.09);
            border-color: rgba(255, 171, 0, 0.22);
        }

        .fa-card:nth-child(4) .fa-card-icon {
            background: rgba(0, 230, 118, 0.09);
            border-color: rgba(0, 230, 118, 0.22);
        }

        .fa-card:nth-child(5) .fa-card-icon {
            background: rgba(255, 61, 113, 0.09);
            border-color: rgba(255, 61, 113, 0.22);
        }

        .fa-card:nth-child(6) .fa-card-icon {
            background: rgba(255, 171, 0, 0.09);
            border-color: rgba(255, 171, 0, 0.22);
        }

        .fa-card-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin: 0;
            position: relative;
            z-index: 1;
        }

        .fa-card-desc {
            font-size: 0.96rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.68;
            margin: 0 0 14px;
            position: relative;
            z-index: 1;
        }

        .fa-card-bullets {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            z-index: 1;
        }

        .fa-card-bullets li {
            font-size: 0.91rem;
            color: rgba(255, 255, 255, 0.42);
            padding-left: 14px;
            position: relative;
        }

        .fa-card-bullets li::before {
            content: '✦';
            position: absolute;
            left: 0;
            font-size: 7px;
            color: #00f0ff;
            top: 2px;
        }

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

            .fa-hero-card {
                flex-direction: column;
                gap: 16px;
                padding: 24px;
            }
        }

        @media (max-width: 480px) {
            .fa-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ══════════════════════════════════════
           SmartPLS Bento Grid — #smartpls tab
        ══════════════════════════════════════ */
        .pls-bento-section {
            display: none;
            margin-top: 52px;
        }

        .tab-pane.active .pls-bento-section {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.1s both;
        }

        /* section header */
        .pls-section-header {
            text-align: center;
            margin-bottom: 36px;
        }

        .pls-section-header h3 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.15rem, 2.2vw, 1.55rem);
            font-weight: 800;
            color: #fff;
            margin: 0 0 10px;
        }

        .pls-section-header h3 span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pls-section-header p {
            font-size: 1.03rem;
            color: rgba(255, 255, 255, 0.42);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* ── Bento grid layout ── */
        .pls-bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: 80px;
            gap: 14px;
        }

        /* base cell */
        .pls-cell {
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .pls-cell:hover {
            transform: translateY(-5px) scale(1.015);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
            z-index: 3;
        }

        /* image cells */
        .pls-cell-img {
            background: #111;
        }

        .pls-cell-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .pls-cell:hover .pls-cell-img img {
            transform: scale(1.06);
        }

        /* text / content cells */
        .pls-cell-content {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 24px 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .pls-cell-content:hover {
            border-color: rgba(0, 240, 255, 0.25);
        }

        /* accent cells */
        .pls-cell-accent {
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(124, 95, 255, 0.15) 100%);
            border: 1px solid rgba(0, 240, 255, 0.2);
            padding: 24px 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .pls-cell-accent2 {
            background: linear-gradient(135deg, rgba(124, 95, 255, 0.15) 0%, rgba(255, 0, 212, 0.12) 100%);
            border: 1px solid rgba(124, 95, 255, 0.2);
            padding: 24px 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .pls-cell-dark {
            background: rgba(10, 10, 24, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.07);
            padding: 24px 22px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* cell span helpers */
        .pls-c-4 {
            grid-column: span 4;
        }

        .pls-c-5 {
            grid-column: span 5;
        }

        .pls-c-6 {
            grid-column: span 6;
        }

        .pls-c-7 {
            grid-column: span 7;
        }

        .pls-c-8 {
            grid-column: span 8;
        }

        .pls-c-12 {
            grid-column: span 12;
        }

        .pls-r-3 {
            grid-row: span 3;
        }

        .pls-r-4 {
            grid-row: span 4;
        }

        .pls-r-5 {
            grid-row: span 5;
        }

        .pls-r-6 {
            grid-row: span 6;
        }

        /* typography inside cells */
        .pls-cell-tag {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00f0ff;
            opacity: 0.8;
            margin-bottom: 8px;
        }

        .pls-cell-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(0.88rem, 1.4vw, 1.05rem);
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px;
            line-height: 1.3;
        }

        .pls-cell-title span {
            background: linear-gradient(90deg, #00f0ff, #7c5fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pls-cell-body {
            font-size: 0.94rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.65;
            margin: 0;
        }

        .pls-cell-icon {
            font-size: 1.8rem;
            margin-bottom: 10px;
            filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.35));
        }

        .pls-cell-num {
            font-family: 'Syne', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: #00f0ff;
            line-height: 1;
            margin-bottom: 4px;
        }

        .pls-cell-num-label {
            font-size: 0.89rem;
            color: rgba(255, 255, 255, 0.45);
        }

        .pls-cell-bullets {
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .pls-cell-bullets li {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.5);
            padding-left: 14px;
            position: relative;
        }

        .pls-cell-bullets li::before {
            content: '✦';
            position: absolute;
            left: 0;
            font-size: 7px;
            color: #00f0ff;
            top: 2px;
        }

        .pls-cell-cta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 14px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #00f0ff;
            cursor: pointer;
            opacity: 0.85;
            transition: opacity .2s, gap .2s;
        }

        .pls-cell-cta:hover {
            opacity: 1;
            gap: 11px;
        }

        .pls-cell-cta::after {
            content: '→';
        }

        /* overlay on image cells */
        .pls-img-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 55%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 18px 18px;
        }

        .pls-img-overlay .pls-cell-title {
            font-size: 1.06rem;
            margin: 0;
        }

        /* stat strip */
        .pls-stat-strip {
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: 12px;
            text-align: center;
        }

        .pls-stat-strip-divider {
            width: 1px;
            height: 36px;
            background: rgba(255, 255, 255, 0.1);
            flex-shrink: 0;
        }

        @media (max-width: 900px) {
            .pls-bento {
                grid-template-columns: repeat(6, 1fr);
                grid-auto-rows: 90px;
            }

            .pls-c-4 {
                grid-column: span 3;
            }

            .pls-c-5 {
                grid-column: span 3;
            }

            .pls-c-6 {
                grid-column: span 6;
            }

            .pls-c-7 {
                grid-column: span 3;
            }

            .pls-c-8 {
                grid-column: span 6;
            }

            .pls-c-12 {
                grid-column: span 6;
            }
        }

        @media (max-width: 540px) {
            .pls-bento {
                grid-template-columns: 1fr 1fr;
                grid-auto-rows: 100px;
            }

            .pls-c-4,
            .pls-c-5,
            .pls-c-6,
            .pls-c-7,
            .pls-c-8,
            .pls-c-12 {
                grid-column: span 2;
            }
        }


        /* ── Cloud App Phone Carousel ── */
        .cloud-phone-carousel {
            display: none;
            margin-top: 48px;
        }

        .tab-pane.active .cloud-phone-carousel {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.1s both;
        }

        .cloud-phone-stage {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            perspective: 1000px;
            height: 420px;
            position: relative;
        }

        .cloud-phone-frame {
            position: absolute;
            width: 190px;
            background: #0d0d1a;
            border: 2.5px solid rgba(255, 255, 255, 0.12);
            border-radius: 34px;
            padding: 12px 10px 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.5);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease,
                box-shadow 0.5s ease;
            cursor: pointer;
            will-change: transform, opacity;
        }

        .cloud-phone-notch {
            width: 52px;
            height: 7px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .cloud-phone-screen {
            width: 100%;
            aspect-ratio: 9/18;
            border-radius: 20px;
            overflow: hidden;
            background: #111;
            flex: 1;
        }

        .cloud-phone-screen img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .cloud-phone-home {
            width: 36px;
            height: 36px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-top: 10px;
            flex-shrink: 0;
        }

        /* Position states via data-pos */
        .cloud-phone-frame[data-pos="0"] {
            transform: translateX(-320px) translateZ(-130px) rotateY(22deg) scale(0.78);
            opacity: 0.28;
            z-index: 1;
        }

        .cloud-phone-frame[data-pos="1"] {
            transform: translateX(-170px) translateZ(-55px) rotateY(12deg) scale(0.88);
            opacity: 0.6;
            z-index: 2;
        }

        .cloud-phone-frame[data-pos="2"] {
            transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
            opacity: 1;
            z-index: 5;
            box-shadow: 0 0 0 1.5px rgba(0, 240, 255, 0.4),
                0 0 30px rgba(0, 240, 255, 0.18),
                0 30px 60px rgba(0, 0, 0, 0.6);
            border-color: rgba(0, 240, 255, 0.35);
        }

        .cloud-phone-frame[data-pos="2"] .cloud-phone-screen img {
            transform: scale(1.03);
        }

        .cloud-phone-frame[data-pos="3"] {
            transform: translateX(170px) translateZ(-55px) rotateY(-12deg) scale(0.88);
            opacity: 0.6;
            z-index: 2;
        }

        .cloud-phone-frame[data-pos="4"] {
            transform: translateX(320px) translateZ(-130px) rotateY(-22deg) scale(0.78);
            opacity: 0.28;
            z-index: 1;
        }

        @media (max-width: 768px) {
            .cloud-phone-frame {
                width: 150px;
                border-radius: 28px;
            }

            .cloud-phone-stage {
                height: 340px;
            }

            .cloud-phone-frame[data-pos="0"] {
                transform: translateX(-230px) translateZ(-100px) rotateY(20deg) scale(0.76);
            }

            .cloud-phone-frame[data-pos="1"] {
                transform: translateX(-130px) translateZ(-45px) rotateY(11deg) scale(0.86);
            }

            .cloud-phone-frame[data-pos="3"] {
                transform: translateX(130px) translateZ(-45px) rotateY(-11deg) scale(0.86);
            }

            .cloud-phone-frame[data-pos="4"] {
                transform: translateX(230px) translateZ(-100px) rotateY(-20deg) scale(0.76);
            }
        }

        @media (max-width: 480px) {
            .cloud-phone-frame {
                width: 120px;
                border-radius: 24px;
            }

            .cloud-phone-stage {
                height: 300px;
                overflow: hidden;
            }

            .cloud-phone-frame[data-pos="0"],
            .cloud-phone-frame[data-pos="4"] {
                opacity: 0;
                pointer-events: none;
            }

            .cloud-phone-frame[data-pos="1"] {
                transform: translateX(-105px) translateZ(-35px) rotateY(10deg) scale(0.84);
            }

            .cloud-phone-frame[data-pos="3"] {
                transform: translateX(105px) translateZ(-35px) rotateY(-10deg) scale(0.84);
            }
        }


        /* ── SmartPayroll Desktop Feature Grid ── */
        .feature-grid-section {
            display: none;
            margin-top: 48px;
        }

        .tab-pane.active .feature-grid-section {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.1s both;
        }

        .feature-grid-heading {
            text-align: center;
            margin-bottom: 32px;
        }

        .feature-grid-heading h3 {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.1rem, 2vw, 1.5rem);
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px;
        }

        .feature-grid-heading h3 span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .feature-grid-heading p {
            font-size: 1.06rem;
            color: rgba(255, 255, 255, 0.5);
            margin: 0 auto;
            line-height: 1.65;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 28px 24px;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            cursor: default;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, rgba(255, 0, 212, 0.04) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 16px;
        }

        .feature-card:hover {
            border-color: rgba(0, 240, 255, 0.3);
            transform: translateY(-4px);
            box-shadow: 0 12px 36px rgba(0, 240, 255, 0.08);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(0, 240, 255, 0.08);
            border: 1px solid rgba(0, 240, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            font-size: 20px;
            position: relative;
            z-index: 1;
        }

        .feature-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1.18rem;
            font-weight: 600;
            color: #fff;
            margin: 0 0 10px;
            position: relative;
            z-index: 1;
        }

        .feature-card p {
            font-size: 0.98rem;
            color: rgba(255, 255, 255, 0.52);
            line-height: 1.65;
            margin: 0;
            position: relative;
            z-index: 1;
        }

        @media (max-width: 768px) {
            .feature-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }
        }

        @media (max-width: 480px) {
            .feature-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .feature-card {
                padding: 22px 18px;
            }
        }


        /* ── Cloud Phone Carousel — side arrows centred on stage ── */
        .cloud-phone-carousel {
            position: relative;
        }

        .cloud-phone-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1.5px solid rgba(0, 240, 255, 0.35);
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            color: #00f0ff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .2s, border-color .2s, transform .15s;
        }

        .cloud-phone-arrow:hover {
            background: rgba(0, 240, 255, 0.15);
            border-color: rgba(0, 240, 255, 0.7);
            transform: translateY(-50%) scale(1.1);
        }

        .cloud-phone-arrow.prev {
            left: 0;
        }

        .cloud-phone-arrow.next {
            right: 0;
        }

        /* hide old bottom controls bar for cloud carousel */
        #cloudCarouselSection .carousel-controls {
            display: flex;
            justify-content: center;
            margin-top: 18px;
        }

        #cloudCarouselSection .carousel-controls .carousel-btn {
            display: none;
        }


        /* ══════════════════════════════════════
           Smooth Infotech Introduction Section
        ══════════════════════════════════════ */

        /* Hero */
        .si-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
            padding: 40px 0 48px;
        }

        .si-badge {
            display: inline-block;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #00f0ff;
            border: 1px solid rgba(0, 240, 255, 0.3);
            background: rgba(0, 240, 255, 0.06);
            padding: 5px 14px;
            border-radius: 20px;
            margin-bottom: 20px;
        }

        .si-headline {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.6rem, 3.5vw, 2.6rem);
            font-weight: 800;
            color: #fff;
            line-height: 1.18;
            margin: 0 0 18px;
        }

        .si-headline span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .si-subtext {
            font-size: 1.08rem;
            color: rgba(255, 255, 255, 0.55);
            line-height: 1.75;
            margin: 0 0 28px;
        }

        .si-cta-row {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .si-cta-primary {
            padding: 13px 28px;
            border-radius: 30px;
            background: linear-gradient(90deg, #00f0ff, #7c5fff);
            border: none;
            color: #fff;
            font-family: 'Syne', sans-serif;
            font-size: 0.98rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: opacity .2s, transform .2s;
        }

        .si-cta-primary:hover {
            opacity: .85;
            transform: translateY(-2px);
        }

        .si-cta-secondary {
            padding: 12px 26px;
            border-radius: 30px;
            background: transparent;
            border: 1.5px solid rgba(0, 240, 255, 0.4);
            color: #00f0ff;
            font-family: 'Syne', sans-serif;
            font-size: 0.98rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s, border-color .2s, transform .2s;
        }

        .si-cta-secondary:hover {
            background: rgba(0, 240, 255, 0.08);
            border-color: rgba(0, 240, 255, 0.7);
            transform: translateY(-2px);
        }

        .si-trust-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .si-trust-item {
            font-size: 0.94rem;
            color: rgba(255, 255, 255, 0.45);
            font-family: 'Syne', sans-serif;
        }

        /* Hero right — expanding panel carousel */
        .si-hero-right {
            position: relative;
            height: 360px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }

        .si-acc-carousel {
            display: flex;
            width: 100%;
            height: 320px;
            gap: 8px;
        }

        .si-acc-panel {
            position: relative;
            flex: 0 0 56px;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: flex-basis .6s cubic-bezier(.2, .8, .2, 1);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .si-acc-panel.active {
            flex: 1 1 auto;
        }

        .si-acc-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 8, 20, 0.25), rgba(5, 8, 20, 0.78));
            transition: background .5s;
        }

        .si-acc-panel.active .si-acc-overlay {
            background: linear-gradient(135deg, rgba(0, 60, 90, 0.55), rgba(10, 14, 28, 0.6));
        }

        .si-acc-vertical-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 0.86rem;
            letter-spacing: 1px;
            color: #fff;
            white-space: nowrap;
            opacity: 1;
            transition: opacity .35s;
            z-index: 2;
        }

        .si-acc-panel.active .si-acc-vertical-label {
            opacity: 0;
            pointer-events: none;
        }

        .si-acc-content {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 26px 24px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .4s ease .15s, transform .4s ease .15s;
            z-index: 2;
        }

        .si-acc-panel.active .si-acc-content {
            opacity: 1;
            transform: translateY(0);
        }

        .si-acc-content h3 {
            font-family: 'Syne', sans-serif;
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            margin: 0 0 6px;
        }

        .si-acc-content p {
            font-size: 0.92rem;
            color: rgba(255, 255, 255, 0.75);
            margin: 0 0 16px;
        }

        .si-acc-details-btn {
            background: linear-gradient(90deg, #00c8ff, #0088ee);
            color: #fff;
            border: none;
            padding: 10px 26px;
            border-radius: 30px;
            font-family: 'Syne', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            box-shadow: 0 4px 18px rgba(0, 180, 255, 0.4);
            transition: transform .25s, box-shadow .25s, opacity .2s;
        }

        .si-acc-details-btn:hover {
            transform: translateY(-2px);
            opacity: 0.88;
            box-shadow: 0 8px 28px rgba(0, 180, 255, 0.55);
        }

        .si-acc-dots {
            display: flex;
            gap: 7px;
        }

        .si-acc-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: background .3s, transform .3s;
        }

        .si-acc-dot.active {
            background: #ff5e3a;
            transform: scale(1.3);
        }

        /* Pulse highlight for "What We Offer" cards scrolled-to via carousel Details */
        @keyframes siPointPulse {

            0%,
            100% {
                box-shadow: 0 14px 40px rgba(0, 240, 255, 0.07);
                border-color: rgba(255, 255, 255, 0.07);
            }

            50% {
                box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.35), 0 20px 50px rgba(0, 240, 255, 0.2);
                border-color: rgba(0, 240, 255, 0.5);
            }
        }

        .si-point-card.si-point-pulse,
        .si-products-strip.si-point-pulse {
            animation: siPointPulse 1s ease-in-out 2;
        }

        /* Section label */
        .si-section-label {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #00f0ff;
            opacity: 0.85;
            margin-bottom: 10px;
        }

        /* About block */
        /* ── Who We Are Section ── */
        .si-about-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.3rem, 2.5vw, 2rem);
            font-weight: 800;
            color: #fff;
            margin: 0 0 20px;
        }

        .si-about-title span {
            background: linear-gradient(90deg, #00f0ff, #7c5fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .si-who-section {
            padding: 48px 0 36px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 8px;
        }

        .si-who-para-block {
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(124, 95, 255, 0.06));
            border: 1px solid rgba(0, 240, 255, 0.13);
            border-radius: 18px;
            padding: 32px 36px;
            transition: border-color 0.35s, box-shadow 0.35s;
        }

        .si-who-para-block:hover {
            border-color: rgba(0, 240, 255, 0.30);
            box-shadow: 0 12px 36px rgba(0, 240, 255, 0.07);
        }

        .si-who-para-block p {
            font-size: 1.01rem;
            color: rgba(255, 255, 255, 0.60);
            line-height: 1.85;
            margin: 0 0 18px;
        }

        .si-who-para-block p:last-child {
            margin-bottom: 0;
        }

        .si-who-para-block strong {
            color: #00f0ff;
        }

        /* ── What We Offer Cards (Kodplay style) ── */
        .wwo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px 0 48px;
        }

        .wwo-box {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px 20px;
            width: 300px;
            height: 380px;
            transition: 0.5s;
        }

        .wwo-box::before {
            content: " ";
            position: absolute;
            top: 0;
            left: 50px;
            width: 50%;
            height: 100%;
            background: #fff;
            border-radius: 8px;
            transform: skewX(15deg);
            transition: 0.5s;
            opacity: 0.75;
        }

        .wwo-box::after {
            content: "";
            position: absolute;
            top: 0;
            left: 50px;
            width: 50%;
            height: 100%;
            background: #fff;
            border-radius: 8px;
            filter: blur(18px);
            transform: skewX(15deg);
            transition: 0.5s;
            opacity: 0.55;
        }

        .wwo-box:hover::before,
        .wwo-box:hover::after {
            left: 20px;
            width: calc(100% - 90px);
            transform: skewX(0deg);
        }

        .wwo-box:hover span::before {
            top: -50px;
            left: 50px;
            width: 100px;
            height: 100px;
            opacity: 1;
        }

        .wwo-box:hover span::after {
            bottom: -50px;
            right: 50px;
            width: 100px;
            height: 100px;
            opacity: 1;
        }

        .wwo-box:hover .wwo-content {
            left: -25px;
            padding: 60px 40px;
        }

        /* Card colour pairs — nth-child cycles through 6 cards */
        .wwo-box:nth-child(1)::before,
        .wwo-box:nth-child(1)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box:nth-child(2)::before,
        .wwo-box:nth-child(2)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box:nth-child(3)::before,
        .wwo-box:nth-child(3)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box:nth-child(4)::before,
        .wwo-box:nth-child(4)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box:nth-child(5)::before,
        .wwo-box:nth-child(5)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box:nth-child(6)::before,
        .wwo-box:nth-child(6)::after { background: linear-gradient(315deg, #0d8fd4, #cc1a4a); }

        .wwo-box span {
            display: block;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 5;
            pointer-events: none;
        }

        .wwo-box span::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 0; height: 0;
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            opacity: 0;
            transition: 0.5s;
            animation: wwo-animate 2s ease-in-out infinite;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .wwo-box span::after {
            content: "";
            position: absolute;
            bottom: 0; right: 0;
            width: 100%; height: 100%;
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            opacity: 0;
            transition: 0.5s;
            animation: wwo-animate 2s ease-in-out infinite;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            animation-delay: -1s;
        }

        .wwo-content {
            position: relative;
            z-index: 1;
            left: 0;
            padding: 20px 40px;
            color: #fff;
            border-radius: 8px;
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: 0.5s;
        }

        .wwo-content h2 {
            margin-bottom: 10px;
            font-size: 1.4em;
            font-family: 'Syne', sans-serif;
            font-weight: 800;
            color: #fff;
            line-height: 1.3;
        }

        .wwo-content p {
            margin-bottom: 10px;
            font-size: 0.92em;
            font-weight: 300;
            line-height: 1.65em;
            color: rgba(255,255,255,0.85);
            text-align: justify;
            hyphens: auto;
        }

        .wwo-content a {
            display: inline-block;
            margin-top: 5px;
            padding: 10px 18px;
            text-decoration: none;
            font-weight: 400;
            color: #fff;
            border-radius: 5px;
            border: 1px solid rgba(255,255,255,0.5);
            background-color: transparent;
            transition: 0.25s;
        }

        .wwo-content a:hover {
            color: #111;
            background-color: #fff;
        }

        @keyframes wwo-animate {
            0%, 100% { transform: translateY(10px); }
            50%       { transform: translateX(-10px); }
        }

        @media (max-width: 720px) {
            .wwo-box { width: 280px; height: 360px; margin: 20px 12px; }
        }

        /* Mission */
        .si-mission {
            display: flex;
            align-items: flex-start;
            gap: 28px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.07), rgba(124, 95, 255, 0.08));
            border: 1px solid rgba(0, 240, 255, 0.15);
            border-radius: 18px;
            padding: 32px 36px;
            margin-bottom: 48px;
        }

        .si-mission-icon {
            font-size: 2.4rem;
            flex-shrink: 0;
            filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
        }

        .si-mission-text {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.65);
            line-height: 1.78;
            margin: 8px 0 0;
        }

        .si-mission-text strong {
            color: #00f0ff;
        }

        /* Mission + Vision two-column */
        .si-mv-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 48px;
        }

        .si-mv-grid .si-mission {
            margin-bottom: 0;
        }

        @media (max-width: 720px) {
            .si-mv-grid { grid-template-columns: 1fr; }
        }

        /* YouTube embed */
        .si-video-section {
            text-align: center;
            margin-bottom: 48px;
        }

        .si-video-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.1rem, 2vw, 1.4rem);
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px;
        }

        .si-video-title span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .si-video-sub {
            font-size: 0.98rem;
            color: rgba(255, 255, 255, 0.42);
            margin: 0 0 24px;
        }

        .si-video-wrap {
            position: relative;
            width: 100%;
            max-width: 720px;
            margin: 0 auto 16px;
            aspect-ratio: 16/9;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(0, 240, 255, 0.18);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 240, 255, 0.08);
            will-change: transform;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }

        .si-video-wrap iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
            image-rendering: auto;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .si-video-note {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.3);
            margin: 0;
        }

        .si-video-note code {
            background: rgba(0, 240, 255, 0.1);
            border: 1px solid rgba(0, 240, 255, 0.2);
            border-radius: 4px;
            padding: 1px 6px;
            color: #00f0ff;
            font-size: 0.86rem;
        }

        /* Products strip */
        .si-products-strip {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding-top: 40px;
            margin-bottom: 10px;
        }

        .si-products-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
        }

        .si-product-pill {
            padding: 10px 22px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.04);
            font-family: 'Syne', sans-serif;
            font-size: 0.96rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            transition: border-color .2s, background .2s, color .2s, transform .2s;
            cursor: pointer;
        }

        .si-product-pill:hover {
            border-color: rgba(0, 240, 255, 0.4);
            background: rgba(0, 240, 255, 0.08);
            color: #00f0ff;
            transform: translateY(-3px);
        }

        @media (max-width: 860px) {
            .si-hero {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .si-hero-right {
                height: 280px;
            }

            .si-acc-carousel {
                height: 240px;
            }

            .si-acc-content h3 {
                font-size: 1.2rem;
            }

            .si-acc-content {
                padding: 18px 16px;
            }

            .si-mission {
                flex-direction: column;
                gap: 16px;
                padding: 24px;
            }
        }

        @media (max-width: 540px) {

            .si-acc-panel {
                flex: 0 0 38px;
            }

            .si-acc-content p {
                display: none;
            }
        }


        /* ══════════════════════════════════════
           Product Videos Grid
        ══════════════════════════════════════ */
        .product-videos-section {
            margin-top: 52px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .product-videos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .product-video-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 18px;
            transition: border-color .3s, transform .3s;
        }

        .product-video-card:hover {
            border-color: rgba(0, 240, 255, 0.25);
            transform: translateY(-4px);
        }

        .product-video-label {
            font-family: 'Syne', sans-serif;
            font-size: 0.98rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }

        .product-video-card .si-video-wrap {
            border-radius: 10px;
            overflow: hidden;
        }

        @media (max-width: 860px) {
            .product-videos-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 540px) {
            .product-videos-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ══════════════════════════════════════
           Career Page
        ══════════════════════════════════════ */
        .career-hero {
            text-align: center;
            padding: 40px 0 36px;
        }

        .career-hero-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 800;
            color: #fff;
            margin: 8px 0 16px;
        }

        .career-hero-title span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .career-hero-sub {
            font-size: 1.06rem;
            color: rgba(255, 255, 255, 0.5);
            max-width: 580px;
            margin: 0 auto 28px;
            line-height: 1.75;
        }

        .career-perks-row {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .career-perk {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 18px;
            border-radius: 24px;
            border: 1px solid rgba(0, 240, 255, 0.2);
            background: rgba(0, 240, 255, 0.05);
            font-family: 'Syne', sans-serif;
            font-size: 0.94rem;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Job cards */
        .career-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 36px;
        }

        .career-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 18px;
            padding: 28px 26px;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: border-color .3s, transform .3s, box-shadow .3s;
            position: relative;
            overflow: hidden;
        }

        .career-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.04), rgba(124, 95, 255, 0.04));
            opacity: 0;
            transition: opacity .3s;
        }

        .career-card:hover {
            border-color: rgba(0, 240, 255, 0.28);
            transform: translateY(-5px);
            box-shadow: 0 16px 48px rgba(0, 240, 255, 0.07);
        }

        .career-card:hover::before {
            opacity: 1;
        }

        .career-card-header {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
        }

        .career-card-icon {
            font-size: 1.8rem;
            flex-shrink: 0;
            filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));
        }

        .career-card-tag {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: #00f0ff;
            opacity: .75;
            margin-bottom: 5px;
        }

        .career-card-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            margin: 0;
            line-height: 1.25;
        }

        .career-card-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .career-card-list li {
            font-size: 0.96rem;
            color: rgba(255, 255, 255, 0.52);
            line-height: 1.6;
            padding-left: 16px;
            position: relative;
        }

        .career-card-list li::before {
            content: '✦';
            position: absolute;
            left: 0;
            font-size: 7px;
            color: #00f0ff;
            top: 3px;
        }

        .career-apply-btn {
            display: inline-block;
            padding: 11px 24px;
            border-radius: 30px;
            border: 1.5px solid rgba(0, 240, 255, 0.35);
            background: rgba(0, 240, 255, 0.06);
            color: #00f0ff;
            font-family: 'Syne', sans-serif;
            font-size: 0.94rem;
            font-weight: 700;
            cursor: pointer;
            align-self: flex-start;
            transition: background .2s, border-color .2s, transform .15s;
            position: relative;
            z-index: 1;
        }

        .career-apply-btn:hover {
            background: rgba(0, 240, 255, 0.14);
            border-color: rgba(0, 240, 255, 0.65);
            transform: translateY(-2px);
        }

        /* CTA block */
        .career-cta-block {
            display: flex;
            align-items: center;
            gap: 24px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.07), rgba(124, 95, 255, 0.08));
            border: 1px solid rgba(0, 240, 255, 0.15);
            border-radius: 18px;
            padding: 28px 32px;
            flex-wrap: wrap;
        }

        .career-cta-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .career-cta-block div {
            flex: 1;
            min-width: 180px;
        }

        .career-cta-block h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
            color: #fff;
            margin: 0 0 6px;
        }

        .career-cta-block p {
            font-size: 0.96rem;
            color: rgba(255, 255, 255, 0.5);
            margin: 0;
            line-height: 1.6;
        }

        @media (max-width: 760px) {
            .career-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ══════════════════════════════════════
           Contact Page
        ══════════════════════════════════════ */
        .contact-hero {
            text-align: center;
            padding: 36px 0 32px;
        }

        .contact-hero-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.4rem, 2.8vw, 2rem);
            font-weight: 800;
            color: #fff;
            margin: 8px 0 12px;
        }

        .contact-hero-title span {
            background: linear-gradient(90deg, #00f0ff, #ff00d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .contact-hero-sub {
            font-size: 1.02rem;
            color: rgba(255, 255, 255, 0.45);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.75;
        }

        /* Info cards row */
        .contact-info-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 32px;
        }

        .contact-info-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 14px;
            padding: 20px 18px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: border-color .3s, transform .3s;
        }

        .contact-info-card:hover {
            border-color: rgba(0, 240, 255, 0.22);
            transform: translateY(-3px);
        }

        .contact-info-icon {
            font-size: 1.4rem;
            flex-shrink: 0;
            filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.3));
        }

        .contact-info-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: 0.98rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 5px;
        }

        .contact-info-card p {
            font-size: 0.91rem;
            color: rgba(255, 255, 255, 0.45);
            margin: 0;
            line-height: 1.6;
        }

        /* Form + side */
        .contact-body {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 24px;
        }

        .contact-form-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 18px;
            padding: 32px 30px;
        }

        .contact-form-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px;
        }

        .contact-form-title span {
            background: linear-gradient(90deg, #00f0ff, #7c5fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .contact-form-sub {
            font-size: 0.96rem;
            color: rgba(255, 255, 255, 0.42);
            margin: 0 0 24px;
        }

        .cff-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-bottom: 14px;
        }

        .cff-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 14px;
        }

        .cff-group label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.45);
        }

        .cff-group input,
        .cff-group select,
        .cff-group textarea {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 11px 14px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.98rem;
            outline: none;
            transition: border-color .2s;
            font-family: inherit;
        }

        .cff-group input:focus,
        .cff-group select:focus,
        .cff-group textarea:focus {
            border-color: rgba(0, 240, 255, 0.4);
        }

        .cff-group select {
            appearance: none;
            cursor: pointer;
        }

        .cff-group select option {
            background: #0d0d1a;
        }

        .cff-group textarea {
            height: 110px;
            resize: vertical;
        }

        /* Side column */
        .contact-side {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .contact-products-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 22px 20px;
        }

        .contact-products-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.06rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 14px;
        }

        .contact-product-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .contact-product-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 8px;
            border-radius: 10px;
            cursor: pointer;
            transition: background .2s;
        }

        .contact-product-row:hover {
            background: rgba(0, 240, 255, 0.07);
        }

        .contact-product-icon {
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .contact-product-row div {
            flex: 1;
        }

        .contact-product-row strong {
            display: block;
            font-size: 0.96rem;
            color: #fff;
            font-weight: 600;
        }

        .contact-product-row span {
            font-size: 0.86rem;
            color: rgba(255, 255, 255, 0.38);
        }

        .contact-product-arrow {
            font-size: 0.96rem;
            color: rgba(0, 240, 255, 0.5);
        }

        .contact-social-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 22px 20px;
        }

        .contact-social-card h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1.06rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 14px;
        }

        .contact-social-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .contact-social-btn {
            padding: 9px 16px;
            border-radius: 24px;
            border: 1px solid rgba(0, 240, 255, 0.25);
            background: rgba(0, 240, 255, 0.05);
            color: #00f0ff;
            font-family: 'Syne', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background .2s, border-color .2s, transform .15s;
        }

        .contact-social-btn:hover {
            background: rgba(0, 240, 255, 0.13);
            border-color: rgba(0, 240, 255, 0.5);
            transform: translateY(-2px);
        }

        @media (max-width: 900px) {
            .contact-info-row {
                grid-template-columns: repeat(2, 1fr);
            }

            .contact-body {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 540px) {
            .contact-info-row {
                grid-template-columns: 1fr 1fr;
            }

            .cff-row {
                grid-template-columns: 1fr;
            }
        }


        /* ── Per-tab product video (hidden until tab active) ── */
        .product-tab-video {
            display: none;
            margin-top: 48px;
            text-align: center;
        }

        .tab-pane.active .product-tab-video {
            display: block;
            animation: bannerFadeIn 0.5s ease-out 0.1s both;
        }

        .ptv-header {
            margin-bottom: 20px;
        }

        .ptv-embed {
            max-width: 720px;
            margin: 0 auto 14px;
        }

        .ptv-gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 900px;
            margin: 0 auto 14px;
        }

        .ptv-gallery-item {
            flex: 1 1 320px;
            max-width: 420px;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(0, 240, 255, 0.18);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 240, 255, 0.08);
            background: rgba(255, 255, 255, 0.02);
            display: flex;
        }

        .ptv-gallery-item img {
            width: 100%;
            height: auto;
            object-fit: contain;
            display: block;
        }

        @media (max-width: 700px) {
            .ptv-gallery {
                flex-direction: column;
                align-items: center;
            }

            .ptv-gallery-item {
                max-width: 100%;
            }
        }


        /* ══════════════════════════════════════
           Services Page (services1)
        ══════════════════════════════════════ */
        .sv1-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-bottom: 20px;
        }

        .sv1-wide {
            grid-column: span 3;
        }

        .sv1-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 26px 22px;
            position: relative;
            overflow: hidden;
            transition: border-color .3s, transform .3s, box-shadow .3s;
        }

        .sv1-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(124, 95, 255, 0.04));
            opacity: 0;
            transition: opacity .3s;
        }

        .sv1-card:hover {
            border-color: rgba(0, 240, 255, 0.28);
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0, 240, 255, 0.07);
        }

        .sv1-card:hover::before {
            opacity: 1;
        }

        .sv1-wide .sv1-card-inner {
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }

        .sv1-icon {
            font-size: 2rem;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3));
        }

        .sv1-tag {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: #00f0ff;
            opacity: .9;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .sv1-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.18rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px;
            position: relative;
            z-index: 1;
            line-height: 1.3;
        }

        .sv1-desc {
            font-size: 0.96rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.68;
            margin: 0 0 12px;
            position: relative;
            z-index: 1;
        }

        .sv1-bullets {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            z-index: 1;
        }

        .sv1-bullets li {
            font-size: 0.91rem;
            color: rgba(255, 255, 255, 0.42);
            padding-left: 14px;
            position: relative;
        }

        .sv1-bullets li::before {
            content: '✦';
            position: absolute;
            left: 0;
            font-size: 7px;
            color: #00f0ff;
            top: 2px;
        }

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

            .sv1-wide {
                grid-column: span 2;
            }
        }

        @media (max-width: 540px) {
            .sv1-grid {
                grid-template-columns: 1fr;
            }

            .sv1-wide {
                grid-column: span 1;
            }

            .sv1-wide .sv1-card-inner {
                flex-direction: column;
                gap: 0;
            }
        }

        /* ── Media Queries ── */

        /* Tablet landscape (<=1024px) */
        @media (max-width: 1024px) {
            .product-detail-right {
                flex: 0 0 300px;
            }
        }

        /* Tablet portrait (<=768px) — stack vertically */
        @media (max-width: 768px) {
            .product-detail-banner {
                flex-direction: column;
                gap: 32px;
                padding: 32px 24px;
            }

            .product-detail-left {
                width: 100%;
            }

            .product-detail-right {
                flex: none;
                width: 100%;
            }

            .product-detail-right img {
                height: 220px;
            }

            .product-detail-heading {
                font-size: 1.4rem;
            }
        }

        /* Mobile (<=480px) */
        @media (max-width: 480px) {
            .product-detail-banner {
                padding: 24px 16px;
                gap: 24px;
            }

            .product-detail-heading {
                font-size: 1.2rem;
            }

            .product-detail-desc {
                font-size: 1.06rem;
            }

            .product-detail-right img {
                height: 180px;
            }

            .product-detail-cta {
                width: 100%;
                text-align: center;
            }
        }

        /* ── Contact Google Map ── */
        .contact-map-wrap {
            margin-bottom: 24px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(0, 240, 255, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        }

        .contact-map-wrap iframe {
            display: block;
            filter: invert(90%) hue-rotate(180deg) saturate(0.8) brightness(0.85);
        }

        .contact-map-label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.03);
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            font-size: 0.91rem;
            color: rgba(255, 255, 255, 0.5);
            font-family: 'Syne', sans-serif;
        }
/* ── Company Logo in Introduction ── */
.si-logo-top {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.si-logo-img {
    height: 72px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 4px 16px rgba(0,240,255,0.18));
}

/* ── Client Logos Carousel ── */
.si-clients-section {
    text-align: center;
    margin-bottom: 52px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.si-clients-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.si-clients-title span {
    background: linear-gradient(90deg, #00f0ff, #ff00d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.si-clients-sub {
    font-size: 0.96rem;
    color: rgba(255,255,255,0.38);
    margin: 0 0 28px;
}
.si-clients-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}
.si-clients-viewport {
    overflow: hidden;
    flex: 1;
}
.si-clients-track {
    display: flex;
    gap: 16px;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}
.si-client-item {
    flex: 0 0 auto;
    width: 110px;
    height: 68px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    transition: border-color 0.25s, transform 0.25s;
}
.si-client-item:hover {
    border-color: rgba(0,240,255,0.3);
    transform: translateY(-3px);
}
.si-client-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(40%) brightness(1.1);
    transition: filter 0.25s;
}
.si-client-item:hover img {
    filter: grayscale(0%) brightness(1.2);
}
.si-clients-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0,240,255,0.3);
    background: rgba(0,0,0,0.4);
    color: #00f0ff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    z-index: 2;
}
.si-clients-arrow:hover {
    background: rgba(0,240,255,0.12);
    border-color: rgba(0,240,255,0.6);
    transform: scale(1.1);
}
.si-clients-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}
.si-clients-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}
.si-clients-dot.active {
    background: #00f0ff;
    transform: scale(1.4);
}
@media (max-width: 600px) {
    .si-client-item { width: 86px; height: 56px; }
}

/* ─── Contact Form Feedback Message ─── */
.cff-feedback {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.96rem;
    margin-bottom: 14px;
    font-family: 'Syne', sans-serif;
}
.cff-feedback--success {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: #00e676;
}
.cff-feedback--error {
    background: rgba(255, 61, 113, 0.1);
    border: 1px solid rgba(255, 61, 113, 0.3);
    color: #ff3d71;
}

/* ════════════════════════════════════════
   Main Page — Stats Strip
════════════════════════════════════════ */
.main-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 28px 40px;
    margin: 0 0 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
}
.main-stat-item {
    flex: 1;
    text-align: center;
    padding: 8px 20px;
}
.main-stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #00f0ff;
    line-height: 1;
    margin-bottom: 6px;
}
.main-stat-num span {
    font-size: 1.3rem;
}
.main-stat-lbl {
    font-size: 0.94rem;
    color: rgba(255,255,255,0.45);
    font-family: 'Syne', sans-serif;
    letter-spacing: 0.5px;
}
.main-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* ════════════════════════════════════════
   Main Page — Clients Carousel wrapper
════════════════════════════════════════ */
.main-clients-wrap {
    margin-bottom: 0;
    padding: 20px 0 10px;
}
.main-clients-wrap .si-clients-section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ════════════════════════════════════════
   Footer — Full Layout
════════════════════════════════════════ */
.footer {
    background: rgba(8, 8, 28, 0.55);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,240,255,0.12);
    padding: 0;
    margin-top: 20px;
    border-radius: 18px 18px 0 0;
}
.footer-body {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 40px;
    padding: 48px 52px 36px;
}
.footer-heading {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0ff;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00f0ff;
    display: inline-block;
}
/* Menu links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-links li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #00d4ff;
    border-radius: 1px;
    flex-shrink: 0;
    display: inline-block;
}
.footer-links a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 1.06rem;
    transition: color .2s;
}
.footer-links a:hover { color: #00f0ff; }
/* Address */
.footer-address {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer-addr-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.02rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}
.footer-addr-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
.footer-addr-item a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color .2s;
}
.footer-addr-item a:hover { color: #00f0ff; }
/* Social icons */
.footer-social {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-social-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.footer-social-btn svg { width: 18px; height: 18px; }
.footer-social-btn:hover {
    background: rgba(0,240,255,0.12);
    border-color: rgba(0,240,255,0.4);
    color: #00f0ff;
    transform: translateY(-3px);
}
/* Footer bottom */.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 16px 52px;
    text-align: center;
}
.footer-bottom p {
    font-size: 0.94rem;
    color: rgba(255,255,255,0.35);
    margin: 0;
}
@media (max-width: 900px) {
    .footer-body { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 28px 28px; }
    .main-stats-strip { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 540px) {
    .footer-body { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px 20px; }
    .footer-bottom { padding: 14px 20px; }
    .main-stats-strip { padding: 20px 16px; }
}

/* ── Sphere orb buttons — circuit overlay & outer glow ── */
.menu-item .menu-circuit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,200,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(100,80,255,0.06) 0%, transparent 50%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
/* Outer soft glow halo */
.menu-item-outer {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
/* Bottom label below sphere */
.menu-title {
    position: relative !important;
    z-index: 4 !important;
    margin-top: 0 !important;
}
/* Pulsing outer glow ring on each button */
@keyframes spherePulse {
    0%   { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 0 rgba(0,180,255,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
    50%  { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 12px rgba(0,180,255,0), inset 0 1px 0 rgba(255,255,255,0.12); }
    100% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 0 rgba(0,180,255,0), inset 0 1px 0 rgba(255,255,255,0.12); }
}
.menu-item.initial-load.visible,
.menu-item.visible {
    animation: spherePulse 3s ease-in-out infinite;
}
.menu-item.initial-load:nth-child(1) { animation: menuAppear 0.5s ease-out 1.1s forwards; }
.menu-item.initial-load:nth-child(2) { animation: menuAppear 0.5s ease-out 1.2s forwards; }
.menu-item.initial-load:nth-child(3) { animation: menuAppear 0.5s ease-out 1.3s forwards; }
.menu-item.initial-load:nth-child(4) { animation: menuAppear 0.5s ease-out 1.4s forwards; }
.menu-item.initial-load:nth-child(5) { animation: menuAppear 0.5s ease-out 1.5s forwards; }
.menu-item.initial-load:nth-child(6) { animation: menuAppear 0.5s ease-out 1.6s forwards; }
/* Badge bounce on hover */
.menu-item:hover .menu-badge {
    transform: scale(1.12) translateY(-2px);
    box-shadow:
        0 0 30px rgba(0,220,255,0.7),
        0 0 60px rgba(0,180,255,0.4),
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
    background: radial-gradient(circle at 35% 30%,
        #00f0ff 0%,
        #00aaff 40%,
        #0066dd 70%,
        #0044aa 100%);
}
/* Menu title glow on hover */
.menu-item:hover .menu-title {
    color: #00f0ff !important;
    text-shadow: 0 0 12px rgba(0,240,255,0.6);
    letter-spacing: 2.5px;
}
/* Responsive: keep circles on mobile */
@media (max-width: 768px) {
    .menu-grid { grid-template-columns: repeat(3, 150px) !important; gap: 18px !important; }
    .menu-item { width: 150px !important; height: 150px !important; }
    .menu-badge { width: 56px !important; height: 56px !important; font-size: 18px !important; }
}
@media (max-width: 540px) {
    .menu-grid { grid-template-columns: repeat(2, 140px) !important; gap: 16px !important; }
    .menu-item { width: 140px !important; height: 140px !important; }
}

/* ── Footer transparent NexaVerse restyle ── */
.footer-body {
    grid-template-columns: 1fr 1.6fr 1fr !important;
    background: transparent;
}
.footer-heading {
    color: #00f0ff !important;
    border-bottom-color: #00f0ff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.02rem !important;
}
.footer-links a { color: rgba(200,220,255,0.7) !important; }
.footer-addr-item { color: rgba(200,220,255,0.65) !important; }
.footer-social-btn {
    background: rgba(0,240,255,0.06) !important;
    border-color: rgba(0,240,255,0.2) !important;
    color: rgba(0,240,255,0.8) !important;
}
.footer-social-btn:hover {
    background: rgba(0,240,255,0.18) !important;
    border-color: #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 12px rgba(0,240,255,0.3);
}
.footer-bottom {
    background: rgba(0,240,255,0.04);
    border-top-color: rgba(0,240,255,0.1) !important;
}
.footer-bottom p { color: rgba(150,180,255,0.45) !important; }

/* ════════════════════════════════════════════════════════════
   NEW MAIN PAGE — Smooth Infotech Design
════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
.si-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 48px;
    background: rgba(8,8,28,0.75);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,240,255,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.si-navbar-logo img {
    height: 90px;
    width: auto;
    object-fit: contain;
}
.si-navbar-links {
    display: flex;
    list-style: none;
    gap: 36px;
    padding: 0; margin: 0;
}
.si-navbar-links a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.si-navbar-links a:hover,
.si-navbar-links a.active {
    color: #00f0ff;
    border-bottom-color: #00f0ff;
}

/* ── Hero Section ── */
.si-hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 64px 48px 48px;
    min-height: 520px;
}
.si-hero-heading {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 12px;
}
.si-h-cyan  { color: #00f0ff; text-shadow: 0 0 30px rgba(0,240,255,0.5); }
.si-h-white { color: #ffffff; }
.si-h-pink  { color: #ff00d4; text-shadow: 0 0 30px rgba(255,0,212,0.5); }
.si-hero-tagline {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.45);
    margin: 0 0 18px;
    text-transform: uppercase;
}
.si-hero-desc {
    font-size: 20px;
    color: rgba(255,255,255,0.65);
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 420px;
}
.si-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.si-btn-primary {
    padding: 13px 26px;
    background: linear-gradient(90deg, #00c8ff, #0088ee);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    box-shadow: 0 4px 20px rgba(0,180,255,0.4);
}
.si-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.si-btn-outline {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid #ff00d4;
    border-radius: 30px;
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.si-btn-outline:hover { background: rgba(255,0,212,0.12); transform: translateY(-2px); }
.si-hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.si-trust-icon { font-size: 1.8rem; }
.si-hero-trust strong { color: #00f0ff; }

/* ── Hero Visual (laptop mockup) ── */
.si-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px;
}
.si-laptop-glow {
    position: absolute;
    width: 360px;
    height: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,180,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}
.si-mock-laptop {
    width: 340px;
    background: rgba(12,14,40,0.95);
    border: 1px solid rgba(0,240,255,0.25);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,180,255,0.15);
}
.si-mock-screen { padding: 14px; }
.si-mock-header {
    padding: 6px 10px;
    background: rgba(0,240,255,0.07);
    border-radius: 6px;
    margin-bottom: 10px;
}
.si-mock-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.si-mock-stat {
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}
.si-ms-green { background: rgba(0,200,120,0.1) !important; }
.si-ms-blue  { background: rgba(0,180,255,0.1) !important; }
.si-ms-label { font-size: 8px; color: rgba(255,255,255,0.4); margin-bottom: 3px; }
.si-ms-val   { font-size: 14px; font-weight: 700; color: #fff; font-family: 'Syne',sans-serif; }
.si-mock-chart { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 8px; }
.si-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
}
.si-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    opacity: 0.8;
    animation: barGrow 1.5s ease-out both;
}
@keyframes barGrow { from { height: 0% !important; } }
.si-float-icon {
    position: absolute;
    background: rgba(10,12,40,0.85);
    border: 1px solid rgba(0,240,255,0.3);
    border-radius: 50%;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    backdrop-filter: blur(8px);
    animation: floatBob 3s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(0,180,255,0.2);
}
.si-fi1 { top: 10%; left: 4%; animation-delay: 0s; }
.si-fi2 { top: 8%; right: 4%; animation-delay: 1s; }
.si-fi3 { bottom: 18%; right: 6%; animation-delay: 2s; }
@keyframes floatBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ── Section Divider ── */
.si-section-divider {
    text-align: center;
    padding: 16px 48px;
    position: relative;
    margin: 0 48px;
}
.si-section-divider::before,
.si-section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.4));
}
.si-section-divider::before { left: 0; }
.si-section-divider::after  { right: 0; background: linear-gradient(270deg, transparent, rgba(0,240,255,0.4)); }
.si-section-divider span {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #00f0ff;
    letter-spacing: 3px;
    background: #0a0a18;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   HR & PAYROLL SOLUTIONS — Auto Tab Carousel (Progress Bar)
═══════════════════════════════════════════════════════════ */
.si-tab-carousel-section {
    padding: 60px 60px 70px;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.si-tab-carousel-header {
    text-align: center;
    margin-bottom: 36px;
}

.si-tab-carousel-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0;
}
.si-tab-carousel-title span {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════
   Tab Navigation — progress style
════════════════════════════ */
.si-tab-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* Each tab is a compact rectangular button */
.si-tab-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: 'Syne', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 18px 0;
    cursor: pointer;
    position: relative;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
    letter-spacing: 0.15px;
    text-align: left;
    min-width: 130px;
    overflow: hidden;
}
.si-tab-btn:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
}
.si-tab-btn.active {
    color: #fff;
    font-weight: 700;
    background: rgba(0,240,255,0.06);
    border-color: rgba(0,240,255,0.28);
}

/* ── Progress bar sits at the bottom of each button ── */
.si-tab-progress {
    display: block;
    width: 100%;
    height: 3.5px;
    background: rgba(255,255,255,0.07);
    margin-top: 10px;
    border-radius: 0 0 7px 7px;
    overflow: hidden;
    flex-shrink: 0;
}
.si-tab-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 0 0 7px 7px;
}
/* Active tab fires the progress animation */
.si-tab-btn.active .si-tab-progress-bar {
    animation: siTabProgress 5s linear forwards;
}
@keyframes siTabProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ════════════════════════════
   Panels
════════════════════════════ */
.si-tab-panels { position: relative; }
.si-tab-panel {
    display: none;
}
.si-tab-panel.active {
    display: block;
    animation: siTabFadeIn .38s ease forwards;
}
@keyframes siTabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Compact Rectangle Card ── */
.si-tab-panel-content {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    align-items: stretch;
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
}

/* Left: text */
.si-tab-panel-text {
    padding: 34px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.si-tab-panel-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}
.si-tab-panel-text h3 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.38rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 10px;
}
.si-tab-panel-text p {
    font-size: 13.5px;
    color: rgba(255,255,255,0.52);
    line-height: 1.72;
    margin: 0 0 16px;
}

/* Feature list */
.si-tab-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.si-tab-feature-list li {
    font-size: 13px;
    color: rgba(255,255,255,0.68);
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 8px;
}
.si-feat-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(0,240,255,0.6);
}

/* CTA button */
.si-tab-cta {
    display: inline-flex;
    align-items: center;
    font-family: 'Syne', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #0a0a12;
    background: linear-gradient(90deg, var(--primary), #0099dd);
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,240,255,0.28);
    transition: transform .18s, box-shadow .18s;
    align-self: flex-start;
}
.si-tab-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,240,255,0.42);
}

/* Right: image */
.si-tab-panel-visual {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: rgba(0,0,0,0.22);
}
.si-tab-panel-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.si-tab-panel-visual:hover img { transform: scale(1.04); }

/* Cardboard / product box images — show the full image, no cropping */
.si-tab-panel-visual--contain {
    background: radial-gradient(ellipse at 60% 50%, rgba(0,240,255,0.07) 0%, rgba(10,10,20,0.55) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.si-tab-panel-visual--contain img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 28px rgba(0,240,255,0.18)) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform .6s ease, filter .6s ease;
}
.si-tab-panel-visual--contain:hover img {
    transform: scale(1.06) translateY(-4px);
    filter: drop-shadow(0 14px 36px rgba(0,240,255,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .si-tab-carousel-section { padding: 40px 20px 50px; }
    .si-tab-nav { gap: 4px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .si-tab-nav::-webkit-scrollbar { display: none; }
    .si-tab-btn { min-width: 110px; font-size: 12px; padding: 9px 14px 0; }
    .si-tab-panel-content { grid-template-columns: 1fr; }
    .si-tab-panel-visual { min-height: 190px; order: -1; }
    .si-tab-panel-visual--contain { min-height: 220px; padding: 16px; }
    .si-tab-panel-visual--contain img { max-height: 200px; }
    .si-tab-panel-text { border-right: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 24px 20px; }
}




/* ── Stats Bar ── */
.si-stats-bar {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    margin: 40px 60px;
    background: rgba(0,240,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,240,255,0.15);
}
.si-stat-item-new {
    background: rgba(8,10,32,0.85);
    padding: 28px 20px;
    text-align: center;
    transition: background .2s;
}
.si-stat-item-new:hover { background: rgba(0,240,255,0.06); }
.si-stat-icon-new { font-size: 1.8rem; margin-bottom: 8px; }
.si-stat-big {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.si-stat-small { font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.4; }

/* ── Trusted By ── */
.si-trusted-section {
    padding: 40px 60px 50px;
}
.si-trusted-label {
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 24px;
}
.si-trusted-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.si-logo-pill {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 18px;
    height: 60px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, transform .2s;
    min-width: 100px;
}
.si-logo-pill:hover { border-color: rgba(0,240,255,0.3); transform: translateY(-3px); }
.si-logo-pill img { max-height: 36px; max-width: 90px; object-fit: contain; filter: brightness(1.1) grayscale(20%); }

/* ── Menu Cards Label ── */
.si-nav-cards-label {
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    padding: 24px 0 8px;
}

/* ── Menu cards extra content ── */
.menu-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    line-height: 1.5;
    margin: 6px 8px 0;
    position: relative;
    z-index: 1;
}
.menu-explore {
    font-size: 13px;
    color: #00f0ff;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    margin-top: 8px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity .2s;
}
.menu-item:hover .menu-explore { opacity: 1; }

/* ── Updated menu-grid for card layout ── */
.menu-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 0 48px !important;
    width: auto !important;
    max-width: none !important;
    align-items: stretch !important;
}
.menu-item {
    border-radius: 16px !important;
    height: auto !important;
    min-height: 220px !important;
    width: auto !important;
    padding: 30px 18px 24px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
}
.menu-badge {
    width: 60px !important; height: 60px !important;
    margin-bottom: 10px !important;
}
.menu-title {
    font-size: 15px !important;
    letter-spacing: 1.5px !important;
    color: #00f0ff !important;
    margin-bottom: 4px !important;
}

/* ── CTA Banner ── */
.si-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(0,180,255,0.08), rgba(124,95,255,0.1));
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 18px;
    padding: 28px 40px;
    margin: 24px 48px 32px;
    gap: 24px;
    flex-wrap: wrap;
}
.si-cta-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}
.si-cta-ring {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,240,255,0.1);
    border: 2px solid rgba(0,240,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.si-cta-left h3 { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0 0 5px; }
.si-cta-left p  { font-size: 15px; color: rgba(255,255,255,0.5); margin: 0; }
.si-cta-right { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .si-navbar { padding: 12px 20px; }
    .si-navbar-links { gap: 18px; }
    .si-hero-section { grid-template-columns: 1fr; padding: 36px 24px; }
    .si-hero-visual { display: none; }
    .si-features-row { grid-template-columns: 1fr; padding: 16px 24px; }
    .si-stats-bar { grid-template-columns: repeat(2,1fr); margin: 16px 24px; }
    .si-trusted-section { padding: 20px 24px; }
    .si-section-divider { margin: 0 24px; }
    .menu-grid { padding: 0 24px !important; grid-template-columns: repeat(2,1fr) !important; }
    .si-cta-banner { margin: 16px 24px 24px; padding: 20px 24px; flex-direction: column; }
    .si-cta-right { justify-content: center; }
}
@media (max-width: 540px) {
    .si-navbar-links { display: none; }
    .si-stats-bar { grid-template-columns: 1fr 1fr; }
    .menu-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   Mobile App Section
════════════════════════════════════════════════════════════ */
.si-mobileapp-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding: 80px 60px;
    margin: 0 0 8px;
    position: relative;
}
.si-mobileapp-label {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #00c8ff;
    margin-bottom: 16px;
}
.si-mobileapp-heading {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 20px;
}
.si-mobileapp-desc {
    font-size: 19px;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 420px;
}
.si-mobileapp-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.si-store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px 20px;
    text-decoration: none;
    transition: border-color .25s, transform .2s, background .25s;
}
.si-store-btn:hover {
    border-color: rgba(0,200,255,0.45);
    background: rgba(0,200,255,0.06);
    transform: translateY(-3px);
}
.si-store-icon {
    font-size: 22px;
    color: #fff;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.si-store-text { display: flex; flex-direction: column; }
.si-store-text small { font-size: 12px; color: rgba(255,255,255,0.45); }
.si-store-text strong { font-size: 16px; color: #fff; font-family: 'Syne', sans-serif; font-weight: 700; }

/* Phone mockup */
.si-mobileapp-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 460px;
}
.si-phone-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0,200,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}
.si-phone-frame {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 450px;
    background: #0d0f28;
    border: 3px solid rgba(0,200,255,0.25);
    border-radius: 36px;
    padding: 10px;
    box-shadow:
        0 0 0 1px rgba(0,200,255,0.1),
        0 30px 70px rgba(0,0,0,0.55),
        0 0 50px rgba(0,180,255,0.15);
}
.si-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    z-index: 2;
}
.si-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: #0a0a18;
}
.si-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .si-mobileapp-section { grid-template-columns: 1fr; padding: 36px 24px; gap: 28px; }
    .si-mobileapp-visual { height: 360px; order: -1; }
    .si-phone-frame { width: 180px; height: 360px; }
}

/* ── Bigger "Explore Our Solutions" heading ── */
.si-nav-cards-label {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #00f0ff !important;
    text-shadow: 0 0 20px rgba(0,240,255,0.3);
}
@media (max-width: 540px) {
    .si-nav-cards-label { font-size: 18px !important; }
}

/* ════════════════════════════════════════════════════════════
   WhatsApp Button (Contact — Call Us card)
════════════════════════════════════════════════════════════ */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(37,211,102,0.12);
    border: 1px solid rgba(37,211,102,0.4);
    color: #25d366;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background .2s, border-color .2s, transform .15s;
}
.whatsapp-btn:hover {
    background: rgba(37,211,102,0.22);
    border-color: #25d366;
    transform: translateY(-2px);
}
.whatsapp-btn svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   Footer Alignment Fix (home page)
════════════════════════════════════════════════════════════ */
.footer-body {
    align-items: start !important;
}
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-heading {
    display: inline-block !important;
    width: fit-content;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}
.footer-links,
.footer-address {
    margin-top: 0;
    width: 100%;
}
.footer-social {
    margin-top: 0;
    align-items: center;
}
@media (max-width: 900px) {
    .footer-col { align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   WhatsApp Floating Button (Home page only)
════════════════════════════════════════════════════════════ */
.whatsapp-float-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #25d366, #1ebe5d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5);
    z-index: 999;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: waPulse 2.4s ease-in-out infinite;
}
.whatsapp-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37,211,102,0.6);
}
@keyframes waPulse {
    0%   { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 540px) {
    .whatsapp-float-btn { width: 50px; height: 50px; bottom: 18px; right: 18px; }
    .whatsapp-float-btn svg { width: 24px; height: 24px; }
}

/* ════════════════════════════════════════════════════════════
   Hero mini PFESIC carousel (scaled down for hero section)
════════════════════════════════════════════════════════════ */
.hero-mini-carousel {
    display: block !important;
    margin: 0 !important;
    transform: scale(0.78);
    transform-origin: center;
}
.hero-mini-carousel .pf-stage { height: 340px; }
.hero-mini-carousel .pf-card { width: 200px; }

/* ════════════════════════════════════════════════════════════
   Home page Cloud app carousel (scaled to fit mobile-app section)
════════════════════════════════════════════════════════════ */
.home-app-carousel {
    display: block !important;
    position: relative;
    margin: 0 !important;
}
.home-app-carousel .mobile-carousel-label { display: none; }
.home-app-carousel .cloud-phone-stage { height: 380px; }
.home-app-carousel .cloud-phone-frame { width: 170px; }

/* ════════════════════════════════════════════════════════════
   Home page mobile-app carousel — bottom arrows (not side)
════════════════════════════════════════════════════════════ */
.home-carousel-controls-bottom {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.cloud-phone-arrow-bottom {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,240,255,0.35);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    color: #00f0ff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, transform .15s;
    flex-shrink: 0;
}
.cloud-phone-arrow-bottom:hover {
    background: rgba(0,240,255,0.15);
    border-color: rgba(0,240,255,0.7);
    transform: scale(1.1);
}

/* ════════════════════════════════════════════════════════════
   Book a Demo Side Tab + Software List Panel (Home page only)
════════════════════════════════════════════════════════════ */
/* ── Book a Demo Side Tab — Nexaverse Theme ── */
.demo-side-tab {
    position: fixed;
    right: 0;
    left: auto;
    top: 42%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    color: #0a0a12;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 20px 12px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    z-index: 998;
    box-shadow: -4px 0 30px rgba(0,240,255,0.5), 0 0 60px rgba(255,0,212,0.2);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: transform .25s ease, box-shadow .25s ease;
    border: none;
}
.demo-side-tab:hover {
    transform: translateY(-50%) translateX(-5px);
    box-shadow: -6px 0 40px rgba(0,240,255,0.75), 0 0 80px rgba(255,0,212,0.35);
}

.demo-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    display: none;
}
.demo-panel-overlay.active { display: block; }

.demo-panel {
    position: fixed;
    right: 68px;
    left: auto;
    top: 42%;
    transform: translateY(-50%) translateX(20px) scale(0.93);
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(145deg, #0f0f1e 0%, #161628 100%);
    border: 1px solid rgba(0,240,255,0.2);
    color: #fff;
    width: 280px;
    border-radius: 20px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 40px rgba(0,240,255,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: opacity .3s ease, transform .3s ease;
    z-index: 1000;
    overflow: hidden;
}
.demo-panel-overlay.active .demo-panel {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    pointer-events: auto;
}
/* Glowing orb background inside panel */
.demo-panel-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(0,240,255,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.demo-panel-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.demo-panel-close:hover { background: rgba(255,0,212,0.15); color: #fff; border-color: rgba(255,0,212,0.4); }
.demo-panel-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.demo-panel-icon {
    font-size: 30px;
    margin-bottom: 8px;
}
.demo-panel-title {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}
.demo-panel-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.3px;
}
.demo-panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.demo-panel-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.82);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 13px;
    transition: background .18s, border-color .18s, color .18s, transform .15s;
}
.demo-panel-list a:hover {
    background: rgba(0,240,255,0.08);
    border-color: rgba(0,240,255,0.35);
    color: var(--primary);
    transform: translateX(-3px);
}
.demo-list-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.demo-panel-cta {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(90deg, var(--primary) 0%, #0088ee 50%, var(--secondary) 100%);
    background-size: 200% auto;
    border: none;
    border-radius: 12px;
    color: #0a0a12;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0,240,255,0.35);
    transition: background-position .4s ease, transform .15s ease, box-shadow .2s ease;
    position: relative;
    z-index: 1;
}
.demo-panel-cta:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,240,255,0.55);
}

@media (max-width: 768px) {
    .demo-side-tab {
        top: 60%;
        font-size: 12px;
        padding: 13px 9px;
    }
    .demo-panel {
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.93);
        width: 88%;
        max-width: 300px;
    }
    .demo-panel-overlay.active .demo-panel {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ════════════════════════════════════════════════════════════
   Scroll Reveal Utility (used by Why Choose Us / Industries)
════════════════════════════════════════════════════════════ */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   Why Choose Us Section
════════════════════════════════════════════════════════════ */
.si-why-section {
    padding: 100px 60px 70px;
    position: relative;
    z-index: 2;
}
.si-why-heading {
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 56px;
    font-weight: 600;
    margin: 8px 0 14px;
    color: #fff;
}
.si-why-heading span {
    color: var(--primary);
}
.si-why-sub {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 50px;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    line-height: 1.7;
}
.why-carousel-wrap {
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
}
.why-carousel-track {
    display: flex;
    transition: transform .5s ease;
}
.why-card {
    flex: 0 0 calc(33.333% - 20px);
    margin: 0 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 32px 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,240,255,0.4);
    box-shadow: 0 16px 40px rgba(0,240,255,0.15);
}
.why-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(0,240,255,0.1);
    border: 1px solid rgba(0,240,255,0.3);
    margin-bottom: 18px;
    animation: whyIconFloat 3s ease-in-out infinite;
}
@keyframes whyIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.why-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}
.why-card p {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}
.why-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
}
.why-carousel-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,240,255,0.35);
    background: rgba(0,0,0,0.45);
    color: var(--primary);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, transform .15s;
}
.why-carousel-arrow:hover {
    background: rgba(0,240,255,0.15);
    border-color: rgba(0,240,255,0.7);
    transform: scale(1.1);
}
.why-carousel-dots {
    display: flex;
    gap: 8px;
}
.why-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.why-dot.active {
    background: var(--primary);
    transform: scale(1.3);
}

@media (max-width: 1000px) {
    .why-card { flex: 0 0 calc(50% - 20px); }
}
@media (max-width: 640px) {
    .why-card { flex: 0 0 calc(100% - 20px); }
    .si-why-section { padding: 60px 20px 30px; }
    .si-why-heading { font-size: 36px; }
}

/* ════════════════════════════════════════════════════════════
   Industries Served Section
════════════════════════════════════════════════════════════ */
.si-industries-section {
    padding: 90px 60px 40px;
    position: relative;
    z-index: 2;
}
.si-industries-heading {
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 52px;
    font-weight: 600;
    margin: 8px 0 40px;
    color: #fff;
}
.si-industries-heading span {
    color: var(--secondary);
}
.industries-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}
.industry-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 26px 14px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
    cursor: default;
}
.industry-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(255,0,212,0.4);
    box-shadow: 0 14px 34px rgba(255,0,212,0.15);
    background: rgba(255,255,255,0.05);
}
.industry-icon {
    font-size: 30px;
    margin-bottom: 12px;
    display: inline-block;
    transition: transform .3s ease;
}
.industry-card:hover .industry-icon {
    transform: scale(1.15) rotate(-4deg);
}
.industry-card span {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

@media (max-width: 1000px) {
    .industries-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .si-industries-section { padding: 50px 20px 20px; }
    .si-industries-heading { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   SmartPLS Feature Carousel
═══════════════════════════════════════════════════════════ */
.pls-feature-carousel-wrap {
    padding: 48px 0 40px;
    position: relative;
}

/* Header */
.pls-fc-header {
    text-align: center;
    margin-bottom: 32px;
}
.pls-fc-header h3 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 10px;
}
.pls-fc-header h3 span {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pls-fc-header p {
    font-size: 14px;
    color: rgba(255,255,255,0.48);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Tab Nav */
.pls-fc-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.pls-fc-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Syne', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.48);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 16px 0;
    cursor: pointer;
    min-width: 120px;
    overflow: hidden;
    transition: color .2s, background .2s, border-color .2s;
    text-align: left;
}
.pls-fc-btn:hover {
    color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.13);
}
.pls-fc-btn.active {
    color: #fff;
    font-weight: 700;
    background: rgba(0,240,255,0.06);
    border-color: rgba(0,240,255,0.28);
}
.pls-fc-progress {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.07);
    margin-top: 9px;
    border-radius: 0 0 7px 7px;
    overflow: hidden;
}
.pls-fc-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 0 0 7px 7px;
}
.pls-fc-btn.active .pls-fc-bar {
    animation: plsFcProgress 6s linear forwards;
}
@keyframes plsFcProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Panels */
.pls-fc-panels { position: relative; }
.pls-fc-panel { display: none; }
.pls-fc-panel.active {
    display: block;
    animation: plsFcFadeIn .35s ease forwards;
}
@keyframes plsFcFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card layout */
.pls-fc-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    background: rgba(255,255,255,0.028);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    min-height: 420px;
}

/* Left text pane */
.pls-fc-card-left {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;
    max-height: 520px;
}
.pls-fc-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}
.pls-fc-card-left h4 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
}
.pls-fc-card-left h4 span {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pls-fc-card-left > p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.68;
    margin: 0 0 18px;
}

/* Two-column list grid inside card */
.pls-fc-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    flex: 1;
}
.pls-fc-list-title {
    font-family: 'Outfit', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 8px;
}
.pls-fc-list-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pls-fc-list-col ul li {
    font-size: 12.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    padding-left: 12px;
    position: relative;
}
.pls-fc-list-col ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 4px rgba(0,240,255,0.5);
}

/* Right image pane */
.pls-fc-card-right {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 60% 50%, rgba(0,240,255,0.07) 0%, rgba(10,10,20,0.6) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pls-fc-card-right img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    filter: drop-shadow(0 8px 28px rgba(0,240,255,0.18)) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: transform .6s ease, filter .6s ease;
}
.pls-fc-card-right:hover img {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 14px 36px rgba(0,240,255,0.28)) drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

/* Controls */
.pls-fc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.pls-fc-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}
.pls-fc-arrow:hover {
    background: rgba(0,240,255,0.12);
    border-color: rgba(0,240,255,0.3);
    color: #fff;
}
.pls-fc-dots {
    display: flex;
    gap: 7px;
}
.pls-fc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.pls-fc-dot.active {
    background: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(0,240,255,0.5);
}

/* Responsive */
@media (max-width: 900px) {
    .pls-fc-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pls-fc-nav::-webkit-scrollbar { display: none; }
    .pls-fc-btn { min-width: 105px; font-size: 11.5px; padding: 8px 12px 0; }
    .pls-fc-card { grid-template-columns: 1fr; }
    .pls-fc-card-right { min-height: 200px; order: -1; padding: 16px; }
    .pls-fc-card-right img { max-height: 180px; }
    .pls-fc-card-left { border-right: none; border-top: 1px solid rgba(255,255,255,0.06); padding: 22px 18px; max-height: none; }
    .pls-fc-list-grid { grid-template-columns: 1fr; }
}

/* ── SmartPLS Hero Banner Image ── */
.pls-hero-right {
    flex: 0 0 460px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pls-hero-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    display: block;
    transition: transform .5s ease, box-shadow .5s ease;
}
.pls-hero-right:hover .pls-hero-img {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.18), 0 28px 70px rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 900px) {
    .pls-hero-right {
        flex: none !important;
        width: 100% !important;
    }
}