:root {
	--background: #e7e8e3;
	--text: #121212;
	--muted: #5f5f5f;
	--line: #d9d4ce;
	--card: #f5f3f2;
	--accent: #1b5a59;
	--accent-2: #113b3d;
	--white: #ffffff;
	--shadow: 0 18px 48px rgba(0,0,0,0.12);
	--container: 1380px;
	--monitor-screen-1: rgba( 250, 250, 250, 0.9);
	--monitor-screen-2: rgba( 240, 240, 240,0.9);
	--monitor-screen-3: rgba(248, 248, 248, 0.9);
	--pulse: #00f2ff;
	--accent-purple: #8b5cf6;
	--accent-blue: #60a5fa;
	--accent-cyan: #38bdf8;
	--accent-green: #34d399;
	--muted: #64748b;
	--text-main: #e2e8f0;
	--text-muted: #94a3b8;
	--line-neutral: rgba(148, 163, 184, 0.22);
	--green: #22c55e;
	--green-soft: #86efac;
	--red: #ef4444;
	--red-soft: #fca5a5;
	--cyan: #38bdf8;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", sans-serif;
	color: var(--text);
	background: var(--background);
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

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

.container {
	position: relative;
	width: min(var(--container),calc(100%-48px));
	margin: 0 auto;
}

.site-header {
	width: 100%;
	background:transparent;
	padding: 15px 0 15px;
	position:absolute;
	z-index: 2;
}

.nav {
	display: grid;
	grid-template-columns: max-content 1fr max-content max-content;
	align-items: center;
	gap: 24px;
	
}

.brand {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.brand__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0a1217;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65);
	flex: 0 0 auto;
}

.nav__links {
	justify-self: center;
	display:flex;
	color: var(--accent);
	display: flex;
	gap: 56px;
	
	font-size: 18px;
}
	.nav__links a {
		white-space:nowrap;
		transition: opacity 0.25s ease;
	}

		.nav__links a:hover {
			opacity: 0.4;
		}

.btn {
	width: fit-content;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px 28px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	white-space: nowrap;
}

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

.btn--dark {
	justify-self:end;
	color: var(--accent);
	opacity: 0.7;
	transition-duration: 0.4s;
	padding: 10px 10px;
}

.btn--dark1 {
	top: 10px;
	position: relative;
	left: 210px;
	
	align-self: center;
	font-size: 22px;
	color: var(--accent);
	opacity: 0.6;
	transition-duration: 0.4s;
}

	.btn--dark1:hover {
		opacity: 1;
	}

.btn--dark:hover {
	opacity: 1;
}

.btn__arrow {
	font-size: 24px;
	line-height: 1;
}

.menu-toggle {
	display: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.08);
	position: relative;
	cursor: pointer;
}

	.menu-toggle span,
	.menu-toggle::before,
	.menu-toggle::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 22px;
		height: 2px;
		background: #111;
		border-radius: 999px;
		transform: translateX(-50%);
		transition: 0.25s ease;
	}

	.menu-toggle span {
		top: 23px;
	}

	.menu-toggle::before {
		top: 16px;
	}

	.menu-toggle::after {
		top: 30px;
	}

	.menu-toggle.active span {
		opacity: 0;
	}

	.menu-toggle.active::before {
		top: 23px;
		transform: translateX(-50%)rotate(45deg);
	}

	.menu-toggle.active::after {
		top: 23px;
		transform: translateX(-50%)rotate(-45deg);
	}

.hero {
	position: relative;
	min-height:100dvh;
	overflow:hidden;
}
.hero__slides {
	position: relative;
	min-height: 100vh;
}
.hero__slide {
	position: absolute;
	inset: 0;
	opacity:0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s ease;
}
	.hero__slide.active {
		opacity: 1;
		visibility: visible;
		z-index: 1;
      background:red;
	}
	.hero__slide:nth-child(1) {
		background: url("/images/image/bild1.png") center center / cover no-repeat ;
	}
	.hero__slide:nth-child(2) {
		background: linear-gradient(to top,rgba(255, 255,255, 0) ,rgba(255, 255,255,0.6)),
			url("/images/image/bild2.jpg") center center / cover no-repeat;
		backdrop-filter: blur(5px);
	}
	.hero__slide:nth-child(3) {
		background: linear-gradient(to top,rgba(255, 255,255, 0.5) ,rgba(255, 255,255,1)),
			url("/images/image/bild3.jpg") center center / cover no-repeat;
		backdrop-filter: blur(5px);
	}
.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--card);
	cursor: pointer;
	z-index: 5;
	font-size: 28px;
	opacity: 0.5;
	color: var(--accent-2);

}
	.hero__arrow:hover {
		opacity: 1;
	}
.hero__arrow__left {
	left: 20px;
}
.hero__arrow__right {
	right: 20px;
}
.hero__content {
	position: relative;
	z-index: 3;
	margin-top: 20%;
	margin-left: 20%;
	margin-bottom: 30%;
}

.hero__title {
	position: relative;
	left: 100px;
	font-size: clamp(54px,7vw,92px);
	line-height: 0.96;
	letter-spacing: -0.06em;
	font-weight: 600;
	max-width: 650px;
	margin-bottom: -25px;
}

	.hero__title .accent {
		color: var(--accent);
	}

.hero__subtitle {
	position: relative;
	left: 110px;
	font-size: clamp(22px,2vw,30px);
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: #2f2f2f;
	margin-bottom: 10px;
}

