.webok-application-page,
.webok-application-single {
	--product-width: 1200px;
	background: #e7eff4;
}

.webok-application-list {
	padding: 22px 0 40px;
	background: linear-gradient(180deg, #e7eff4 0%, #e4edf3 100%);
}

.webok-application-list .webok-application-list__inner {
	padding-left: 60px;
	padding-right: 8px;
}

.webok-application-list__inner,
.webok-application-single__hero,
.webok-application-single__content-inner {
	max-width: 1280px;
	padding: 0 8px;
	margin: 0 auto;
}

/* Force application archive hero to exactly match product archive skeleton. */
.webok-application-hero > .webok-product-page__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.webok-application-hero .webok-list-hero__heading-row {
	grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr);
	gap: clamp(24px, 3vw, 54px);
}

.webok-application-hero .webok-product-page__title {
	font-size: clamp(20px, 3vw, 34px);
}

.webok-application-hero .webok-product-page__intro {
	max-width: min(100%, 820px);
	font-size: clamp(16px, 1.45vw, 24px);
}

.webok-application-hero {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	height: 300px;
	padding: 0;
	background:
		linear-gradient(106deg, rgba(7, 55, 76, 0.18), rgba(7, 55, 76, 0) 44%),
		linear-gradient(122deg, #0e90a5 0%, #2283b4 52%, #3f62af 100%);
	border-bottom: 1px solid rgba(182, 222, 246, 0.36);
}

.webok-application-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.14), transparent 34%),
		radial-gradient(circle at 92% 68%, rgba(255, 255, 255, 0.08), transparent 28%),
		linear-gradient(90deg, rgba(6, 24, 42, 0) 0%, rgba(6, 24, 42, 0.16) 64%, rgba(6, 24, 42, 0.3) 100%);
	pointer-events: none;
	z-index: 0;
}

.webok-application-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 86px;
	background: linear-gradient(180deg, rgba(160, 228, 255, 0), rgba(160, 228, 255, 0.2));
	pointer-events: none;
	z-index: 0;
}

.webok-application-hero .webok-product-breadcrumb {
	color: rgba(239, 248, 255, 0.84);
}

.webok-application-hero .webok-product-breadcrumb__item:not(:last-child)::after {
	color: rgba(239, 248, 255, 0.56);
}

.webok-application-hero .webok-product-breadcrumb a {
	color: rgba(245, 251, 255, 0.9);
}

.webok-application-hero .webok-product-breadcrumb a:hover {
	color: #ffffff;
}

.webok-application-hero .webok-product-page__eyebrow {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #ecf7ff;
}

.webok-application-hero .webok-product-page__title {
	color: #ffffff;
	text-shadow: 0 8px 22px rgba(6, 23, 44, 0.34);
}

.webok-application-hero .webok-product-page__intro {
	color: rgba(241, 248, 255, 0.9);
}

.webok-application-hero-anim {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: min(36%, 500px);
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.webok-application-hero-anim [class^="webok-application-hero-anim__a"] {
	position: absolute;
	display: block;
}

.webok-application-hero-anim__a1 {
	right: 20px;
	top: 42px;
	width: 248px;
	height: 154px;
	border-radius: 22px;
	border: 1px solid rgba(214, 246, 255, 0.42);
	background:
		repeating-linear-gradient(
			90deg,
			rgba(214, 246, 255, 0.1) 0,
			rgba(214, 246, 255, 0.1) 1px,
			transparent 1px,
			transparent 30px
		),
		repeating-linear-gradient(
			180deg,
			rgba(214, 246, 255, 0.08) 0,
			rgba(214, 246, 255, 0.08) 1px,
			transparent 1px,
			transparent 24px
		),
		linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
	box-shadow: inset 0 0 28px rgba(188, 238, 255, 0.1), 0 0 24px rgba(170, 232, 255, 0.14);
	animation: webok-application-panel-float 6.2s ease-in-out infinite;
}

.webok-application-hero-anim__a2 {
	right: 66px;
	top: 62px;
	width: 168px;
	height: 94px;
	border-radius: 14px;
	border: 1px solid rgba(222, 248, 255, 0.54);
	box-shadow:
		inset 0 0 0 1px rgba(222, 248, 255, 0.2),
		inset 0 0 0 14px rgba(222, 248, 255, 0.04),
		0 0 16px rgba(182, 235, 255, 0.12);
	background: linear-gradient(135deg, rgba(222, 248, 255, 0.2), rgba(222, 248, 255, 0.02));
	animation: webok-application-frame-breathe 4.8s ease-in-out infinite;
}

.webok-application-hero-anim__a3 {
	right: 38px;
	top: 120px;
	width: 208px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(226, 249, 255, 0.96) 48%, transparent);
	box-shadow: 0 0 12px rgba(192, 242, 255, 0.4);
	animation: webok-application-scan 3.4s ease-in-out infinite;
}

