.webok-home-pic {
	--hero-width: 1200px;
	--hero-accent: rgba(17, 197, 138, 0.9);
	--hero-accent-hover: rgba(17, 197, 138, 1);
	--hero-text: #ffffff;
	--hero-muted: rgba(255, 255, 255, 0.78);
	position: relative;
	left: 0;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	overflow: hidden;
	background: #0b1320;
}

.webok-home-pic,
.webok-home-pic * {
	box-sizing: border-box;
}

.webok-home-pic__viewport {
	position: relative;
	min-height: 420px;
}

.webok-home-pic__track {
	position: relative;
	min-height: inherit;
}

.webok-home-pic__slide {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.12), transparent 18%),
		radial-gradient(circle at 72% 68%, rgba(17, 197, 138, 0.18), transparent 22%),
		linear-gradient(135deg, var(--slide-start), var(--slide-end));
	transition: opacity 0.45s ease;
}

.webok-home-pic__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.webok-home-pic__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(7, 13, 24, 0.72) 0%, rgba(7, 13, 24, 0.38) 44%, rgba(7, 13, 24, 0.14) 100%);
}

.webok-home-pic__inner {
	position: relative;
	z-index: 1;
	max-width: var(--hero-width);
	width: 100%;
	margin: 0 auto;
	padding: 48px 88px 64px;
	display: grid;
	grid-template-columns: minmax(0, 1.34fr) minmax(280px, 0.66fr);
	gap: 44px;
	align-items: center;
}

.webok-home-pic__copy {
	max-width: 900px;
}

.webok-home-pic__eyebrow {
	display: inline-flex;
	margin-bottom: 16px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--hero-text);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.webok-home-pic__title {
	margin: 0;
	color: var(--hero-text);
	font-size: clamp(1.8rem, 3.2vw, 3.2rem);
	font-weight: 800;
	line-height: 1.02;
	max-width: 19ch;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-wrap: balance;
}

.webok-home-pic__description {
	margin: 18px 0 0;
	max-width: 680px;
	color: var(--hero-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.webok-home-pic__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}

.webok-home-pic__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 148px;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.webok-home-pic__button:hover,
.webok-home-pic__button:focus-visible {
	transform: translateY(-1px);
}

.webok-home-pic__button--primary {
	background: var(--hero-accent);
	color: #062117;
}

.webok-home-pic__button--primary:hover,
.webok-home-pic__button--primary:focus-visible {
	background: var(--hero-accent-hover);
}

.webok-home-pic__button--secondary {
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.04);
	color: var(--hero-text);
}

.webok-home-pic__button--secondary:hover,
.webok-home-pic__button--secondary:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
}

.webok-home-pic__visual {
	position: relative;
	min-height: 520px;
	max-width: 900px;
	margin-left: auto;
	filter: drop-shadow(0 18px 28px rgba(2, 6, 23, 0.2));
}

.webok-home-pic__molecule,
.webok-home-pic__mesh {
	position: absolute;
}

.webok-home-pic__mesh {
	border: 0;
	border-radius: 0;
	backdrop-filter: none;
	box-shadow: none;
	overflow: visible;
	background: none;
}

.webok-home-pic__mesh::before,
.webok-home-pic__mesh::after {
	content: "";
	position: absolute;
	inset: 0;
}

.webok-home-pic__mesh--a {
	top: 12px;
	right: 0;
	width: 700px;
	height: 452px;
}

.webok-home-pic__mesh--b {
	left: 24px;
	bottom: 12px;
	width: 484px;
	height: 328px;
}

