/* ETOP KC – Home Navigation Cards FIX 1.0.0 */

.etop-kc-nav-section .etop-kc-nav-card {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
	transition:
		transform .22s ease,
		border-color .22s ease,
		box-shadow .22s ease,
		background .22s ease !important;
	background:
		linear-gradient(100deg,
			#ffffff 0%,
			#ffffff 52%,
			#f9fbfe 70%,
			#f3f6fb 100%
		) !important;
}

.etop-kc-nav-section .etop-kc-nav-card > *:not(.etop-kc-nav-decor) {
	position: relative;
	z-index: 2;
}

.etop-kc-nav-section .etop-kc-nav-card:hover {
	transform: translateY(-3px);
	border-color: rgba(36,87,214,.48) !important;
	box-shadow: 0 10px 28px rgba(21,55,110,.09);
	background:
		linear-gradient(100deg,
			#ffffff 0%,
			#ffffff 43%,
			#f7faff 65%,
			#edf3fc 100%
		) !important;
}

.etop-kc-nav-decor {
	position: absolute;
	z-index: 1;
	right: 20px;
	top: 50%;
	width: 34%;
	height: 78%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #2457d6;
	opacity: .115;
	transition: opacity .22s ease, transform .22s ease;
}

.etop-kc-nav-card:hover .etop-kc-nav-decor {
	opacity: .19;
	transform: translateY(-50%) translateX(-2px);
}

.etop-kc-nav-mark {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-58%);
	font-weight: 800;
	font-size: clamp(48px, 4vw, 74px);
	line-height: 1;
	letter-spacing: -.055em;
	white-space: nowrap;
}

.etop-kc-nav-word {
	position: absolute;
	right: 2px;
	bottom: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	white-space: nowrap;
}

/* Technical articles – circuit nodes */
.etop-kc-nav-articles .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 28%, #2457d6 0 2px, transparent 3px),
		radial-gradient(circle at 43% 68%, #2457d6 0 2px, transparent 3px),
		radial-gradient(circle at 74% 22%, #2457d6 0 2px, transparent 3px),
		linear-gradient(28deg, transparent 48%, #2457d6 49%, #2457d6 50%, transparent 51%);
	opacity: .5;
}

/* Wiki – subtle circular measuring field */
.etop-kc-nav-wiki .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	right: 4px;
	top: 7px;
	width: 88px;
	height: 88px;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-shadow:
		0 0 0 16px rgba(36,87,214,.12),
		0 0 0 32px rgba(36,87,214,.06);
}

/* FAQ – orbit/dots */
.etop-kc-nav-faq .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	inset: 4px;
	background:
		radial-gradient(circle at 18% 28%, #2457d6 0 3px, transparent 4px),
		radial-gradient(circle at 78% 20%, #2457d6 0 2px, transparent 3px),
		radial-gradient(circle at 66% 76%, #2457d6 0 3px, transparent 4px),
		radial-gradient(circle at 50% 50%, transparent 0 40px, #2457d6 41px 42px, transparent 43px);
}

/* Standards – mini blueprint */
.etop-kc-nav-standards .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	inset: -12px;
	background:
		linear-gradient(rgba(36,87,214,.55) 1px, transparent 1px),
		linear-gradient(90deg, rgba(36,87,214,.55) 1px, transparent 1px);
	background-size: 18px 18px;
	opacity: .38;
}

/* Lab – oscilloscope grid */
.etop-kc-nav-lab .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	inset: -8px;
	background:
		linear-gradient(rgba(36,87,214,.42) 1px, transparent 1px),
		linear-gradient(90deg, rgba(36,87,214,.42) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: .34;
}

.etop-kc-nav-lab .etop-kc-nav-decor::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 48%;
	height: 2px;
	background: currentColor;
	clip-path: polygon(
		0 50%, 10% 50%, 17% 15%, 25% 85%, 34% 28%,
		44% 65%, 54% 40%, 64% 58%, 75% 22%, 84% 76%, 92% 48%, 100% 50%,
		100% 100%, 0 100%
	);
}

/* Compare – A/B split + connecting line */
.etop-kc-nav-compare .etop-kc-nav-decor::before {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	height: 1px;
	background: currentColor;
	box-shadow: 0 -28px 0 rgba(36,87,214,.35), 0 28px 0 rgba(36,87,214,.35);
}

@media (max-width: 760px) {
	.etop-kc-nav-decor {
		right: 12px;
		width: 30%;
		opacity: .075;
	}
	.etop-kc-nav-card:hover {
		transform: translateY(-2px);
	}
}