/* Auto-extracted from the original <style> blocks in the source HTML */


/* =========================================================
   content-protection.css
   Front-end content protection styles.
   Include AFTER Home.css so these rules win on specificity ties.
   Nothing here changes layout, color, spacing, or typography —
   it only changes what the browser lets the user do with content.
   ========================================================= */

/* ---- 1. Disable text selection site-wide, re-enable in inputs ---- */
html, body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input, textarea, select,
[contenteditable="true"],
.allow-select {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* ---- 2. Kill the iOS/Android "save image / copy" long-press callout ---- */
img, svg, .icon, .industry-ic, .premium-asset {
	-webkit-touch-callout: none;   /* iOS Safari long-press menu */
	-webkit-user-drag: none;       /* Safari/Chrome native drag ghost */
	user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-select: none;
	pointer-events: auto; /* keep clickable unless overridden below */
}

/* ---- 3. Discourage right-click "save as" cursor affordance on media ---- */
img, .protect-image, .premium-asset {
	cursor: default;
}

/* ---- 4. Transparent protective overlay ----
   A sibling <span class="protect-overlay"> is injected by
   content-protection.js right on top of any element flagged
   data-protect="true". It is fully transparent and only exists
   to intercept the drag/contextmenu/save gesture; it never
   alters spacing because it is absolutely positioned and inherits
   the parent's box. Parent must be position:relative (JS sets this
   inline only if no position is already set, so existing layout
   position values are respected). */
.protect-wrap {
	position: relative;
	display: inline-block;
}

.protect-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	z-index: 5;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

/* Let clicks pass through the overlay for images that are also
   links/buttons — add class "protect-passthrough" on those wraps. */
.protect-wrap.protect-passthrough .protect-overlay {
	pointer-events: none;
}

/* Canvas used for premium graphics rendering (instead of <img>) */
canvas.protected-canvas {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	pointer-events: auto;
}

/* ---- 6. Background-image mode for critical decorative icons ----
   Usage: <span class="bg-icon" style="--bg-icon-url:url('/img/x.svg')"></span>
   A background-image can't be right-click-saved or drag-saved the
   way an <img> can, which is why non-essential icons render this way. */
.bg-icon {
	display: inline-block;
	background-image: var(--bg-icon-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-user-select: none;
	user-select: none;
}

/* ---- 7. Print handling ----
   Printing itself is blocked at the JS layer (Ctrl+P / beforeprint),
   so no visible on-page print message is needed here. */
@media print {
	.no-print, .premium-asset {
		display: none !important;
	}
}



/* ---- next block ---- */


/* Global font override: Calibri everywhere (Font Awesome icons excluded so icons keep rendering) */
*:not(.fa-solid):not(.fa-brands):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone):not([class*=" fa-"]):not([class^="fa-"]) {
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif !important;
}


/* ---- next block ---- */


	.container {
		max-width: 1800px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	footer p,footer p span,footer ul,footer h4{
	text-align:justify;
	}
	footer .footerTitle{
	margin: 12px 1px 5px;
	}

	header {
		text-align: center;
		margin-bottom: 100px;
		animation: fadeInDown 0.8s ease-out;
	}
	input,textarea{
	background: none;
    border: 5px solid rgb(24 53 109);
	}

	h1 {
		font-size: 3.5rem;
		font-weight: 700;
		background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 16px;
		letter-spacing: -1px;
		animation: textGlow 3s ease-in-out infinite;
	}

	.subtitle {
		font-size: 2.25rem;
		color: #cbd5e1;
		font-weight: 300;
		letter-spacing: 0.5px;
		animation: fadeIn 1.2s ease-out 0.3s both;
	}

	.workflow-container {
		position: relative;
		margin-bottom: 100px;
		padding: 120px 40px;
		background: rgba(15, 23, 42, 0.3);
		border-radius: 32px;
		border: 1px solid rgba(96, 165, 250, 0.1);
		backdrop-filter: blur(10px);
		animation: containerGlow 4s ease-in-out infinite;
		box-shadow: 0 0 60px rgba(59, 130, 246, 0.05);
	}

	.steps-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		position: relative;
		z-index: 2;
	}

	.flow-lines-container {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 6px;
		transform: translateY(-50%);
		z-index: 1;
	}

	.flow-line {
		position: absolute;
		height: 4px;
		background: linear-gradient(90deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.3) 50%, rgba(96, 165, 250, 0.1) 100%);
		border-radius: 2px;
		top: 50%;
		transform: translateY(-50%);
		overflow: hidden;
	}

	.flow-line::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: linear-gradient(90deg, transparent, #60a5fa, #93c5fd, transparent);
		box-shadow: 0 0 15px rgba(96, 165, 250, 0.8), 0 0 30px rgba(147, 197, 253, 0.4);
		width: 80px;
		animation: slideConnector 3s ease-in-out infinite;
		filter: blur(1px);
		z-index: 2;
	}

	.flow-line::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: repeating-linear-gradient(90deg,
				transparent 0px,
				transparent 4px,
				rgba(96, 165, 250, 0.3) 4px,
				rgba(96, 165, 250, 0.3) 8px);
		border-radius: 2px;
		animation: fadeDashesBase 3s ease-in-out infinite;
		z-index: 1;
	}

	.flow-line.active::before {
		animation: slideConnectorActive 1s ease-in-out infinite;
	}

	.flow-line.active::after {
		animation: fadeDashesActive 1s ease-in-out infinite;
	}

	.step-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		position: relative;
		min-width: 160px;
		animation: slideUp 0.6s ease-out backwards;
		cursor: pointer;
		transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		z-index: 5;
	}

	.step-card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.step-card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.step-card:nth-child(3) {
		animation-delay: 0.3s;
	}

	.step-card:nth-child(4) {
		animation-delay: 0.4s;
	}

	.step-card:nth-child(5) {
		animation-delay: 0.5s;
	}

	.step-card:nth-child(6) {
		animation-delay: 0.6s;
	}

	.step-card::before {
		content: '';
		position: absolute;
		inset: -20px;
		background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent);
		border-radius: 50%;
		opacity: 0;
		transition: all 0.6s ease;
		z-index: -1;
	}

	.step-card:hover::before {
		opacity: 1;
		animation: expandPulse 0.8s ease-out;
	}

	.step-card:hover {
		transform: translateY(-12px) scale(1.05);
	}

	.step-card.final-step {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
		border: 2px solid rgba(34, 197, 94, 0.3);
		border-radius: 24px;
		padding: 20px;
		box-shadow: 0 0 40px rgba(34, 197, 94, 0.15);
	}

	.step-card.final-step:hover {
		border-color: rgba(34, 197, 94, 0.5);
		box-shadow: 0 0 60px rgba(34, 197, 94, 0.25);
	}

	. {
		position: relative;
		width: 120px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.25), rgba(30, 58, 138, 0.1));
		border: 2px solid rgba(96, 165, 250, 0.3);
		border-radius: 50%;
		transition: all 0.4s ease;
		box-shadow:
			inset 0 0 30px rgba(59, 130, 246, 0.1),
			0 0 20px rgba(59, 130, 246, 0.1),
			0 0 40px rgba(59, 130, 246, 0.05);
	}

	.step-card.final-step . {
		background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.1));
		border-color: rgba(34, 197, 94, 0.4);
		box-shadow:
			inset 0 0 30px rgba(34, 197, 94, 0.15),
			0 0 20px rgba(34, 197, 94, 0.15),
			0 0 40px rgba(34, 197, 94, 0.08);
	}

	.::before {
		content: '';
		position: absolute;
		inset: -2px;
		border-radius: 50%;
		background: conic-gradient(from 0deg, #3b82f6, #60a5fa, #93c5fd, #3b82f6);
		opacity: 0;
		transition: opacity 0.4s ease;
		animation: none;
	}

	.step-card.final-step .::before {
		background: conic-gradient(from 0deg, #22c55e, #10b981, #34d399, #22c55e);
	}

	.::after {
		content: '';
		position: absolute;
		inset: -12px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent);
		opacity: 0;
		transition: opacity 0.4s ease;
		box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
	}

	.step-card.final-step .::after {
		background: radial-gradient(circle, rgba(34, 197, 94, 0.4), transparent);
		box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
	}

	.step-card:hover .::before {
		opacity: 0.3;
		animation: rotateGradientFast 2s linear infinite;
	}

	.step-card:hover .::after {
		opacity: 1;
		animation: expandGlow 0.6s ease-out;
	}

	.step-card.active .::before {
		opacity: 0.5;
		animation: rotateGradient 2.5s linear infinite;
	}

	.step-card.active .::after {
		opacity: 1;
		animation: pulseGlow 1.2s ease-in-out infinite;
	}

	.step-card.final-step.active .::before {
		animation: rotateGradientGreen 2.5s linear infinite;
	}

	.step-card.final-step.active .::after {
		animation: pulseGlowGreen 1.2s ease-in-out infinite;
	}

	.step-number {
		position: absolute;
		top: -12px;
		right: -8px;
		width: 36px;
		height: 36px;
		background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 1rem;
		box-shadow:
			0 0 20px rgba(59, 130, 246, 0.5),
			0 0 40px rgba(59, 130, 246, 0.2);
		border: 2px solid rgba(15, 23, 42, 1);
		z-index: 10;
		animation: floatUp 2s ease-in-out infinite;
	}

	.step-card.final-step .step-number {
		background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
		box-shadow:
			0 0 20px rgba(34, 197, 94, 0.5),
			0 0 40px rgba(34, 197, 94, 0.2);
	}

	.step-card.active .step-number {
		box-shadow:
			0 0 40px rgba(59, 130, 246, 0.9),
			0 0 80px rgba(59, 130, 246, 0.4);
		animation: pulseNumber 1.5s ease-in-out infinite, floatUp 2s ease-in-out infinite;
	}

	.step-card.final-step.active .step-number {
		box-shadow:
			0 0 40px rgba(34, 197, 94, 0.9),
			0 0 80px rgba(34, 197, 94, 0.4);
		animation: pulseNumberGreen 1.5s ease-in-out infinite, floatUp 2s ease-in-out infinite;
	}

	.icon-wrapper {
		position: relative;
		z-index: 2;
		font-size: 3.5rem;
		color: #60a5fa;
		transition: all 0.4s ease;
		animation: iconFloat 3s ease-in-out infinite;
	}

	.step-card.final-step .icon-wrapper {
		color: #22c55e;
	}

	.step-card:hover .icon-wrapper {
		color: #93c5fd;
		transform: scale(1.25) rotateZ(12deg);
		filter: drop-shadow(0 0 25px rgba(147, 197, 253, 0.8));
		animation: none;
	}

	.step-card.final-step:hover .icon-wrapper {
		color: #34d399;
		filter: drop-shadow(0 0 25px rgba(52, 211, 153, 0.8));
	}

	.step-card.active .icon-wrapper {
		animation: iconPulse 1.2s ease-in-out infinite, iconFloat 3s ease-in-out infinite;
	}

	.step-card.final-step.active .icon-wrapper {
		animation: iconPulseGreen 1.2s ease-in-out infinite, iconFloat 3s ease-in-out infinite;
	}

	/* ===== PER-STEP ICON COLORS (colors only — layout/behavior unchanged) ===== */
	/* Step 2 — De-Duplication — purple */
	#stepsWrapper .step-card:nth-child(2) . {
		background: radial-gradient(circle at 30% 30%, rgba(155, 107, 242, 0.25), rgba(76, 29, 149, 0.1));
		border-color: rgba(155, 107, 242, 0.35);
		box-shadow: inset 0 0 30px rgba(155, 107, 242, 0.12), 0 0 20px rgba(155, 107, 242, 0.12), 0 0 40px rgba(155, 107, 242, 0.06);
	}
	#stepsWrapper .step-card:nth-child(2) .::before { background: conic-gradient(from 0deg, #7c3aed, #9b6bf2, #c4b5fd, #7c3aed); }
	#stepsWrapper .step-card:nth-child(2) .::after { background: radial-gradient(circle, rgba(155, 107, 242, 0.4), transparent); box-shadow: 0 0 40px rgba(155, 107, 242, 0.25); }
	#stepsWrapper .step-card:nth-child(2) .icon-wrapper { color: #9b6bf2; }
	#stepsWrapper .step-card:nth-child(2):hover .icon-wrapper { color: #c4b5fd; filter: drop-shadow(0 0 25px rgba(196, 181, 253, 0.8)); }
	#stepsWrapper .step-card:nth-child(2) .step-number { background: linear-gradient(135deg, #9b6bf2 0%, #5b21b6 100%); box-shadow: 0 0 20px rgba(155, 107, 242, 0.5), 0 0 40px rgba(155, 107, 242, 0.2); }

	/* Step 3 — Classification — green */
	#stepsWrapper .step-card:nth-child(3) . {
		background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.25), rgba(6, 78, 59, 0.1));
		border-color: rgba(34, 197, 94, 0.35);
		box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.12), 0 0 20px rgba(34, 197, 94, 0.12), 0 0 40px rgba(34, 197, 94, 0.06);
	}
	#stepsWrapper .step-card:nth-child(3) .::before { background: conic-gradient(from 0deg, #059669, #22c55e, #6ee7b7, #059669); }
	#stepsWrapper .step-card:nth-child(3) .::after { background: radial-gradient(circle, rgba(34, 197, 94, 0.4), transparent); box-shadow: 0 0 40px rgba(34, 197, 94, 0.25); }
	#stepsWrapper .step-card:nth-child(3) .icon-wrapper { color: #22c55e; }
	#stepsWrapper .step-card:nth-child(3):hover .icon-wrapper { color: #6ee7b7; filter: drop-shadow(0 0 25px rgba(110, 231, 183, 0.8)); }
	#stepsWrapper .step-card:nth-child(3) .step-number { background: linear-gradient(135deg, #22c55e 0%, #047857 100%); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 0 0 40px rgba(34, 197, 94, 0.2); }

	/* Step 4 — Cleanse & Enrich — orange */
	#stepsWrapper .step-card:nth-child(4) . {
		background: radial-gradient(circle at 30% 30%, rgba(249, 115, 22, 0.25), rgba(124, 45, 18, 0.1));
		border-color: rgba(249, 115, 22, 0.35);
		box-shadow: inset 0 0 30px rgba(249, 115, 22, 0.12), 0 0 20px rgba(249, 115, 22, 0.12), 0 0 40px rgba(249, 115, 22, 0.06);
	}
	#stepsWrapper .step-card:nth-child(4) .::before { background: conic-gradient(from 0deg, #c2410c, #f97316, #fdba74, #c2410c); }
	#stepsWrapper .step-card:nth-child(4) .::after { background: radial-gradient(circle, rgba(249, 115, 22, 0.4), transparent); box-shadow: 0 0 40px rgba(249, 115, 22, 0.25); }
	#stepsWrapper .step-card:nth-child(4) .icon-wrapper { color: #f97316; }
	#stepsWrapper .step-card:nth-child(4):hover .icon-wrapper { color: #fdba74; filter: drop-shadow(0 0 25px rgba(253, 186, 116, 0.8)); }
	#stepsWrapper .step-card:nth-child(4) .step-number { background: linear-gradient(135deg, #f97316 0%, #9a3412 100%); box-shadow: 0 0 20px rgba(249, 115, 22, 0.5), 0 0 40px rgba(249, 115, 22, 0.2); }

	/* Step 5 — Review — teal */
	#stepsWrapper .step-card:nth-child(5) . {
		background: radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.25), rgba(19, 78, 74, 0.1));
		border-color: rgba(20, 184, 166, 0.35);
		box-shadow: inset 0 0 30px rgba(20, 184, 166, 0.12), 0 0 20px rgba(20, 184, 166, 0.12), 0 0 40px rgba(20, 184, 166, 0.06);
	}
	#stepsWrapper .step-card:nth-child(5) .::before { background: conic-gradient(from 0deg, #0f766e, #14b8a6, #5eead4, #0f766e); }
	#stepsWrapper .step-card:nth-child(5) .::after { background: radial-gradient(circle, rgba(20, 184, 166, 0.4), transparent); box-shadow: 0 0 40px rgba(20, 184, 166, 0.25); }
	#stepsWrapper .step-card:nth-child(5) .icon-wrapper { color: #14b8a6; }
	#stepsWrapper .step-card:nth-child(5):hover .icon-wrapper { color: #5eead4; filter: drop-shadow(0 0 25px rgba(94, 234, 212, 0.8)); }
	#stepsWrapper .step-card:nth-child(5) .step-number { background: linear-gradient(135deg, #14b8a6 0%, #115e59 100%); box-shadow: 0 0 20px rgba(20, 184, 166, 0.5), 0 0 40px rgba(20, 184, 166, 0.2); }

	/* Step 6 — Golden Record — pink */
	#stepsWrapper .step-card:nth-child(6) . {
		background: radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 0.25), rgba(131, 24, 67, 0.1));
		border-color: rgba(236, 72, 153, 0.35);
		box-shadow: inset 0 0 30px rgba(236, 72, 153, 0.12), 0 0 20px rgba(236, 72, 153, 0.12), 0 0 40px rgba(236, 72, 153, 0.06);
	}
	#stepsWrapper .step-card:nth-child(6) .::before { background: conic-gradient(from 0deg, #be185d, #ec4899, #f9a8d4, #be185d); }
	#stepsWrapper .step-card:nth-child(6) .::after { background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent); box-shadow: 0 0 40px rgba(236, 72, 153, 0.25); }
	#stepsWrapper .step-card:nth-child(6) .icon-wrapper { color: #ec4899; }
	#stepsWrapper .step-card:nth-child(6):hover .icon-wrapper { color: #f9a8d4; filter: drop-shadow(0 0 25px rgba(249, 168, 212, 0.8)); }
	#stepsWrapper .step-card:nth-child(6) .step-number { background: linear-gradient(135deg, #ec4899 0%, #9d174d 100%); box-shadow: 0 0 20px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.2); }

	.step-title {
		font-size: 1.1rem;
		font-weight: 600;
		color: #f1f5f9;
		text-align: center;
		letter-spacing: 0.3px;
		transition: all 0.3s ease;
	}

	.step-card.final-step .step-title {
		color: #86efac;
	}

	.step-card:hover .step-title {
		color: #93c5fd;
		text-shadow: 0 0 20px rgba(147, 197, 253, 0.5);
	}

	.step-card.final-step:hover .step-title {
		color: #4ade80;
		text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
	}

	.step-description {
		font-size: 0.85rem;
		color: #cbd5e1;
		text-align: center;
		min-height: 40px;
		line-height: 1.4;
		animation: fadeIn 0.8s ease-out 0.5s both;
	}

	.step-card.final-step .step-description {
		color: #d1fae5;
	}

	.tooltip {
		position: absolute;
		bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(30, 58, 138, 0.95));
		color: #f1f5f9;
		padding: 12px 16px;
		border-radius: 12px;
		white-space: nowrap;
		font-size: 0.9rem;
		font-weight: 500;
		border: 1px solid rgba(96, 165, 250, 0.3);
		box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease;
		z-index: 100;
		backdrop-filter: blur(10px);
	}

	.step-card.final-step .tooltip {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.95));
		border-color: rgba(34, 197, 94, 0.3);
		box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4);
	}

	.tooltip::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid rgba(59, 130, 246, 0.95);
	}

	.step-card.final-step .tooltip::before {
		border-bottom-color: rgba(34, 197, 94, 0.95);
	}

	.step-card:hover .tooltip {
		opacity: 1;
		bottom: -70px;
		animation: tooltipPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.success-indicator {
		position: absolute;
		top: -20px;
		right: -20px;
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 1.8rem;
		box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
		opacity: 0;
	}

	.success-indicator.show {
		opacity: 1;
		animation: successPulse 2s ease-in-out infinite;
	}

	.floating-particles {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
	}

	.particle {
		position: absolute;
		width: 3px;
		height: 3px;
		background: radial-gradient(circle, rgba(147, 197, 253, 0.9), rgba(59, 130, 246, 0.4));
		border-radius: 50%;
		box-shadow: 0 0 8px rgba(147, 197, 253, 0.7);
	}

	.energy-burst {
		position: absolute;
		pointer-events: none;
		width: 60px;
		height: 60px;
	}

	.trail-particle {
		position: fixed;
		pointer-events: none;
	}

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

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

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-30px);
		}

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

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes textGlow {

		0%,
		100% {
			text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
		}

		50% {
			text-shadow: 0 0 40px rgba(96, 165, 250, 0.6), 0 0 60px rgba(147, 197, 253, 0.3);
		}
	}

	@keyframes containerGlow {

		0%,
		100% {
			box-shadow: 0 0 60px rgba(59, 130, 246, 0.05);
		}

		50% {
			box-shadow: 0 0 100px rgba(59, 130, 246, 0.15);
		}
	}

	@keyframes pulseNumber {

		0%,
		100% {
			box-shadow:
				0 0 40px rgba(59, 130, 246, 0.9),
				0 0 80px rgba(59, 130, 246, 0.4);
			transform: scale(1);
		}

		50% {
			box-shadow:
				0 0 60px rgba(59, 130, 246, 1),
				0 0 120px rgba(147, 197, 253, 0.6);
			transform: scale(1.15);
		}
	}

	@keyframes pulseNumberGreen {

		0%,
		100% {
			box-shadow:
				0 0 40px rgba(34, 197, 94, 0.9),
				0 0 80px rgba(34, 197, 94, 0.4);
			transform: scale(1);
		}

		50% {
			box-shadow:
				0 0 60px rgba(34, 197, 94, 1),
				0 0 120px rgba(52, 211, 153, 0.6);
			transform: scale(1.15);
		}
	}

	@keyframes iconPulse {

		0%,
		100% {
			transform: scale(1);
			color: #60a5fa;
			filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.5));
		}

		50% {
			transform: scale(1.25);
			color: #93c5fd;
			filter: drop-shadow(0 0 30px rgba(147, 197, 253, 1));
		}
	}

	@keyframes iconPulseGreen {

		0%,
		100% {
			transform: scale(1);
			color: #22c55e;
			filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.5));
		}

		50% {
			transform: scale(1.25);
			color: #4ade80;
			filter: drop-shadow(0 0 30px rgba(74, 222, 128, 1));
		}
	}

	@keyframes iconFloat {

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

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

	@keyframes floatUp {

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

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

	@keyframes rotateGradient {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes rotateGradientGreen {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes rotateGradientFast {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes pulseGlow {

		0%,
		100% {
			box-shadow:
				inset 0 0 30px rgba(59, 130, 246, 0.2),
				0 0 30px rgba(59, 130, 246, 0.2);
		}

		50% {
			box-shadow:
				inset 0 0 60px rgba(59, 130, 246, 0.5),
				0 0 60px rgba(59, 130, 246, 0.4),
				0 0 100px rgba(147, 197, 253, 0.2);
		}
	}

	@keyframes pulseGlowGreen {

		0%,
		100% {
			box-shadow:
				inset 0 0 30px rgba(34, 197, 94, 0.2),
				0 0 30px rgba(34, 197, 94, 0.2);
		}

		50% {
			box-shadow:
				inset 0 0 60px rgba(34, 197, 94, 0.5),
				0 0 60px rgba(34, 197, 94, 0.4),
				0 0 100px rgba(52, 211, 153, 0.2);
		}
	}

	@keyframes expandGlow {
		from {
			inset: -8px;
			opacity: 0;
		}

		to {
			inset: -20px;
			opacity: 1;
		}
	}

	@keyframes expandPulse {
		from {
			inset: -20px;
			opacity: 0;
		}

		to {
			inset: -35px;
			opacity: 0;
		}
	}

	@keyframes slideConnector {
		0% {
			left: -80px;
			opacity: 0;
		}

		20% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			left: 100%;
			opacity: 0;
		}
	}

	@keyframes slideConnectorActive {
		0% {
			left: -80px;
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			left: 100%;
			opacity: 0;
		}
	}

	@keyframes fadeDashesBase {

		0%,
		100% {
			opacity: 0.2;
		}

		50% {
			opacity: 0.5;
		}
	}

	@keyframes fadeDashesActive {

		0%,
		100% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}
	}

	@keyframes tooltipPop {
		0% {
			opacity: 0;
			transform: translateX(-50%) translateY(10px) scale(0.8);
		}

		100% {
			opacity: 1;
			transform: translateX(-50%) translateY(0) scale(1);
		}
	}

	@keyframes energyBurst {
		0% {
			opacity: 1;
			transform: scale(0.5);
		}

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

	@keyframes successPulse {

		0%,
		100% {
			box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
			transform: scale(1);
		}

		50% {
			box-shadow: 0 0 60px rgba(34, 197, 94, 1);
			transform: scale(1.1);
		}
	}

	@media (max-width: 1200px) {
		h1 {
			font-size: 2.5rem;
		}

		.step-card {
			min-width: 130px;
		}

		. {
			width: 100px;
			height: 100px;
		}

		.icon-wrapper {
			font-size: 2.5rem;
		}

		.step-title {
			font-size: 0.95rem;
		}

		.step-description {
			font-size: 0.75rem;
		}

		.workflow-container {
			padding: 100px 30px;
		}
	}

	@media (max-width: 768px) {
		h1 {
			font-size: 2rem;
		}

		.subtitle {
			font-size: 1rem;
		}

		header {
			margin-bottom: 60px;
		}

		.workflow-container {
			padding: 80px 20px;
		}

		.steps-wrapper {
			gap: 10px;
			overflow-x: auto;
			padding-bottom: 20px;
		}

		.steps-wrapper::-webkit-scrollbar {
			height: 4px;
		}

		.steps-wrapper::-webkit-scrollbar-track {
			background: rgba(59, 130, 246, 0.1);
		}

		.steps-wrapper::-webkit-scrollbar-thumb {
			background: rgba(59, 130, 246, 0.3);
		}

		.step-card {
			min-width: 110px;
			flex-shrink: 0;
		}

		. {
			width: 80px;
			height: 80px;
		}

		.icon-wrapper {
			font-size: 2rem;
		}

		.step-title {
			font-size: 0.85rem;
		}

		.step-description {
			font-size: 0.7rem;
			min-height: 30px;
		}

		.step-number {
			width: 28px;
			height: 28px;
			font-size: 0.8rem;
		}

		.tooltip {
			bottom: -50px;
			font-size: 0.75rem;
			padding: 8px 12px;
		}

		.step-card:hover .tooltip {
			bottom: -60px;
		}
	}

	@media (max-width: 480px) {
		h1 {
			font-size: 1.3rem;
		}

		.subtitle {
			font-size: 0.85rem;
		}

		.step-card {
			min-width: 90px;
		}

		. {
			width: 70px;
			height: 70px;
		}

		.icon-wrapper {
			font-size: 1.5rem;
		}

		.step-title {
			font-size: 0.75rem;
		}

		.step-description {
			font-size: 0.6rem;
			min-height: 25px;
		}

		.step-number {
			width: 24px;
			height: 24px;
			font-size: 0.7rem;
		}

		.workflow-container {
			padding: 60px 15px;
		}
	}
	input,textarea{
		color:black !important;
	}
:root {
	--blue-950: #02030f;
	--blue-900: #04122e;
	--blue-800: #062055;
	--blue-700: #0a2e80;
	--blue-600: #0f3fb0;
	--blue-500: #1e63ff;
	--orange: #ff7a1a;
	--orange-2: #ffb347;
	--cyan: #3ad7ff;
	--green: #27e0a1;
	--red: #ff5c7a;
	--purple: #9b6bf2;
	--pink: #f0508a;
	--text: #eaf0ff;
	--muted: #9fb0d8;
	--card: rgba(255, 255, 255, 0.04);
	--card-border: rgba(120, 170, 255, 0.18);
}

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

html {
	scroll-behavior: smooth
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(255, 122, 26, 0.18), transparent 60%),
		radial-gradient(1000px 700px at -10% 30%, rgba(58, 215, 255, 0.12), transparent 60%),
		linear-gradient(180deg, var(--blue-950) 0%, var(--blue-900) 30%, var(--blue-800) 100%);
	min-height: 100vh;
	overflow-x: hidden;
}

h1,
h2,
h3 {
	font-family: 'Space Grotesk', sans-serif;
	letter-spacing: -.02em;
	line-height: 1.05
}

a {
	color: inherit;
	text-decoration: none
}

/* NAV */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 48px;
	background: rgba(2, 6, 30, 0.55);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(120, 170, 255, 0.12);
}





.logo-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.18) 5px 6px)
}

