/* UNS diagram — Figma: System Icons Grid (79:117 / 81:1240) */
.uns-diagram-wrap {
	flex: none;
	zoom: 0.62;
}

.uns-diagram {
	position: relative;
	width: 528px;
	height: 486px;
}

.uns-diagram__node,
.uns-diagram__hub {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
}

.uns-diagram__node {
	flex-direction: column;
	gap: 16px;
	width: 156px;
	height: 120px;
	background: rgb(255 255 255 / 0.05);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Gradient stroke (Figma: 1px inside, Neutral/3 fading out away from the hub) */
.uns-diagram__node::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(191 213 223 / 0) 50%, rgb(191 213 223 / 0.82));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.uns-diagram__node--production::before,
.uns-diagram__node--maintenance::before,
.uns-diagram__node--analytics::before {
	background: linear-gradient(to bottom, rgb(191 213 223 / 0.82), rgb(191 213 223 / 0) 40%);
}

.uns-diagram__node--machines { left: 0; top: 0; }
.uns-diagram__node--mes { left: 186px; top: 0; }
.uns-diagram__node--erp { left: 372px; top: 0; }
.uns-diagram__node--production { left: 0; top: 366px; }
.uns-diagram__node--maintenance { left: 186px; top: 366px; }
.uns-diagram__node--analytics { left: 372px; top: 366px; }

.uns-diagram__label {
	font-size: var(--fs-body-small);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: var(--ls-label);
	color: var(--color-neutral-3);
	white-space: nowrap;
}

.uns-diagram__hub {
	left: 114px;
	top: 177px;
	gap: 16px;
	width: 299.2px;
	height: 132px;
	background: var(--color-neutral-3);
	color: var(--color-dark);
}

.uns-diagram__hub-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 159px;
}

.uns-diagram__hub-kicker {
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.uns-diagram__hub-title {
	font-size: var(--fs-body-secondary);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: var(--ls-label);
}

/* Connector lines: bounding box + rotated inner frame + inset image (Figma 79:157–162) */
.uns-diagram__line {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uns-diagram__line > span {
	position: relative;
	flex: none;
}

.uns-diagram__line-img {
	position: absolute;
}

.uns-diagram__line--1 { left: 65.47px; top: 101.2px; width: 115.813px; height: 93.733px; }
.uns-diagram__line--1 > span { width: 106.664px; height: 46.824px; transform: rotate(29.88deg); }
.uns-diagram__line--1 .uns-diagram__line-img { inset: 10.34% -3.14% 10.34% -0.81%; }

.uns-diagram__line--2 { left: 68.52px; top: 294.83px; width: 112.789px; height: 91.433px; }
.uns-diagram__line--2 > span { width: 103.733px; height: 45.855px; transform: rotate(-29.88deg) scaleY(-1); }
.uns-diagram__line--2 .uns-diagram__line-img { inset: 10.56% -3.23% 10.56% -0.84%; }

.uns-diagram__line--3 { left: 346.73px; top: 101.2px; width: 115.812px; height: 93.732px; }
.uns-diagram__line--3 > span { width: 106.662px; height: 46.824px; transform: rotate(150.12deg) scaleY(-1); }
.uns-diagram__line--3 .uns-diagram__line-img { inset: 10.34% -3.14% 10.34% -0.81%; }

.uns-diagram__line--4 { left: 346.71px; top: 294.96px; width: 112.559px; height: 91.297px; }
.uns-diagram__line--4 > span { width: 103.471px; height: 45.849px; transform: rotate(-150.12deg); }
.uns-diagram__line--4 .uns-diagram__line-img { inset: 10.56% -3.24% 10.56% -0.84%; }

.uns-diagram__line--5 { left: 242.19px; top: 120px; width: 43.625px; height: 50.5px; }
.uns-diagram__line--5 > span { width: 25.155px; height: 43.789px; transform: rotate(150.12deg) scaleY(-1); }
.uns-diagram__line--5 .uns-diagram__line-img { inset: -1.14% -13.31% -2.28% -3.45%; }

.uns-diagram__line--6 { left: 243.46px; top: 318.53px; width: 41.078px; height: 47.552px; }
.uns-diagram__line--6 > span { width: 23.687px; height: 41.233px; transform: rotate(-150.12deg); }
.uns-diagram__line--6 .uns-diagram__line-img { inset: -1.21% -14.14% -2.43% -3.66%; }

@media (min-width: 420px) {
	.uns-diagram-wrap { zoom: 0.72; }
}

@media (min-width: 600px) {
	.uns-diagram-wrap { zoom: 1; }
}


.uns-diagram__line-img img {
	width: 100%;
	height: 100%;
	max-width: none;
}