.workflow__grid {
	margin-top:190px;
	display: grid;
	grid-template-columns: minmax(430px,800px) minmax(320px,1fr);

}
.workflow__content {
	z-index: 1;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: fit-content;
	padding: 150px;
	background-image: radial-gradient(rgba(255, 255,255, 1) 30%, rgba(255, 255,255, 0.6) 50%,rgba(255,255,255, 0.3) 60%,rgba(255,255,255, 0)70%);
}
.workflow__title {
	padding: 10px;
	margin: 0 0 5px;
	font-size: clamp(48px,5vw,74px);
	line-height: 1;
	letter-spacing: -0.055em;
	color: var(--accent);
}
.workflow__text {
	margin: 5px 0 5px;
	text-align:center;
	max-width: 560px;
	font-size: clamp(22px,2vw,30px);
	line-height: 1.55;
	letter-spacing: -0.02em;
	color: var(--text);
}
.workflow__button {
	display: inline-flex;
	align-items: center;

	min-width: 298px;
	padding: 10px 10px;
	border-radius: 999px;
	align-self: center;
	font-size: 22px;
	color: var(--accent);
	transition-duration: 0.4s;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

	.workflow__button:hover {
		background-color: var(--accent);
		color: var(--card);
	}
.workflow__steps {
	margin-top: 7%;
	margin-left: 15%;
	z-index:2;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.workflow__card {
	display: flex;
	align-items: center;
	gap: 18px;
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.6s ease;
	min-height: 160px;
	border-radius: 24px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(255, 255,255,0.8) 30%, rgba(255,255,255, 0.4) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05), 0 24px 36px rgba(53,82,88,0.18);
}
.workflow__card--visible {
	opacity: 1;
	transform: translateY(0);
}

.workflow__card__icon, .workflow__card__body {
	position: relative;
	z-index: 1;
}
.workflow__card__icon {
	padding-left: 20px;
	width: 58px;
	height: 59px;
	display: grid;
	color: var(--accent);
}
.workflow__card__body h3 {
	margin: 0 0 8px;
	font-size: clamp(26px, 2vw,34px);
	line-height: 1.2;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: var(--accent);
}
.workflow__card__body p {
	margin: 0;
	max-width: 520px;
	font-size: clamp(18px,1.6vw,24px);
	line-height: 1.45;
	letter-spacing: -0.022em;
	color: var(--text);
	
}
	.impact {
		margin: 400px 250px 120px 250px;
	}

.impact__grid {
	margin: 250px 250px 120px 250px;
	display: grid;
	grid-template-columns: minmax(320px,1fr) minmax(420px,700px);
	gap: 70px;
	align-items: center;
}

.impact__content {

	background-image: radial-gradient(rgba(255, 255,255, 1) 30%, rgba(255, 255,255, 0.6) 50%,rgba(255,255,255, 0.3) 60%,rgba(255,255,255, 0)70%);
	max-width: 560px;
}

	.impact__title {
		margin: 0;
		font-size: clamp(44px,5vw,72px);
		line-height: 1.05;
		letter-spacing: -0.05em;
		font-weight: 600;
		color: var(--text);
	}

		.impact__title span {
			color: var(--accent);
		}

	.impact__text {
		margin: 34px 0 38px;
		max-width: 560px;
		font-size: clamp(20px, 2vw,28px);
		line-height: 1.6;
		letter-spacing: -0.02em;
		color: var(--text);
	}

.impact__button {
	display: inline-flex;
	align-items: center;
	min-width: 298px;
	padding: 10px 10px;
	border-radius: 999px;
	align-self: center;
	font-size: 22px;
	color: var(--accent);
	transition-duration: 0.4s;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	background-image: radial-gradient(rgba(255, 255,255, 0.5) 30%, rgba(255, 255,255, 0.3) 50%,rgba(255,255,255, 0.2) 60%,rgba(255,255,255, 0)70%);
}

		.impact__button:hover {
			opacity: 1;
			background-color: var(--accent);
			color: var(--white);
			background-image:none;
		}

.impact__stats {
	padding: 50px 50px 50px 50px;
	background-image: radial-gradient(rgba(255, 255,255, 1) 40%, rgba(255, 255,255, 0.6) 50%,rgba(255,255,255, 0.3) 60%,rgba(255,255,255, 0)70%);
	display: grid;
	grid-template-columns: repeat(2, minmax(220px,1fr));
	gap: 26px;
}

	.impact__card {
		opacity: 0;
		transform: translateY(40px);
		transition: all 0.6s ease;
		min-height: 206px;
		padding: 30px 26px;
		border-radius: 24px;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, rgba(255, 255,255,0.6) 0%, rgba(255,255,255, 0.3) 60%, #ffffff 100%);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.05), 0 24px 36px rgba(53,82,88,0.18);

	}

	.impact__card--visible {
		opacity: 1;
		transform: translateY(0);
	}

	.impact__card::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: 0.12;
		background-image: radial-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px);
		background-size: 2px 2px;
		mix-blend-mode: screen;
	}

	.impact__card::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(180deg,rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02)35%, rgba(0,0,0,0.04) 100%);
	}

	.impact__card__number {
		margin-bottom: 14px;
		font-size: clamp(50px,5vw,74px);
		line-height: 1;
		letter-spacing: -0.02em;
		font-weight: 700;
	}

	.impact__card__label {
		font-size: clamp(18px,1.7vw,24px);
		line-height: 1.35;
		letter-spacing: -0.02em;
		font-weight: 500;
	}

	.impact__card__number, .impact__card__label {
		position: relative;
		z-index: 1;
		text-align: center;
		color: var(--accent);
		text-shadow: 0 1px 1px rgba(0,0,0,0.14);
	}