.nav-links {
	display: flex;
	gap: 28px;
	font-size: 14px;
	color: #d3d6dc
}

.nav-links a:hover {
	color: #fff
}

.nav-cta {
	padding: 10px 18px;
	border-radius: 10px;
	background: var(--orange);
	color: #0a0a0a;
	font-weight: 700;
	font-size: 13px
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px
}

/* HERO */
.hero {
	position: relative;
	padding: 160px 0 80px;
	text-align: center
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 122, 26, 0.4);
	background: rgba(255, 122, 26, 0.08);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--orange-2);
	margin-bottom: 28px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 12px var(--orange);
	animation: pulse 1.6s infinite
}

@keyframes pulse {

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

	50% {
		transform: scale(1.6);
		opacity: .5
	}
}

h1.hero-title {
	font-size: clamp(40px, 6vw, 84px);
	font-weight: 800
}

h1.hero-title .grad {
	background: linear-gradient(90deg, #fff, #9ec5ff 40%, var(--orange) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-sub {
	max-width: 760px;
	margin: 24px auto 36px;
	color: #d3d6dc;
	font-size: 18px;
	line-height: 1.6
}

.hero-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap
}

.btn {
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border: none;
	transition: transform .2s, box-shadow .2s
}

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

.btn-primary {
	background: linear-gradient(135deg, var(--orange), #ff5500);
	color: #fff;
	box-shadow: 0 12px 30px rgba(255, 122, 26, .35)
}

.btn-ghost {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border: 1px solid var(--card-border)
}

/* ORANGE LADDER — AI DATA CORE (scoped, does not touch global --orange/--cyan/etc.) */
.aidc-wrap {
	--aidc-blue: #00C6FF;
	--aidc-cyan: #00E5FF;
	--aidc-purple: #9B5CFF;
	--aidc-orange: #FF9D00;
	--aidc-pink: #FF4FA3;
	--aidc-green: #00E676;
	--aidc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	position: relative;
	width: clamp(340px, 82vw, 920px);
	max-width: min(920px, 92%);
	aspect-ratio: 1/1;
	margin: 280px auto 0;
	isolation: isolate;
	font-family: 'Rajdhani', sans-serif;
}

.aidc-stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.aidc-nebula {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	z-index: 0;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: screen;
	animation: aidcNebulaDrift 26s ease-in-out infinite alternate;
}

.aidc-nebula-1 {
	width: 70%;
	height: 70%;
	top: -10%;
	left: -10%;
	background: radial-gradient(circle, var(--aidc-blue), transparent 65%);
}

.aidc-nebula-2 {
	width: 65%;
	height: 65%;
	bottom: -12%;
	right: -12%;
	background: radial-gradient(circle, var(--aidc-purple), transparent 65%);
	animation-delay: 6s;
	animation-direction: alternate-reverse;
}

@keyframes aidcNebulaDrift {
	0% {
		transform: translate(0, 0) scale(1);
	}

	100% {
		transform: translate(3%, 4%) scale(1.08);
	}
}

.aidc-parallax {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	transition: transform .25s var(--aidc-ease);
}

.aidc-stage {
	position: relative;
	width: 100%;
	height: 100%;
}

.aidc-orbit-svg,
.aidc-connector-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.aidc-orbit-svg {
	z-index: 1;
}

.aidc-connector-svg {
	z-index: 2;
}

.aidc-ring-draw {
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	animation: aidcDrawRing 1.8s var(--aidc-ease) forwards;
}

@keyframes aidcDrawRing {
	to {
		stroke-dashoffset: 0;
	}
}

/* Ring rotation — slowed down significantly for a calmer, premium feel */
.aidc-ring-group-1 {
	animation: aidcSpinCW 90s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.aidc-ring-group-2 {
	animation: aidcSpinCCW 90s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.aidc-ring-group-3 {
	animation: aidcSpinCW 90s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes aidcSpinCW {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes aidcSpinCCW {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0deg);
	}
}

.aidc-conn-line {
	stroke-dasharray: 1.4 1.6;
	fill: none;
	animation: aidcDashFlow 6s linear infinite;
	opacity: .55;
	transition: opacity .35s var(--aidc-ease), stroke-width .35s var(--aidc-ease);
}

.aidc-conn-line.active {
	opacity: 1;
}

@keyframes aidcDashFlow {
	to {
		stroke-dashoffset: -9;
	}
}

.aidc-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36%;
	aspect-ratio: 1/1;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: aidcCoreEntrance 1.5s var(--aidc-ease) both;
}

@keyframes aidcCoreEntrance {
	0% {
		transform: translate(-50%, -50%) scale(.2);
		opacity: 0;
		filter: brightness(3);
	}

	60% {
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		filter: brightness(1);
	}
}

.aidc-core-halo {
	position: absolute;
	inset: -16%;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 15%, var(--aidc-cyan) 25%, transparent 40%, var(--aidc-blue) 60%, transparent 75%, var(--aidc-cyan) 90%, transparent 100%);
	filter: blur(6px);
	opacity: .5;
	animation: aidcHaloSpin 30s linear infinite;
}

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

/* Extra soft outer ring — mirrors the wide dashed orbit ring around the globe */
.aidc-core::before {
	content: '';
	position: absolute;
	inset: -34%;
	border: 1px dashed rgba(120, 200, 255, .35);
	border-radius: 50%;
	animation: aidcSpinCW 70s linear infinite;
	pointer-events: none;
}

.aidc-core-sphere {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #cdeeff 0%, var(--aidc-cyan) 14%, #1c7de0 42%, #04122b 92%);
	box-shadow:
		0 0 40px 6px rgba(0, 198, 255, .55),
		0 0 90px 20px rgba(0, 198, 255, .28),
		inset 0 0 40px rgba(255, 255, 255, .2),
		inset 0 -20px 50px rgba(0, 10, 30, .6);
	animation: aidcSpherePulse 9s ease-in-out infinite, aidcSphereBreathe 9s ease-in-out infinite;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Rotating dotted "world map" texture — gives the sphere its animated digital-globe feel */
.aidc-globe-texture {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	opacity: .85;
	mix-blend-mode: screen;
	z-index: 1;
}

.aidc-globe-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	display: block;
}

.aidc-globe-map-pan {
	animation: aidcGlobeSpin 60s linear infinite;
}

@keyframes aidcGlobeSpin {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-200px);
	}
}

/* Latitude / longitude wireframe, slowly rotating like a spinning globe */
.aidc-globe-grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: visible;
}

.aidc-globe-grid-rotate {
	transform-box: fill-box;
	transform-origin: center;
	animation: aidcSpinCW 46s linear infinite;
}

/* Static specular highlight — keeps the sphere reading as 3D while the texture spins */
.aidc-globe-highlight {
	position: absolute;
	top: 6%;
	left: 16%;
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%);
	filter: blur(5px);
	pointer-events: none;
	z-index: 3;
}

@keyframes aidcSpherePulse {

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

	50% {
		transform: scale(1.05);
	}
}

@keyframes aidcSphereBreathe {

	0%,
	100% {
		box-shadow: 0 0 40px 6px rgba(0, 198, 255, .55), 0 0 90px 20px rgba(0, 198, 255, .28), inset 0 0 40px rgba(255, 255, 255, .25), inset 0 -20px 50px rgba(0, 10, 30, .6);
	}

	50% {
		box-shadow: 0 0 60px 14px rgba(0, 229, 255, .75), 0 0 130px 34px rgba(0, 198, 255, .4), inset 0 0 55px rgba(255, 255, 255, .35), inset 0 -20px 50px rgba(0, 10, 30, .6);
	}
}

.aidc-core-particles {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.aidc-core-particles span {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px 2px rgba(255, 255, 255, .8);
	opacity: .8;
	animation: aidcParticleFloat 12s ease-in-out infinite;
}

.aidc-core-text {
	position: relative;
	z-index: 5;
	text-align: center;
	padding: 0 10%;
}

.aidc-core-title-1 {
	display: block;
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: clamp(9px, 1.3vw, 16px);
	letter-spacing: 2px;
	color: #eafcff;
	text-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 22px var(--aidc-cyan);
}

.aidc-core-title-2 {
	display: block;
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: clamp(12px, 1.7vw, 21px);
	letter-spacing: 1.5px;
	margin-top: 6px;
	color: #ffffff;
	text-shadow: 0 0 12px #fff, 0 0 26px var(--aidc-cyan), 0 0 48px var(--aidc-blue);
}

.aidc-core-title-3 {
	display: block;
	margin-top: 10px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 500;
	font-size: clamp(7px, .78vw, 10.5px);
	letter-spacing: .3px;
	color: #dcf0ff;
	line-height: 1.45;
	opacity: .9;
}

.aidc-cards-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.aidc-module-card {
	position: absolute;
	transform: translate(-50%, -50%);
	width: clamp(112px, 13.5vw, 168px);
	padding: 16px 10px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(10, 16, 32, .55));
	border: 1px solid rgba(0, 198, 255, .28);
	border-radius: 24px;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 10px 30px rgba(0, 0, 0, .4), 0 0 18px rgba(0, 198, 255, .12);
	cursor: pointer;
	animation: aidcFloatCard 100s ease-in-out infinite;
	transition: transform .45s var(--aidc-ease), box-shadow .45s var(--aidc-ease), border-color .45s var(--aidc-ease);
	opacity: 0;
}

.aidc-module-card.entered {
	opacity: 1;
}

/* Gentle floating bob — very slow now (40s per cycle) */
@keyframes aidcFloatCard {

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

	50% {
		transform: translate(-50%, -50%) translateY(-8px);
	}
}

.aidc-module-card.dir-left {
	animation-name: aidcFloatCard, aidcEnterLeft;
	animation-duration: 40s, .9s;
	animation-timing-function: ease-in-out, var(--aidc-ease);
	animation-fill-mode: none, both;
}

.aidc-module-card.dir-right {
	animation-name: aidcFloatCard, aidcEnterRight;
	animation-duration: 40s, .9s;
	animation-timing-function: ease-in-out, var(--aidc-ease);
	animation-fill-mode: none, both;
}

.aidc-module-card.dir-up {
	animation-name: aidcFloatCard, aidcEnterDown;
	animation-duration: 40s, .9s;
	animation-timing-function: ease-in-out, var(--aidc-ease);
	animation-fill-mode: none, both;
}

.aidc-module-card.dir-down {
	animation-name: aidcFloatCard, aidcEnterUp;
	animation-duration: 40s, .9s;
	animation-timing-function: ease-in-out, var(--aidc-ease);
	animation-fill-mode: none, both;
}

@keyframes aidcEnterLeft {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateX(-70px);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) translateX(0);
	}
}

@keyframes aidcEnterRight {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateX(70px);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) translateX(0);
	}
}

@keyframes aidcEnterDown {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(-50px);
	}

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

@keyframes aidcEnterUp {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(50px);
	}

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

.aidc-module-card:hover {
	transform: translate(-50%, -50%) scale(1.08) translateY(-8px) !important;
	animation-play-state: paused;
	border-color: rgba(0, 229, 255, .85);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 20px 45px rgba(0, 0, 0, .5), 0 0 46px var(--card-accent, rgba(0, 198, 255, .55));
}

.aidc-icon-orb {
	position: relative;
	width: clamp(52px, 6.2vw, 72px);
	aspect-ratio: 1/1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .02) 60%);
	border: 1px solid var(--card-accent, rgba(0, 198, 255, .4));
	box-shadow: 0 0 18px var(--card-accent, rgba(0, 198, 255, .35)), inset 0 0 14px rgba(255, 255, 255, .08);
	transition: transform .45s var(--aidc-ease), box-shadow .45s var(--aidc-ease);
	animation: aidcIconPulse 40s ease-in-out infinite;
}

.aidc-module-card:hover .aidc-icon-orb {
	transform: rotate(12deg) scale(1.06);
	box-shadow: 0 0 30px var(--card-accent, rgba(0, 198, 255, .7)), inset 0 0 18px rgba(255, 255, 255, .15);
}

@keyframes aidcIconPulse {

	0%,
	100% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.25);
	}
}

.aidc-icon-orb svg {
	width: 60%;
	height: 60%;
	overflow: visible;
}

.aidc-module-name {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: clamp(10px, 1vw, 12.5px);
	letter-spacing: 1.5px;
	color: #fff;
	margin-top: 2px;
	text-shadow: 0 0 12px var(--card-accent, rgba(0, 198, 255, .6));
}

.aidc-module-accent {
	width: 26px;
	height: 2px;
	border-radius: 2px;
	margin: 2px 0 1px;
	background: var(--card-accent, rgba(0, 198, 255, .6));
	opacity: .85;
}

.aidc-module-tag {
	font-size: clamp(9px, .85vw, 11px);
	color: #a9c6e6;
	letter-spacing: .4px;
	font-weight: 500;
}

.aidc-sparkle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px 2px currentColor;
	pointer-events: none;
	animation: aidcSparklePop .9s var(--aidc-ease) forwards;
}

@keyframes aidcSparklePop {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	30% {
		opacity: 1;
		transform: scale(1.4);
	}

	100% {
		opacity: 0;
		transform: scale(.4) translateY(-12px);
	}
}

.aidc-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	border: 2px solid var(--card-accent, var(--aidc-cyan));
	animation: aidcRippleOut .65s var(--aidc-ease) forwards;
}