.webok-home-pic__molecule {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	opacity: 1;
	transform: translateZ(0);
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--a {
	transform: rotate(-8deg);
	animation: webok-home-pic-drift-a 8.5s ease-in-out infinite;
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--a::before {
	clip-path: polygon(6% 44%, 20% 18%, 48% 6%, 76% 16%, 95% 40%, 92% 70%, 74% 92%, 44% 97%, 16% 82%);
	background:
		radial-gradient(circle at 9px 9px, rgba(181, 247, 255, 0.92) 0 2px, transparent 3px) 0 0 / 36px 32px,
		radial-gradient(circle at 27px 24px, rgba(181, 247, 255, 0.7) 0 2px, transparent 3px) 0 0 / 36px 32px,
		linear-gradient(30deg, transparent 46%, rgba(136, 231, 255, 0.22) 47% 49%, transparent 50%) 0 0 / 36px 32px,
		linear-gradient(-30deg, transparent 46%, rgba(136, 231, 255, 0.18) 47% 49%, transparent 50%) 0 0 / 36px 32px,
		linear-gradient(90deg, transparent 48%, rgba(136, 231, 255, 0.1) 49% 51%, transparent 52%) 0 0 / 36px 32px;
	filter: drop-shadow(0 0 18px rgba(109, 214, 255, 0.18));
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--a::after {
	inset: 14px 18px 22px 18px;
	clip-path: polygon(8% 46%, 22% 20%, 50% 8%, 78% 18%, 94% 40%, 90% 66%, 72% 88%, 44% 94%, 18% 80%);
	background: linear-gradient(145deg, rgba(169, 255, 246, 0.1), rgba(255, 255, 255, 0));
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--b {
	transform: rotate(14deg);
	animation: webok-home-pic-drift-b 9.5s ease-in-out infinite;
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--b::before {
	clip-path: polygon(18% 18%, 68% 4%, 96% 34%, 80% 82%, 30% 94%, 4% 58%);
	background:
		radial-gradient(circle at 8px 8px, rgba(184, 255, 240, 0.88) 0 2px, transparent 3px) 0 0 / 34px 30px,
		radial-gradient(circle at 24px 22px, rgba(184, 255, 240, 0.62) 0 2px, transparent 3px) 0 0 / 34px 30px,
		linear-gradient(30deg, transparent 46%, rgba(169, 255, 240, 0.18) 47% 49%, transparent 50%) 0 0 / 34px 30px,
		linear-gradient(-30deg, transparent 46%, rgba(169, 255, 240, 0.14) 47% 49%, transparent 50%) 0 0 / 34px 30px;
}

.webok-home-pic__slide--1 .webok-home-pic__mesh--b::after {
	inset: 38px 22px 30px 28px;
	background: none;
}

.webok-home-pic__slide--1 .webok-home-pic__molecule {
	background: radial-gradient(circle at 32% 32%, rgba(245, 255, 255, 0.96), rgba(176, 244, 255, 0.82) 54%, rgba(103, 210, 244, 0.1) 100%);
	box-shadow: 0 0 0 4px rgba(98, 215, 255, 0.03), 0 0 10px rgba(135, 231, 255, 0.12);
	animation: webok-home-pic-drift-dot 7.2s ease-in-out infinite;
}

.webok-home-pic__slide--1 .webok-home-pic__molecule--1 { top: 22px; right: 200px; }
.webok-home-pic__slide--1 .webok-home-pic__molecule--2 { top: 58px; right: 148px; }
.webok-home-pic__slide--1 .webok-home-pic__molecule--3 { top: 108px; right: 186px; }
.webok-home-pic__slide--1 .webok-home-pic__molecule--4 { top: 136px; right: 120px; }
.webok-home-pic__slide--1 .webok-home-pic__molecule--5 { top: 88px; right: 82px; }
.webok-home-pic__slide--1 .webok-home-pic__molecule--6 { top: 168px; right: 210px; }

.webok-home-pic__slide--2 .webok-home-pic__mesh--a {
	transform: rotate(10deg) translate3d(0, 0, 0);
	animation: webok-home-pic-drift-e 11s ease-in-out infinite;
}

.webok-home-pic__slide--2 .webok-home-pic__mesh--a::before {
	clip-path: polygon(14% 8%, 84% 18%, 100% 52%, 82% 88%, 18% 96%, 0 46%);
	background:
		radial-gradient(circle at 8px 8px, rgba(170, 236, 255, 0.94) 0 2px, transparent 3px) 0 0 / 34px 30px,
		radial-gradient(circle at 24px 22px, rgba(170, 236, 255, 0.68) 0 2px, transparent 3px) 0 0 / 34px 30px,
		linear-gradient(30deg, transparent 46%, rgba(145, 220, 255, 0.22) 47% 49%, transparent 50%) 0 0 / 34px 30px,
		linear-gradient(-30deg, transparent 46%, rgba(145, 220, 255, 0.18) 47% 49%, transparent 50%) 0 0 / 34px 30px,
		linear-gradient(90deg, transparent 48%, rgba(145, 220, 255, 0.1) 49% 51%, transparent 52%) 0 0 / 34px 30px;
}

.webok-home-pic__slide--2 .webok-home-pic__mesh--a::after {
	inset: 18px 14px 18px 14px;
	clip-path: polygon(16% 10%, 82% 20%, 96% 50%, 80% 84%, 20% 92%, 4% 48%);
	background: linear-gradient(140deg, rgba(170, 236, 255, 0.08), rgba(255, 255, 255, 0));
}

.webok-home-pic__slide--2 .webok-home-pic__mesh--b {
	transform: rotate(-12deg) translate3d(0, 0, 0);
	animation: webok-home-pic-drift-f 12.5s ease-in-out infinite;
}

.webok-home-pic__slide--2 .webok-home-pic__mesh--b::before {
	clip-path: polygon(22% 0, 100% 18%, 78% 100%, 0 82%);
	background:
		linear-gradient(120deg, rgba(180, 240, 255, 0.16), transparent 66%),
		radial-gradient(circle at 14px 14px, rgba(188, 244, 255, 0.96) 0 2px, transparent 3px) 0 0 / 30px 26px,
		radial-gradient(circle at 22px 20px, rgba(188, 244, 255, 0.58) 0 2px, transparent 3px) 0 0 / 30px 26px;
}

.webok-home-pic__slide--2 .webok-home-pic__mesh--b::after {
	inset: 28px 16px 20px 18px;
	background: none;
}

.webok-home-pic__slide--2 .webok-home-pic__molecule {
	background: radial-gradient(circle at 32% 32%, rgba(245, 255, 255, 0.98), rgba(193, 243, 255, 0.86) 54%, rgba(103, 210, 244, 0.14) 100%);
	box-shadow: 0 0 0 4px rgba(111, 224, 255, 0.03), 0 0 10px rgba(147, 231, 255, 0.14);
	animation: webok-home-pic-blink 2.8s ease-in-out infinite;
}

.webok-home-pic__slide--2 .webok-home-pic__molecule--1 { top: 30px; right: 220px; animation-delay: 0s; }
.webok-home-pic__slide--2 .webok-home-pic__molecule--2 { top: 64px; right: 166px; animation-delay: 0.22s; }
.webok-home-pic__slide--2 .webok-home-pic__molecule--3 { top: 110px; right: 208px; animation-delay: 0.44s; }
.webok-home-pic__slide--2 .webok-home-pic__molecule--4 { top: 146px; right: 148px; animation-delay: 0.66s; }
.webok-home-pic__slide--2 .webok-home-pic__molecule--5 { top: 94px; right: 104px; animation-delay: 0.88s; }
.webok-home-pic__slide--2 .webok-home-pic__molecule--6 { top: 134px; right: 62px; animation-delay: 1.1s; }

.webok-home-pic__slide--3 .webok-home-pic__mesh--a {
	transform: rotate(-22deg) translate3d(0, 0, 0);
	animation: webok-home-pic-drift-c 10.5s ease-in-out infinite;
}

.webok-home-pic__slide--3 .webok-home-pic__mesh--a::before {
	clip-path: polygon(6% 38%, 18% 14%, 48% 0, 82% 14%, 100% 42%, 94% 72%, 66% 100%, 24% 90%, 0 62%);
	background:
		radial-gradient(circle at 10px 10px, rgba(219, 238, 249, 0.9) 0 2px, transparent 3px) 0 0 / 40px 36px,
		radial-gradient(circle at 30px 26px, rgba(219, 238, 249, 0.56) 0 2px, transparent 3px) 0 0 / 40px 36px,
		linear-gradient(31deg, transparent 46%, rgba(198, 220, 237, 0.17) 47% 49%, transparent 50%) 0 0 / 40px 36px,
		linear-gradient(-31deg, transparent 46%, rgba(198, 220, 237, 0.14) 47% 49%, transparent 50%) 0 0 / 40px 36px,
		linear-gradient(90deg, transparent 48%, rgba(198, 220, 237, 0.08) 49% 51%, transparent 52%) 0 0 / 40px 36px;
	filter: drop-shadow(0 0 18px rgba(208, 232, 246, 0.18));
}

.webok-home-pic__slide--3 .webok-home-pic__mesh--a::after {
	inset: 10px 8px 18px 18px;
	clip-path: polygon(8% 40%, 20% 18%, 48% 4%, 78% 16%, 94% 42%, 88% 70%, 64% 92%, 26% 84%, 6% 60%);
	background: linear-gradient(135deg, rgba(221, 242, 252, 0.04), rgba(255, 255, 255, 0));
}

.webok-home-pic__slide--3 .webok-home-pic__mesh--b {
	transform: rotate(18deg) translate3d(0, 0, 0);
	animation: webok-home-pic-drift-d 12s ease-in-out infinite;
}

.webok-home-pic__slide--3 .webok-home-pic__mesh--b::before {
	clip-path: polygon(12% 14%, 72% 0, 100% 24%, 88% 76%, 42% 100%, 0 72%);
	background:
		radial-gradient(circle at 8px 8px, rgba(214, 234, 248, 0.82) 0 2px, transparent 3px) 0 0 / 34px 30px,
		radial-gradient(circle at 24px 22px, rgba(214, 234, 248, 0.52) 0 2px, transparent 3px) 0 0 / 34px 30px,
		linear-gradient(31deg, transparent 46%, rgba(201, 221, 236, 0.14) 47% 49%, transparent 50%) 0 0 / 34px 30px,
		linear-gradient(-31deg, transparent 46%, rgba(201, 221, 236, 0.12) 47% 49%, transparent 50%) 0 0 / 34px 30px;
}

.webok-home-pic__slide--3 .webok-home-pic__mesh--b::after {
	inset: 20px 18px 14px 18px;
	background: none;
}

.webok-home-pic__slide--3 .webok-home-pic__molecule {
	background: radial-gradient(circle at 32% 32%, rgba(252, 254, 255, 0.96), rgba(228, 239, 247, 0.82) 56%, rgba(187, 210, 224, 0.12) 100%);
	box-shadow: 0 0 0 4px rgba(191, 214, 231, 0.025), 0 0 10px rgba(210, 230, 242, 0.08);
	animation: webok-home-pic-cloud 11s ease-in-out infinite;
}

.webok-home-pic__slide--3 .webok-home-pic__molecule--1 { top: 10px; right: 246px; animation-delay: 0s; }
.webok-home-pic__slide--3 .webok-home-pic__molecule--2 { top: 38px; right: 190px; animation-delay: 0.6s; }
.webok-home-pic__slide--3 .webok-home-pic__molecule--3 { top: 84px; right: 232px; animation-delay: 1.2s; }
.webok-home-pic__slide--3 .webok-home-pic__molecule--4 { top: 58px; right: 126px; animation-delay: 1.8s; }
.webok-home-pic__slide--3 .webok-home-pic__molecule--5 { top: 144px; right: 182px; animation-delay: 2.4s; }
.webok-home-pic__slide--3 .webok-home-pic__molecule--6 { top: 116px; right: 86px; animation-delay: 3s; }

@keyframes webok-home-pic-blink {
	0%,
	100% {
		opacity: 0.42;
		transform: scale(0.84);
	}

	45% {
		opacity: 1;
		transform: scale(1.16);
	}
}

@keyframes webok-home-pic-drift-a {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-8deg);
	}

	50% {
		transform: translate3d(8px, -10px, 0) rotate(-5deg);
	}
}

@keyframes webok-home-pic-drift-b {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(14deg);
	}

	50% {
		transform: translate3d(-10px, 8px, 0) rotate(18deg);
	}
}

@keyframes webok-home-pic-drift-dot {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(0, -6px, 0) scale(1.04);
	}
}

@keyframes webok-home-pic-drift-c {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-22deg);
	}

	50% {
		transform: translate3d(10px, -12px, 0) rotate(-18deg);
	}
}