.service__title {
	margin: 50px 0 8px;
	font-size: clamp(26px, 2vw,34px);
	line-height: 1.2;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: var(--accent);
  justify-items:center;
}

		.service__title h2 {
			margin: 0px;
			font-size: clamp(34px,3vw,48px);
			line-height: 1;
			letter-spacing: -0.04em;
			font-weight: 500;
       
		}

	.cards__first__row {
		margin-top: 50px;
		padding: 0 80px;
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		gap: 18px;
		margin-bottom: 24px;
	}

	.cards__second__row {
		z-index: 3;
		padding: 0 80px;
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		gap: 18px;
		margin-bottom: 24px;
	}

	.card {
      align-content:center;
		z-index: 3;
		min-width: 0;
		display: flex;
		gap: 16px;
		align-items: flex-start;
		min-height: 172px;
		padding: 28px 26px 22px;
		border-radius: 25px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px rgba(18,18,18,0.03);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

		.card:hover {
			color: var(--white);
			background: radial-gradient(circle at 20% 20%,rgba(43,130,125,0.2), transparent 28%), linear-gradient(135deg, #072126 0%, #0d3537 100%);
			box-shadow: 0 20px 40px rgba(8,30,33,0.18);
			transform: translateY(-4px);
			box-shadow: 0 18px 36px rgba(0,0,0,0.8);
		}

	.card__icon {
		width: 44px;
		height: 44px;
		margin-top: 35px;
		color: var(--accent);
	}

	.card:hover .card__icon {
		color: #d7f7f1;
	}

	.card__title {
		margin: 20px 0 12px;
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: -0.035em;
		font-weight: 500;
	}

	.card__text {
		margin: 0;
		font-size: 22px;
		line-height: 1.25;
		letter-spacing: -0.02em;
		color: rgba(18,18,18,0.8);
	}

	.card:hover .card__text {
		color: rgba(255,255,255,0.85);
	}
.service__card {
	width:100%;
	cursor: pointer;
}
.service__card__icon {
	margin-top: 40px;
	margin-left: 20px;
}
.service__card__body {
	text-align: center;
	align-content: center;
	margin-top: 5px;
	margin-left: 10px;
}
.service__card.active {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.service__detail {
	padding:0 40px 0 40px!important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform:translateY(16px);
	transition: 
		max-height 0.45s ease,
		opacity 0.35s ease, 
		transform 0.35s ease,
		margin-top 0.35s ease,
		margin-top 0.35s ease,
		padding 0.25s ease;
}

.service__detail.open {
	margin: 0 80px 70px 80px;
	border-radius: 24px;
	opacity: 1;
	max-height: 2000px;
	box-shadow: 0 18px 48px rgba( 17, 59, 61,0.7);
	background: var(--card);
}
.service__detail__grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
	margin-left: 2% !important;
	padding-top: 0!important;
	margin-bottom: 3%;
}
.service__detail__inner {
	border-radius: 24px;
}
.service__detail__main__top {
	display: flex;
	flex-direction: row;
	margin-bottom: -2%;
}

.service__detail__main {
	display: grid;
	grid-template-columns:auto;
	gap: 20px;
	align-items: start;
}
.service__detail__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(20,58,62,0.08);
	color: #23484b;
	font-size: clamp(8px,3vw,18px);
	font-weight: 600; 
	letter-spacing: 0.02em;
	text-transform:uppercase;
	margin-bottom: 10px; 
}
.service__detail__main__top__left {
	margin: 2% 2%;
}
.service__detail__title {
	margin: 0 0 14px;
	max-width: 850px;
	font-size: clamp(34px, 3vw,54px);
	line-height: 1.02;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: var(--accent-2);
}
.service__detail__description {
	margin:0 !important;
	max-width: 820px;
	font-size: clamp(18px, 1.5vw,22px);
	line-height: 1.65;
	letter-spacing: -0.015em;
	color: #4d565b;
}
.service__detail__grid {
	margin-left: 7%;
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1px 1fr 1px 1fr;
	gap: 10px;
}

.service__detail__column {

	padding: 22px 22px 20px;
	
}
.service__detail__left__divider {
	width: 1px; 
	height:100%; 

	background: linear-gradient(to bottom, transparent,var(--accent),transparent);
}

	.service__detail__column h3 {
		margin: 0 0 14px;
		font-size: 22px;
		line-height: 1.15;
		letter-spacing: -0.03em;
		font-weight: 600;
		color: #14242b;
	}

	.service__detail__list {
		list-style: none;
		margin: 0;
		padding-left: 10px;
	}

		.service__detail__list li {
			font-size: 16px;
			line-height: 1.5;
			color: var(--text);
		}

			.service__detail__list li::before {
				position: relative;
				left: -10px;
				content: '\2713';
				color: var(--accent-2);
				font-weight: bold;
			}

	.service__detail__tags {
		margin-top:5%;
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

		.service__detail__tags span {
			display:inline-flex;
			align-items:center; 
			justify-content:center; 
			min-height:38px; 
			padding: 10px 14px; 
			color: var(--text);
			font-size: 14px; 
			line-height: 1; 
			font-weight: 500;
			background: rgba(255,255,255,0.1);
			border-radius: 999px; 
			box-shadow: 0 10px 18px rgba(21,55,60,0.14);
		}

	.stats-wrap {
		width: 100%;
		display: flex;
		z-index: 1;
		min-height: 150px;
		margin-top: -110px;
		padding: 44px 24px 15px;
		color: var(--white);
		background: var(--accent);
		align-items: flex-end;
		justify-content: center;
	}
.service__detail__right{

	margin: 2%;
}

.code__window {
	width: 140%;
	margin-top: 10%;
	border-radius: 32px;
	padding: 22px 24px 26px;
	background: radial-gradient(circle at 15% 10%, rgba(34,84,96,0.28)), radial-gradient(circle at 85% 90%, rgba(0,80,70,0.12)), linear-gradient(135deg, #08131a 0%, #061018 55%,#020910 100%);
	box-shadow: 0 24px 50px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
	color: #eaf4ff;
	font-family: "Fíra Code", "JetBrains Mono", Consolas,monospace;
}
.service__detail__right  img {
	border-radius: 24px;
	margin-top: 6%;
	width: 100%;
	height: 550px;
}
	.service__detail__right svg {
		margin-top: -5%!important;
		right:5%;
		position: absolute;
	}
.code__window {
	display: flex;
	flex-direction:column;
	gap: 14px;
	margin-bottom: 28px;
}
.code__window__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.code__window__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	box-shadow: 0 0 10px rgba(255,255,255,0.08);
}
.code__window__dot__red {
	background: #ff6b6b;
}
.code__window__dot__yellow{
	background: #ffc857;
}
.code__window__dot__green{
	background: #67d46f;
}
.code__window__body {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 22px;
	align-items: start;
}
.code__window__lines {
	display: flex;
	flex-direction: column;
	gap:0.2px;
	color: rgba(203,221,236,0.28);
	font-size: 18px;
	line-height: 1.8;
	user-select: none;
}
.code__window__code {
	margin: 0;
	font-size: 18px;
	line-height: 1.8;
	color: #eaf4ff;
}
.kw {
	color: #6fd3ff;
}
.fn {
	color: #ffd166;
}
.fn2 {
	color:#ff8fab;
}
.str {
	color: #7ee787;
}
.service__detail__main p {
	margin-top: 0;
	margin-left: 2%;
	font-size: clamp(18px, 1.5vw,22px);
	line-height: 1.65;
	letter-spacing: -0.015em;
	color: #4d565b;
}
.netzBild__body {
	margin-top: 12%;
}
.netzwerkScene {
	display: flex;
	align-items: center;
	position: relative;
	width:600px;
	justify-content: space-between;
}

	.monitor-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 10;
		transition: transform 0.35s ease, filter 0.35s ease;
	}

		.monitor-wrapper.active {
			transform: translateY(-2px) scale(1.02);
			filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.22));
		}

	.netzwerkDisplay {
		width: 160px;
		height: 100px;
		background: black;
		border-radius: 12px;
		padding: 8px;
		box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
		position: relative;
	}

	.screen-area {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		display: block;
		overflow: hidden;
		position: relative;
		background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 25%), linear-gradient(135deg, var(--monitor-screen-1), var(--monitor-screen-2) 55%, var(--monitor-screen-3));
		border: 1px solid rgba(255,255,255,0.06);
		transition: all 0.35s ease;
	}

		.screen-area::before {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient( to bottom, rgba(255,255,255,0.035), rgba(255,255,255,0) 18%, rgba(255,255,255,0.02) 52%, rgba(255,255,255,0) 100% );
			pointer-events: none;
		}

	.screen-content {
		position: absolute;
		inset: 0;
		padding: 14px 12px 10px;
	}

	.screen-status-dot {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #475569;
		transition: all 0.35s ease;
		box-shadow: 0 0 0 rgba(34, 197, 94, 0);
	}

	.monitor-wrapper.active .screen-status-dot {
		background: #22c55e;
		box-shadow: 0 0 10px rgba(34, 197, 94, 0.85), 0 0 22px rgba(34, 197, 94, 0.45);
	}

	.netzCode-line {
		height: 6px;
		border-radius: 999px;
		margin: 0 0 10px 0;
		background: rgba(34,84,96,0.28);
		position: relative;
		overflow: hidden;
	}

		.netzCode-line:nth-child(1) {
			width: 60%;
			margin-top: 8px;
		}

		.netzCode-line:nth-child(2) {
			width: 78%;
		}

		.netzCode-line:nth-child(3) {
			width: 46%;
		}

		.netzCode-line::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue), var(--accent-green));
			opacity: 0.95;
			transform: scaleX(0.32);
			transform-origin: left center;
			border-radius: inherit;
			transition: box-shadow 0.35s ease;
		}

	.monitor-wrapper.active .screen-area {
		box-shadow: inset 0 0 28px rgba(96, 165, 250, 0.18), 0 0 22px rgba(96, 165, 250, 0.12);
		border-color: rgba(96, 165, 250, 0.22);
	}

	.monitor-wrapper.active .code-line::after {
		box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
	}

	.stand-neck {
		width: 12px;
		height: 30px;
		background: linear-gradient(to bottom, #e2e8f0, #94a3b8);
	}

	.stand-base {
		width: 80px;
		height: 6px;
		background: #94a3b8;
		border-radius: 10px;
	}

	.status-light {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #334155;
		transition: 0.3s;
		margin-top: 10px;
	}

	#targetPC {
		transform: translateY(80px);
	}

	.active .status-light {
		background: var(--pulse);
		box-shadow: 0 0 20px var(--pulse), 0 0 40px var(--pulse);
	}

	.cable-svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -35%);
		width: 500px;
		height: 100px;
		fill: none;
		pointer-events: none;
	}

	.path-bg {
		stroke: rgba(0,0,0,0.2);
		stroke-width: 4;
		stroke-linecap: round;
	}

	.pulse-dot {
		fill: var(--pulse);
		filter: drop-shadow(0 0 8px var(--pulse)) drop-shadow(0 0 18px rgba(96, 165, 250, 0.7));
	}


	.caption {
		color: var(--muted);
		font-size: 10px;
		margin-top: 10px;
		text-transform: uppercase;
		letter-spacing: 2px;
	}