@keyframes aidcRippleOut {
	0% {
		width: 0;
		height: 0;
		opacity: .9;
	}

	100% {
		width: 140px;
		height: 140px;
		margin-left: -70px;
		margin-top: -70px;
		opacity: 0;
	}
}

@media (max-width: 560px) {
	.aidc-module-card {
		padding: 12px 6px 10px;
		border-radius: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aidc-wrap * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
}

/* ORANGE LADDER — outer dark panel wrapping the globe, capability strip & workflow strip */
.aidc-panel {
	position: relative;
	width: min(1300px, 94%);
	margin: 280px auto 0;
	background: linear-gradient(180deg, rgba(6, 10, 22, .92), rgba(4, 7, 16, .96));
	border: 1px solid rgba(0, 198, 255, .16);
	border-radius: 28px;
	padding: 56px clamp(16px, 4vw, 56px) 40px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 0 60px rgba(0, 120, 255, .05);
}

.aidc-panel .aidc-wrap {
	margin: 0 auto 28px;
}

/* Capability strip */
.aidc-capabilities {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: rgba(10, 16, 32, .55);
	border: 1px solid rgba(0, 198, 255, .15);
	border-radius: 18px;
	padding: 10px;
	margin: 6px auto 30px;
	max-width: 860px;
}

.aidc-cap-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	color: #dfeeff;
	font-weight: 600;
	font-size: 14px;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.aidc-cap-item:last-child {
	border-right: none;
}

.aidc-cap-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 198, 255, .12);
	color: var(--aidc-cyan);
	flex-shrink: 0;
	font-size: 15px;
	animation: aidcCapPulse 3.6s ease-in-out infinite;
}

@keyframes aidcCapPulse {

	0%,
	100% {
		box-shadow: 0 0 0 rgba(0, 198, 255, 0);
	}

	50% {
		box-shadow: 0 0 14px rgba(0, 198, 255, .55);
	}
}

/* Intelligent workflow strip */
.aidc-workflow {
	background: rgba(8, 13, 26, .6);
	border: 1px solid rgba(0, 198, 255, .15);
	border-radius: 20px;
	padding: 26px clamp(12px, 3vw, 32px) 24px;
}

.aidc-workflow-title {
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(11px, 1.3vw, 13px);
	letter-spacing: 6px;
	color: var(--aidc-cyan);
	margin-bottom: 24px;
	font-weight: 700;
}

.aidc-workflow-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

.aidc-wf-step {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #dfeeff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px;
}

.aidc-wf-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(0, 198, 255, .12);
	border: 1px solid rgba(0, 198, 255, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aidc-cyan);
	flex-shrink: 0;
	animation: aidcCapPulse 3.6s ease-in-out infinite;
}

.aidc-wf-step:nth-child(3) .aidc-wf-icon {
	animation-delay: .5s;
}

.aidc-wf-step:nth-child(5) .aidc-wf-icon {
	animation-delay: 1s;
}

.aidc-wf-step:nth-child(7) .aidc-wf-icon {
	animation-delay: 1.5s;
}

.aidc-wf-step:nth-child(9) .aidc-wf-icon {
	animation-delay: 2s;
}

.aidc-wf-arrow {
	color: var(--aidc-cyan);
	opacity: .55;
	margin: 0 2px;
	animation: aidcArrowFlow 2.2s ease-in-out infinite;
}

@keyframes aidcArrowFlow {

	0%,
	100% {
		transform: translateX(0);
		opacity: .4;
	}

	50% {
		transform: translateX(4px);
		opacity: .9;
	}
}

@media (max-width: 760px) {
	.aidc-cap-item {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		width: 100%;
		justify-content: center;
	}

	.aidc-cap-item:last-child {
		border-bottom: none;
	}

	.aidc-wf-arrow {
		display: none;
	}

	.aidc-wf-step {
		width: 100%;
		justify-content: center;
	}
}

/* SERVICES */
section {
	padding: 100px 0;
	position: relative
}

.eyebrow {
	color: var(--orange);
	font-size: 16px;
	letter-spacing: .25em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 14px;
	text-align:justify;
}

h2.section-title {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	margin-bottom: 18px
}

.section-sub {
	color: #d3d6dc;
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 50px
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px
}

.svc {
	position: relative;
	padding: 28px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
	border: 1px solid var(--card-border);
	overflow: hidden;
	transition: transform .3s, border-color .3s;
}

.svc:hover {
	transform: translateY(-6px);
	border-color: var(--orange)
}

.svc::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 18px;
	background: linear-gradient(135deg, transparent, rgba(255, 122, 26, .5), transparent);
	opacity: 0;
	transition: opacity .3s;
	z-index: -1;
}

.svc:hover::before {
	opacity: 1
}

.svc-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(255, 122, 26, .14);
	color: var(--orange);
	font-size: 22px;
	margin-bottom: 18px;
}

.svc h3 {
	font-size: 18px;
	margin-bottom: 8px
}

.svc p {
	color: #d3d6dc;
	font-size: 14px;
	line-height: 1.5
}

/* module accent colors */
.svc.mod-blue:hover { border-color: var(--blue-500) }
.svc.mod-blue::before { background: linear-gradient(135deg, transparent, rgba(30, 99, 255, .5), transparent) }

.svc.mod-green:hover { border-color: var(--green) }
.svc.mod-green::before { background: linear-gradient(135deg, transparent, rgba(39, 224, 161, .5), transparent) }

.svc.mod-pink:hover { border-color: var(--pink) }
.svc.mod-pink::before { background: linear-gradient(135deg, transparent, rgba(240, 80, 138, .5), transparent) }

.svc.mod-amber:hover { border-color: var(--orange) }
.svc.mod-amber::before { background: linear-gradient(135deg, transparent, rgba(255, 122, 26, .5), transparent) }

.svc.mod-purple:hover { border-color: var(--purple) }
.svc.mod-purple::before { background: linear-gradient(135deg, transparent, rgba(155, 107, 242, .5), transparent) }

.svc.mod-teal:hover { border-color: var(--cyan) }
.svc.mod-teal::before { background: linear-gradient(135deg, transparent, rgba(58, 215, 255, .5), transparent) }

.svc-icon.ic-blue   { background: rgba(30, 99, 255, .14); color: var(--blue-500) }
.svc-icon.ic-green  { background: rgba(39, 224, 161, .14); color: var(--green) }
.svc-icon.ic-pink   { background: rgba(240, 80, 138, .14); color: var(--pink) }
.svc-icon.ic-amber  { background: rgba(255, 122, 26, .14); color: var(--orange) }
.svc-icon.ic-purple { background: rgba(155, 107, 242, .14); color: var(--purple) }
.svc-icon.ic-teal   { background: rgba(58, 215, 255, .14); color: var(--cyan) }

.svc-icon svg { filter: drop-shadow(0 0 6px currentColor) }

/* MODULES SECTION */
.modules {
	max-width: 1180px;
	margin: 0 auto;
	padding: 100px 24px;
	text-align: center;
}

.modules h2 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.5px;
	margin-bottom: 14px;
	/* carried over from the generic h1{} rule this heading relied on
	   before being changed from <h1> to <h2> for SEO (only one h1/page) */
	background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: textGlow 3s ease-in-out infinite;
}

.modules h2 span {
	background: linear-gradient(90deg, var(--blue-500), var(--purple), var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.modules > p {
	color: #d3d6dc;
	font-size: 1.05rem;
	max-width: 640px;
	margin: 0 auto 56px;
}

.modules .grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	text-align: left;
}

@media (max-width: 1100px) {
	.modules .grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

.modules .card {
	position: relative;
	padding: 24px 18px;
	border-radius: 18px;
	background: var(--card);
	border: 1px solid var(--card-border);
	overflow: hidden;
	transition: transform .3s, border-color .3s, box-shadow .3s;
}

.modules .card:hover {
	transform: translateY(-6px);
	border-color: var(--blue-500);
	box-shadow: 0 16px 40px rgba(30, 99, 255, .18);
}

.modules .card:nth-child(2):hover { border-color: var(--green); box-shadow: 0 16px 40px rgba(39, 224, 161, .18) }
.modules .card:nth-child(3):hover { border-color: var(--pink); box-shadow: 0 16px 40px rgba(240, 80, 138, .18) }
.modules .card:nth-child(4):hover { border-color: var(--orange); box-shadow: 0 16px 40px rgba(255, 122, 26, .18) }
.modules .card:nth-child(5):hover { border-color: var(--purple); box-shadow: 0 16px 40px rgba(155, 107, 242, .18) }
.modules .card:nth-child(6):hover { border-color: var(--cyan); box-shadow: 0 16px 40px rgba(58, 215, 255, .18) }

.modules .icon {
	width: 100%;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	position: relative;
}

.modules .icon img {
	position: relative;
	z-index: 1;
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(circle, black 55%, transparent 78%);
	mask-image: radial-gradient(circle, black 55%, transparent 78%);
	animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.15); }
}

.modules .card:nth-child(1) .icon svg { animation: glowPulseBlue 3s ease-in-out infinite; }
.modules .card:nth-child(2) .icon svg { animation: glowPulseGreen 3s ease-in-out infinite; }
.modules .card:nth-child(3) .icon svg { animation: glowPulsePink 3s ease-in-out infinite; }
.modules .card:nth-child(4) .icon svg { animation: glowPulseOrange 3s ease-in-out infinite; }
.modules .card:nth-child(5) .icon svg { animation: glowPulsePurple 3s ease-in-out infinite; }
.modules .card:nth-child(6) .icon svg { animation: glowPulseCyan 3s ease-in-out infinite; }

@keyframes glowPulseBlue {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(30, 99, 255, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(30, 99, 255, .75)); }
}
@keyframes glowPulseGreen {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(39, 224, 161, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(39, 224, 161, .75)); }
}
@keyframes glowPulsePink {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(240, 80, 138, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(240, 80, 138, .75)); }
}
@keyframes glowPulseOrange {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 122, 26, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(255, 122, 26, .75)); }
}
@keyframes glowPulsePurple {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(155, 107, 242, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(155, 107, 242, .75)); }
}
@keyframes glowPulseCyan {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(58, 215, 255, .45)); }
	50% { filter: drop-shadow(0 0 22px rgba(58, 215, 255, .75)); }
}

.modules .icon::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 130px;
	height: 30px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(30, 99, 255, .35), transparent 70%);
	filter: blur(2px);
	animation: glowFade 3s ease-in-out infinite;
}

@keyframes glowFade {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

.modules .card:nth-child(1) .icon::before { background: radial-gradient(ellipse, rgba(30, 99, 255, .4), transparent 70%) }
.modules .card:nth-child(2) .icon::before { background: radial-gradient(ellipse, rgba(39, 224, 161, .4), transparent 70%) }
.modules .card:nth-child(3) .icon::before { background: radial-gradient(ellipse, rgba(240, 80, 138, .4), transparent 70%) }
.modules .card:nth-child(4) .icon::before { background: radial-gradient(ellipse, rgba(255, 122, 26, .4), transparent 70%) }
.modules .card:nth-child(5) .icon::before { background: radial-gradient(ellipse, rgba(155, 107, 242, .4), transparent 70%) }
.modules .card:nth-child(6) .icon::before { background: radial-gradient(ellipse, rgba(58, 215, 255, .4), transparent 70%) }

.modules .card h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 8px;
}

.modules .card p {
	color: #d3d6dc;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 20px;
}

.modules .card button {
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.modules .card button:hover {
	background: rgba(255, 255, 255, .12);
	transform: translateX(2px);
}

/* COUNTERS */
.counters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	padding: 36px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(15, 63, 176, .6), rgba(6, 32, 85, .6));
	border: 1px solid var(--card-border);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

.counter {
	text-align: center
}

.counter .num {
	font-family: 'Space Grotesk';
	font-size: 48px;
	font-weight: 800;
	background: linear-gradient(135deg, #fff, var(--orange-2));
	-webkit-background-clip: text;
	color: transparent
}

.counter .lbl {
	color: #d3d6dc;
	font-size: 13px;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-top: 6px
}

.live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 10px var(--green);
	animation: pulse 1.4s infinite;
	margin-right: 8px;
	vertical-align: middle
}

/* WHY */
.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px
}

.why {
	padding: 28px;
	border-radius: 18px;
	background: var(--card);
	border: 1px solid var(--card-border)
}

.why .ic {
	width: 96px;
	height: 96px;
	margin-bottom: 14px;
}

.why .ic svg { width: 100%; height: 100%; }
.why .ic img { width: 100%; height: 100%; object-fit: contain; }

/* INDUSTRY TABS */
.tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 36px
}

.tab {
	padding: 12px 22px;
	border-radius: 999px;
	cursor: pointer;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--card-border);
	font-size: 14px;
	font-weight: 600;
	color: #d3d6dc;
	transition: all .2s;
}

.tab.active,
.tab:hover {
	background: var(--orange);
	color: #0a0a0a;
	border-color: var(--orange)
}

.tab-panel {
	display: none;
	animation: fadeIn .4s
}

.tab-panel.active {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 32px;
	align-items: center
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.tab-panel h3 {
	font-size: 32px;
	margin-bottom: 14px
}

.tab-panel p {
	color: #d3d6dc;
	line-height: 1.6;
	margin-bottom: 16px
}

.tab-panel ul {
	list-style: none;
	display: grid;
	gap: 10px
}

.tab-panel li {
	padding-left: 24px;
	position: relative;
	color: #cdd9f7;
	font-size: 14px
}

.tab-panel li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--green);
	font-weight: 800
}

/* ===== ABOUT US SECTION ===== */
#about .about-body {
	
}

#about .about-body p {
	color: #d3d6dc;
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 18px;
	text-align:left;
}

#about .about-block {
     padding: 29px 30px 5px;
}

#about .about-block h3 {
	font-size: 22px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 8px;
	text-align:justify;
}

#about .about-block > p {
	color: #d3d6dc;
	font-size: 15px;
	line-height: 1.7;
	text-align:left;
	
}

#about .about-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 28px;
	padding: 0;
	margin: 0;
	text-align:justify;
}

#about .about-list li {
	padding-left: 26px;
	position: relative;
	color: #cdd9f7;
	font-size: 14.5px;
	line-height: 1.5;
}

#about .about-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--green);
	font-weight: 800;
}

#about .about-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#about .about-chips span {
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--card-border);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

/* Industries We Empower — premium micro-animated icons */
#about .industries-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 34px 16px;
	padding:40px;
}

#about .industry-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

#about .industry-ic {
	position: relative;
	width: 92px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 700px;
}

/* ---------- continuous float ---------- */
#about .ic-float {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	animation: icFloat 4.2s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.45s);
}
@keyframes icFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* ---------- slow rotating outer ring ---------- */
#about .ic-ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	border-top-color: var(--accent, #60a5fa);
	border-right-color: var(--accent2, #34d399);
	opacity: .5;
	pointer-events: none;
	animation: icRingSpin 15s linear infinite;
	transition: opacity .3s ease, filter .3s ease, animation-duration .3s ease;
}
@keyframes icRingSpin { to { transform: rotate(360deg); } }
#about .industry-card.is-hover .ic-ring {
	opacity: 1;
	filter: drop-shadow(0 0 5px var(--accent, #60a5fa));
	animation-duration: 6s;
}

/* ---------- orbiting glowing particles ---------- */
#about .ic-orbit { position: absolute; inset: 0; pointer-events: none; }
#about .ic-orbit-dot {
	position: absolute;
	top: 50%; left: 50%;
	width: 4px; height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--accent, #60a5fa);
	box-shadow: 0 0 5px 1px var(--accent, #60a5fa);
	animation: icOrbit1 7s linear infinite;
}
#about .ic-orbit-dot.d1 { animation: icOrbit1 7s linear infinite; }
#about .ic-orbit-dot.d2 {
	width: 3.4px; height: 3.4px; margin: -1.7px 0 0 -1.7px;
	background: var(--accent2, #34d399);
	box-shadow: 0 0 5px 1px var(--accent2, #34d399);
	opacity: .85;
	animation: icOrbit2 10s linear infinite reverse;
}
#about .ic-orbit-dot.d3 {
	width: 2.6px; height: 2.6px; margin: -1.3px 0 0 -1.3px;
	opacity: .7;
	animation: icOrbit3 13s linear infinite;
}
@keyframes icOrbit1 { from { transform: rotate(0deg) translateX(48px); } to { transform: rotate(360deg) translateX(48px); } }
@keyframes icOrbit2 { from { transform: rotate(0deg) translateX(40px); } to { transform: rotate(360deg) translateX(40px); } }
@keyframes icOrbit3 { from { transform: rotate(0deg) translateX(34px); } to { transform: rotate(360deg) translateX(34px); } }

#about .industry-card.is-hover .ic-orbit-dot.d1 { animation-duration: 3s; }
#about .industry-card.is-hover .ic-orbit-dot.d2 { animation-duration: 4.5s; }
#about .industry-card.is-hover .ic-orbit-dot.d3 { animation-duration: 6s; }

/* ---------- soft breathing pulse (every ~3s) ---------- */
#about .ic-pulse-ring {
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	border: 1px solid var(--accent, #60a5fa);
	opacity: 0;
	pointer-events: none;
	animation: icPulse 3s ease-out infinite;
	animation-delay: calc(var(--i, 0) * -0.3s);
}
@keyframes icPulse {
	0%   { transform: scale(.86); opacity: 0; }
	20%  { opacity: .4; }
	60%  { transform: scale(1.22); opacity: 0; }
	100% { opacity: 0; }
}

/* ---------- glass container (real icon image lives here) ---------- */
#about .ic-glass {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset 0 2px 3px rgba(255,255,255,.35),
		inset 0 -14px 20px -10px rgba(0,0,0,.55),
		inset 6px 6px 14px -8px rgba(0,0,0,.35),
		0 0 14px -4px var(--accent, #60a5fa),
		0 6px 14px -8px rgba(0,0,0,.45);
	transition: box-shadow .3s ease;
	will-change: transform;
}

/* metallic specular highlight */
#about .ic-glass::before {
	content: "";
	position: absolute;
	top: 4%;
	left: 12%;
	width: 46%;
	height: 26%;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 100%);
	filter: blur(.4px);
	opacity: .8;
	z-index: 3;
	pointer-events: none;
}

/* vibrant per-industry gradient tint, preserves original shading */
#about .ic-tint {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--accent, #60a5fa) 0%, var(--accent2, #34d399) 100%);
	mix-blend-mode: color;
	opacity: .78;
	z-index: 1;
	pointer-events: none;
}

#about .ic-glass img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	transition: filter .3s ease;
}

#about .industry-card.is-hover .ic-glass {
	box-shadow:
		inset 0 2px 3px rgba(255,255,255,.4),
		inset 0 -14px 20px -10px rgba(0,0,0,.5),
		inset 6px 6px 14px -8px rgba(0,0,0,.3),
		0 0 20px -3px var(--accent, #60a5fa),
		0 10px 18px -10px rgba(0,0,0,.5);
}
#about .industry-card.is-hover .ic-glass img {
	filter: brightness(1.1) saturate(1.15) contrast(1.05);
}
#about .industry-card.is-hover .ic-tint {
	opacity: .68;
}

/* ---------- subtle glass reflection sweep ---------- */
#about .ic-reflection {
	position: absolute;
	top: -30%;
	left: -60%;
	width: 40%;
	height: 160%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 100%);
	transform: rotate(20deg);
	z-index: 2;
	pointer-events: none;
	animation: icReflect 6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.5s);
}
@keyframes icReflect {
	0%   { left: -60%; }
	45%  { left: 130%; }
	100% { left: 130%; }
}

/* ---------- hover ripple wave from center ---------- */
#about .ic-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--accent, #60a5fa);
	opacity: 0;
	transform: scale(.6);
	pointer-events: none;
	z-index: 3;
}
#about .industry-card.is-hover .ic-glass::after {
	animation: icRippleWave .7s ease-out;
}
@keyframes icRippleWave {
	0%   { opacity: .55; transform: scale(.6); }
	100% { opacity: 0;   transform: scale(1.55); }
}

/* ---------- click burst: ripple + sparks (JS-spawned) ---------- */
#about .ic-click-ripple {
	position: absolute;
	width: 10px; height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.65), transparent 70%);
	transform: scale(0);
	pointer-events: none;
	z-index: 5;
	animation: icClickRipple .6s ease-out forwards;
}
@keyframes icClickRipple { to { transform: scale(9); opacity: 0; } }

#about .ic-spark {
	position: absolute;
	width: 3px; height: 3px;
	margin: -1.5px 0 0 -1.5px;
	border-radius: 50%;
	background: var(--accent, #60a5fa);
	box-shadow: 0 0 5px 1px var(--accent, #60a5fa);
	pointer-events: none;
	z-index: 5;
	animation: icSpark .6s ease-out forwards;
}
@keyframes icSpark { to { transform: translate(var(--sx,0), var(--sy,0)) scale(.2); opacity: 0; } }

#about .industry-card span {
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

@media (max-width: 900px) {
	#about .industries-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	#about .industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	#about .ic-float,
	#about .ic-ring,
	#about .ic-orbit-dot,
	#about .ic-pulse-ring,
	#about .ic-reflection {
		animation: none !important;
	}
}