.webok-application-hero-anim__a4 {
	right: 54px;
	top: 68px;
	width: 194px;
	height: 110px;
	border-radius: 18px;
	border: 1px solid rgba(222, 248, 255, 0.34);
	box-shadow: inset 0 0 0 1px rgba(222, 248, 255, 0.12);
	animation: webok-application-frame-breathe 4.6s ease-in-out infinite;
}

.webok-application-hero-anim__a5 {
	right: 116px;
	top: 92px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: rgba(240, 252, 255, 1);
	box-shadow:
		-42px 18px 0 0 rgba(214, 248, 255, 0.92),
		48px -14px 0 0 rgba(214, 248, 255, 0.88),
		62px 42px 0 0 rgba(214, 248, 255, 0.74),
		-20px 58px 0 0 rgba(214, 248, 255, 0.7);
	animation: webok-application-nodes 2.2s ease-in-out infinite;
}

.webok-application-hero-anim__a6 {
	right: 142px;
	top: 108px;
	width: 56px;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(239, 253, 255, 1), rgba(176, 241, 255, 0.9));
	box-shadow: 0 0 12px rgba(196, 247, 255, 0.32);
	animation: webok-application-play-pulse 2.8s ease-in-out infinite;
}

@keyframes webok-application-panel-float {
	0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.86; }
	50% { transform: translate3d(-4px, 3px, 0); opacity: 1; }
}

@keyframes webok-application-scan {
	0%, 100% { transform: translate3d(-12px, 0, 0); opacity: 0.2; }
	50% { transform: translate3d(12px, 0, 0); opacity: 1; }
}

@keyframes webok-application-frame-breathe {
	0%, 100% { transform: scale(0.985); opacity: 0.62; }
	50% { transform: scale(1.015); opacity: 0.94; }
}

@keyframes webok-application-nodes {
	0%, 100% { transform: scale(0.92); opacity: 0.56; }
	50% { transform: scale(1.08); opacity: 1; }
}

@keyframes webok-application-play-pulse {
	0%, 100% { transform: scale(0.94); opacity: 0.84; }
	50% { transform: scale(1.08); opacity: 1; }
}

.webok-application-single__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid rgba(18, 162, 177, 0.25);
	background: #edf9fc;
	color: #0f8793;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.webok-application-list__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 60px;
	row-gap: 60px;
	margin-bottom: 24px;
}

.webok-application-list__grid > :only-child {
	grid-column: auto;
}

.webok-application-card {
	margin: 0;
}

.webok-application-card__link {
	display: block;
	width: 92%;
	margin: 0 auto;
	text-decoration: none;
}

.webok-application-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	overflow: hidden;
	border: 1px solid rgba(173, 199, 212, 0.64);
	border-radius: 1px;
	background: linear-gradient(128deg, #12364b 0%, #1a5874 58%, #2a7d99 100%);
	box-shadow: 0 16px 30px rgba(20, 57, 75, 0.2);
}