.itSichscene {
	transform: translateX(50px)
	translateY(-20px);
	width: min(700px, 94vw);
	height: min(300px, 88vh);
	position: relative;
}

.title-wrap {
	position: absolute;
	left: 28px;
	top: 18px;
	z-index: 3;
}

	.title-wrap h1 {
		margin: 0;
		font-size: 36px;
		line-height: 1;
		color: var(--text-main);
		letter-spacing: -0.03em;
	}

	.title-wrap p {
		margin: 12px 0 0;
		color: var(--text-muted);
		font-size: 14px;
	}

.network-svg {
	width: 100%;
	height: 100%;
}

.flow-line {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
}

.neutral-line {
	stroke: var(--line-neutral);
}

.safe-line {
	stroke: #22c55e;
	opacity: 0.3;
}

.threat-line {
	stroke: #ef4444;
	opacity: 0.3;
}

.shield-group {
	
	transform-origin: center;
}

.shield-aura {
	fill: rgba(56, 189, 248, 0.08);
	filter: url(#shieldGlow);
}

.shield-shape {
	fill: rgba(15, 23, 42, 0.88);
	stroke: rgba(147, 197, 253, 0.9);
	stroke-width: 3;
	filter: url(#shieldGlow);
}

.shield-inner {
	fill: rgba(59, 130, 246, 0.16);
	stroke: rgba(125, 211, 252, 0.55);
	stroke-width: 1,5;
}

.shield-check {
	fill: none;
	stroke: #7dd3fc;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: url(#shieldGlow);
}

.packet {
	opacity: 0.96;
}

.packet--safe {
	fill: var(--green);
	filter: url(#glowGreen);
}

.packet--threat {
	fill: var(--red);
	filter: url(#glowRed);
}

.packet-alert {
	font-size: 18px;
	font-weight: 800;
	fill: var(--red);
	pointer-events: none;
	filter: url(#glowRed);
}
.video-wrapper {
	position: relative;
	width: 100%;
	max-width: 500px;
	padding-top: 56.25% /*16:9*/
}
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.stats {
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	.stats__items {
		display: flex;
		align-items: center;
		gap: 50px;
		flex-wrap: nowrap;
	}

	.stat {
		display: flex;
		align-items: baseline;
		gap: 14px;
		white-space: nowrap;
	}

		.stat span {
			font-size: clamp(15px, 1.8vw, 25px);
		}

		.stat strong {
			font-size: clamp(20px, 1.8vw, 30px);
			color: rgba(255,255,255,0.88);
			letter-spacing: -0.03em;
		}

	.devider {
		width: 1px;
		height: 42px;
		background: rgba(255,255,255,0.18);
	}

	.see-work {
		z-index: 3;
	}

		.see-work span {
			font-size: clamp(20px,2vw,26px);
			letter-spacing: -0.03em;
			color: rgba(255,255,255,0.94);
			transition: opacity 0.25s ease, transform 0.25s ease;
			opacity: 0.7;
		}

			.see-work span:hover {
				opacity: 1;
				transform: translateX(4xp);
			}

	.career {
		padding: 5px 100px 5px 100px;
	}

	.career__hero {
		position: relative;
		justify-self: center;
		margin-bottom: 48px;
	}

	.career__title {
		position: relative;
		justify-self: center;
		font-size: clamp(45px, 6vw, 70px);
		line-height: 1;
		letter-spacing: -0.06em;
		font-weight: 500;
		color: var(--accent);
	}

	.career__subtitle {
		margin: 0;
		max-width: 760px;
		font-size: clamp(24px, 2vw, 34px);
		line-height: 1.45;
		letter-spacing: -0.03em;
		color: var(--text);
	}

	.job__card {
		display: grid;
		grid-template-columns: 1fr 360px;
		border-radius: 23px;
		overflow: hidden;
		background: var(--card);
		box-shadow: var(--shadow);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.job__card__aside {
		position: relative;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		min-height: 100%;
		padding: 42px 28px;
		background: linear-gradient(135deg, #ececeb 0%, #e4e5e5 100%);
		border-right: 1px solid rgba(16,24,39,0.06);
	}

	.job__card__apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		min-width: 260px;
		padding: 20px 28px;
		border-radius: 999px;
		background: linear-gradient(135deg,#0a2228 0%, #2e7a7d 100%);
		color: var(--white);
		font-size: 22px;
		box-shadow: 0 18px 30px rgba(21, 56, 61,0.22);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

		.job__card__apply:hover {
			transform: translateY(-3px);
			box-shadow: 0 24px 40px rgba(21, 56, 61,0.28);
		}

	.job__card__content {
		padding: 20px 40px 20px 40px;
	}

.job__card__title {
	display: relative;
	margin: 0 0 16px;
	font-size: clamp(35px, 4vw, 60px);
	line-height: 1;
	letter-spacing: -0.05em;
	font-weight: 500;
	color: var(--accent);
}

	.job__card__badge {
		display: inline-flex;
		margin-top: 15px;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 22px;
		border-radius: 999px;
		background: var(--accent-2);
		color: var(--white);
		font-size: 18px;
		line-height: 1;
		font-weight: 500;
		letter-spacing: -0.02em;
		box-shadow: 0 24px 40px rgba(21, 56, 61,0.14);
	}

	.job__card__description {
		margin: 28px 0 30px;
		max-width: 100%;
		font-size: clamp(22px, 1.9vw,32px);
		line-height: 1.5;
		letter-spacing: -0.025em;
		color: var(--text);
		opacity: 0.9;
	}

	.job__card__details {
		display: grid;
		grid-template-columns: 1fr 1px 1fr 1px 1fr;
		gap: 36px;
		align-items: start;
		margin-bottom: 26px;
	}

	.job__card__column h4 {
		margin: 0 0 14px;
		font-size: clamp(24px, 2vw, 36px);
		line-height: 1;
		letter-spacing: -0.035em;
		font-weight: 600;
		color: var(--accent-2);
	}

	.job__card__list {
		margin: 0;
		padding-left: 26px;
		color: var(--text);
	}

		.job__card__list li {
			margin-bottom: 12px;
			font-size: clamp(14px, 1.6vw, 20px);
			line-height: 1.5;
			letter-spacing: -0.02em;
		}

.job__card__divider {
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, transparent,var(--accent),transparent);
}

	.job__card__meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 18px 26px;
		padding-top: 24px;
		border-top: 1px solid rgba(16,24,29,0.08);
	}

	.job__card__meta__item {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--text);
		font-size: 18px;
		line-height: 1.4;
		letter-spacing: -0.0015em;
	}

	.job__card__meta__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--accent-2);
	}
	.job__card__meta__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--accent-2);
	}
.job__card__list {
	list-style: none;
	margin: 0;
	padding-left: 10px;
}

	.job__card__list li {
		line-height: 1.5;
		color: var(--text);
	}

		.job__card__list li::before {
			position: relative;
			left: -10px;
			content: '\2714';
			color: var(--accent-2);
			font-weight: bold;
			opacity: 0.6;
		}

	.apply {
		padding: 100px 20px;
		text-align: center;
	}

	.apply__container {
		max-width: 800px;
		margin: 0 auto;
	}

	.apply__title {
		font-size: 40px;
		margin-bottom: 10px;
	}

		.apply__title span {
			color: var(--accent);
		}

	.apply__subtitle {
		color: var(--text);
		margin-bottom: 40px;
	}

	.apply__form {
		background: var(--card);
		padding: 40px;
		border-radius: 20px;
		box-shadow: var(--shadow);
		text-align: left;
	}

	.form__row {
		display: flex;
		gap: 20px;
	}

	.form__group {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		flex: 1;
	}

	.form__cover {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		flex: 1;
	}

	.form__group label {
		margin-bottom: 6px;
		font-size: 14px;
		color: var(--text);
	}

	.form__group input {
		padding: 14px;
		border-radius: 10px;
		border: 1px solid var(--accent-2);
		font-size: 14px;
	}

	.form__cover label {
		margin-bottom: 6px;
		font-size: 14px;
		color: var(--text);
	}

	.form__cover textarea {
		min-height: 120px;
		padding: 20px;
		border-radius: 10px;
		border: 1px solid var(--accent-2);
		font-size: 14px;
		max-width: 100%;
		min-width: 100%;
	}

	.form__upload {
		border: 2px dashed #ddd;
		border-radius: 12px;
		padding: 20px;
		text-align: center;
		margin: 20px 0;
		color: #777;
	}

	.form__btn {
		display: block;
		margin: 0 auto;
		padding: 7px 25px 7px 25px;
		border-radius: 30px;
		border: none;
		background: none;
		color: var(--accent-2);
		font-size: 16px;
		cursor: pointer;
		transition: 0.3s;
	}

		.form__btn:hover {
			background: linear-gradient(135deg,#0a2228 0%, #2e7a7d 100%);
			color: var(--white);
		}

	.partner h2 {
		position: relative;
		justify-self: center;
		font-size: clamp(45px, 6vw, 70px);
		line-height: 1;
		letter-spacing: -0.05em;
		font-weight: 500;
		color: var(--accent);
	}

	.partner p {
		position: relative;
		justify-self: center;
		font-size: clamp(20px, 6vw, 45px);
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--text);
		font-weight: 400;
		margin-bottom: -270px;
	}

	.banner {
		width: 100%;
		height: 90vh;
		position: relative;
		overflow: hidden;
	}

	.scene {
		top: 30px;
		position: absolute;
		inset: 0;
		perspective: 2200px;
		perspective-origin: center center;
		overflow: visible;
	}

	.slider {
		transition: transform 0.4s ease;
		position: absolute;
		width: 250px;
		height: 170px;
		top: 55%;
		left: 50%;
		transform-style: preserve-3d;
		transform: translate(-50%,-50%) rotateX(-4deg) rotateY(0deg);
	}

	.partner__item {
		position: absolute;
		inset: 0;
		border-radius: 24px;
		overflow: hidden;
		transform-style: preserve-3d;
		backface-visibility: visible;
		transform: rotateY(calc((var(--position) - 1)*(360/var(--quantity))*1deg)) translateZ(700px);
		transition: opacity 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
	}

		.partner__item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.partner__item::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to top,rgba(0,0,0,0.5), rgba(0,0,0,0.18)45%,rgba(0,0,0,0.04));
			pointer-events: none;
		}

	.partner__overlay {
		position: absolute;
		top: 68%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.partner__titleWrap {
		overflow: hidden;
		position: relative;
		min-width: 320px;
		min-height: 110px;
		display: block;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.partner__titleText {
		margin: 0;
		font-weight: 600 !important;
	}

	.partner__overlay h2 {
		font-size: clamp(44px, 7vw, 100px);
		font-weight: 900;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: -0.04em;
		color: var(--accent-2);
	}

	.view-btn {
		display: block;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		padding: 12px 18px;
		border-radius: 999px;
		background: var(--card);
		color: var(--accent);
		text-decoration: none;
		font-size: clamp(10px, 7vw, 15px);
		font-weight: 800;
		letter-spacing: 0.04em;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
		box-shadow: 0 10px 24px rgba(0,0,0,0.24);
		pointer-events: auto;
	}

		.view-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 14px 30px rgba(0,0,0,0.28);
		}

	.partner__controls {
		position: absolute;
		left: 50%;
		bottom: 42px;
		transform: translateX(-50%);
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 18px;
	}

	.partner__nav__btn {
		width: 62px;
		height: 62px;
		border: none;
		border-radius: 50%;
		background: var(--card);
		color: var(--accent-2);
		font-size: 28px;
		font-weight: 900;
		cursor: pointer;
		box-shadow: 0 12px 28px rgba(27, 90, 89, 0.28);
		transition: transform 0.2s ease, filter 0.2s ease;
	}

		.partner__nav__btn:hover {
			transform: translateY(-2px) scale(1.03);
			filter: brightness(1.03);
		}

	.partner__dots {
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.partner__dots button {
			width: 10px;
			height: 10px;
			border-radius: 999px;
			border: none;
			background: var(--card);
			cursor: pointer;
			transition: all 0.3s ease;
			padding: 0;
		}

			.partner__dots button.active {
				width: 34px;
				background: var(--card);
				box-shadow: 0 0 18px rgba(27, 90, 89, 0.28);
			}

	#partner__title, #view-btn {
		will-change: transform, opacity;
		transition: transform 0.5s ease, opacity 0.5s ease;
	}

	.exit-down {
		opacity: 0;
		transform: translateY(100px);
	}

	.exit-up {
		opacity: 0;
		transform: translateY(-100px);
	}

	.enter-from-top {
		opacity: 0;
		transform: translateY(-250px);
	}

	.enter-from-bottom {
		opacity: 0;
		transform: translateY(250px);
	}

	.anchor-section {
		padding: 80px 0;
	}

	.anchor_section h2 {
		margin: 0 0 12px;
		font-size: 40px;
		letter-spacing: -0.04em;
	}

	.anchor-section p {
		margin: 0;
		font-size: 20px;
		color: var(--muted);
	}

	.footer {
		position: relative;
		padding: 10px 0 5px;
		color: #f3f3f0;
		background: var(--accent);
		overflow: hidden;
	}

		.footer::before {
			content: "";
			z-index: 0;
			position: absolute;
			inset: 0;
			pointer-events: none;
			opacity: 0.16;
			background-image: radial-gradient(rgba(255,255,255,0.18) 0.7px,transparent 7%);
			background-size: 4px 4px;
			mix-blend-mode: screen;
		}

		.footer::after {
			z-index: 1;
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			pointer-events: none;
			background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,1) 50%,transparent 100%);
			opacity: 0.2;
		}

	.footer__top {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 850px minmax(0,980px);
		gap: 48px;
		align-items: start;
		margin-bottom: 10px;
	}

	.footer__card {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0,1fr) 430px;
		gap: 40px;
		padding: 34px;
		border-radius: 22px;
		border: 1px solid rgba(255,255,255,0.14);
		background: linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 20px 50px rgba(0,0,0,0.18);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.footer__card__left {
		min-width: 0;
	}

	.footer__card__section {
		padding: 6px 0;
	}

	.footer__card__divider {
		width: 100%;
		height: 1px;
		margin: 5px 0;
		background: rgba(255,255,255,0.1);
	}

	.footer__card__title__row {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 10px;
	}

		.footer__card__title__row h3, .footer__company h3 {
			margin: 0;
			font-size: 30px;
			line-height: 1.1;
			letter-spacing: -0.03em;
			font-weight: 600;
		}

	.footer__card__title__row__small {
		margin-bottom: 10px;
	}

		.footer__card__title__row__small h4 {
			margin: 0;
			font-size: 24px;
			line-height: 1.2;
			letter-spacing: -0.02em;
			font-weight: 600;
		}

	.footer__card__icon {
		width: 50px;
		height: 50px;
		border-radius: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #e8ece9;
	}

	.footer__card__icon_small {
		width: 40px;
		height: 40px;
	}

	.footer__card__block h4 {
		margin: 0 0 10px;
		font-size: 28px;
		line-height: 1.15;
		letter-spacing: -0.03em;
		font-weight: 600;
	}

	.footer__card__block p, .footer__card__info p, .footer__card__hours, .footer__company__nav a, .footer__links a, .footer__copy {
		margin: 0 0 5px;
		color: rgba(255,255,255,0.86);
	}

	.footer__card__block p {
		font-size: 22px;
		line-height: 1.4;
	}

	.footer__card__info {
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}

		.footer__card__info + .footer__card__info {
			margin-top: 10px;
		}

	.footer__card__phone {
		margin: 5px 0 -20px;
		display: inline-block;
		font-size: 20px;
		line-height: 1.35;
		color: var(--white);
		transition: opacity 0.25s ease;
	}

		.footer__card__phone:hover {
			opacity: 0.5;
		}

	.footer__card__info p {
		font-size: 20px;
		line-height: 1.5;
	}

	.footer__card__hours {
		padding-left: 46px;
		font-size: 20px;
		line-height: 1.5;
	}

	.footer__card__map {
		min-height: 320px;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 18px 36px rgba(0,0,0,0.25);
		background: rgba(255,255,255,0.04);
	}

		.footer__card__map iframe {
			width: 100%;
			height: 100%;
			border: 0;
			display: block;
			filter: saturate(0.92) contrast(0.98);
		}

	.footer__company {
		position: relative;
		padding-left: 50px;
		padding-top: 30px;
	}

	.footer__company__nav {
		display: flex;
		width: fit-content;
		flex-direction: column;
		gap: 29px;
		margin-top: 28px;
	}

		.footer__company__nav a {
			position: relative;
			font-size: 22px;
			line-height: 1.35;
			transition: opacity 0.25s ease, transform 0.25s ease;
		}

			.footer__company__nav a:hover {
				opacity: 1;
				transform: translateX(4px);
				color: var(--white);
			}

	.footer__bottom {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 20px;
		padding-top: 10px;
		border-top: 1px solid rgba(255,255,255,0.1);
	}

	.footer__copy {
		font-size: 18px;
		line-height: 1.4;
		opacity: 0.7;
	}

	.footer__links {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 14px;
		text-align: center;
	}

		.footer__links a, .footer__links span {
			font-size: 18px;
			line-height: 1.4;
			color: rgba(255,255,255,0.7);
		}

			.footer__links a:hover {
				color: var(--accent);
			}


	@media(max-width:1200px) {
		.nav__links {
			margin-left: 45%;
			gap: 32px;
			font-size: 17px;
		}

		.btn--dark {
			display: none;
		}

		.hero__slide:nth-child(1) {
			background-position: 70% bottom;
			background-size: cover;
		}

		.hero__slide:nth-child(2) {
			background-position: center bottom;
			background-size: cover;
		}

		.hero__slide:nth-child(3) {
			background-position: 60% bottom;
			background-size: cover;
		}

		.section-head {
			left: 42%;
			width: fit-content;
		}

		.workflow__grid {
			margin-top: 13%;
			display: grid;
			grid-template-columns: 1fr;
			gap: 10px;
		}

		.workflow__content {
			padding: 0;
			justify-self: center;
			order: 1;
		}

		.workflow__title {
			justify-self: center;
		}

		.workflow__steps {
			padding-top: 160px;
			margin: 0;
			order: 2;
			justify-self: center;
		}

		.impact__grid {
			grid-template-columns: 1fr;
			gap: 10px;
		}

		.workflow__button {
			margin-top: 40px;
		}

		.hero__content {
			max-width: 520px;
			padding-top: 150px;
		}

		.hero__title {
			font-size: clamp(42px, 6vw, 64px);
			line-height: 0.98;
		}

		.hero__subtitle {
			font-size: 20px;
			max-width: 420px;
		}

		.hero__arrow {
			width: 46px;
			height: 46px;
			font-size: 20px;
		}

		.workflow__steps {
			max-width: 860px;
		}
		.code__window {
			margin-top:2%;
			width:100% !important;
		}
		.cards {
			grid-template-columns: repeat(2,1ft);
		}
		.service__detail__grid li {
			font-size: 13px !important;
			
		}
		
		.card {
			text-align: center;
		}
		.card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			min-height: 200px;
			padding-top: 0px;
			gap: 0;
		}

		.service__card {
			padding-left: 0;
			padding-right: 0;
			min-height: 200px;
		}

		.card__text {
			align-content: center;
		}

		.service__card__icon {
			margin: 0;
			justify-content: center;
		}

		.card__title {
			margin-top: 0;
		}
		.service__card {
			width: 100%;
		}

		.card__title {
			font-size: 23px;
		}

		.card__text {
			font-size: 18px;
		}
		.service__detail__main__top {
			display: grid;
			grid-template-columns: 1fr;
		}
		.netzwerkScene {
			margin: -10% 13% 15%;
		}

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

		.see-work {
			justify-self: start;
		}

		.career {
			padding: 90px 0 100px;
		}

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

		.job__card__aside {
			align-items: center;
			justify-content: flex-start;
			padding: 30px 34px 0;
			border-right: none;
			border-bottom: 1px solid rgba(16,24,29,0.06);
			min-height: auto;
		}

		.footer__top {
			grid-template-columns: 1fr;
			gap: 28px;
		}

		.footer__company {
			padding-top: 0;
		}

		.footer__company__nav {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 16px 28px;
		}
	}

	@media(max-width:860px) {
		.container {
			width: min(var(--container), calc(100% - 24px));
		}
		.service__detail{
			display: grid;
			grid-template-columns: 1fr;
		}
		.btn--dark1 {
			position: relative;
			padding: 0 20px 0 20px;
			top: 50px;
			left: 90%;
			width: fit-content;
		}

		.site-header {
			position:fixed;
			width: 100%;
			padding-top: 10px;
		}

		.menu-toggle {
			background: transparent;
			border: none;
			position: absolute;
			right:0;
			display: inline-block;
			
		}

		.nav__cta {
			display: none;
		}
		.partner {
			display: none;
		}
		.nav__links {
			
			position: absolute;
			width: fit-content;
			top:50px;
			font-weight: 500;
			right:0;
			display: none;
			flex-direction: column;
			align-items: center;
			gap: 18px;
			padding: 15px;
			border-radius: 20px;
			background: transparent;
			border: none;
			box-shadow: 0 18px 40px rgba(0,0,0,0.1);
			backdrop-filter: blur(14px);
			-webkit-backdrop-filter: blur(14px);
		}
			.nav__links.open {
				display: flex;
			}

		.hero {
			background: transparent;

		}

		.hero__content {
			text-align: center;
			width: fit-content;
			right: 32%;
			max-width: 100%;
			padding-top: 20%;
		}

		.hero__subtitle {
			width: fit-content;
			top: 15px;
			font-size: 20px;
		}

		.btn--dark1 {
			left: 32%;
		}

			.btn--dark1 span {
				font-size: 20px;
			}

		.section-head {
			left: 120px;
		}

		.workflow {
			padding: 0px 0 80px;
		}

		.workflow__button {
			margin-top: 0px;
			position: relative;
			align-self: center;
			font-size: 20px;
		}

			.workflow__button:hover {
				color: var(--accent);
				background: none;
			}

		.workflow__content {
			margin-top: 10%;
			align-content: center;
			width: 100%;
		}

		.workflow__text {
			text-align: center;
			margin-left: 0;
		}

		.workflow__title {
			text-align: center;
		}

		.workflow__steps {
			margin: 0;
			padding-top: 10%;
		}

		.workflow__card {
			grid-template-columns: 1fr;
			gap: 12px;
			padding: 24px 22px;
		}

		.workflow__card__icon {
			padding-left:0;
			width: 48px;
			height: 48px;
		}

		.workflow__grid {
			width: auto;
		}

		.workflow__card__body h3 {
			font-size: 22px;
		}

		.workflow__card__body p {
			font-size: 17px;
		}

		.workflow__body {
			padding: 0;
		}

		.impact {
			
		}

		.impact__content {
			padding-top: 20%;
			padding-left:20px;
			width: 100%;
		}

		.impact__stats {
			width: 100%;
			grid-template-columns: 1fr 1fr;
		}

		.impact__grid {
			margin:0;
			grid-template-columns: 1fr;
		}

		.impact__card {
			min-height: 180px;
			min-width: 180px;
		}
		.impact__stats {
			padding: 50px 20px 20px 20px;
		}

		.impact__button {
			min-width: 120px;
			margin-left: 55%;
			justify-content: flex-end;
			font-size: 20px;
		}
			.impact__button a {
				padding-left: 0;
			}

		.cards__first__row {
			grid-template-columns: repeat(2,1fr);
			padding: 0 5px;
		}

		.cards__second__row {
			
			grid-template-columns: repeat(2,1fr);
			padding: 0 5px;
		}

		.card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			min-height: 200px;
			padding-top: 0px;
			gap:0;
		}
		.service__card {
			padding-left:0; 
			padding-right:0;
			min-height:200px;
			
		}
			.card__text {
				align-content: center;
			}

			.service__card__icon {
				margin:0;
				justify-content:center;
			}

		.card__title {
			margin-top: 0;
		}
		.service__detail.open {
	
			margin-left: 5px !important;
			margin-right: 5px !important;
		}
		.service__detail__grid {
			grid-template-columns: 1fr;
			gap: 0 !important;
			justify-self: center !important;
		}
		.service__detail__column h3, .service__detail__tags {
			justify-self:center !important;
		}
		.service__detail__tags {
			justify-content: center !important;
		}
			.service__detail__eyebrow {
				margin-top: 10px;
			}
		.service__detail__right {
			display: none;
		}
			.stat {
				gap: 2px;
			}
		.service__detail__left__divider {
			display: none;
		}
			.stats-wrap {
				display: grid;
				min-height: 120px;
				padding: 20px 20px 10px;
				margin-top: -80px;
				width: auto;
			}

			.stats {
				padding: 50px 0 0 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 5px !important;
			}

			.stat span {
				font-size: 18px !important;
			}

			.stat strong {
				font-size: 22px !important;
			}

			.stats__items {
				order: 1;
				width: auto;
				display: grid;
				grid-template-columns: repeat(3,1fr);
				align-items: center;
				gap: 22px;
				padding-bottom: 10px;
			}

			.divider {
				display: none;
			}

			.see-work {
				justify-self: center;
				padding-bottom: 10px;
			}

				.see-work span {
					font-size: 20px !important;
					position: static !important;
				}

			.career {
				margin: -90px 0 0 0;
			}
		.job__card__details {
			grid-template-columns: 1fr;
		}
			.job__card__content {
				padding: 28px 22px 24px;
			}

			.job__card__aside {
				padding: 22px 22px 24px;
			}
		.job__card__meta {
			position:relative;
			align-items:center;
			display: grid;
			grid-template-columns: 1fr;
		}
		.job__card__meta__item {
			justify-content: center;
		}
			.job__card__apply {
				height: 35px;
				min-width: 10px;
				margin: 0 0 20px;
				margin-left: 105px;
			}
		.job__card__aside {
			justify-content: center;
		}
		.job__card__apply {
			margin: 0;
		}
			.job__card__details {
				gap: 15px;
			}

			.job__card__divider {
				margin-left: 0;
				padding-right: 0;
			}

			.job__card__column {
				margin-left: 0;
				padding-right: 0;
			}

			.form__group {
				width: min(var(--container), calc(100% - 24px)/2);
			}

			.footer__card {
				padding-left: 0;
				align-items: center;
				width: 100%;
				grid-template-columns: 1fr;
			}

			.footer__card__map {
				min-height: 280px;
			}

				.footer__card__map iframe {
					min-height: 280px;
				}

			.footer__company {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-left: 0;
				padding-right: 0;
				margin: 0 auto;
				text-align: center;
			}

				.footer__company h3 {
					padding-left: 0 !important;
				}

			.footer__company__nav {
              mardin:0 !important;
				overflow-x: auto;
				width: 100%;
				padding-left: 0;
				display: flex !important;
				flex-direction: row !important;
				gap: 15px;
				justify-content: center !important;
				flex-wrap: nowrap;
			}

				.footer__company__nav a {
					padding-top: 0;
					padding-left: 0 !important;
					text-align: center;
					font-size: 15px !important;
					white-space: nowrap;
				}

			.footer__bottom {
				grid-template-columns: 1fr;
				text-align: center;
			}

			.footer__copy {
				text-align: center;
			}

			.section-head {
				width: fit-content;
			}
		.hero__arrow {
			background: none;
		}
		}

	@media(max-width:500px) {
		.container {
			width: min(var(--container),calc(100% - 24px));
			
		}
		.hero__content {
			margin-top:0%;
		}
		.brand {
			font-size: 20px;
		}
		
		.hero__visual {
			min-height: 320px;
		}

		.btn {
			width: 100%;
		}

		.card__title {
			font-size: 22px;
		}

		.card__text {
			font-size: 18px;
		}
		.workflow__title {
			margin-top: -7%;
		}
		.workflow__text {
			margin-top: -3%;
		}
		.workflow__button {
			margin-top: -3%;
		}
		.workflow__card {
			min-height: 70px !important;
			padding: 10px 5px 10px 5px !important;
		}
		.workflow__card__body {
			padding: 10px 5px 10px 5px !important;
		}
		.impact__title {
			margin-top: -5%;
		}
		.impact__text {
			margin-top: 2%;
		}
		.impact__stats {
			padding: 20px 5px 20px 5px !important;
		}
		.impact__card {
			align-content:center;
			padding: 10px 5px 10px 5px !important;
			min-height: 140px !important;
		}
			.stat strong {
				font-size: 30px;
			}

			.stat span {
				font-size: 18px;
			}

			.anchor-section {
				padding: 56px 0;
			}

				.anchor-section h2 {
					font-size: 30px;
				}

				.anchor-section p {
					font-size: 18px;
				}

			.footer {
				padding: 28px 0 24px;
			}

			.footer__card {
				padding: 22px;
				gap: 24px;
			}

			.footer__card__map {
				margin-left: -5px;
			}

			.footer__card__title__row h3, .footer__company h3 {
				font-size: 24px;
			}

			.footer__card__block h4 {
				font-size: 24px;
			}

			.footer__card__hours {
				padding-left: 0;
			}

			.footer__company__nav {
				margin-left: 15px;
				margin-top: 18px;
				flex-direction: column;
				gap: 14px;
			}

			.footer__links {
				gap: 10px;
			}

				.footer__links a, .footer__links span, .footer__copy {
					font-size: 16px;
				}
		}