#about .about-tagline {
	margin-top: 12px;
	text-align: center;
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: .01em;
	background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #34d399 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 28px 20px 4px;
	border-top: 1px solid var(--card-border);
}

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

.tab-visual {
	height: 320px;
	border-radius: 18px;
	border: 1px solid var(--card-border);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #04102b;
}

.tab-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.85) contrast(1.05) brightness(.7) hue-rotate(-10deg);
	transform: scale(1.02);
	transition: transform 6s ease;
}

.tab-visual:hover img {
	transform: scale(1.12)
}

.tab-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(135deg, rgba(6, 32, 85, .55), rgba(255, 122, 26, .25)),
		radial-gradient(circle at 70% 30%, rgba(58, 215, 255, .25), transparent 60%);
	mix-blend-mode: screen;
}

.tab-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(58, 215, 255, .06) 3px 4px);
	animation: scan 4s linear infinite;
}

@keyframes scan {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 0 40px
	}
}

.tab-visual .badge-float {
	position: absolute;
	z-index: 3;
	bottom: 18px;
	left: 18px;
	right: 18px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	font-family: 'Space Grotesk';
}

.tab-visual .badge-float .live {
	background: rgba(2, 7, 28, .7);
	backdrop-filter: blur(8px);
	border: 1px solid var(--card-border);
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 11px;
	color: #cfe0ff;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tab-visual .badge-float .live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 10px var(--green);
	animation: pulse 1.4s infinite;
	display: inline-block
}

.tab-visual .badge-float .kpi {
	background: rgba(255, 122, 26, .92);
	color: #0a0a0a;
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: 800;
}

.tab-visual .badge-float .kpi small {
	display: block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .15em;
	opacity: .7
}

.tab-visual .dh-panel {
	position: absolute;
	z-index: 4;
	top: 16px;
	left: 16px;
	width: 190px;
	background: rgba(8, 22, 62, .88);
	backdrop-filter: blur(10px);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 14px 16px 16px;
	font-family: 'Space Grotesk';
}

.tab-visual .dh-panel .dh-title {
	font-size: 12px;
	font-weight: 700;
	color: #cfe0ff;
	margin-bottom: 12px;
}

.tab-visual .dh-panel .dh-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--card-border);
}

.tab-visual .dh-panel .dh-ring {
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255,255,255,.12) 0deg 40deg, #05c4f9 40deg 140deg, #01efb9 140deg 240deg, #0bd0b4 240deg 320deg, rgba(255,255,255,.12) 320deg 360deg);
	animation: dhRingSpin 4s linear infinite, dhRingGlow 2.4s ease-in-out infinite;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tab-visual .dh-panel .dh-ring::after {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #060c22;
}

.tab-visual .dh-panel .dh-stat {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}


@keyframes dhRingSpin { to { transform: rotate(360deg); } }
@keyframes dhRingGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(5,196,249,.55), 0 0 18px rgba(1,239,185,.35); } 50% { box-shadow: 0 0 0 6px rgba(5,196,249,0), 0 0 28px rgba(1,239,185,.65); } }
.tab-visual .dh-panel .dh-stat span {
	display: block;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .12em;
	color: #d3d6dc;
	margin-top: 3px;
}

.tab-visual .dh-panel .dh-list {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tab-visual .dh-panel .dh-list li::marker {
	content: "";
	display: none;
}

.tab-visual .dh-panel .dh-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	color: #cfe0ff;
}

.tab-visual .dh-panel .dh-list li b {
	color: var(--green);
	font-weight: 700;
}

.tab-visual .dh-panel .dh-list li:nth-child(3) b { color: var(--cyan); }
.tab-visual .dh-panel .dh-list li:nth-child(4) b { color: var(--purple); }

.tab-visual .dh-panel .dh-list li i {
	width: 14px;
	height: 14px;
	min-width: 14px;
	border-radius: 50%;
	background: rgba(39, 224, 161, .15);
	color: var(--green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	margin-right: 8px;
}

.tab-visual .dh-panel .dh-list li:nth-child(3) i {
	background: rgba(58, 215, 255, .15);
	color: var(--cyan);
}

.tab-visual .dh-panel .dh-list li:nth-child(4) i {
	background: rgba(155, 107, 242, .18);
	color: var(--purple);
}

.tab-visual .dh-panel .dh-list li span.lbl {
	flex: 1;
}

/* MINI STATS ROW (manufacturing tab) */
.mini-stats {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	gap: 10px;
	margin-top: 20px;
}

.mini-stats .mini-stat {
	flex: 1 1 0;
	min-width: 0;
}

.mini-stat {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 12px 14px;
	text-align: left;
}

.mini-ic {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 15px;
	flex-shrink: 0;
}

.mini-txt {
	display: block;
	line-height: 1.3;
}

.mini-num {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}

.mini-lbl {
	display: block;
	font-size: 10px;
	color: #d3d6dc;
	white-space: nowrap;
}

.mini-stat.ms-b1 { border-color: rgba(155, 107, 242, .35) }
.mini-stat.ms-b2 { border-color: rgba(30, 99, 255, .35) }
.mini-stat.ms-b3 { border-color: rgba(39, 224, 161, .35) }
.mini-stat.ms-b4 { border-color: rgba(255, 122, 26, .35) }

.mini-stat .ms-purple { background: rgba(155, 107, 242, .18); color: var(--purple) }
.mini-stat .ms-blue { background: rgba(30, 99, 255, .18); color: var(--blue-500) }
.mini-stat .ms-green { background: rgba(39, 224, 161, .18); color: var(--green) }
.mini-stat .ms-amber { background: rgba(255, 122, 26, .18); color: var(--orange) }

/* DATA FLOW FLOATING PANEL */
.tab-visual .df-panel {
	position: absolute;
	z-index: 4;
	bottom: 18px;
	right: 18px;
	width: 190px;
	background: rgba(3, 16, 65, .88);
	backdrop-filter: blur(10px);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 12px 14px;
	font-family: 'Space Grotesk';
}

.tab-visual .df-panel .df-title {
	font-size: 12px;
	font-weight: 700;
	color: #cfe0ff;
	margin-bottom: 8px;
}

.tab-visual .df-panel .df-wave {
	width: 100%;
	height: 34px;
	display: block;
}

.tab-visual .df-panel .df-wave path {
	stroke-dasharray: 10 8;
	stroke-dashoffset: 0;
	animation: waveFlow 1.6s linear infinite;
	filter: drop-shadow(0 0 4px rgba(58,215,255,.65));
}

@keyframes waveFlow {
	0%   { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -36; }
}

.tab-visual .df-panel .df-live {
	margin-top: 8px;
	font-size: 10px;
	color: #d3d6dc;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.tab-visual .df-panel .df-live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 8px var(--green);
	animation: pulse 1.4s infinite;
	display: inline-block;
}

/* MANUFACTURING — REAL-TIME PROCESSING INDICATOR ANIMATION */
.tab-visual .df-panel .df-live {
	position: relative;
}

.tab-visual .df-panel .df-live span.rt-text {
	background: linear-gradient(90deg, #d3d6dc 0%, #ffffff 50%, #d3d6dc 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: rtTextShimmer 2.2s linear infinite;
}

@keyframes rtTextShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* HEALTHCARE TAB — IMAGE + GLOWING DATA OVERLAY */
.tab-visual .hc-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: screen;
}

.mini-ic {
	animation: miniGlow 2.6s ease-in-out infinite;
}

@keyframes miniGlow {
	0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
	50% { box-shadow: 0 0 10px currentColor; }
}

/* ANIMATED DATA PIPELINE */
.pipeline {
	margin-top: 24px;
	padding: 36px;
	border-radius: 24px;
	background: linear-gradient(160deg, #02061d, #062055);
	border: 1px solid var(--card-border);
	position: relative;
	overflow: hidden;
}

.pipeline::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 0%, rgba(58, 215, 255, .12), transparent 60%);
	pointer-events: none;
}

.pipe-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	position: relative;
	z-index: 2;
}

.pipe-stage {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 16px 12px;
	text-align: center;
	position: relative;
	min-height: 180px;
	display: flex;
	flex-direction: column;
}

.pipe-stage .icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	margin: 0 auto 10px;
	background: linear-gradient(135deg, var(--blue-500), var(--cyan));
	display: grid;
	place-items: center;
	font-size: 20px;
	box-shadow: 0 6px 20px rgba(30, 99, 255, .4);
}

.pipe-stage:nth-child(1) .icon {
	background: linear-gradient(135deg, #ff5c7a, #ff7a1a)
}

.pipe-stage:nth-child(2) .icon {
	background: linear-gradient(135deg, #ff7a1a, #ffb347)
}

.pipe-stage:nth-child(3) .icon {
	background: linear-gradient(135deg, #3ad7ff, #1e63ff)
}

.pipe-stage:nth-child(4) .icon {
	background: linear-gradient(135deg, #27e0a1, #3ad7ff)
}

.pipe-stage:nth-child(5) .icon {
	background: linear-gradient(135deg, #27e0a1, #a4f5d4)
}

.pipe-stage h5 {
	font-size: 13px;
	margin-bottom: 6px;
	font-family: 'Space Grotesk'
}

.pipe-stage p {
	font-size: 11px;
	color: #d3d6dc;
	line-height: 1.4;
	margin-bottom: 10px
}

.pipe-mini {
	margin-top: auto;
	background: #02071c;
	border-radius: 8px;
	padding: 8px;
	font-family: 'Space Grotesk', monospace;
	font-size: 10px;
	color: #cfe0ff;
	border: 1px solid var(--card-border);
	min-height: 54px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
}

.pipe-mini span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateX(-6px);
	animation: appear .5s forwards;
}

.pipe-mini span.ok {
	color: #a4f5d4
}

.pipe-mini span.warn {
	color: #ffb3c1;
	text-decoration: line-through;
	opacity: .55 !important
}

.pipe-mini span:nth-child(2) {
	animation-delay: .6s
}

.pipe-mini span:nth-child(3) {
	animation-delay: 1.2s
}

/* flowing packet animation between stages */
.pipe-rail {
	position: absolute;
	left: 0;
	right: 0;
	top: 36px;
	height: 2px;
	z-index: 1;
	background: linear-gradient(90deg, transparent, rgba(58, 215, 255, .3) 10%, rgba(58, 215, 255, .3) 90%, transparent);
}

.packet {
	position: absolute;
	top: 30px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--orange), #ff4d00);
	box-shadow: 0 0 16px var(--orange);
	z-index: 3;
	animation: flow 4s linear infinite;
}

.packet.p2 {
	background: radial-gradient(circle, var(--cyan), #1e63ff);
	box-shadow: 0 0 16px var(--cyan);
	animation-delay: 1.3s
}

.packet.p3 {
	background: radial-gradient(circle, var(--green), #0fb98a);
	box-shadow: 0 0 16px var(--green);
	animation-delay: 2.6s
}

@keyframes flow {
	0% {
		left: -2%;
		opacity: 0;
		transform: scale(.6)
	}

	8% {
		opacity: 1;
		transform: scale(1)
	}

	92% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		left: 102%;
		opacity: 0;
		transform: scale(.6)
	}
}

.pipe-legend {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed rgba(120, 170, 255, .18);
	color: #d3d6dc;
	font-size: 12px;
}

.pipe-legend b {
	color: #fff;
	font-weight: 700
}

/* WORKFLOW */
.workflow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	position: relative
}

.step {
	text-align: center;
	padding: 24px 14px;
	border-radius: 14px;
	background: var(--card);
	border: 1px solid var(--card-border);
	position: relative;
}

.step .n {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--orange);
	color: #0a0a0a;
	font-weight: 800;
	display: grid;
	place-items: center;
	margin: 0 auto 12px;
	font-size: 14px
}

.step h4 {
	font-size: 15px;
	margin-bottom: 6px
}

.step p {
	color: #d3d6dc;
	font-size: 12px;
	line-height: 1.5
}

.step::after {
	content: "→";
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--orange);
	font-size: 20px;
	font-weight: 800;
}

.step:last-child::after {
	display: none
}

/* DEMO + DASHBOARD */
.demo-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px
}

.video-card {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	background: linear-gradient(135deg, #02061d, #062055);
	aspect-ratio: 16/9;
	display: grid;
	place-items: center;
	position: relative;
	cursor: pointer;
}

.video-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 122, 26, .25), transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(58, 215, 255, .2), transparent 50%);
}

.play {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--orange);
	display: grid;
	place-items: center;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 0 0 rgba(255, 122, 26, .6);
	animation: ring 2s infinite;
}

.play::after {
	content: "";
	border-left: 22px solid #0a0a0a;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	margin-left: 5px
}

@keyframes ring {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 122, 26, .6)
	}

	100% {
		box-shadow: 0 0 0 30px rgba(255, 122, 26, 0)
	}
}

.video-label {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 2;
	font-weight: 700
}

.video-label small {
	display: block;
	color: #d3d6dc;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-bottom: 4px
}

.dashboard {
	padding: 20px;
	border-radius: 20px;
	background: #04102b;
	border: 1px solid var(--card-border);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dash-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #d3d6dc
}

.bar {
	height: 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	overflow: hidden;
	position: relative
}

.bar>span {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--orange), var(--orange-2));
	animation: grow 2s ease-out forwards;
	width: 0
}

.bar.b2>span {
	background: linear-gradient(90deg, var(--cyan), #7ee8ff);
	animation-delay: .2s
}

.bar.b3>span {
	background: linear-gradient(90deg, var(--green), #9bf2cf);
	animation-delay: .4s
}

.bar.b4>span {
	background: linear-gradient(90deg, #ffb347, var(--orange));
	animation-delay: .6s
}

@keyframes grow {
	to {
		width: var(--w, 80%)
	}
}

.spark {
	height: 120px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255, 122, 26, .18), transparent);
	position: relative;
	overflow: hidden;
}

.spark svg {
	width: 100%;
	height: 100%
}

/* CLEANSING DEMO */
.clean-demo {
	padding: 36px;
	border-radius: 24px;
	background: linear-gradient(160deg, #02061d, #062055);
	border: 1px solid var(--card-border)
}

.clean-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	justify-content: center
}

.c-tab {
	padding: 10px 18px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--card-border);
	color: #d3d6dc;
}

.c-tab.active {
	background: var(--orange);
	color: #0a0a0a;
	border-color: var(--orange)
}

.io {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 20px;
	align-items: center
}

.io-side {
	background: #02071c;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 18px;
	min-height: 260px
}

.io-side h4 {
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #d3d6dc;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px
}

.io-side.before h4::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--red);
	border-radius: 50%
}

.io-side.after h4::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--green);
	border-radius: 50%
}

.rec {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--card-border);
	padding: 10px 12px;
	border-radius: 8px;
	font-family: 'Space Grotesk', monospace;
	font-size: 12px;
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	opacity: 0;
	transform: translateY(8px);
	animation: appear .5s forwards;
}

.rec.bad {
	border-color: rgba(255, 92, 122, .4);
	background: rgba(255, 92, 122, .06)
}

.rec.good {
	border-color: rgba(39, 224, 161, .4);
	background: rgba(39, 224, 161, .06)
}

.rec .tag {
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #d3d6dc
}

.rec.bad .tag {
	background: rgba(255, 92, 122, .18);
	color: #ffb3c1
}

.rec.good .tag {
	background: rgba(39, 224, 161, .18);
	color: #a4f5d4
}

@keyframes appear {
	to {
		opacity: 1;
		transform: none
	}
}

.arrow-flow {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--orange);
	display: grid;
	place-items: center;
	color: #0a0a0a;
	font-size: 28px;
	font-weight: 800;
	box-shadow: 0 0 40px rgba(255, 122, 26, .5);
	animation: pulse 2s infinite;
}

.panel {
	display: none
}

.panel.active {
	display: block;
	animation: fadeIn .4s
}

/* FOOTER CTA */
.cta-band {
	margin: 40px 0 80px;
	padding: 60px 40px;
	border-radius: 28px;
	text-align: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 122, 26, .3), transparent 50%),
		linear-gradient(135deg, #0a2e80, #062055);
	border: 1px solid var(--card-border);
}

.cta-band h2 {
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px
}

.cta-band p {
	color: #d3d6dc;
	margin-bottom: 28px
}

footer {
	padding: 40px 0;
	border-top: 1px solid var(--card-border);
	text-align: center;
	color: #d3d6dc;
	font-size: 13px
}

@media (max-width:880px) {

    .tab-panel.active,
    .demo-grid,
    .io {
        grid-template-columns: 1fr;
    }

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

    .pipe-rail,
    .packet {
        display: none;
    }

    .step::after {
        display: none;
    }

    nav {
        padding: 14px 20px;
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .arrow-flow {
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

/* ============ INTEGRATED DASHBOARD ============ */
.idash {
	margin-top: 40px;
	border-radius: 24px;
	padding: 28px;
	background: linear-gradient(180deg, rgba(8, 20, 55, .95), rgba(2, 8, 30, .9));
	border: 1px solid var(--card-border);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}

.idash-title {
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 800;
	font-size: clamp(20px, 2.6vw, 32px);
	letter-spacing: .02em;
	padding: 14px 20px;
	border-radius: 14px;
	margin-bottom: 24px;
	background: linear-gradient(90deg, rgba(58, 215, 255, .12), rgba(255, 122, 26, .12));
	border: 1px solid var(--card-border);
}

.idash-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.idash-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
	border: 1px solid var(--card-border);
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
}

.idash-card h4 {
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cyan);
	font-weight: 700
}

.idash-card .sub {
	font-size: 11px;
	color: #d3d6dc;
	margin-top: -8px
}

.idash-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--orange);
	font-size: 28px;
	font-weight: 800
}

.idash-flow span {
	font-size: 12px;
	letter-spacing: .2em;
	color: #d3d6dc;
	text-transform: uppercase
}

/* Donut */
.donut {
	position: relative;
	width: 140px;
	height: 140px;
	margin: 0 auto
}

.donut svg {
	transform: rotate(-90deg)
}

.donut .center {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center
}

.donut .center b {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	display: block
}

.donut .center small {
	font-size: 10px;
	color: #d3d6dc;
	letter-spacing: .15em
}

.legend {
	display: flex;
	justify-content: center;
	gap: 14px;
	font-size: 11px;
	color: #d3d6dc;
	flex-wrap: wrap
}

.legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: middle
}

/* Mini bars */
.mini-bars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	align-items: end;
	height: 120px;
	padding: 8px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.mini-bars .col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%
}

.mini-bars .bar2 {
	width: 60%;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--cyan), #1e63ff);
	box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .3);
	animation: rise 1.6s ease-out forwards;
	height: 0
}