.webok-application-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.webok-application-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(235, 248, 253, 0.9);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.webok-application-card__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.2), transparent 36%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.56));
}

.webok-application-card__title {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	margin: 0;
	color: #f8fcff;
	font-size: clamp(22px, 2.35vw, 34px);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.webok-application-card__link:hover .webok-application-card__media,
.webok-application-card__link:focus-visible .webok-application-card__media {
	border-color: rgba(146, 181, 198, 0.9);
	box-shadow: 0 0 0 2px rgba(146, 181, 198, 0.14), 0 18px 34px rgba(20, 57, 75, 0.26);
}

.webok-application-card__link:focus-visible {
	outline: none;
}

.webok-application-list__empty,
.webok-application-pagination {
	max-width: 1200px;
	padding: 0 16px;
	margin: 14px auto 0;
}

.webok-application-list__empty p {
	margin: 0;
	padding: 18px;
	border: 1px solid #c7dbe4;
	border-radius: 8px;
	background: #fff;
	color: #557382;
}

.webok-application-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.webok-application-pagination a,
.webok-application-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #bdd8e3;
	border-radius: 8px;
	background: #fff;
	color: #183f4f;
	text-decoration: none;
}

.webok-application-pagination .current {
	background: #1d9eaa;
	border-color: #1d9eaa;
	color: #fff;
}

.webok-application-single__top-hero.webok-application-hero {
	height: auto;
	padding: 34px 0 28px;
	background:
		linear-gradient(112deg, rgba(23, 35, 46, 0.2) 0%, rgba(23, 35, 46, 0) 46%),
		linear-gradient(120deg, #6c7a86 0%, #7a8996 52%, #5f7181 100%);
	border-bottom: 1px solid rgba(211, 224, 235, 0.42);
}

.webok-application-single__top-hero.webok-application-hero::before {
	background:
		radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.14), transparent 24%),
		repeating-linear-gradient(
			100deg,
			rgba(255, 255, 255, 0.12) 0,
			rgba(255, 255, 255, 0.12) 1px,
			transparent 1px,
			transparent 74px
		);
	opacity: 0.48;
}

.webok-application-single__top-hero.webok-application-hero::after {
	display: none;
}

.webok-application-single__top-hero .webok-product-breadcrumb {
	color: rgba(240, 247, 255, 0.88);
}

.webok-application-single__top-hero .webok-product-breadcrumb__item:not(:last-child)::after {
	color: rgba(240, 247, 255, 0.62);
}

.webok-application-single__top-hero .webok-product-breadcrumb a {
	color: rgba(248, 252, 255, 0.95);
}

.webok-application-single__top-hero .webok-product-breadcrumb a:hover {
	color: #ffffff;
}

.webok-application-single__top-hero .webok-product-page__eyebrow {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.32);
	color: #edf7ff;
}

.webok-application-single__title {
	color: #ffffff;
	text-shadow: 0 10px 24px rgba(10, 23, 33, 0.26);
}

.webok-application-single__intro {
	color: rgba(243, 248, 255, 0.9);
}

.webok-application-single__hero-anim {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: min(32%, 460px);
	pointer-events: none;
	z-index: 1;
}

.webok-application-single__hero-anim [class^="webok-application-single__hero-anim-g"] {
	position: absolute;
	display: block;
	border-radius: 12px;
}

.webok-application-single__hero-anim-g1 {
	right: 34px;
	top: 54px;
	width: 206px;
	height: 120px;
	border: 1px solid rgba(234, 245, 255, 0.46);
	background:
		repeating-linear-gradient(
			90deg,
			rgba(234, 245, 255, 0.13) 0,
			rgba(234, 245, 255, 0.13) 1px,
			transparent 1px,
			transparent 30px
		),
		repeating-linear-gradient(
			180deg,
			rgba(234, 245, 255, 0.1) 0,
			rgba(234, 245, 255, 0.1) 1px,
			transparent 1px,
			transparent 24px
		);
}

