.karmalink-gateway {
	--kl-bg: #1e1e20;
	--kl-surface-1: rgba(36, 36, 41, 0.78);
	--kl-surface-2: rgba(43, 43, 50, 0.88);
	--kl-border: rgba(248, 247, 245, 0.12);
	--kl-text: #f8f7f5;
	--kl-text-muted: rgba(248, 247, 245, 0.78);
	--kl-primary: #8c52ff;
	--kl-secondary: #ff7a00;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	isolation: isolate;
	overflow: hidden;
	overflow-anchor: none;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.52) 18%, rgba(0, 0, 0, 0) 38%),
		linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0) 42%),
		radial-gradient(circle at 26% 52%, rgba(140, 82, 255, 0.28), transparent 40%),
		radial-gradient(circle at 74% 52%, rgba(255, 122, 0, 0.2), transparent 40%),
		var(--kl-bg);
	min-height: 100vh;
	padding: clamp(40px, 7vw, 88px) clamp(18px, 5vw, 54px);
	border-radius: 0;
}

.karmalink-gateway,
.karmalink-gateway * {
	box-sizing: border-box;
}

.karmalink-gateway::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(26vh, 220px);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 62%, rgba(0, 0, 0, 1) 100%);
	pointer-events: none;
	z-index: -1;
}

.karmalink-gateway__network,
.karmalink-gateway__wave {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.karmalink-gateway__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.karmalink-gateway__wave {
	z-index: -1;
	background: radial-gradient(120% 50% at 50% 96%, rgba(158, 100, 255, 0.42) 0%, rgba(158, 100, 255, 0.22) 25%, rgba(158, 100, 255, 0.08) 52%, transparent 72%);
	filter: blur(1px);
	transform-origin: center bottom;
	animation: karmalink-wave-drift 11s ease-in-out infinite alternate;
}

.karmalink-gateway__content {
	max-width: 1024px;
	width: min(1024px, 100%);
	margin: 0 auto;
	text-align: center;
}

.karmalink-gateway__eyebrow {
	color: var(--kl-primary);
	font-size: clamp(16px, 2.1vw, 28px);
	font-weight: 300;
	margin: 0 0 14px;
}

.karmalink-gateway__title {
	margin: 0;
	color: var(--kl-text);
	font-size: clamp(36px, 7vw, 78px);
	line-height: 0.98;
	font-weight: 700;
}

.karmalink-gateway__subtitle {
	max-width: 760px;
	margin: 20px auto 0;
	color: var(--kl-text-muted);
	font-size: clamp(14px, 1.8vw, 20px);
}

.karmalink-gateway__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(30px, 5vw, 56px);
}

.karmalink-gateway__card {
	display: block;
	text-decoration: none;
	color: var(--kl-text);
	text-align: center;
	background: linear-gradient(160deg, var(--kl-surface-1), var(--kl-surface-2));
	border: 1px solid var(--kl-border);
	border-radius: 16px;
	padding: clamp(18px, 2.6vw, 30px);
	backdrop-filter: blur(3px);
	transition: transform 180ms ease, border-color 180ms ease;
}

/**
 * Glow pulsante — solo hover/focus. Operatore: lilla (--kl-primary). Utente: arancio (--kl-secondary).
 */
@media (prefers-reduced-motion: no-preference) {
	.karmalink-gateway__card:hover,
	.karmalink-gateway__card:focus-visible {
		animation: karmalink-wizard-step-glow-pulse 2.4s ease-in-out infinite;
	}

	.karmalink-gateway__card--user:hover,
	.karmalink-gateway__card--user:focus-visible {
		animation: karmalink-wizard-step-glow-pulse-customer 2.4s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.karmalink-gateway__card:hover,
	.karmalink-gateway__card:focus-visible {
		box-shadow:
			0 0 0 1px rgba(140, 82, 255, 0.48),
			0 0 20px rgba(140, 82, 255, 0.72),
			0 0 40px rgba(140, 82, 255, 0.5),
			0 0 64px rgba(140, 82, 255, 0.32),
			0 0 88px rgba(140, 82, 255, 0.16);
	}

	.karmalink-gateway__card--user:hover,
	.karmalink-gateway__card--user:focus-visible {
		box-shadow:
			0 0 0 1px rgba(255, 122, 0, 0.48),
			0 0 20px rgba(255, 122, 0, 0.72),
			0 0 40px rgba(255, 122, 0, 0.5),
			0 0 64px rgba(255, 122, 0, 0.32),
			0 0 88px rgba(255, 122, 0, 0.16);
	}
}

.karmalink-gateway__card:hover,
.karmalink-gateway__card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(140, 82, 255, 0.62);
	outline: none;
}

.karmalink-gateway__card--user:hover,
.karmalink-gateway__card--user:focus-visible {
	border-color: rgba(255, 122, 0, 0.62);
}

.karmalink-gateway__card-title {
	display: block;
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.15;
}

.karmalink-gateway__card-text {
	display: block;
	margin-top: 10px;
	color: var(--kl-text-muted);
	font-size: clamp(13px, 1.4vw, 17px);
	line-height: 1.35;
}

.karmalink-gateway__login {
	margin-top: 26px;
	color: var(--kl-text-muted);
	font-size: 14px;
}

.karmalink-gateway__login a {
	color: var(--kl-primary);
	text-decoration: none;
	margin-left: 4px;
}

.karmalink-gateway__login a:hover,
.karmalink-gateway__login a:focus-visible {
	text-decoration: underline;
}

/* @keyframes glow (viola/arancio) → fonte unica in karmalink-glow.css */

@keyframes karmalink-wave-drift {
	0% {
		transform: translateY(0) scaleX(1);
		opacity: 0.85;
	}
	100% {
		transform: translateY(6px) scaleX(1.04);
		opacity: 1;
	}
}

@media (max-width: 900px) {
	.karmalink-gateway {
		min-height: auto;
		min-height: 100vh;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 14px;
		padding-right: 14px;
	}

	.karmalink-gateway__cards {
		grid-template-columns: 1fr;
	}

	.karmalink-gateway__content {
		max-width: 100%;
	}

	.karmalink-gateway__title,
	.karmalink-gateway__subtitle,
	.karmalink-gateway__card-text {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}