.mini-bars .col.g .bar2 {
	background: linear-gradient(180deg, #5dffb4, var(--green))
}

.mini-bars .col.r .bar2 {
	background: linear-gradient(180deg, #ff9aa9, var(--red))
}

.mini-bars .col.o .bar2 {
	background: linear-gradient(180deg, var(--orange-2), var(--orange))
}

.mini-bars label {
	font-size: 10px;
	color: #d3d6dc
}

@keyframes rise {
	to {
		height: var(--h)
	}
}

.big-pct {
	font-size: 46px;
	font-weight: 900;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif
}

.big-pct.red {
	color: var(--red)
}

.big-pct.green {
	color: var(--green)
}

/* Cleaning workflow mini cards */
.clean-flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px
}

.clean-flow .cf {
	background: rgba(39, 224, 161, .08);
	border: 1px solid rgba(39, 224, 161, .25);
	border-radius: 10px;
	padding: 10px;
	text-align: center
}

.clean-flow .cf b {
	display: block;
	font-size: 11px;
	color: var(--green);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 6px
}

.clean-flow .cf span {
	font-size: 18px;
	font-weight: 800;
	color: #fff
}

.clean-flow .cf small {
	font-size: 9px;
	color: #d3d6dc;
	display: block;
	margin-top: 2px
}

/* Stacked accuracy chart */
.stack-chart {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: end;
	height: 160px;
	padding: 10px 4px;
	border-left: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.stack-chart .scol {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
	height: 100%
}

.stack-chart .seg {
	width: 48px;
	animation: rise 1.8s ease-out forwards;
	height: 0
}

.stack-chart .seg.init {
	background: linear-gradient(180deg, #ff9aa9, var(--red));
	border-radius: 0 0 4px 4px
}

.stack-chart .seg.gain {
	background: linear-gradient(180deg, #5dffb4, var(--green));
	border-radius: 4px 4px 0 0
}

.stack-chart .lbl {
	font-size: 10px;
	color: #d3d6dc;
	margin-top: 6px;
	letter-spacing: .1em;
	text-transform: uppercase
}

/* Trend line */
.trend {
	position: relative;
	height: 170px;
	border-left: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	padding: 6px
}

.trend svg {
	width: 100%;
	height: 100%;
	overflow: visible
}

.trend .axis {
	font-size: 9px;
	fill: #d3d6dc;
	letter-spacing: .1em
}

/* Comparison table */
.ctable {
	margin-top: 22px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	background: rgba(255, 255, 255, .02)
}

.ctable .ctitle {
	padding: 14px;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: 13px;
	background: linear-gradient(90deg, rgba(255, 122, 26, .12), rgba(58, 215, 255, .12));
	border-bottom: 1px solid var(--card-border)
}

.ctable table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px
}

.ctable th,
.ctable td {
	padding: 12px 14px;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ctable th {
	color: #d3d6dc;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .03)
}

.ctable td:first-child {
	text-align: left;
	color: #fff;
	font-weight: 600
}

.ctable td.bad {
	background: rgba(255, 92, 122, .12);
	color: #ffb3c0
}

.ctable td.good {
	background: rgba(39, 224, 161, .12);
	color: #a8f5d4
}

.ctable td.imp {
	color: var(--green);
	font-weight: 700
}

.ctable tr:last-child td {
	border-bottom: none
}

/* Video preview modal */
.vmodal {
	position: fixed;
	inset: 0;
	background: rgba(0, 4, 20, .85);
	backdrop-filter: blur(10px);
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px
}

.vmodal.open {
	display: flex;
	animation: fadeIn .3s ease
}

.vmodal .vbox {
	width: min(960px, 100%);
	aspect-ratio: 16/9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	position: relative;
	border: 1px solid var(--card-border);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .7)
}

.vmodal iframe {
	width: 100%;
	height: 100%;
	border: 0
}

.vmodal .vclose {
	position: absolute;
	top: -44px;
	right: 0;
	background: var(--orange);
	border: none;
	color: #0a0a0a;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 900;
	cursor: pointer
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@media (max-width:880px) {
	.idash-grid {
		grid-template-columns: 1fr
	}

	.stack-chart .seg {
		width: 36px
	}
}

/* ---- Data Volume by Stage (Before/After mini charts) ---- */
.vol-block {
	margin-top: 4px
}

.vol-block-title {
	text-align: center;
	font-size: 11px;
	color: #d3d6dc;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-bottom: 8px
}

.vol-wrap {
	position: relative;
	padding-left: 26px
}

.vol-axis {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 9px;
	color: #d3d6dc
}

.vol-bars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: end;
	height: 100px;
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.vol-bars .vcol {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%
}

.vol-bars .vcol .bar3 {
	width: 68%;
	border-radius: 6px 6px 0 0;
	height: 0;
	animation: rise 1.6s ease-out forwards;
	box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .3)
}

.vol-bars.red .vcol .bar3 {
	background: linear-gradient(180deg, #ff8095, var(--red))
}

.vol-bars.grn .vcol .bar3 {
	background: linear-gradient(180deg, #5dffb4, var(--green))
}

.vol-icons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 10px;
	padding-left: 26px
}

.vol-icons .vicon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	color: #d3d6dc;
	letter-spacing: .04em;
	text-transform: capitalize
}

.vol-icons .vicon .vi-svg {
	width: 18px;
	height: 18px;
	opacity: .9;
	animation: ddFloat 4s ease-in-out infinite
}

.vol-icons .vicon:nth-child(2) .vi-svg {
	animation-delay: .3s
}

.vol-icons .vicon:nth-child(3) .vi-svg {
	animation-delay: .6s
}

/* ---- Connector arrow between Before/After cards ---- */
.idash-grid {
	position: relative
}

.idash-connector {
	position: absolute;
	top: 40%;
	left: 33.333%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(10, 20, 45, .95);
	border: 1px solid var(--card-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	z-index: 6;
	animation: connectorPulse 2.4s ease-in-out infinite
}

@keyframes connectorPulse {

	0%,
	100% {
		box-shadow: 0 0 10px rgba(58, 215, 255, .25)
	}

	50% {
		box-shadow: 0 0 24px rgba(58, 215, 255, .6)
	}
}

@media (max-width:880px) {
	.idash-connector {
		display: none
	}
}

/* ---- Key Improvement Metrics : pill bars ---- */
.metric-pills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 2px
}

.mpill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px
}

.mpill .mp-badge {
	font-size: 12px;
	font-weight: 800;
	color: var(--green);
	background: rgba(39, 224, 161, .12);
	border: 1px solid rgba(39, 224, 161, .35);
	padding: 3px 10px;
	border-radius: 20px;
	opacity: 0;
	animation: ddActIn .6s ease-out forwards;
	animation-delay: 1.4s
}

.mpill .mp-bar {
	width: 34px;
	height: 96px;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08)
}

.mpill .mp-bar .up {
	width: 100%;
	background: linear-gradient(180deg, #5dffb4, var(--green));
	height: 0;
	animation: riseH 1.8s ease-out forwards;
	border-radius: 10px 10px 0 0;
	position: relative
}

.mpill .mp-bar .dn {
	width: 100%;
	flex: 1;
	background: linear-gradient(180deg, var(--red), #ff8095)
}

@keyframes riseH {
	to {
		height: var(--h)
	}
}

.mpill .mp-label {
	font-size: 10px;
	color: #d3d6dc;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: 2px
}

/* ---- Bottom row: comparison table + quick actions ---- */
.idash-bottom-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 20px;
	margin-top: 22px;
	align-items: start
}

.idash-bottom-grid .ctable {
	margin-top: 0
}

.idash-qa {
	border-radius: 16px;
	border: 1px solid var(--card-border);
	background: rgba(255, 255, 255, .02);
	overflow: hidden
}

.idash-qa .qa-title {
	padding: 14px;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: 13px;
	background: linear-gradient(90deg, rgba(255, 122, 26, .12), rgba(58, 215, 255, .12));
	border-bottom: 1px solid var(--card-border)
}

.idash-qa .qa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 16px
}

.idash-qa .qa-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
	font-size: 11px;
	color: #d3d6dc;
	text-align: center;
	transition: transform .2s, border-color .2s;
	cursor: pointer
}

.idash-qa .qa-item:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, .2)
}

.idash-qa .qa-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	animation: ddFloat 4s ease-in-out infinite
}

.idash-qa .qa-item:nth-child(2) .qa-icon {
	animation-delay: .2s
}

.idash-qa .qa-item:nth-child(3) .qa-icon {
	animation-delay: .4s
}

.idash-qa .qa-item:nth-child(4) .qa-icon {
	animation-delay: .6s
}

.idash-qa .qa-item:nth-child(5) .qa-icon {
	animation-delay: .8s
}

.idash-qa .qa-item:nth-child(6) .qa-icon {
	animation-delay: 1s
}

.qa-icon.q1 {
	background: rgba(58, 138, 255, .18);
	color: #3a8aff
}

.qa-icon.q2 {
	background: rgba(180, 90, 255, .18);
	color: #b45aff
}

.qa-icon.q3 {
	background: rgba(58, 138, 255, .18);
	color: #3a8aff
}

.qa-icon.q4 {
	background: rgba(34, 224, 122, .18);
	color: #22e07a
}

.qa-icon.q5 {
	background: rgba(255, 140, 40, .18);
	color: #ff8c28
}

.qa-icon.q6 {
	background: rgba(255, 80, 120, .18);
	color: #ff5078
}

@media (max-width:880px) {
	.idash-bottom-grid {
		grid-template-columns: 1fr
	}
}

/* ---- Extra ambient / entrance animations for a livelier dashboard ---- */
.idash-title {
	animation: titleGlow 5s ease-in-out infinite
}

@keyframes titleGlow {

	0%,
	50%,
	100% {
		box-shadow: 0 0 0 rgba(58, 215, 255, 0)
	}

	25% {
		box-shadow: 0 0 26px rgba(58, 215, 255, .28)
	}

	75% {
		box-shadow: 0 0 26px rgba(255, 122, 26, .22)
	}
}

.idash-card {
	animation: idashCardIn .7s ease-out both
}

.idash-card:nth-child(2) {
	animation-delay: .15s
}

.idash-card:nth-child(3) {
	animation-delay: .3s
}