.webok-application-single__hero-anim-g2 {
	right: 84px;
	top: 82px;
	width: 154px;
	height: 78px;
	border: 1px solid rgba(234, 245, 255, 0.54);
	box-shadow: inset 0 0 0 10px rgba(234, 245, 255, 0.05);
}

.webok-application-single__hero-anim-g3 {
	right: 58px;
	top: 108px;
	width: 180px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(235, 247, 255, 0.92) 50%, transparent);
}

.webok-application-single__hero-anim-g4 {
	right: 126px;
	top: 98px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: rgba(238, 249, 255, 0.95);
	box-shadow:
		-42px 18px 0 0 rgba(218, 238, 253, 0.84),
		48px -16px 0 0 rgba(218, 238, 253, 0.8),
		58px 36px 0 0 rgba(218, 238, 253, 0.64);
}

.webok-application-single__featured {
	margin: 0;
}

.webok-application-single__featured-media {
	position: relative;
	aspect-ratio: 16 / 7;
	min-height: 200px;
	max-height: 360px;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(18, 162, 177, 0.2);
	border-radius: 10px;
	background: linear-gradient(128deg, #173948 0%, #24617a 56%, #3a879f 100%);
}

.webok-application-single__featured-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.webok-application-single__featured-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.webok-application-single__featured-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(235, 248, 253, 0.9);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.webok-application-single__chanpin {
	margin: 0;
	overflow: hidden;
}

.webok-application-single__chanpin .chanpin {
	padding: 28px 0 38px;
	border: 1px solid #c7dbe4;
	border-radius: 4px;
	overflow: hidden;
}

.webok-application-single__chanpin .chanpin__inner {
	width: calc(100% - 24px);
	max-width: 100%;
	margin: 0 auto;
}

.webok-application-single__chanpin .chanpin__head,
.webok-application-single__chanpin .chanpin__tabs,
.webok-application-single__chanpin .chanpin__panel {
	max-width: 100%;
}

.webok-application-single__chanpin .chanpin__panel-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding-right: 4px;
}

.webok-application-single__chanpin .chanpin__panel-title {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.webok-application-single__chanpin .chanpin__controls {
	position: relative;
	z-index: 2;
	margin-right: 0;
}

.webok-application-single__chanpin .chanpin__arrow {
	border-color: #c6d5de;
	background: #f7fbfd;
	color: #517181;
}

.webok-application-single__chanpin .chanpin__panel,
.webok-application-single__chanpin .chanpin__tab,
.webok-application-single__chanpin .chanpin__card-link,
.webok-application-single__chanpin .chanpin__card-body {
	border-radius: 4px;
}

.webok-application-single__chanpin .chanpin__panel {
	border-color: #d2dfe7;
	background: rgba(255, 255, 255, 0.78);
}

.webok-application-single__chanpin .chanpin__tab {
	border-color: #cddbe3;
	background: #f4f8fb;
	color: #29444f;
}

.webok-application-single__chanpin .chanpin__tab.is-active,
.webok-application-single__chanpin .chanpin__tab:hover {
	border-color: #aebfc9;
	background: #eef4f7;
	color: #1f3944;
	box-shadow: none;
}

.webok-application-single__chanpin .chanpin__card-link {
	border-color: #d3dee5;
}

.webok-application-single__chanpin .chanpin__card-link:hover {
	border-color: #b8c7d1;
}

.webok-application-single__chanpin .chanpin__arrow:hover {
	background: #edf4f8;
	border-color: #aebfc9;
	color: #2d4d5c;
}

.webok-application-single__chanpin .chanpin__viewport {
	max-width: 100%;
	overflow-x: auto;
}

.webok-application-single__content {
	padding: 18px 0 42px;
}

.webok-application-single__content-inner {
	display: grid;
	gap: 16px;
}

.webok-application-single__article {
	border: 1px solid #c7dbe4;
	border-radius: 10px;
	background: #fff;
	padding: 16px;
}

.webok-application-single__article {
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.9;
	color: #1a3f4f;
	font-size: 18px;
}

.webok-application-single__article p {
	margin: 0 0 1.05em;
}

.webok-application-single__article h2,
.webok-application-single__article h3,
.webok-application-single__article h4 {
	margin: 1.2em 0 0.65em;
	line-height: 1.3;
	color: #163949;
}

.webok-application-single__article-figure {
	margin: 1.2em 0 0;
}

.webok-application-single__article-image {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 7;
	max-height: 420px;
	object-fit: cover;
	border: 1px solid #d2dde4;
	border-radius: 4px;
	background: linear-gradient(128deg, #173948 0%, #24617a 56%, #3a879f 100%);
}

.webok-application-single__article > *:first-child {
	margin-top: 0;
}

.webok-application-single__article > *:last-child {
	margin-bottom: 0;
}

.webok-application-single__actions {
	display: flex;
	justify-content: flex-start;
}

.webok-application-single__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(18, 162, 177, 0.35);
	border-radius: 8px;
	background: #e9f7fb;
	color: #0d7782;
	font-weight: 700;
	text-decoration: none;
}

.webok-application-single__back:hover,
.webok-application-single__back:focus-visible {
	background: #d9f1f7;
	border-color: rgba(18, 162, 177, 0.5);
}

@media (max-width: 980px) {
	.webok-application-list .webok-application-list__inner {
		padding-left: 24px;
		padding-right: 8px;
	}

	.webok-application-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 60px;
		row-gap: 60px;
	}

	.webok-application-card__link {
		width: 100%;
		margin: 0;
	}

	.webok-application-hero-anim {
		width: min(40%, 440px);
	}

	.webok-application-single__hero-anim {
		width: min(38%, 360px);
	}
}