@keyframes webok-home-pic-drift-d {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(18deg);
	}

	50% {
		transform: translate3d(-12px, 10px, 0) rotate(24deg);
	}
}

@keyframes webok-home-pic-cloud {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.9;
	}

	50% {
		transform: translate3d(0, -8px, 0) scale(1.05);
		opacity: 1;
	}
}
@keyframes webok-home-pic-drift-e {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(10deg);
	}

	50% {
		transform: translate3d(10px, -8px, 0) rotate(14deg);
	}
}

@keyframes webok-home-pic-drift-f {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-12deg);
	}

	50% {
		transform: translate3d(-8px, 10px, 0) rotate(-16deg);
	}
}

.webok-home-pic__nav {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.webok-home-pic__progress {
	position: absolute;
	left: 50%;
	bottom: -148px;
	width: 140px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
	transform: translateX(-50%);
}

.webok-home-pic__progress-bar {
	display: block;
	width: 33.333%;
	height: 100%;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.34);
	transition: width 0.25s ease;
}

.webok-home-pic .webok-home-pic__arrow {
	position: absolute;
	top: 50%;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(0, 153, 153, 0.32);
	border-radius: 50%;
	background: rgba(0, 153, 153, 0.18);
	box-shadow: none;
	color: #ffffff;
	line-height: 1;
	text-indent: 0;
	text-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	font-size: 16px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.webok-home-pic .webok-home-pic__arrow--prev {
	left: 18px;
}

.webok-home-pic .webok-home-pic__arrow--next {
	right: 18px;
}

.webok-home-pic .webok-home-pic__arrow:hover,
.webok-home-pic .webok-home-pic__arrow:focus-visible {
	background: rgba(0, 153, 153, 0.32);
	border-color: rgba(0, 153, 153, 0.5);
	color: #ffffff;
}

@media (max-width: 1199px) {
	.webok-home-pic__inner {
		padding-left: 56px;
		padding-right: 56px;
	}
}

@media (max-width: 991px) {
	.webok-home-pic__viewport {
		min-height: 380px;
	}

	.webok-home-pic__inner {
		padding: 44px 36px 60px;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.webok-home-pic__copy,
	.webok-home-pic__title {
		max-width: 100%;
	}

	.webok-home-pic__visual {
		min-height: 180px;
	}

	.webok-home-pic__progress {
		bottom: -120px;
	}
}

@media (max-width: 767px) {
	.webok-home-pic__viewport {
		min-height: 0;
	}

	.webok-home-pic__inner {
		padding: 28px 18px 86px;
		min-height: 0;
	}

	.webok-home-pic__title {
		font-size: clamp(2rem, 9vw, 3rem);
		line-height: 1.02;
		max-width: 100%;
	}

	.webok-home-pic__description {
		font-size: 0.95rem;
		line-height: 1.65;
	}

	.webok-home-pic__visual {
		display: none;
	}

	.webok-home-pic__nav {
		inset: auto 0 14px;
		height: 44px;
	}

	.webok-home-pic__arrow {
		width: 40px;
		height: 40px;
		font-size: 0.95rem;
		top: 50%;
		transform: translateY(-50%);
	}

	.webok-home-pic__arrow--prev {
		left: auto;
		right: 62px;
	}

	.webok-home-pic__arrow--next {
		right: 14px;
	}

	.webok-home-pic__progress {
		display: none;
	}

	.webok-home-pic.is-mobile-empty-copy .webok-home-pic__viewport {
		min-height: 0;
	}

	.webok-home-pic.is-mobile-empty-copy .webok-home-pic__inner {
		padding-top: 0;
		padding-bottom: 68px;
		min-height: 0;
	}
}