@keyframes idashCardIn {
	from {
		opacity: 0;
		transform: translateY(26px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.donut {
	animation: donutPop .8s cubic-bezier(.34, 1.56, .64, 1) both
}

@keyframes donutPop {
	from {
		opacity: 0;
		transform: scale(.7) rotate(-16deg)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.donut .center b {
	animation: numGlow 2.8s ease-in-out infinite
}

@keyframes numGlow {

	0%,
	100% {
		text-shadow: 0 0 0 rgba(255, 255, 255, 0)
	}

	50% {
		text-shadow: 0 0 16px rgba(255, 255, 255, .55)
	}
}

.big-pct {
	animation: bigPctIn .7s ease-out both, bigGlow 3s ease-in-out infinite 1.2s
}

@keyframes bigPctIn {
	from {
		opacity: 0;
		transform: scale(.75)
	}

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

@keyframes bigGlow {

	0%,
	100% {
		filter: drop-shadow(0 0 0 transparent)
	}

	50% {
		filter: drop-shadow(0 0 12px currentColor)
	}
}

.legend span {
	opacity: 0;
	animation: legendIn .5s ease-out forwards
}

.legend span:nth-child(1) {
	animation-delay: .25s
}

.legend span:nth-child(2) {
	animation-delay: .4s
}

@keyframes legendIn {
	to {
		opacity: 1
	}
}

.clean-flow .cf {
	animation: cfIn .6s ease-out both
}

.clean-flow .cf:nth-child(1) {
	animation-delay: .1s
}

.clean-flow .cf:nth-child(2) {
	animation-delay: .25s
}

.clean-flow .cf:nth-child(3) {
	animation-delay: .4s
}

@keyframes cfIn {
	from {
		opacity: 0;
		transform: translateY(16px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.clean-flow .cf span {
	display: inline-block;
	animation: numPop .5s cubic-bezier(.34, 1.56, .64, 1) .5s both
}

@keyframes numPop {
	from {
		transform: scale(.4);
		opacity: 0
	}

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

.vol-bars .vcol:nth-child(1) .bar3 {
	animation-delay: .1s
}

.vol-bars .vcol:nth-child(2) .bar3 {
	animation-delay: .25s
}

.vol-bars .vcol:nth-child(3) .bar3 {
	animation-delay: .4s
}

.vol-bars .vcol .bar3 {
	position: relative;
	overflow: hidden
}

.vol-bars .vcol .bar3::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 45%, transparent 70%);
	background-size: 220% 100%;
	background-position: 120% 0;
	opacity: 0;
	animation: barSheen 3.2s ease-in-out infinite 2s
}

@keyframes barSheen {

	0%,
	18% {
		opacity: 0;
		background-position: 120% 0
	}

	30% {
		opacity: .8
	}

	55%,
	100% {
		opacity: 0;
		background-position: -120% 0
	}
}

.idash-connector {
	animation: connectorPulse 2.4s ease-in-out infinite, connectorNudge 1.8s ease-in-out infinite
}

@keyframes connectorNudge {

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

	50% {
		transform: translate(-42%, -50%)
	}
}

.trend path[stroke="#27e0a1"] {
	stroke-dasharray: 620;
	stroke-dashoffset: 620;
	animation: trendDraw 2.2s ease-out .3s forwards
}

@keyframes trendDraw {
	to {
		stroke-dashoffset: 0
	}
}

.trend g[fill="#27e0a1"] circle {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: dotPop .4s ease-out forwards
}

.trend g[fill="#27e0a1"] circle:nth-child(1) {
	animation-delay: .4s
}

.trend g[fill="#27e0a1"] circle:nth-child(2) {
	animation-delay: .75s
}

.trend g[fill="#27e0a1"] circle:nth-child(3) {
	animation-delay: 1.1s
}

.trend g[fill="#27e0a1"] circle:nth-child(4) {
	animation-delay: 1.45s
}

.trend g[fill="#27e0a1"] circle:nth-child(5) {
	animation-delay: 1.8s
}

.trend g[fill="#27e0a1"] circle:nth-child(6) {
	animation-delay: 2.15s
}

@keyframes dotPop {
	from {
		opacity: 0;
		transform: scale(0)
	}

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

.mpill .mp-badge {
	animation: mpBadgeIn .5s ease-out both, mpBadgePulse 2.6s ease-in-out infinite 1.7s
}

@keyframes mpBadgeIn {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(.8)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes mpBadgePulse {

	0%,
	100% {
		box-shadow: 0 0 0 rgba(39, 224, 161, 0)
	}

	50% {
		box-shadow: 0 0 14px rgba(39, 224, 161, .55)
	}
}

.ctable,
.idash-qa {
	animation: idashCardIn .7s ease-out .2s both
}

.ctable tbody tr {
	opacity: 0;
	animation: rowIn .5s ease-out forwards
}

.ctable tbody tr:nth-child(1) {
	animation-delay: .35s
}

.ctable tbody tr:nth-child(2) {
	animation-delay: .5s
}

.ctable tbody tr:nth-child(3) {
	animation-delay: .65s
}

.ctable tbody tr:nth-child(4) {
	animation-delay: .8s
}

@keyframes rowIn {
	from {
		opacity: 0;
		transform: translateX(-10px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* ---- Glowing donut wrap with sparkle particles ---- */
.donut-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	margin: 0 auto
}

.donut-wrap .donut {
	margin: 0
}

.donut-wrap::before {
	content: "";
	position: absolute;
	inset: -16px;
	border-radius: 50%;
	filter: blur(20px);
	opacity: .4;
	animation: donutGlowPulse 3s ease-in-out infinite;
	pointer-events: none
}

.donut-wrap.red::before {
	background: radial-gradient(circle, rgba(255, 92, 122, .55), transparent 70%)
}

.donut-wrap.grn::before {
	background: radial-gradient(circle, rgba(39, 224, 161, .55), transparent 70%)
}

@keyframes donutGlowPulse {

	0%,
	100% {
		opacity: .3;
		transform: scale(.94)
	}

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

.donut-wrap .spark {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	animation: sparkTwinkle 2.6s ease-in-out infinite;
	pointer-events: none
}

.donut-wrap.red .spark {
	box-shadow: 0 0 8px 2px rgba(255, 154, 169, .9)
}

.donut-wrap.grn .spark {
	box-shadow: 0 0 8px 2px rgba(141, 255, 206, .9)
}

.donut-wrap .spark.s1 {
	top: 4%;
	left: 80%;
	animation-delay: 0s
}

.donut-wrap .spark.s2 {
	top: 72%;
	left: 90%;
	animation-delay: .8s
}

.donut-wrap .spark.s3 {
	top: 88%;
	left: 16%;
	animation-delay: 1.6s
}

@keyframes sparkTwinkle {

	0%,
	100% {
		opacity: 0;
		transform: scale(.3)
	}

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

/* ---- Up-arrow markers above volume bars ---- */
.vol-bars .vcol {
	gap: 4px
}

.vol-bars .vup {
	font-size: 9px;
	line-height: 1;
	opacity: 0;
	animation: vupIn .5s ease-out forwards, vupBounce 1.8s ease-in-out infinite 1s
}

.vol-bars.red .vup {
	color: #ff5c7a
}

.vol-bars.grn .vup {
	color: #27e0a1
}

@keyframes vupIn {
	to {
		opacity: 1
	}
}

@keyframes vupBounce {

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

	50% {
		transform: translateY(-3px)
	}
}

/* ---- Bottom stat rows (Total Records / Issues Found / etc.) with wavy accent ---- */
.idash-stats-row {
	position: relative;
	margin-top: 2px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: grid;
	grid-template-columns: repeat(2, 1fr)
}

.idash-stats-row.three {
	grid-template-columns: repeat(3, 1fr)
}

.idash-stats-row .stat {
	position: relative;
	z-index: 2;
	text-align: center;
	opacity: 0;
	animation: idashCardIn .5s ease-out forwards
}

.idash-stats-row .stat:nth-child(2) {
	animation-delay: .15s
}

.idash-stats-row .stat:nth-child(3) {
	animation-delay: .3s
}

.idash-stats-row .stat b {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: #fff
}

.idash-stats-row .stat b.red-txt {
	color: var(--red)
}

.idash-stats-row .stat b.green-txt {
	color: var(--green)
}

.idash-stats-row .stat small {
	font-size: 9px;
	color: #d3d6dc;
	text-transform: uppercase;
	letter-spacing: .08em
}

.idash-stats-row .wave-bg {
	position: absolute;
	left: 0;
	bottom: -18px;
	width: 100%;
	height: 26px;
	opacity: .45;
	z-index: 1
}

.idash-stats-row.red .wave-bg path {
	stroke: #b45aff
}

.idash-stats-row.grn .wave-bg path {
	stroke: #3a8aff
}

.idash-stats-row .wave-bg path {
	stroke-dasharray: 8 6;
	animation: waveFlow 2.6s linear infinite
}

@keyframes waveFlow {
	to {
		stroke-dashoffset: -28
	}
}

/* ---- Second connector (After -> Metrics) ---- */
.idash-connector.c2 {
	left: 66.666%
}

/* ---- Metric badge chips (High Accuracy / Data Quality / Performance) ---- */
.metric-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 4px
}

.mbadge {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	opacity: 0;
	animation: idashCardIn .5s ease-out forwards
}

.mbadge:nth-child(1) {
	animation-delay: .2s
}

.mbadge:nth-child(2) {
	animation-delay: .35s
}

.mbadge:nth-child(3) {
	animation-delay: .5s
}

.mbadge .mb-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
	animation: ddFloat 4s ease-in-out infinite
}

.mbadge.red .mb-icon {
	background: rgba(255, 92, 122, .18)
}

.mbadge.green .mb-icon {
	background: rgba(39, 224, 161, .18)
}

.mbadge.orange .mb-icon {
	background: rgba(255, 140, 40, .18)
}

.mbadge b {
	display: block;
	font-size: 10px;
	color: #fff;
	white-space: nowrap
}

.mbadge small {
	font-size: 9px;
	color: #d3d6dc
}

/* ---- Bottom status strip ---- */
.idash-status-strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-top: 22px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .02);
	border: 1px solid var(--card-border)
}

.status-item {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	animation: idashCardIn .5s ease-out forwards
}

.status-item:nth-child(1) {
	animation-delay: .1s
}

.status-item:nth-child(2) {
	animation-delay: .2s
}

.status-item:nth-child(3) {
	animation-delay: .3s
}

.status-item:nth-child(4) {
	animation-delay: .4s
}

.status-item:nth-child(5) {
	animation-delay: .5s
}

.status-item:nth-child(6) {
	animation-delay: .6s
}

.status-item b {
	display: block;
	font-size: 9px;
	color: #d3d6dc;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600
}

.status-item span {
	font-size: 13px;
	font-weight: 700;
	color: #fff
}

.status-item span.green-txt {
	color: var(--green)
}

.si-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
	background: rgba(58, 138, 255, .15);
	color: #3a8aff
}

.si-icon.spin-icon {
	animation: spin360 2.4s linear infinite;
	background: rgba(58, 215, 255, .15);
	color: var(--cyan)
}

.si-icon.ring-icon {
	background: transparent;
	border: 3px solid rgba(180, 90, 255, .25);
	border-top-color: #b45aff;
	animation: spin360 1.5s linear infinite
}

.si-icon.progress-ring {
	background: conic-gradient(#3a8aff 0deg 180deg, rgba(255, 255, 255, .12) 180deg 360deg);
	font-size: 9px;
	font-weight: 800;
	color: #fff;
	animation: ringPulse 2.4s ease-in-out infinite
}

@keyframes ringPulse {

	0%,
	100% {
		filter: brightness(1)
	}

	50% {
		filter: brightness(1.3)
	}
}

.si-icon.pulse-icon {
	animation: mpBadgePulse 2s ease-in-out infinite
}

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

@media (max-width:880px) {
	.idash-status-strip {
		grid-template-columns: repeat(3, 1fr)
	}

	.idash-connector.c2 {
		display: none
	}
}

@media (max-width:520px) {
	.idash-status-strip {
		grid-template-columns: repeat(2, 1fr)
	}
}

/* =========================================================
   ENHANCED COLOURFUL PROGRESS-BAR ANIMATIONS
   (fill-up • glow/pulse • counter • gradient-flow • neon)
   ========================================================= */

/* ---- Before/After Cleaning bars: smooth fill + gentle periodic pulse + hover scale ---- */
.vol-bars .vcol .bar3 {
	background-size: 100% 260%;
	animation: rise 1.5s ease-out forwards, barGradientFlow 3.5s ease-in-out infinite 1.5s, gentlePulse5s 5s ease-in-out infinite 1.5s;
	transition: transform .25s ease;
	transform-origin: center bottom;
}
.vol-bars .vcol:hover .bar3,
.vol-bars .vcol .bar3:hover {
	transform: scale(1.03);
}
@keyframes gentlePulse5s {
	0%, 88%, 100% { filter: brightness(1) saturate(1) }
	94% { filter: brightness(1.15) saturate(1.15) }
}

/* ---- Key Improvement Metrics bars: unchanged, own contained pulse ---- */
.mpill .mp-bar .up {
	background-size: 100% 260% !important;
	animation-name: riseH, barGradientFlow, barNeonPulseSoft !important;
	animation-duration: 1.8s, 2.8s, 2.2s !important;
	animation-timing-function: cubic-bezier(.22,.9,.3,1), ease-in-out, ease-in-out !important;
	animation-iteration-count: 1, infinite, infinite !important;
	animation-fill-mode: forwards, none, none !important;
	animation-delay: inherit, 1.8s, 1.8s;
}
@keyframes barNeonPulseSoft {
	0%,100% { box-shadow: inset 0 -3px 8px rgba(0,0,0,.3), inset 0 6px 10px rgba(255,255,255,.18); filter: brightness(1) saturate(1) }
	50% { box-shadow: inset 0 -3px 8px rgba(0,0,0,.3), inset 0 6px 18px rgba(255,255,255,.42); filter: brightness(1.18) saturate(1.2) }
}
.vol-bars.red .vcol .bar3 { background-image: linear-gradient(180deg,#ffb347,#ff5c7a,#ff8095,#ffb347); color: var(--red); }
.vol-bars.grn .vcol .bar3 { background-image: linear-gradient(180deg,#5dffb4,#27e0a1,#3a8aff,#5dffb4); color: var(--green); }
.mpill .mp-bar .up { background-image: linear-gradient(180deg,#5dffb4,#27e0a1,#3a8aff,#5dffb4); color: var(--green); }

@keyframes barGradientFlow {
	0% { background-position: 0 0 }
	50% { background-position: 0 100% }
	100% { background-position: 0 0 }
}

/* neon sweep kept only for Key Improvement Metrics bars */
.mpill .mp-bar .up::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0; height: 45%;
	background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
	animation: neonSweep 1.5s ease-out 1;
	mix-blend-mode: overlay;
	pointer-events: none;
	animation-delay: .2s;
}

@keyframes neonSweep {
	0% { transform: translateY(100%); opacity: 0 }
	35% { opacity: 1 }
	100% { transform: translateY(-260%); opacity: 0 }
}

/* ---- percentage counter label above Before/After bars ---- */
.vol-bars .vcol { position: relative; }
.vol-bars .vcol .bar-pct {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	margin-bottom: 3px;
	opacity: 0;
	animation: ddActIn .5s ease-out 1.1s forwards;
}
.vol-bars.red .bar-pct { color: var(--red); }
.vol-bars.grn .bar-pct { color: var(--green); }

/* ---- Donut rings: glow pulse once drawn ---- */
.donut svg circle[stroke="#27e0a1"],
.donut svg circle[stroke="#ff5c7a"],
.donut svg circle[stroke="#ffb347"] {
	animation: ringGlowPulse 2.4s ease-in-out infinite 2.2s;
}
@keyframes ringGlowPulse {
	0%,100% { filter: drop-shadow(0 0 3px currentColor) }
	50% { filter: drop-shadow(0 0 10px currentColor) }
}

/* ---- Counter (count-up) number styling: subtle glow while ticking ---- */
.countup { display: inline-block; }
.countup.counting {
	animation: countGlow .5s ease-in-out infinite alternate;
}
@keyframes countGlow {
	from { text-shadow: 0 0 0 transparent }
	to { text-shadow: 0 0 14px currentColor, 0 0 26px currentColor }
}

/* ---- Colourful animated Accuracy Trend line ---- */
.trend svg .trend-line {
	stroke-dasharray: 620;
	stroke-dashoffset: 620;
	animation: trendDraw 2.2s ease-out .3s forwards;
	filter: drop-shadow(0 0 6px rgba(93,255,180,.7));
}
.trend svg .trend-line-glow {
	stroke-dasharray: 620;
	stroke-dashoffset: 620;
	animation: trendDraw 2.2s ease-out .3s forwards, trendHue 5s linear infinite 2.6s;
	opacity: .55;
}
@keyframes trendHue {
	to { filter: hue-rotate(360deg) }
}
.trend svg .trend-dot {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: dotPop .4s ease-out forwards, dotGlowPulse 1.8s ease-in-out infinite 2.6s;
}
.trend svg .trend-dot:nth-child(1) { animation-delay: .4s, 2.6s }
.trend svg .trend-dot:nth-child(2) { animation-delay: .75s, 2.85s }
.trend svg .trend-dot:nth-child(3) { animation-delay: 1.1s, 3.1s }
.trend svg .trend-dot:nth-child(4) { animation-delay: 1.45s, 3.35s }
.trend svg .trend-dot:nth-child(5) { animation-delay: 1.8s, 3.6s }
.trend svg .trend-dot:nth-child(6) { animation-delay: 2.15s, 3.85s }
@keyframes dotGlowPulse {
	0%,100% { r: 4; filter: drop-shadow(0 0 2px currentColor) }
	50% { r: 5.5; filter: drop-shadow(0 0 10px currentColor) }
}
.trend-fill-area {
	animation: trendFillIn 2.2s ease-out .3s both;
}
@keyframes trendFillIn {
	from { opacity: 0 }
	to { opacity: 1 }
}

/* =========================================================
   STATUS STRIP — colourful neon glow + pulse per item
   ========================================================= */
.status-item {
	position: relative;
	padding: 6px 8px;
	border-radius: 12px;
	transition: box-shadow .3s;
}
.status-item::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 12px;
	opacity: 0;
	animation: statusBoxPulse 2.6s ease-in-out infinite;
	pointer-events: none;
}
.status-item:nth-child(1)::after { box-shadow: 0 0 18px 2px rgba(58,215,255,.55); animation-delay: .1s }
.status-item:nth-child(2)::after { box-shadow: 0 0 18px 2px rgba(180,90,255,.55); animation-delay: .4s }
.status-item:nth-child(3)::after { box-shadow: 0 0 18px 2px rgba(58,138,255,.55); animation-delay: .7s }
.status-item:nth-child(4)::after { box-shadow: 0 0 18px 2px rgba(255,179,71,.55); animation-delay: 1s }
.status-item:nth-child(5)::after { box-shadow: 0 0 18px 2px rgba(255,140,90,.55); animation-delay: 1.3s }
.status-item:nth-child(6)::after { box-shadow: 0 0 18px 2px rgba(39,224,161,.55); animation-delay: 1.6s }
@keyframes statusBoxPulse {
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

.si-icon.progress-ring {
	transition: background 1.8s ease;
	animation: ringPulse 2.4s ease-in-out infinite, ringNeon 2.4s ease-in-out infinite;
}
@keyframes ringNeon {
	0%,100% { box-shadow: 0 0 6px 1px rgba(58,138,255,.5) }
	50% { box-shadow: 0 0 16px 4px rgba(58,138,255,.9) }
}

.si-icon.clock-icon {
	animation: clockTick 1s steps(1) infinite, iconGlowOrange 2s ease-in-out infinite;
}
@keyframes clockTick {
	0%,90% { transform: rotate(0deg) }
	95% { transform: rotate(8deg) }
	100% { transform: rotate(0deg) }
}
@keyframes iconGlowOrange {
	0%,100% { box-shadow: 0 0 6px 1px rgba(255,179,71,.5) }
	50% { box-shadow: 0 0 16px 4px rgba(255,179,71,.9) }
}

.si-icon.timer-icon {
	animation: iconPulseGreen2 2s ease-in-out infinite;
}
@keyframes iconPulseGreen2 {
	0%,100% { box-shadow: 0 0 6px 1px rgba(255,140,90,.5) }
	50% { box-shadow: 0 0 16px 4px rgba(255,140,90,.9) }
}

.si-icon.pulse-icon {
	animation: mpBadgePulse 2s ease-in-out infinite, iconGlowGreen2 2s ease-in-out infinite;
}
@keyframes iconGlowGreen2 {
	0%,100% { box-shadow: 0 0 6px 1px rgba(39,224,161,.5) }
	50% { box-shadow: 0 0 18px 5px rgba(39,224,161,.95) }
}

.status-item span.blink-colon { animation: blinkColon 1s step-start infinite }
@keyframes blinkColon { 50% { opacity: .25 } }

/* ---- Card ambient starfield (matches reference glow/particle texture) ---- */
.idash-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 8% 18%, rgba(255, 255, 255, .55) 50%, transparent 52%),
		radial-gradient(1px 1px at 82% 12%, rgba(255, 255, 255, .4) 50%, transparent 52%),
		radial-gradient(1.5px 1.5px at 62% 68%, rgba(255, 255, 255, .35) 50%, transparent 52%),
		radial-gradient(1px 1px at 28% 84%, rgba(255, 255, 255, .4) 50%, transparent 52%),
		radial-gradient(1.5px 1.5px at 92% 55%, rgba(255, 255, 255, .3) 50%, transparent 52%),
		radial-gradient(1px 1px at 45% 40%, rgba(255, 255, 255, .3) 50%, transparent 52%);
	opacity: .5;
	pointer-events: none;
	animation: starTwinkle 5s ease-in-out infinite;
	z-index: 0
}

@keyframes starTwinkle {

	0%,
	100% {
		opacity: .25
	}

	50% {
		opacity: .65
	}
}

.idash-card>* {
	position: relative;
	z-index: 1
}

/* ---- Orbiting comet spark around donut rings ---- */
.donut-wrap .comet {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 132px;
	height: 132px;
	margin: -66px 0 0 -66px;
	animation: cometSpin 5s linear infinite;
	pointer-events: none
}

.donut-wrap .comet::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 50%;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px 3px currentColor, 0 0 22px 7px currentColor
}

.donut-wrap.red .comet::after {
	color: #ff8095
}

.donut-wrap.grn .comet::after {
	color: #5dffb4
}

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

/* ---- Richer multi-colour glowing wave accent ---- */
.idash-stats-row .wave-bg path {
	filter: drop-shadow(0 0 6px rgba(120, 110, 255, .55));
	stroke-width: 2;
	fill: none
}

.idash-stats-row .wave-spark {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	bottom: -6px;
	z-index: 1;
	animation: sparkTwinkle 2.2s ease-in-out infinite
}

.idash-stats-row .wave-spark.w1 {
	left: 18%;
	animation-delay: .2s;
	box-shadow: 0 0 8px 2px #b45aff
}

.idash-stats-row .wave-spark.w2 {
	left: 52%;
	animation-delay: 1s;
	box-shadow: 0 0 8px 2px #3a8aff
}

.idash-stats-row .wave-spark.w3 {
	left: 80%;
	animation-delay: 1.6s;
	box-shadow: 0 0 8px 2px #ff5c7a
}

/* HERO WORKFLOW SLIDESHOW */
.workflow-slider {
	position: relative;
	max-width: 1000px;
	margin: -50px auto 0;
	overflow: hidden;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
	cursor: grab;
}

.workflow-slider:active {
	cursor: grabbing;
}

.workflow-track {
	display: flex;
	transition: transform .8s ease;
}

.workflow-slide {
	min-width: 100%;
	position: relative;
	background: #fff;
}

.workflow-slide img {
	width: 100%;
	height: 460px;
	object-fit: contain;
	display: block;
}

.workflow-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px;
	color: #fff;
}

.slider-buttons {
	position: absolute;
	bottom: 18px;
	right: 24px;
	display: flex;
	gap: 10px;
	z-index: 10;
}

.slider-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #000;
	cursor: pointer;
	transition: .3s;
}

.slider-dot.active {
	background: #ff7a1a;
	transform: scale(1.2);
	box-shadow: 0 0 12px #ff7a1a;
}

/* PREV / NEXT ARROWS */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: background .25s ease, transform .25s ease;
	font-size: 20px;
	user-select: none;
}

.slider-arrow:hover {
	background: #ff7a1a;
	transform: translateY(-50%) scale(1.08);
}

.slider-arrow.prev {
	left: 16px;
}

.slider-arrow.next {
	right: 16px;
}

/* TOUCH & HOLD OVERLAY (YouTube-mobile style Paused / Resuming feedback) */
.slider-hold-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 8;
	color: #fff;
	text-align: center;
}

.slider-hold-overlay.show {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

.slider-hold-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(20, 20, 28, .65);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.slider-hold-label {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .2px;
}

.slider-hold-sub {
	font-size: 12px;
	opacity: .85;
}

/* TOUCH RIPPLE FEEDBACK AT PRESS POINT */
.slider-touch-ripple {
	position: absolute;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 3px solid rgba(96, 165, 250, .9);
	background: rgba(96, 165, 250, .22);
	transform: translate(-50%, -50%) scale(.4);
	pointer-events: none;
	z-index: 9;
	opacity: 1;
	animation: sliderRippleExpand .6s ease-out forwards;
}

@keyframes sliderRippleExpand {
	from {
		transform: translate(-50%, -50%) scale(.35);
		opacity: 1;
	}

	to {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

@media(max-width:768px) {
	.workflow-slide img {
		height: 320px;
	}

	.slider-arrow {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.slider-hold-icon {
		width: 48px;
		height: 48px;
		font-size: 20px;
	}

	.slider-hold-label {
		font-size: 14px;
	}
}


@media (max-width: 991px) {


    .nav-links {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin-top: 15px;
    }

    .nav-links a {
        font-size: 14px;
        padding: 8px 12px;
    }
}


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

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:12px 20px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.logo-mark{
    width:42px;
    height:42px;
    background:#2563eb;
    color:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    flex-shrink:0;
}

.logo-text{
    font-size:22px;
    font-weight:700;
    color:#111827;
    white-space:nowrap;
}

.logo-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.logo-img{
    width:70px;
    height:auto;
}

.logo-text{
    margin-top:6px;
    text-align:center;
}

.logo-text h3{
    margin:0;
    font-size:10px;
    font-weight:700;
    color:#fff;
    letter-spacing:2px;
}

.logo-text p{
    margin:2px 0 0;
    font-size:6px;
    color:#d8d8d8;
    letter-spacing:1px;
}

#menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
	position: absolute;
	left: 90%;
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:#ffff;
    border-radius:6px;
	z-index: 99999 !important;
}

.logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:#ffff;
    border-radius:6px;
	z-index: 99999 !important;
}


.menu-btn:hover{
    background:#f3f4f6;
    color:#2563eb;
}

.menu-btn svg{
    width:28px;
    height:28px;
}

/* Tablet */
@media (max-width:768px){
    .navbar{
        padding:10px 16px;
    }

    .logo-mark{
        width:38px;
        height:38px;
        font-size:15px;
    }

    .logo-text{
        font-size:20px;
    }

    .menu-btn{
        width:40px;
        height:40px;
    }
}

/* Mobile */
@media (max-width:480px){
    .navbar{
        padding:10px 12px;
    }

    .logo{
        gap:8px;
    }

    .logo-mark{
        width:34px;
        height:34px;
        font-size:14px;
    }

    .logo-text{
        font-size:18px;
    }

    .menu-btn svg{
        width:24px;
        height:24px;
    }
}

/* === Premium workflow SVG icons === */
.workflow-container .icon-wrapper{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:relative;
}
.workflow-container .wf-svg{
  width:64%;height:64%;display:block;
  filter:drop-shadow(0 0 10px rgba(96,165,250,.35)) drop-shadow(0 4px 12px rgba(0,0,0,.45));
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2), filter .5s ease;
}
.step-card:hover .wf-svg{
  transform:scale(1.12) translateY(-2px) rotate(-2deg);
}
.step-card[data-step="0"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(96,165,250,.85)) drop-shadow(0 0 42px rgba(37,99,235,.5));}
.step-card[data-step="1"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(168,85,247,.85)) drop-shadow(0 0 42px rgba(124,58,237,.5));}
.step-card[data-step="2"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(34,197,94,.85)) drop-shadow(0 0 42px rgba(5,150,105,.5));}
.step-card[data-step="3"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(245,158,11,.9)) drop-shadow(0 0 42px rgba(234,88,12,.55));}
.step-card[data-step="4"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(6,182,212,.85)) drop-shadow(0 0 42px rgba(8,145,178,.5));}
.step-card[data-step="5"]:hover .wf-svg{filter:drop-shadow(0 0 18px rgba(236,72,153,.9)) drop-shadow(0 0 42px rgba(190,24,93,.55));}

@keyframes wfFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.workflow-container .wf-svg{animation:wfFloat 5s ease-in-out infinite;}
.step-card:nth-child(2) .wf-svg{animation-delay:.3s}
.step-card:nth-child(3) .wf-svg{animation-delay:.6s}
.step-card:nth-child(4) .wf-svg{animation-delay:.9s}
.step-card:nth-child(5) .wf-svg{animation-delay:1.2s}
.step-card:nth-child(6) .wf-svg{animation-delay:1.5s}

@media (max-width: 640px){
  .workflow-container .wf-svg{width:58%;height:58%;}
}



/* ---- next block ---- */


:root{
  --space-deep:hsl(230 60% 4%);--space-mid:hsl(228 55% 8%);--space-glow:hsl(220 80% 14%);
  --core-blue:199 89% 60%;--core-purple:270 80% 66%;--core-green:140 68% 55%;
  --core-cyan:185 88% 55%;--core-orange:28 95% 58%;--core-pink:325 85% 64%;
  --core-radius:250px;--core-dur:105s;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Rajdhani",system-ui,sans-serif;color:hsl(210 40% 96%);}
.core-section{position:relative;overflow:hidden;min-height:100vh;
  background:
    radial-gradient(1200px 700px at 50% 18%,var(--space-glow),transparent 60%),
    radial-gradient(900px 600px at 15% 80%,hsl(270 70% 12% / .6),transparent 60%),
    radial-gradient(900px 600px at 85% 30%,hsl(190 80% 12% / .5),transparent 60%),
    linear-gradient(180deg,var(--space-deep),var(--space-mid));}
.core-stars,.core-nebula{position:absolute;inset:-20%;pointer-events:none;}
.core-stars{background-image:
  radial-gradient(1.4px 1.4px at 20% 30%,hsl(0 0% 100% / .9),transparent),
  radial-gradient(1.4px 1.4px at 70% 65%,hsl(0 0% 100% / .8),transparent),
  radial-gradient(1px 1px at 40% 80%,hsl(0 0% 100% / .7),transparent),
  radial-gradient(1.6px 1.6px at 85% 20%,hsl(200 100% 85% / .9),transparent),
  radial-gradient(1px 1px at 55% 15%,hsl(0 0% 100% / .7),transparent),
  radial-gradient(1.2px 1.2px at 10% 60%,hsl(0 0% 100% / .6),transparent),
  radial-gradient(1.3px 1.3px at 90% 75%,hsl(280 100% 88% / .8),transparent);
  background-repeat:repeat;background-size:420px 420px;animation:core-twinkle 4.5s ease-in-out infinite;}
.core-stars.s2{background-size:300px 300px;opacity:.6;animation-duration:6.5s;animation-delay:-2s;}
.core-nebula{background:
  radial-gradient(600px 400px at 30% 40%,hsl(220 90% 55% / .16),transparent 70%),
  radial-gradient(500px 380px at 72% 62%,hsl(275 90% 60% / .14),transparent 70%);
  animation:core-drift 22s ease-in-out infinite;}
@keyframes core-twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes core-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.05)}}
.wrap{position:relative;z-index:2;max-width:1152px;margin:0 auto;padding:64px 16px;}
.core-stage{position:relative;width:min(80vw,720px);aspect-ratio:1/1;margin:0 auto;
  transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
.core-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid hsl(var(--core-cyan) / .18);
  transform:translate(-50%,-50%);box-shadow:inset 0 0 40px hsl(var(--core-cyan) / .06);}
.r1{width:62%;height:62%;animation:core-spin 60s linear infinite;border-style:dashed;}
.r2{width:84%;height:84%;animation:core-spin 90s linear infinite reverse;border-color:hsl(var(--core-purple) / .16);}
.r3{width:100%;height:100%;animation:core-spin 120s linear infinite;border-color:hsl(var(--core-blue) / .12);border-style:dotted;}
.core-globe{position:absolute;top:50%;left:50%;width:66%;height:66%;transform:translate(-50%,-50%);
  border-radius:50%;filter:drop-shadow(0 0 60px hsl(var(--core-blue) / .45));}
.core-globe img{width:100%;height:100%;object-fit:contain;
  animation:core-globe-spin 58s linear infinite;animation-timing-function:linear;
  will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
/* The globe's rotation is on a completely separate element from .core-orbit-rotator
   and .core-card-spin, and is never targeted by the .is-paused class, so hovering
   or pausing any orbit card can never stop or stutter the globe. */
.core-globe::after{content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle,hsl(var(--core-blue) / .25),transparent 65%);animation:core-pulse 4s ease-in-out infinite;}
.core-scan{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;}
.core-scan::before{content:"";position:absolute;left:0;right:0;height:30%;
  background:linear-gradient(180deg,transparent,hsl(var(--core-cyan) / .28),transparent);animation:core-scan 6s ease-in-out infinite;}
@keyframes core-globe-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes core-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes core-scan{0%{top:-30%}50%{top:100%}100%{top:100%}}
.core-title-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:3;width:46%;pointer-events:none;}
.core-title{font-family:"Orbitron",sans-serif;font-weight:900;line-height:1.05;
  font-size:clamp(0.85rem,2vw,1.5rem);letter-spacing:.05em;color:#fff;text-shadow:0 0 24px hsl(var(--core-blue) / .7);}
.core-title .acc{background:linear-gradient(120deg,hsl(var(--core-cyan)),hsl(var(--core-blue)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.core-tagline{margin-top:.5rem;font-size:clamp(.6rem,1vw,.8rem);color:hsl(210 40% 82%);font-weight:500;}
.core-orbit{position:absolute;inset:0;z-index:4;}
/* Single parent orbit animation: one rotating frame drives every card + connector
   as a unified system. Cards themselves are statically positioned inside it via
   a fixed rotate(angle) offset, so there is only ONE running orbit animation. */
.core-orbit-rotator{position:absolute;inset:0;transform-origin:50% 50%;
  animation:core-spin var(--core-dur) linear infinite;will-change:transform;
  backface-visibility:hidden;transform-style:preserve-3d;transform:translate3d(0,0,0);}
.core-orbit-rotator.is-paused{animation-play-state:paused;}
.core-node{position:absolute;top:50%;left:50%;width:0;height:0;
  will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
.core-node:hover{z-index:6;}
.core-connector{position:absolute;top:0;left:0;height:2px;width:var(--core-radius);transform-origin:0 50%;transform:translateY(-1px);
  background:linear-gradient(90deg,hsl(var(--glow) / 0),hsl(var(--glow) / .7));}
.core-connector::after{content:"";position:absolute;right:-3px;top:50%;width:8px;height:8px;border-radius:50%;
  transform:translateY(-50%);background:hsl(var(--glow));box-shadow:0 0 12px hsl(var(--glow));}
.core-card-pos{position:absolute;top:0;left:0;transform:translateX(var(--core-radius)) translate3d(0,0,0);
  will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
/* Static counter-rotation: cancels out this card's own fixed placement angle
   (the rotate(baseAngle) set inline on .core-node), which the animated
   .core-card-spin below does NOT cancel on its own since that only counters
   the *rotator's* moving angle, not each card's fixed starting offset. Without
   this layer, cards would stay upright only relative to their orbit start and
   drift into upside-down/mirrored text as they travel around the circle. */
.core-card-unspin{transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
/* Counter-rotation keeps every card upright. It shares the exact same duration,
   easing and start time as the orbit rotator (no per-card delay), so all cards
   remain perfectly registered to one another and to the orbit at every instant. */
.core-card-spin{animation:core-spin-rev var(--core-dur) linear infinite;
  transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;}
.core-card-spin.is-paused{animation-play-state:paused;}
.core-card-wrap{position:absolute;top:0;left:0;}
.core-float{transform:translate(-50%,-50%);animation:core-float 6s ease-in-out infinite;animation-delay:var(--delay);}
.core-node:hover .core-float{animation-play-state:paused;}
@keyframes core-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes core-spin-rev{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes core-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-5px)}}
.core-card{display:flex;align-items:center;gap:.6rem;width:156px;padding:.7rem .8rem;border-radius:1.1rem;
  background:linear-gradient(160deg,hsl(220 40% 12% / .7),hsl(230 45% 7% / .65));border:1px solid hsl(var(--glow) / .35);
  backdrop-filter:blur(14px);box-shadow:0 10px 30px hsl(230 60% 3% / .6),inset 0 0 20px hsl(var(--glow) / .06);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.core-node:hover .core-card{transform:scale(1.05);border-color:hsl(var(--glow) / .9);
  box-shadow:0 16px 44px hsl(230 60% 3% / .7),0 0 34px hsl(var(--glow) / .5),inset 0 0 26px hsl(var(--glow) / .14);}
.core-card-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:hsl(var(--glow));border:2px solid hsl(var(--glow) / .8);font-size:1.1rem;
  background:radial-gradient(circle,hsl(var(--glow) / .18),transparent 70%);
  box-shadow:0 0 18px hsl(var(--glow) / .55),inset 0 0 14px hsl(var(--glow) / .35);}
.core-node:hover .core-card-icon{animation:core-icon-pulse 1.6s ease-in-out infinite;}
@keyframes core-icon-pulse{0%,100%{box-shadow:0 0 18px hsl(var(--glow) / .55),inset 0 0 14px hsl(var(--glow) / .35)}
  50%{box-shadow:0 0 30px hsl(var(--glow) / .9),inset 0 0 20px hsl(var(--glow) / .55)}}
.core-card-text{min-width:0;flex:1 1 auto;overflow-wrap:break-word;word-break:break-word;}
.core-card-title{font-family:"Orbitron",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.04em;color:#fff;line-height:1.1;overflow-wrap:break-word;word-break:break-word;}
.core-card-title span{display:block;}
.core-card-sub{margin-top:2px;font-size:.7rem;font-weight:500;color:hsl(var(--glow));opacity:.9;line-height:1.15;overflow-wrap:break-word;word-break:break-word;}
.b{--glow:var(--core-blue)}.p{--glow:var(--core-purple)}.g{--glow:var(--core-green)}
.c{--glow:var(--core-cyan)}.o{--glow:var(--core-orange)}.k{--glow:var(--core-pink)}
.core-chips{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;}
.core-chip{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:.9rem;
  background:hsl(220 40% 12% / .5);border:1px solid hsl(var(--core-cyan) / .2);backdrop-filter:blur(10px);
  font-weight:600;font-size:.82rem;color:hsl(210 40% 90%);}
.core-chip i{color:hsl(var(--core-cyan));}
.core-chip span span{display:block;line-height:1.05;}
.core-workflow{margin-top:3.5rem;border-radius:1.5rem;padding:1.6rem 1.4rem;
  background:linear-gradient(160deg,hsl(220 45% 11% / .6),hsl(230 50% 6% / .6));
  border:1px solid hsl(var(--core-blue) / .25);backdrop-filter:blur(16px);box-shadow:0 20px 60px hsl(230 60% 3% / .55);}
.core-workflow-title{font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:.35em;text-align:center;
  font-size:.9rem;color:hsl(var(--core-cyan));text-shadow:0 0 18px hsl(var(--core-cyan) / .6);margin-bottom:1.4rem;}
.core-steps{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;}
.core-step{display:flex;align-items:center;gap:12px;}
.core-step-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:hsl(var(--core-cyan));
  border:2px solid hsl(var(--core-cyan) / .6);font-size:1.25rem;
  background:radial-gradient(circle,hsl(var(--core-cyan) / .15),transparent 70%);
  box-shadow:0 0 18px hsl(var(--core-cyan) / .4);animation:core-icon-pulse 3s ease-in-out infinite;}
.core-step-txt .t{font-weight:600;font-size:.9rem;color:#fff;line-height:1.1;}
.core-step-txt .s{font-size:.78rem;color:hsl(215 20% 65%);line-height:1.1;}
.core-arrow{color:hsl(var(--core-green));font-size:1.1rem;animation:core-arrow 1.8s ease-in-out infinite;}
@keyframes core-arrow{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:1}}
@media(max-width:1024px){:root{--core-radius:210px}.core-card{width:140px}}
@media(max-width:680px){:root{--core-radius:135px}
  .core-card{width:118px;padding:.55rem;gap:.45rem}.core-card-icon{width:34px;height:34px;font-size:.9rem}
  .core-card-title{font-size:.66rem}.core-card-sub{font-size:.56rem}.core-card-text{min-width:0}}
@media(prefers-reduced-motion:reduce){.core-orbit-rotator,.core-card-spin,.core-card-wrap,.core-globe img,.core-ring,.core-float,.core-stars,.core-nebula{animation:none!important}}


/* ---- next block ---- */


.nhX-wrap{max-width:1400px;margin:0 auto;padding:20px 0 40px;color:#e6eaff;font-family:inherit}
.nhX-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(120,140,255,.14);font-size:13px;font-weight:600;letter-spacing:1.5px;color:#ff8a3d;margin-bottom:20px}
.nhX-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center}
.nhX-title{font-size:60px;line-height:1.05;font-weight:800;letter-spacing:-1.5px;margin:8px 0 20px;color:#fff}
.nhX-title .grad{background:linear-gradient(90deg,#c084fc 0%,#ec4899 45%,#f97316 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nhX-sub{color:#a9b1d6;font-size:17px;line-height:1.6;max-width:520px}
.nhX-stage{position:relative;height:380px}
.nhX-stage svg{width:100%;height:100%;overflow:visible}
.nhX-callout{position:absolute;padding:14px 18px;border-radius:14px;background:rgba(10,16,45,.75);border:1px solid rgba(120,140,255,.18);backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.nhX-callout .k{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.nhX-callout .v{color:#8892c0;font-size:13px;margin-top:4px}
.nhX-callout.src{top:52%;left:2%}.nhX-callout.src .k{color:#22d3ee}
.nhX-callout.dst{top:58%;right:0%}.nhX-callout.dst .k{color:#f5b301}
.nhX-pipeline{display:flex;align-items:stretch;justify-content:space-between;gap:0;margin-top:16px;flex-wrap:nowrap}
.nhX-step{position:relative;flex:1 1 0;padding:20px 18px;border-radius:16px;background:rgba(10,16,45,.55);border:1.5px solid color-mix(in oklab,currentColor 55%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,currentColor 15%,transparent) inset,0 8px 30px color-mix(in oklab,currentColor 18%,transparent);overflow:hidden;min-height:150px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:12px;align-items:center}
.nhX-step .num{position:static;width:44px;height:44px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:currentColor;grid-row:1;grid-column:1;box-shadow:0 0 18px color-mix(in oklab,currentColor 45%,transparent)}
.nhX-step h3{grid-row:1;grid-column:2;font-size:22px;margin:0;font-weight:800;color:#fff;line-height:1.1}
.nhX-step .ico{position:static;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,currentColor 15%,transparent);border:1px solid color-mix(in oklab,currentColor 40%,transparent);font-size:22px;color:currentColor;grid-row:2;grid-column:1;box-shadow:0 0 14px color-mix(in oklab,currentColor 30%,transparent)}
.nhX-step p{grid-row:2;grid-column:2;color:#cbd5e1;font-size:14px;line-height:1.45;margin:0}
.nhX-arrow{flex:0 0 60px;align-self:center;height:24px;position:relative;margin:0 6px}
.nhX-arrow::before{content:"";position:absolute;left:2px;right:22px;top:50%;height:0;border-top:2px dashed var(--ac,#22d3ee);opacity:.8}
.nhX-arrow::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-left:18px solid var(--ac,#22d3ee);border-top:11px solid transparent;border-bottom:11px solid transparent;filter:drop-shadow(0 0 8px var(--ac,#22d3ee));animation:nhXArrowSlide 1.4s ease-in-out infinite}
@keyframes nhXArrowSlide{0%,100%{transform:translateY(-50%) translateX(0);opacity:.8}50%{transform:translateY(-50%) translateX(6px);opacity:1}}
.xs1{color:#22d3ee}.xs2{color:#a855f7}.xs3{color:#ec4899}.xs4{color:#ff8a3d}.xs5{color:#22c55e}
@keyframes nhXPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes nhXFlow{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
@keyframes nhXFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes nhXSpin{to{transform:rotate(360deg)}}
@keyframes nhXGlowB{0%,100%{filter:drop-shadow(0 0 12px rgba(59,130,246,.55))}50%{filter:drop-shadow(0 0 26px rgba(59,130,246,.9))}}
@keyframes nhXGlowP{0%,100%{filter:drop-shadow(0 0 12px rgba(168,85,247,.55))}50%{filter:drop-shadow(0 0 30px rgba(236,72,153,.9))}}
@keyframes nhXGlowG{0%,100%{filter:drop-shadow(0 0 14px rgba(245,179,1,.55))}50%{filter:drop-shadow(0 0 30px rgba(255,138,61,.9))}}
.nhX-docs{animation:nhXFloat 4s ease-in-out infinite,nhXGlowB 3.2s ease-in-out infinite;transform-origin:center}
.nhX-chip{animation:nhXFloat 4.5s ease-in-out infinite .3s,nhXGlowP 3s ease-in-out infinite;transform-origin:center}
.nhX-gold{animation:nhXFloat 4s ease-in-out infinite .5s,nhXGlowG 3.2s ease-in-out infinite;transform-origin:center}
.nhX-beam{stroke-dasharray:14 10;animation:nhXFlow 2.4s linear infinite}
.nhX-spark{animation:nhXPulse 1.6s ease-in-out infinite}
.nhX-orbit{animation:nhXSpin 10s linear infinite;transform-origin:360px 220px}
@media (max-width:1000px){.nhX-grid{grid-template-columns:1fr;gap:40px}.nhX-title{font-size:40px}.nhX-stage{height:420px}.nhX-pipeline{flex-direction:column;gap:14px}.nhX-arrow{display:none}}


/* ---- next block ---- */


			.demo-dark{background:linear-gradient(180deg,#0a0620 0%,#120a2e 60%,#0a0620 100%);color:#e8e6ff;padding:80px 0;position:relative;overflow:hidden}
			.demo-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 500px at 20% 10%,rgba(138,58,255,.18),transparent 60%),radial-gradient(800px 500px at 90% 80%,rgba(255,58,180,.12),transparent 60%);pointer-events:none}
			.demo-dark .container{position:relative;z-index:1}
			.demo-dark .section-title,.demo-dark .section-sub,.demo-dark .eyebrow{color:#fff}
			.demo-dark .section-sub{color:#b8b4d9}
			.dd-welcome{display:flex;justify-content:space-between;align-items:flex-end;margin:24px 0 22px;flex-wrap:wrap;gap:16px}
			.dd-welcome h3{font-size:28px;margin:0;color:#fff;font-weight:700}
			.dd-welcome p{margin:6px 0 0;color:#a49fd0;font-size:14px}
			.dd-live{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:8px 14px;border-radius:999px;font-size:13px;color:#e8e6ff}
			.dd-live .dot{width:8px;height:8px;border-radius:50%;background:#22e07a;box-shadow:0 0 10px #22e07a;animation:ddPulse 1.4s ease-in-out infinite}
			@keyframes ddPulse{50%{opacity:.35;transform:scale(.85)}}
			/* =========================================================
			   NEW video showcase layout (side-by-side row).
			   Uses ol-prefixed class names on purpose: this stylesheet
			   already has an OLDER, unrelated ".demo-grid"/".video-card"
			   pair (~line 3709, a leftover from an earlier design that
			   isn't used in the current markup) which was silently
			   bleeding styles into these cards when reused. Prefixing
			   guarantees no collision.
			   ========================================================= */
			.video-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
			@media(max-width:800px){.video-row{grid-template-columns:1fr}}
			.ol-video-card{background:linear-gradient(180deg,rgba(28,18,55,.9),rgba(18,10,38,.9));border:1px solid rgba(138,90,255,.18);border-radius:20px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
			.ol-video-card video{display:block;width:100%;height:auto;aspect-ratio:640/360;background:#000;border-radius:12px}
			.ol-video-card .dd-vlabel{position:static;margin-top:12px;left:auto;bottom:auto}

			/* Live Dashboard card + KPI cards side by side (matches the
			   approved layout: dashboard on the left, 2-column KPI grid
			   on the right). */
			.dash-kpis-row{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:start;margin-top:22px}
			@media(max-width:960px){.dash-kpis-row{grid-template-columns:1fr}}
			.dd-card{background:linear-gradient(180deg,rgba(28,18,55,.9),rgba(18,10,38,.9));border:1px solid rgba(138,90,255,.18);border-radius:20px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
			/* Video card */
			.dd-video{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1a0e40 0%,#0a0620 70%)}
			.dd-video .stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#c9b3ff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(2px 2px at 85% 25%,#a488ff,transparent),radial-gradient(1px 1px at 15% 70%,#fff,transparent),radial-gradient(1px 1px at 60% 20%,#e0d2ff,transparent),radial-gradient(1px 1px at 90% 85%,#fff,transparent);opacity:.8;animation:ddStars 8s linear infinite}
			@keyframes ddStars{to{background-position:200px 100px,-150px 80px,120px -60px,-100px 40px,80px -120px,-60px 60px,-140px -80px}}
			.dd-rings{position:absolute;width:80%;height:80%;display:flex;align-items:center;justify-content:center}
			.dd-rings .ring{position:absolute;border-radius:50%;border:1.5px solid transparent;background:conic-gradient(from 0deg,#8a3aff,#ff3ab4,#3a8aff,#8a3aff) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ddSpin 6s linear infinite}
			.dd-rings .r1{width:100%;height:100%;opacity:.9}
			.dd-rings .r2{width:78%;height:78%;animation-duration:8s;animation-direction:reverse;opacity:.75}
			.dd-rings .r3{width:56%;height:56%;animation-duration:5s;opacity:.6}
			.dd-rings .r4{width:36%;height:36%;animation-duration:4s;animation-direction:reverse;opacity:.5}
			@keyframes ddSpin{to{transform:rotate(360deg)}}
			.dd-play{position:relative;z-index:2;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#8a3aff,#3a8aff);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 40px rgba(138,58,255,.7),0 0 80px rgba(58,138,255,.4);animation:ddGlow 2.4s ease-in-out infinite;border:none}
			.dd-play::after{content:"";width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
			@keyframes ddGlow{50%{box-shadow:0 0 60px rgba(138,58,255,1),0 0 120px rgba(58,138,255,.7);transform:scale(1.05)}}
			.dd-vlabel{position:absolute;left:20px;bottom:16px;z-index:2;font-size:11px;letter-spacing:2px;color:#8a86b8}
			.dd-vlabel b{display:block;color:#3a8aff;font-size:15px;letter-spacing:3px;margin-top:2px}
			.dd-vmenu{position:absolute;top:16px;right:20px;z-index:2;color:#8a86b8;font-size:22px;letter-spacing:2px}
			/* Live dashboard */
			.dd-dash h4{margin:0 0 4px;font-size:22px;color:#fff}
			.dd-metrics{display:flex;flex-direction:column;gap:14px;margin-top:18px}
			.dd-metric{display:grid;grid-template-columns:44px 1fr auto 90px;gap:14px;align-items:center}
			.dd-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
			.dd-icon.c1{background:rgba(255,140,40,.15);color:#ff8c28}
			.dd-icon.c2{background:rgba(58,138,255,.15);color:#3a8aff}
			.dd-icon.c3{background:rgba(34,224,122,.15);color:#22e07a}
			.dd-icon.c4{background:rgba(180,90,255,.15);color:#b45aff}
			.dd-icon.c5{background:rgba(255,80,120,.15);color:#ff5078}
			.dd-mlabel{display:flex;flex-direction:column;gap:6px}
			.dd-mlabel span{font-size:14px;color:#e8e6ff;font-weight:500}
			.dd-mbar{width:100%;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
			.dd-mbar i{display:block;height:100%;border-radius:3px;animation:ddFill 1.6s ease-out forwards;transform-origin:left}
			@keyframes ddFill{from{width:0}}
			.dd-mbar.b1 i{background:linear-gradient(90deg,#ff8c28,#ffb366);width:var(--w)}
			.dd-mbar.b2 i{background:linear-gradient(90deg,#3a8aff,#6cb3ff);width:var(--w)}
			.dd-mbar.b3 i{background:linear-gradient(90deg,#22e07a,#6cf0a8);width:var(--w)}
			.dd-mbar.b4 i{background:linear-gradient(90deg,#b45aff,#d99cff);width:var(--w)}
			.dd-mbar.b5 i{background:linear-gradient(90deg,#ff5078,#ff8ba8);width:var(--w)}
			.dd-mval{font-weight:700;color:#fff;font-size:15px}
			.dd-mspark{width:90px;height:34px}
			.dd-mspark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:ddDraw 2s ease-out forwards}
			@keyframes ddDraw{to{stroke-dashoffset:0}}
			/* Trend */
			.dd-trend{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
			.dd-trend-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
			.dd-trend-head b{color:#fff;font-size:16px}
			.dd-trend-head select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e8e6ff;padding:6px 10px;border-radius:8px;font-size:12px}
			.dd-trend svg{width:100%;height:170px}
			.dd-trend svg path.area{fill:url(#ddArea);opacity:.6}
			.dd-trend svg path.line{fill:none;stroke:#b45aff;stroke-width:2.5;stroke-dasharray:1400;stroke-dashoffset:1400;animation:ddDraw2 3s ease-out forwards}
			@keyframes ddDraw2{to{stroke-dashoffset:0}}
			.dd-trend svg circle{fill:#fff;stroke:#b45aff;stroke-width:2;opacity:0;animation:ddDot .4s ease-out forwards}
			@keyframes ddDot{to{opacity:1}}
			.dd-axis{fill:#6a6690;font-size:10px}
			/* KPI row */
			.dd-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
			@media(max-width:960px){.dd-kpis{grid-template-columns:repeat(2,1fr)}}
			.dd-kpi{background:linear-gradient(180deg,rgba(28,18,55,.9),rgba(18,10,38,.9));border:1px solid rgba(138,90,255,.18);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
			.dd-kpi-top{display:flex;gap:12px;align-items:flex-start}
			.dd-kpi-label{font-size:12px;color:#a49fd0}
			.dd-kpi-val{font-size:26px;font-weight:800;color:#fff;line-height:1}
			.dd-kpi-delta{font-size:11px;color:#22e07a;margin-top:4px}
			.dd-kpi-delta.dn{color:#ff5078}
			.dd-kpi-delta small{color:#6a6690;margin-left:4px}
			.dd-kpi svg{width:100%;height:34px;margin-top:6px}
			.dd-kpi svg path{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:ddDraw 2.2s ease-out forwards}
			/* Bottom row */
			.dd-bottom{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-top:16px}
			@media(max-width:960px){.dd-bottom{grid-template-columns:1fr}}
			.dd-bottom h5{margin:0;color:#fff;font-size:16px}
			.dd-recent-head,.dd-actions-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
			.dd-viewall{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e8e6ff;padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer}
			.dd-activity{display:flex;flex-direction:column;gap:12px}
			.dd-act{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#d4d0f0}
			.dd-act .l{display:flex;gap:10px;align-items:center}
			.dd-act .ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
			.dd-act .ico.ok{background:#22e07a}
			.dd-act .ico.pr{background:#3a8aff}
			.dd-act .ico.er{background:#ff5078}
			.dd-act .t{color:#8a86b8;font-size:12px}
			.dd-qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
			@media(max-width:960px){.dd-qgrid{grid-template-columns:repeat(3,1fr)}}
			.dd-q{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .25s}
			.dd-q:hover{background:rgba(138,90,255,.12);border-color:rgba(138,90,255,.4);transform:translateY(-3px)}
			.dd-q .qic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
			.dd-q .qic.q1{background:rgba(180,90,255,.18);color:#b45aff}
			.dd-q .qic.q2{background:rgba(255,140,40,.18);color:#ff8c28}
			.dd-q .qic.q3{background:rgba(58,138,255,.18);color:#3a8aff}
			.dd-q .qic.q4{background:rgba(34,224,122,.18);color:#22e07a}
			.dd-q .qic.q5{background:rgba(255,80,120,.18);color:#ff5078}
			.dd-q .qic.q6{background:rgba(255,140,40,.18);color:#ff8c28}
			.dd-q span{font-size:11px;color:#d4d0f0;text-align:center}
		
			/* --- extra animations --- */
			.dd-video{animation:ddCardIn .9s ease-out both}
			.dd-dash{animation:ddCardIn .9s .15s ease-out both}
			.dd-kpi{animation:ddCardIn .8s ease-out both;transition:transform .3s,box-shadow .3s}
			.dd-kpi:nth-child(1){animation-delay:.1s}.dd-kpi:nth-child(2){animation-delay:.2s}.dd-kpi:nth-child(3){animation-delay:.3s}.dd-kpi:nth-child(4){animation-delay:.4s}.dd-kpi:nth-child(5){animation-delay:.5s}
			.dd-kpi:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(138,58,255,.35);border-color:rgba(138,90,255,.5)}
			.dd-bottom .dd-card{animation:ddCardIn .9s .4s ease-out both}
			@keyframes ddCardIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
			/* continuous shimmer on bars */
			.dd-mbar i{position:relative;overflow:hidden}
			.dd-mbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:ddShimmer 2.4s ease-in-out infinite}
			.dd-mbar.b2 i::after{animation-delay:.3s}.dd-mbar.b3 i::after{animation-delay:.6s}.dd-mbar.b4 i::after{animation-delay:.9s}.dd-mbar.b5 i::after{animation-delay:1.2s}
			@keyframes ddShimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(200%)}}
			/* metric icons pulse */
			.dd-icon{animation:ddIconPulse 3s ease-in-out infinite}
			.dd-metric:nth-child(2) .dd-icon{animation-delay:.4s}
			.dd-metric:nth-child(3) .dd-icon{animation-delay:.8s}
			.dd-metric:nth-child(4) .dd-icon{animation-delay:1.2s}
			.dd-metric:nth-child(5) .dd-icon{animation-delay:1.6s}
			@keyframes ddIconPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.25)}}
			/* sparklines redraw loop */
			.dd-mspark path,.dd-kpi svg path{animation:ddDrawLoop 4s ease-in-out infinite}
			@keyframes ddDrawLoop{0%{stroke-dashoffset:200}40%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}
			/* trend line continuous */
			.dd-trend svg path.line{animation:ddDrawLoop2 6s ease-in-out infinite}
			@keyframes ddDrawLoop2{0%{stroke-dashoffset:1400}45%,55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1400}}
			.dd-trend svg circle{animation:ddDotBlink 2s ease-in-out infinite}
			@keyframes ddDotBlink{0%,100%{opacity:.4;r:3}50%{opacity:1;r:5}}
			/* rings extra pulse + glow ripple behind play */
			.dd-play{position:relative}
			.dd-play::before{content:"";position:absolute;inset:-20px;border-radius:50%;border:2px solid rgba(138,58,255,.6);animation:ddRipple 2s ease-out infinite}
			.dd-play::after{animation:ddPlayNudge 1s ease-in-out infinite}
			@keyframes ddRipple{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.8);opacity:0}}
			@keyframes ddPlayNudge{50%{transform:translateX(3px)}}
			.dd-video{transition:transform .4s}
			.dd-video:hover{transform:scale(1.01)}
			.dd-video:hover .dd-play{transform:scale(1.12)}
			/* welcome wave */
			.dd-welcome h3 span.wave{display:inline-block;transform-origin:70% 70%;animation:ddWave 2.4s ease-in-out infinite}
			@keyframes ddWave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
			/* live dot ring */
			.dd-live{position:relative}
			.dd-live .dot::after{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;border-radius:50%;background:#22e07a;transform:translate(-50%,-50%);animation:ddLiveRing 1.6s ease-out infinite;opacity:.6}
			@keyframes ddLiveRing{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
			/* quick action icon float */
			.dd-q .qic{animation:ddFloat 4s ease-in-out infinite}
			.dd-q:nth-child(2) .qic{animation-delay:.3s}.dd-q:nth-child(3) .qic{animation-delay:.6s}.dd-q:nth-child(4) .qic{animation-delay:.9s}.dd-q:nth-child(5) .qic{animation-delay:1.2s}.dd-q:nth-child(6) .qic{animation-delay:1.5s}
			@keyframes ddFloat{50%{transform:translateY(-6px)}}
			/* activity items */
			.dd-act{opacity:0;animation:ddActIn .6s ease-out forwards}
			.dd-act:nth-child(1){animation-delay:.5s}.dd-act:nth-child(2){animation-delay:.65s}.dd-act:nth-child(3){animation-delay:.8s}.dd-act:nth-child(4){animation-delay:.95s}.dd-act:nth-child(5){animation-delay:1.1s}
			@keyframes ddActIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
			.dd-act .ico.pr{animation:ddSpin 2s linear infinite}
			/* KPI value count-up feel via subtle scale */
			.dd-kpi-val{background:linear-gradient(90deg,#fff,#c9b3ff,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ddSheen 4s linear infinite}
			@keyframes ddSheen{to{background-position:-200% 0}}



/* ---- next block ---- */


	/* ===================== PROFILE CARDS (Meet The Leaders) FIXES ===================== */
	#team .flex.justify-center.gap-8 {
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* Card size locked to the original design — do not grow with content */
	#team .flex.justify-center.gap-8 > div.group {
		width: 520px !important;
		max-width: 520px !important;
		min-height: 350px !important;
		height: 350px !important;
		padding: 1.5rem !important; /* consistent padding on all cards */
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		overflow: visible !important; /* never clip the icon row */
		position: relative !important;
	}

	/* Profile photo */
	#team .flex.justify-center.gap-8 > div.group img {
		width: 90px !important;
		height: 90px !important;
		object-fit: cover !important;
		border-radius: 9999px !important;
		flex-shrink: 0 !important;
	}

	/* Name */
	#team .flex.justify-center.gap-8 > div.group h3 {
		font-size: 1.2rem !important;
		line-height: 1.25 !important;
		margin-top: 0.65rem !important;
		margin-bottom: 0 !important;
	}

	/* Designation — smaller so it always fits */
	#team .flex.justify-center.gap-8 > div.group h3 + p {
		font-size: 0.8rem !important;
		line-height: 1.5 !important;
		margin-top: 0.3rem !important;
		margin-bottom: 0.5rem !important;
	}

	/* Description — overrides the large inline style so text fits the card,
	   with a line-clamp safety net so long bios never push the icons out */
	#team .flex.justify-center.gap-8 > div.group p[style] {
		font-size: 0.8rem !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
		margin-bottom: 0.6rem !important;
		flex-grow: 1 !important;
		overflow: hidden !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 5 !important;
		-webkit-box-orient: vertical !important;
	}

	/* Social icon row — always visible, pinned to the bottom of the card */
	#team .flex.justify-center.gap-8 > div.group .flex.gap-3 {
		margin-top: auto !important;
		padding-top: 0.5rem !important;
		padding-bottom: 0.15rem !important;
		display: flex !important;
		gap: 0.6rem !important;
		justify-content: center !important;
		align-items: center !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
		position: relative !important;
		z-index: 20 !important;
		flex-shrink: 0 !important;
	}

	/* Icon buttons — fixed, clickable, and consistently aligned on every card */
	#team .flex.justify-center.gap-8 > div.group .flex.gap-3 a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 28px !important;
		height: 28px !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		cursor: pointer !important;
	}

	#team .flex.justify-center.gap-8 > div.group .flex.gap-3 a i {
		font-size: 0.7rem !important;
		line-height: 1 !important;
		color: #2563eb !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#team .flex.justify-center.gap-8 > div.group .flex.gap-3 a:hover i {
		color: #ffffff !important;
	}

	@media (max-width: 640px) {
		#team .flex.justify-center.gap-8 > div.group {
			width: 100% !important;
			max-width: 320px !important;
			height: auto !important;
			min-height: 380px !important;
		}
	}
	

/* ---- next block ---- */


	/* ===================== TESTIMONIALS SECTION (dark theme) ===================== */
	.ol-testi-section {
		position: relative;
		background: transparent; /* let body's navy gradient + particles show through */
		z-index: 1;
	}

	.ol-testi-section .max-w-7xl {
		position: relative;
		z-index: 2;
	}

	.ol-testi-heading-wrap {
		text-align: center;
		margin-bottom: 56px;
	}

	.ol-testi-eyebrow {
		display: block;
		color: var(--orange);
		font-size: 13px;
		letter-spacing: .25em;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 14px;
	}

	.ol-testi-heading {
		font-family: 'Space Grotesk', sans-serif;
		font-weight: 800;
		font-size: clamp(32px, 4vw, 52px);
		letter-spacing: -.02em;
		line-height: 1.05;
		color: var(--text);
		margin: 0;
		text-shadow: 0 0 24px rgba(147, 197, 253, 0.25);
	}

	.ol-testi-divider {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 18px;
	}

	.ol-testi-line {
		width: 60px;
		height: 3px;
		border-radius: 2px;
		background: var(--orange);
		box-shadow: 0 0 12px rgba(255, 122, 26, .6);
	}

	.ol-testi-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--orange);
		box-shadow: 0 0 10px rgba(255, 122, 26, .7);
		flex-shrink: 0;
	}

	.ol-testi-slider {
		position: relative;
		max-width: 980px;
		margin: 0 auto;
		padding: 0 64px;
	}

	.ol-testi-viewport {
		overflow: hidden;
		width: 100%;
	}

	.ol-testi-track {
		display: flex;
		will-change: transform;
	}

	.ol-testi-card {
		flex: 0 0 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.ol-testi-card-inner {
		background: var(--card);
		backdrop-filter: blur(14px) saturate(140%);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		border: 1px solid var(--card-border);
		border-radius: 20px;
		box-shadow:
			0 0 30px rgba(59, 130, 246, 0.08),
			0 16px 40px rgba(2, 6, 20, 0.45);
		padding: 36px 30px;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
	}

	.ol-testi-card-inner:hover {
		transform: translateY(-4px);
		border-color: rgba(120, 170, 255, 0.4);
		box-shadow:
			0 0 40px rgba(59, 130, 246, 0.18),
			0 20px 50px rgba(2, 6, 20, 0.5);
	}

	.ol-testi-quote-icon {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 64px;
		line-height: 1;
		color: rgba(255, 122, 26, 0.35);
		font-weight: 800;
		margin-bottom: 4px;
		user-select: none;
	}

	.ol-testi-text {
		font-family: 'Inter', sans-serif;
		font-size: 15px;
		line-height: 1.7;
		color: #D6D9E3;
		margin-bottom: 22px;
		flex-grow: 1;
	}

	.ol-testi-stars {
		color: #FFB100;
		font-size: 16px;
		letter-spacing: 3px;
		margin-bottom: 14px;
		text-shadow: 0 0 12px rgba(255, 177, 0, 0.45);
	}

	.ol-testi-stars span {
		font-family: 'Inter', sans-serif;
		letter-spacing: normal;
		color: var(--text);
		font-weight: 700;
		font-size: 13px;
		margin-left: 8px;
		text-shadow: none;
	}

	.ol-testi-title {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 16px;
		font-weight: 700;
		color: #ffffff;
		margin: 0 0 2px 0;
	}

	.ol-testi-subtitle {
		font-family: 'Inter', sans-serif;
		font-size: 13px;
		color: #FF8C00;
		font-weight: 600;
		margin: 0;
	}

	.ol-testi-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background: rgba(30, 58, 138, 0.35);
		color: #ffffff;
		border: 1px solid rgba(120, 170, 255, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		cursor: pointer;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
		transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
		z-index: 2;
	}

	.ol-testi-btn:hover {
		background: rgba(255, 122, 26, 0.18);
		border-color: rgba(255, 122, 26, 0.6);
		box-shadow: 0 0 28px rgba(255, 122, 26, 0.55);
		transform: translateY(-50%) scale(1.07);
	}

	.ol-testi-prev { left: 0; }
	.ol-testi-next { right: 0; }

	/* fade + slide animation for active cards */
	.ol-testi-card-inner {
		animation: olTestiFadeSlide 0.6s ease;
	}

	@keyframes olTestiFadeSlide {
		from { opacity: 0; transform: translateX(24px); }
		to { opacity: 1; transform: translateX(0); }
	}

	/* Tablet and Desktop: 2 cards side by side */
	@media (min-width: 768px) {
		.ol-testi-card {
			flex: 0 0 50%;
			max-width: 50%;
		}
	}

	@media (max-width: 640px) {
		.ol-testi-slider {
			padding: 0 50px;
		}
		.ol-testi-btn {
			width: 38px;
			height: 38px;
			font-size: 14px;
		}
		.ol-testi-card-inner {
			padding: 28px 22px;
		}
	}
	
/* =========================================================
   SEO fix: single-h1-per-page pass
   "Data Mastery Platform" was changed from <h1> (no class) to
   <h2 class="platform-title">. This block reproduces, verbatim, every
   property it was previously picking up from the generic h1{} rule and
   the h1,h2,h3{} rule + the three responsive h1{font-size} breakpoints,
   so the rendered result is pixel-identical to before.
   ========================================================= */
.platform-title {
	font-size: 3.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 16px;
	animation: textGlow 3s ease-in-out infinite;
	font-family: 'Space Grotesk', sans-serif;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

@media (max-width: 1200px) {
	.platform-title {
		font-size: 2.5rem;
	}
}

@media (max-width: 768px) {
	.platform-title {
		font-size: 2rem;
	}
}

@media (max-width: 480px) {
	.platform-title {
		font-size: 1.3rem;
	}
}

/* =========================================================
   "Get in Touch" section — dark glassmorphism redesign
   Uses the site's existing dark palette (--blue-950/900/800,
   --card-border, --text, --muted, --orange) so it matches the rest of
   the page's already-dark sections (hero/workflow/modules) instead of
   the light white-card treatment this section used before. New,
   self-contained classes only — nothing here touches any selector
   used elsewhere on the page.
   ========================================================= */

.contact-card {
	background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(4, 18, 46, .65));
	border: 1px solid var(--card-border);
	border-radius: 24px;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
	padding: 40px;
}

@media (max-width: 640px) {
	.contact-card {
		padding: 28px 22px;
	}
}

.contact-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 10px;
}

.contact-heading {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin-bottom: 10px;
}

.contact-sub {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 32px;
}

.contact-field {
	margin-bottom: 20px;
}

.contact-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: 8px;
}

.contact-label .req {
	color: var(--orange);
}

.contact-input {
	width: 100%;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	color: #fff;
	font-size: 14px;
	font-family: inherit;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.contact-input::placeholder {
	color: rgba(159, 176, 216, .6);
}

.contact-input:focus {
	outline: none;
	border-color: var(--orange);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 0 0 3px rgba(255, 122, 26, .18);
}

.contact-textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 24px;
}

.contact-checkbox-row input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--orange);
	flex-shrink: 0;
	cursor: pointer;
}

.contact-checkbox-row label {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.6;
	cursor: pointer;
}

.contact-submit-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 24px;
	background: linear-gradient(135deg, var(--orange), #ff5500);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(255, 122, 26, .3);
	transition: transform .2s ease, box-shadow .2s ease;
}

.contact-submit-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(255, 122, 26, .45);
}

.contact-submit-btn:active {
	transform: translateY(-1px);
}

.contact-submit-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.contact-submit-btn:disabled {
	opacity: .7;
	cursor: not-allowed;
	transform: none;
}

.contact-info-icon-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--card-border);
}

.contact-info-icon-row:last-of-type {
	border-bottom: none;
}

.contact-info-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 122, 26, .15);
	color: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.contact-info-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	margin-bottom: 4px;
}

.contact-info-text {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin: 0;
}

.contact-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 14px;
	background: rgba(255, 122, 26, .12);
	border: 1px solid rgba(255, 122, 26, .35);
	border-radius: 12px;
	color: #ffb787;
	font-size: 12px;
	line-height: 1.5;
}

.contact-map-wrap {
	margin-top: 24px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	height: 260px;
}

.contact-map-wrap iframe {
	display: block;
}

/* =========================================================
   FIX: in-page anchor links (#about, #why, #industries, etc.)
   landing behind the fixed <nav>.
   The <nav> is `position: fixed`, so it permanently overlaps
   the top of the viewport. Without this, clicking a nav link
   (or loading a URL like /#why directly) scrolls the target
   section's top edge to y=0, which sits underneath the nav bar
   -- the click "does nothing" visually.
   --nav-h is set dynamically in inline.js (nav height differs
   at mobile widths), with this value as a safe fallback before
   that JS runs on first paint.
   ========================================================= */
section[id] {
	scroll-margin-top: var(--nav-h, 150px);
}

/* =========================================================
   BOOKING MODAL ("Book Session" -> Google Calendar booking)
   Reuses the same color variables/contact-input look as the
   existing contact form so it feels like the same site.
   ========================================================= */
.booking-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(2, 6, 30, 0.72);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.booking-overlay.hidden {
	display: none;
}

.booking-modal {
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: #0b1230;
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: 28px;
	position: relative;
}

.booking-close-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--card-border);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.booking-slots-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 12px 0 4px;
}

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

.booking-slot-btn {
	padding: 10px 6px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.booking-slot-btn:hover {
	border-color: var(--orange, #ff7a1a);
}

.booking-slot-btn.selected {
	background: linear-gradient(135deg, var(--orange, #ff7a1a), #ff5500);
	border-color: transparent;
	font-weight: 700;
}

.booking-slot-btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.booking-status {
	margin-top: 6px;
	font-size: 13px;
}

/* Chrome/Edge render the date input's internal text and the little
   calendar icon in their own shadow-DOM parts, which ignore the
   `color: #fff` inherited from .contact-input -- they default to
   black, invisible on this dark background. Fix both explicitly. */
#booking-date::-webkit-datetime-edit,
#booking-date::-webkit-datetime-edit-fields-wrapper,
#booking-date::-webkit-datetime-edit-text,
#booking-date::-webkit-datetime-edit-month-field,
#booking-date::-webkit-datetime-edit-day-field,
#booking-date::-webkit-datetime-edit-year-field {
	color: #fff !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #fff !important;
}

#booking-date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	width: 22px;
	height: 22px;
	margin-right: 2px;
	/* Makes Chrome/Edge render this native icon (and the rest of the
	   native date-picker popup) in light/white colors automatically --
	   no overlay hacks, no hidden elements, no JS needed. This is the
	   standard, reliable way to theme native form controls for a dark
	   background. Simpler and more robust than the filter:invert() /
	   custom-drawn-icon approaches tried earlier, which caused the
	   click-to-open behavior to break. */
	filter: none;
}

#booking-date {
	color-scheme: dark;
}