@media (max-width: 820px) {
	.webok-application-hero .webok-list-hero__heading-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 640px) {
	.webok-application-list,
	.webok-application-single__content {
		padding: 16px 0 20px;
	}

	.webok-application-hero-anim {
		display: none;
	}

	.webok-application-list__inner,
	.webok-application-single__hero,
	.webok-application-single__content-inner,
	.webok-application-list__empty,
	.webok-application-pagination {
		max-width: 100%;
		padding: 0 3px;
	}

	.webok-application-list .webok-application-list__inner {
		padding-left: 3px;
		padding-right: 3px;
	}

	.webok-application-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 60px;
		row-gap: 60px;
	}

	.webok-application-card__link {
		width: 100%;
	}

	.webok-application-card__media,
	.webok-application-card__image,
	.webok-application-card__placeholder {
		min-height: 120px;
		max-height: 160px;
	}

	.webok-application-card__title {
		left: 10px;
		right: 10px;
		bottom: 10px;
		font-size: 18px;
	}

	.webok-application-single__hero-anim {
		display: none;
	}

	.webok-application-single__featured-media,
	.webok-application-single__featured-image,
	.webok-application-single__featured-placeholder {
		aspect-ratio: 16 / 9;
		min-height: 170px;
		max-height: 220px;
	}

	.webok-application-single__title {
		font-size: 34px;
	}

	.webok-application-single__intro {
		font-size: 18px;
		line-height: 1.55;
	}

	.webok-application-single__chanpin .chanpin {
		padding: 18px 0 24px;
	}

	.webok-application-single__chanpin .chanpin__inner {
		width: calc(100% - 12px);
	}

	.webok-application-single__chanpin .chanpin__panel-head {
		grid-template-columns: 1fr;
	}

	.webok-application-single__chanpin .chanpin__controls {
		justify-self: end;
		margin-right: 0;
	}

	.webok-application-single__article {
		font-size: 17px;
		line-height: 1.8;
	}

	.webok-application-single__article-image {
		aspect-ratio: 16 / 9;
		max-height: 260px;
	}

	.webok-application-single__article {
		padding: 12px;
	}
}