@import url("/resources/css/color-tokens.css?v=20261007");
@charset "utf-8";

/* LG CNS식 메인 — 흰 배경 · 라벤더 히어로 · 하단 4열 (fullPage 유지, 카드는 한 화면 안에 맞춤) */

/* 우측 네비: 메인 6구간만 표시(푸터는 스크롤로 이동) */
.menu--six li[data-menuanchor="footPage"] {
	display: none !important;
}

/* 밝은 메인에서 도트 네비 식별 */
body .menu.menu--six > li {
	border-color: rgba(15, 23, 42, 0.22) !important;
	background-color: transparent !important;
}
body .menu.menu--six > li.active,
body .menu.menu--six > li:hover {
	border-color: #0f6ea6 !important;
	background-color: #0f6ea6 !important;
}

/* ---------- 히어로 비율 — 여기 변수만 수정하면 조절됩니다 ---------- */
/*
 * --wonit-card-max-vh     카드 높이 상한 (뷰포트 세로 비율). 크게 하면 카드↑
 * --wonit-search-band      헤더 아래에서 검색·간격으로 빼는 최소 높이. 줄이면 카드↑·검색에 더 붙음
 * --wonit-under-header     헤더 바로 아래 흰 여백
 * --wonit-card-search-gap  보라 카드 ↔ 검색 (LG CNS는 눈에 띄는 흰 간격). 붙어 보이면 이 값↑
 * --wonit-after-search     검색 아래 패딩 (히어로 블록은 상단 정렬)
 * --wonit-search-max-w   검색·칩 블록 최대 가로 (카드와 동일 폭이면 한 덩어리로 보임)
 */
#section-hero {
	--wonit-hero-max-w: min(1720px, 100%);
	--wonit-card-max-vh: 58vh;
	--wonit-search-band: clamp(136px, 22vmin, 205px);
	/* 헤더 직후 여백 — 너무 크면 네비~카드 사이가 허전해 보임 */
	--wonit-under-header: clamp(8px, 1.2vh, 16px);
	/* 카드(스트립 하단) ↔ 검색 흰 간격 */
	--wonit-card-search-gap: clamp(18px, 2.8vh, 34px);
	--wonit-after-search: clamp(6px, 1vh, 14px);
	--wonit-search-max-w: var(--wonit-hero-max-w);
	text-align: left;
	box-sizing: border-box;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	/* center면 뷰포트 한 칸 안에서 위아래로 밀려 헤더~카드 간격이 과하게 보임 */
	justify-content: flex-start;
	align-items: stretch;
	min-height: 0;
	overflow: hidden;
	background: #ffffff !important;
	font-family: "Pretendard", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
	#section-hero {
		--wonit-card-max-vh: 62vh;
		--wonit-search-band: clamp(158px, 28vmin, 245px);
	}
}

#section-hero > .fp-scrollable {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#section-hero .fp-scroller {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	-webkit-overflow-scrolling: touch;
}

/* 래퍼: 카드+검색 덩어리를 세로 가운데에 두어 LG처럼 위·아래 여백 균형 */
.wonit-hero-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--wonit-card-search-gap);
	width: 100%;
	max-width: none;
	max-height: 100%;
	margin: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	padding: calc(var(--header-h, 88px) + var(--wonit-under-header)) clamp(10px, 1.9vw, 22px) var(--wonit-after-search);
}

.wonit-hero-card {
	position: relative;
	/* 래퍼가 섹션 높이까지 늘어날 때 카드가 남는 세로를 채워 하단 공허함 완화 */
	flex: 1 1 auto;
	min-height: 0;
	align-self: stretch;
	width: 100%;
	max-width: var(--wonit-hero-max-w);
	max-height: min(var(--wonit-card-max-vh), calc(100svh - var(--header-h, 88px) - var(--wonit-search-band)));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background: linear-gradient(148deg, #c9b8ff 0%, #bfb0fb 35%, #b5a4f7 68%, #a994f0 100%);
	border-radius: clamp(18px, 2.6vw, 32px);
	padding: clamp(8px, 1.35vw, 18px) clamp(12px, 2vw, 32px) 0;
	overflow: hidden;
	/* 아래로 번지는 그림자 줄여 검색과 붙어 보이는 착시 완화 */
	box-shadow: 0 14px 36px rgba(91, 63, 176, 0.12), 0 4px 12px rgba(91, 63, 176, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.5);
	isolation: isolate;
}

.wonit-hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 75% 55% at 88% 12%, rgba(255, 255, 255, 0.42), transparent 55%);
	pointer-events: none;
}

.wonit-kicker {
	position: relative;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 5px;
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(55, 40, 120, 0.35);
	flex-shrink: 0;
}

.wonit-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(6px, 1.5vw, 22px);
	align-items: center;
	padding-bottom: clamp(2px, 0.7vw, 10px);
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.wonit-hero-copy h1,
.wonit-hero-copy .wonit-lead {
	text-rendering: optimizeLegibility;
}

@media (max-width: 960px) {
	.wonit-hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
		min-height: auto;
	}
	.wonit-hero-copy {
		order: 2;
	}
	.wonit-hero-visual {
		order: 1;
		min-height: 0;
		max-height: min(30vh, 200px);
	}
	.wonit-kicker {
		font-size: 12px;
	}
}

@media (max-width: 600px) {
	#section-hero {
		--wonit-under-header: clamp(6px, 1.2vh, 14px);
		--wonit-after-search: clamp(6px, 1.4vh, 14px);
		--wonit-card-search-gap: clamp(18px, 3vh, 30px);
	}

	.wonit-hero-wrap {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 아주 낮은 높이: 위부터 쌓기 (스크롤 시 상단부터 보이게) */
@media (max-height: 540px) {
	#section-hero,
	#section-hero > .fp-scrollable,
	#section-hero .fp-scroller {
		justify-content: flex-start;
	}

	.wonit-hero-wrap {
		justify-content: flex-start;
	}
}

/* 짧은 뷰포트: 카드·스트립·검색이 한 번에 들어가도록 추가 압축 */
@media (max-height: 780px) {
	#section-hero {
		--wonit-card-max-vh: 52vh;
		--wonit-search-band: clamp(124px, 21vmin, 182px);
		--wonit-card-search-gap: clamp(12px, 2vh, 22px);
		--wonit-after-search: clamp(8px, 1.6vh, 16px);
	}

	.wonit-hero-card {
		max-height: min(var(--wonit-card-max-vh), calc(100svh - var(--header-h, 88px) - var(--wonit-search-band)));
	}

	.wonit-w-svg {
		max-height: min(10vh, 102px);
	}
	.wonit-strip-item {
		min-height: 38px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.wonit-hero-copy h1 {
		font-size: clamp(1.25rem, 2.8vw, 1.85rem);
	}

	.wonit-keyword-block .wonit-kw-pill {
		padding: 7px 10px;
		gap: 6px;
	}

	.wonit-keyword-block .wonit-tag--kw {
		padding: 6px 10px;
		font-size: 11px;
	}
}

/* comm.css 전역 h1{float:left} 무력화 */
.wonit-hero-copy {
	display: block;
	width: 100%;
	min-width: 0;
}

.wonit-hero-copy h1 {
	float: none !important;
	display: block !important;
	width: 100% !important;
	clear: both !important;
	height: auto !important;
	margin-left: 0 !important;
	font-size: clamp(1.45rem, 3.1vw, 2.45rem);
	font-weight: 800;
	line-height: 1.12;
	color: #ffffff;
	margin: 0 0 clamp(6px, 1.1vw, 12px);
	letter-spacing: -0.035em;
	text-shadow: 0 2px 28px rgba(55, 40, 120, 0.45);
}

.wonit-hero-copy .wonit-lead {
	font-size: clamp(0.8rem, 1.15vw, 0.95rem);
	line-height: 1.48;
	color: rgba(255, 255, 255, 0.94);
	margin: 0 0 clamp(8px, 1.2vw, 14px);
	max-width: 36em;
	text-shadow: 0 1px 14px rgba(55, 40, 120, 0.35);
}

.wonit-hero-copy .wonit-lead-line {
	margin: 0;
}

.wonit-hero-copy .wonit-lead-line + .wonit-lead-line {
	margin-top: 1.15em;
}

@media (max-width: 960px) {
	.wonit-hero-copy .wonit-lead {
		margin-left: auto;
		margin-right: auto;
	}
}

/* LG식 보라 히어로 위 밝은 CTA */
.wonit-btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.88);
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 22px rgba(55, 40, 120, 0.2);
}

.wonit-btn-pill:hover,
.wonit-btn-pill:focus {
	background: rgba(255, 255, 255, 0.22);
	border-color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 8px 28px rgba(55, 40, 120, 0.28);
}

.wonit-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	max-height: 100%;
	z-index: 1;
}

.wonit-w-svg {
	width: min(48vw, 300px);
	max-height: min(18vh, 168px);
	height: auto;
	filter: drop-shadow(0 18px 36px rgba(91, 63, 176, 0.38));
	animation: wonit-w-float 7s ease-in-out infinite;
}

@keyframes wonit-w-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-6px) scale(1.015); }
}

/* 하단 행: 진한 퍼플 띠(LG) — 카드 하단 */
.wonit-hero-strip {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	flex-shrink: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(180deg, rgba(109, 76, 195, 0.55) 0%, rgba(91, 63, 176, 0.72) 45%, rgba(76, 47, 156, 0.82) 100%);
	border-radius: 0 0 clamp(18px, 2.6vw, 34px) clamp(18px, 2.6vw, 34px);
}

@media (max-width: 768px) {
	.wonit-hero-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wonit-strip-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: clamp(36px, 4.2svh, 58px);
	padding: 9px 22px 9px 12px;
	color: rgba(255, 255, 255, 0.96) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	transition: background 0.2s;
	text-decoration: none !important;
	box-sizing: border-box;
}

.wonit-strip-item:last-child {
	border-right: 0;
}

@media (max-width: 768px) {
	.wonit-strip-item:nth-child(2) {
		border-right: 0;
	}
	.wonit-strip-item {
		min-height: 72px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding-right: 36px;
	}
	.wonit-strip-item:nth-last-child(-n + 2) {
		border-bottom: 0;
	}
}

.wonit-strip-item:hover {
	background: rgba(255, 255, 255, 0.1);
}

.wonit-strip-arrow {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 17px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.65);
	opacity: 0.9;
	font-weight: 400;
}

.wonit-strip-item:hover .wonit-strip-arrow {
	opacity: 1;
	color: #ffffff;
}

.wonit-strip-title {
	font-size: clamp(13px, 1.25vw, 15px);
	font-weight: 700;
	line-height: 1.4;
	color: #ffffff;
	margin: 0;
	padding-right: 8px;
}

.wonit-strip-item .meta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 600;
}

@media (max-width: 960px) {
	.wonit-strip-item {
		align-items: flex-start;
	}
}

/* 키워드 검색: 카드와 동일 최대 폭 — 좁은 알약만 따로 두면 섬처럼 떠 보임 */
.wonit-hero-wrap > .wonit-keyword-block {
	align-self: stretch;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	text-align: center;
	max-width: var(--wonit-search-max-w);
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.wonit-keyword-block {
	flex-shrink: 0;
	text-align: center;
	max-width: var(--wonit-search-max-w);
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.wonit-keyword-title {
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 18px;
	letter-spacing: -0.03em;
	line-height: 1.35;
	overflow: hidden;
	transition: opacity 0.25s ease, margin 0.25s ease, max-height 0.35s ease;
}

.wonit-keyword-block:not(:focus-within) .wonit-keyword-title {
	opacity: 0;
	max-height: 0;
	margin: 0;
	pointer-events: none;
}

.wonit-keyword-block:focus-within .wonit-keyword-title {
	opacity: 1;
	max-height: 6rem;
	margin: 0 0 16px;
}

.wonit-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 통합 필 바 — 폭은 부모(max-w)에 맞춤 */
.wonit-kw-pill {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 9px 14px;
	background: #f1f3f7;
	border-radius: clamp(18px, 2.8vw, 26px);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-sizing: border-box;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.wonit-keyword-block:focus-within .wonit-kw-pill {
	background: #eef1f6;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.wonit-kw-input-row {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.wonit-keyword-block:focus-within .wonit-kw-input-row {
	border-bottom-color: #cbd5e1;
}

.wonit-keyword-block:focus-within .wonit-kw-input-row:focus-within {
	border-bottom-color: #64748b;
}

.wonit-kw-search-ico,
.wonit-kw-line-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #0f172a;
	opacity: 0.88;
}

.wonit-kw-line-ico {
	display: none;
	opacity: 0.5;
}

.wonit-keyword-block:focus-within .wonit-kw-search-ico {
	opacity: 1;
}

.wonit-keyword-block:focus-within .wonit-kw-line-ico {
	display: none;
}

.wonit-kw-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 6px 4px;
	font-size: 15px;
	background: transparent;
	color: #0f172a;
	-webkit-appearance: none;
	appearance: none;
}

.wonit-kw-input::placeholder {
	color: #64748b;
}

.wonit-keyword-block:not(:focus-within) .wonit-kw-input {
	font-size: 14px;
}

/* 칩: 좁은 알약 안에서 줄바꿈 */
.wonit-kw-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.wonit-keyword-block:focus-within .wonit-kw-chips {
	gap: 10px 12px;
}

.wonit-tag--kw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 11px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	font-size: 11px;
	font-weight: 600;
	color: #0f172a !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.wonit-keyword-block:focus-within .wonit-tag--kw {
	padding: 10px 16px;
	border-radius: 999px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	font-size: 13px;
	white-space: normal;
}

.wonit-tag--kw:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
	border-color: #cbd5e1;
	color: #0f172a !important;
}

.wonit-keyword-block:focus-within .wonit-tag--kw:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
	background: #e8ecf4;
}

.wonit-tag--kw:active {
	transform: translateY(0);
}

@media (max-width: 720px) {
	.wonit-kw-chips {
		gap: 6px;
		justify-content: flex-start;
	}

	.wonit-tag--kw {
		padding: 7px 10px;
		font-size: 11px;
	}
}

/* Home content is shown immediately so returning home never leaves a motion ghost. */
.wonit-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

.wonit-reveal.is-inview {
	opacity: 1;
	transform: translateY(0);
}

#section-hero .wonit-hero-card {
	opacity: 1;
	transform: none;
	transition: none;
}

#section-hero .wonit-hero-card.is-visible,
.fp-viewing-heroPage #section-hero .wonit-hero-card {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- 공통: 섹션 풀폭 ---------- */
.fullpage .section {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* ---------- section1 AI ---------- */
#section1.section_ai {
	background: linear-gradient(180deg, #fafcfd 0%, #eef5f6 55%, #e8f2f4 100%) !important;
	background-image: none !important;
	padding: calc(var(--header-h, 104px) * 0.2 + 36px) clamp(16px, 3vw, 40px) 48px !important;
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

#section1.section_ai .intro_ai .main_title,
#section1.section_ai .intro_ai h2,
#section1.section_ai .intro_ai .sub_title {
	color: #0f172a !important;
	text-shadow: none !important;
}

#section1.section_ai .maintit06 {
	margin-top: 0 !important;
}

/* main.css .intro p 의 padding-bottom:80px 등 무력화 — 비전 문장은 줄바꿈 한 번만 */
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc {
	padding-top: 10px !important;
	padding-bottom: 20px !important;
	line-height: 1.55 !important;
	max-width: 52rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}

#section1.section_ai .ai_box_gp {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: clamp(16px, 2vw, 28px) !important;
	width: 94% !important;
	max-width: 1320px !important;
	height: auto !important;
	min-height: auto !important;
	margin: 28px auto 0 !important;
}

#section1.section_ai .ai_box01,
#section1.section_ai .ai_box02,
#section1.section_ai .ai_box03 {
	position: relative !important;
	width: clamp(260px, 28vw, 340px) !important;
	min-height: 380px !important;
	height: auto !important;
	flex: 1 1 280px !important;
	border-radius: 16px !important;
	border-width: 2px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease !important;
}

/* 카드별 살짝 다른 베이스 톤·테두리 (호버·레이아웃은 유지) */
#section1.section_ai .ai_box01 {
	opacity: 1 !important;
	background-image:
		url(../img/ico_grammar.png),
		linear-gradient(155deg, rgba(62, 52, 108, 0.9), rgba(18, 22, 38, 0.94)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 22%, cover !important;
	border-color: rgba(167, 139, 250, 0.38) !important;
}

#section1.section_ai .ai_box01:hover {
	background-image:
		url(../img/ico_grammar.png),
		linear-gradient(155deg, rgba(88, 119, 232, 0.96), rgba(76, 58, 150, 0.9)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 22%, cover !important;
	border-color: rgba(186, 200, 255, 0.55) !important;
	box-shadow: 0 24px 56px rgba(76, 58, 150, 0.45) !important;
}

#section1.section_ai .ai_box02 {
	opacity: 1 !important;
	background-image:
		url(../img/ico_newyork.png),
		linear-gradient(155deg, rgba(36, 62, 118, 0.9), rgba(14, 22, 40, 0.94)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 22%, cover !important;
	border-color: rgba(96, 165, 250, 0.42) !important;
}

#section1.section_ai .ai_box02:hover {
	background-image:
		url(../img/ico_newyork.png),
		linear-gradient(155deg, rgba(41, 126, 236, 0.97), rgba(29, 78, 216, 0.92)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 22%, cover !important;
	border-color: rgba(147, 197, 253, 0.58) !important;
	box-shadow: 0 24px 56px rgba(29, 78, 216, 0.42) !important;
}

#section1.section_ai .ai_box03 {
	opacity: 1 !important;
	background-image:
		url(../img/ico_voice.png),
		linear-gradient(155deg, rgba(28, 78, 88, 0.88), rgba(12, 26, 34, 0.94)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 15%, cover !important;
	border-color: rgba(45, 212, 191, 0.38) !important;
}

#section1.section_ai .ai_box03:hover {
	background-image:
		url(../img/ico_voice.png),
		linear-gradient(155deg, rgba(20, 155, 168, 0.95), rgba(15, 118, 110, 0.93)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 50% 22%, center !important;
	background-size: 15%, cover !important;
	border-color: rgba(153, 246, 228, 0.55) !important;
	box-shadow: 0 24px 56px rgba(15, 118, 110, 0.4) !important;
}

/* ---------- section0 회사 슬라이드 ---------- */
#section0 {
	min-height: 100vh !important;
	padding: 0 !important;
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
	position: relative !important;
	overflow: hidden !important;
}

#section0 .slide03.wonit-reveal {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

#section0 .slide03 .flexslider {
	width: 100% !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

#section0 .slide03 .flex-viewport {
	border: none !important;
	height: 100% !important;
}

/* 운영 fallback: 플러그인 미초기화 시 첫 슬라이드 한 장만 노출 */
#section0 .slide03 .slides > li:first-child {
	display: block;
}

/* main.css의 absolute(fade 전용)와 slide 모드가 충돌하지 않도록 강제 정렬 */
#section0 .slide03 .slides,
#section0 .slide03 .slide_ul03 {
	height: 100% !important;
}

#section0 .slide03 .slide_ul03 > li,
#section0 .slide03 .slides > li {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	height: 100% !important;
	min-height: 100% !important;
	float: left !important;
	display: block !important;
}

#section0 .slide03 .main_txt_box {
	height: 100% !important;
}

#section0 .main_txt_box .main_title,
#section0 .main_txt_box .main_sub_title {
	color: #0f172a !important;
	text-shadow: none !important;
}

#section0 .main_txt_box {
	margin-top: clamp(36px, 7vh, 96px) !important;
	padding: 0 clamp(16px, 4vw, 48px) clamp(20px, 3vh, 40px) !important;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box !important;
}

/* ---------- section2 VR / 시스템 ---------- */
#section2 {
	min-height: 100vh !important;
	padding: calc(var(--header-h, 104px) * 0.25 + 24px) clamp(16px, 3vw, 40px) 56px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 48%, #e0f2fe 100%) !important;
	background-image: none !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative !important;
}

#section2 .intro {
	display: block !important;
	position: relative !important;
	padding: 0 8px 8px !important;
}

#section2 .intro .main_title,
#section2 .intro .sub_title {
	color: #0f172a !important;
	text-shadow: none !important;
}

#section2 .vr_box_gp.wonit-reveal {
	display: flex !important;
	position: relative !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 22px !important;
	width: 94% !important;
	max-width: 1200px !important;
	margin: 20px auto 0 !important;
}

#section2 .vr_box {
	position: relative !important;
	width: clamp(280px, 30%, 380px) !important;
	flex: 1 1 280px !important;
}

#section2 .vr_box01,
#section2 .vr_box02,
#section2 .vr_box03 {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: 340px !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

#section2 .btn_vr_view {
	position: absolute !important;
	bottom: 16px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	right: auto !important;
}

#section2 .vr_life {
	opacity: 0.35;
}

/* ---------- section3 포털 (다른 섹션과 동일한 fullPage 전환) ---------- */
#section3 {
	padding-top: 7% !important;
	background: linear-gradient(135deg, #fae8ff 0%, #e9d5ff 40%, #ddd6fe 100%) !important;
	background-image: none !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	overflow-x: hidden;
	overflow-y: hidden !important;
	position: relative !important;
}

#section3 .intro.포털시스템 {
	display: block !important;
	position: relative !important;
	z-index: 4 !important;
}

#section3 .intro .title,
#section3 .intro .sub_title {
	color: #1e1b4b !important;
	text-shadow: none !important;
}

/* ---------- section4 모바일 / IT ---------- */
#section4 {
	padding-top: 7% !important;
	background: linear-gradient(180deg, #ecfeff 0%, #cffafe 45%, #e0f2fe 100%) !important;
	overflow-x: hidden;
	overflow-y: hidden !important;
	position: relative !important;
}

#section4 .intro {
	display: block !important;
	position: relative !important;
	z-index: 6 !important;
	flex-shrink: 0 !important;
}

#section4 .intro .title,
#section4 .intro .sub_title {
	color: #0f172a !important;
	text-shadow: none !important;
}

#section4 #wrapper_bu,
#section4 #wrapper_mr {
	margin-top: 197px;
}

#section4 .bg_mobile_tile,
#section4 .bg_mobile_tile02 {
	box-sizing: content-box;
}


/* ---------- section5 푸터 ---------- */
#section5 {
	min-height: 0 !important;
	text-align: left !important;
	background: #111 !important;
	padding: 0 !important;
}

#section5 footer address,
#section5 footer {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- mobile safety: only horizontal overflow guard ---------- */
@media (max-width: 767px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	/* 모바일 #section1 카드 간격/높이 과대 문제 보정 */
	#section1.section_ai {
		min-height: auto !important;
		height: auto !important;
		padding: 18px 10px 24px !important;
		display: block !important;
	}
	#section1.section_ai .ai_box_gp {
		width: 100% !important;
		max-width: 100% !important;
		margin: 14px 0 0 !important;
		gap: 12px !important;
	}
	#section1.section_ai .ai_box01,
	#section1.section_ai .ai_box02,
	#section1.section_ai .ai_box03 {
		width: 100% !important;
		flex: 0 0 100% !important;
		min-height: 260px !important;
	}

	/* 모바일에서 #section3(포털) 타이틀/버튼과 목업 겹침 방지 */
	#section3 {
		height: auto !important;
		min-height: 0 !important;
		padding: 18px 10px 16px !important;
	}
	#section3 .intro.포털시스템 {
		position: relative !important;
		z-index: 3 !important;
		margin-bottom: 10px !important;
	}
	#section3 .img_phone01,
	#section3 .img_phone02,
	#section3 .img_phone03 {
		position: static !important;
		display: block !important;
		margin: 6px auto !important;
		animation: none !important;
		transform: none !important;
	}
	#section3 .img_phone01,
	#section3 .img_phone02 {
		width: 30% !important;
		max-width: 140px !important;
	}
	#section3 .img_phone03 {
		width: 92% !important;
		max-width: 520px !important;
	}
	#section3 .btn_down {
		display: none !important;
	}

	#fp-nav,
	.fp-slidesNav {
		display: none !important;
	}

	.fullpage,
	.fullpage .section {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* Compact spacing below the header and neutral section navigation. */
@media (min-width: 901px) {
  #section-hero .wonit-hero-wrap { padding-top: 16px; }
}
body .menu.menu--six {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
body .menu.menu--six > li {
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: #c5c5c5 !important;
  position: relative;
  transition: height .2s ease, background-color .2s ease;
}
body .menu.menu--six > li.active {
  height: 22px !important;
  background-color: #222 !important;
}
body .menu.menu--six > li:hover { background-color: #737373 !important; }
body .menu.menu--six > li.active:hover { background-color: #222 !important; }
body .menu.menu--six > li > a {
  position: absolute;
  inset: -5px;
  width: auto;
  height: auto;
  font-size: 0;
}

/* Editorial section rail with live position and hover labels. */
@media (min-width: 901px) {
  #section-hero .wonit-hero-wrap { padding-right: 56px; padding-left: 56px; }
}
body .menu.menu--six {
  right: 30px;
  width: 28px;
  gap: 0;
}
body .menu.menu--six::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #d1d1d1;
}
body .menu.menu--six::after {
  content: attr(data-position);
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #555;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
body .menu.menu--six > li,
body .menu.menu--six > li.active,
body .menu.menu--six > li:hover {
  width: 3px !important;
  height: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .menu.menu--six > li.active,
body .menu.menu--six > li.active:hover { background: #222 !important; }
body .menu.menu--six > li > a { inset: 0 -12px; }
body .menu.menu--six > li > a::after {
  content: attr(title);
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
body .menu.menu--six > li > a:hover::after,
body .menu.menu--six > li > a:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}

#section5 footer.wonit-footer { width: 100%; margin: 0; }

/* fullPage computes viewport positions from zero; exclude the in-flow header. */
@media (min-width: 901px) {
  .fullpage { margin-top: calc(-1 * var(--wonit-header-offset, 91px)); }
  #section-hero .wonit-hero-wrap { padding-top: calc(var(--wonit-header-offset, 91px) + 16px); }
}

body.fp-viewing-footPage .menu.menu--six { visibility: hidden; }

/* Four hero links span the card evenly; the outer card handles rounding. */
#section-hero .wonit-hero-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-left: calc(-1 * clamp(12px, 2vw, 32px));
  margin-right: calc(-1 * clamp(12px, 2vw, 32px));
  border-radius: 0;
}
#section-hero .wonit-strip-item {
  min-width: 0;
  padding: 16px clamp(12px, 2vw, 32px);
}
#section-hero .wonit-strip-arrow { right: clamp(12px, 2vw, 32px); }
@media (max-width: 768px) {
  #section-hero .wonit-hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Minimal hero: solid lavender surfaces without decorative gradients. */
#section-hero .wonit-kicker { display: none; }
#section-hero .wonit-hero-card {
  background: #b6a5ed;
  box-shadow: none;
  border: 0;
}
#section-hero .wonit-hero-card::before { display: none; }
#section-hero .wonit-hero-strip { background: #7661af; }
#section-hero .wonit-strip-item:hover { background: #6b559f; }

/* Clear lavender hero with crisp dark typography and light navigation. */
#section-hero .wonit-hero-card { background: #eee9ff; }
#section-hero .wonit-hero-copy h1 { color: #211a35; text-shadow: none; }
#section-hero .wonit-hero-copy p { color: #514a62; text-shadow: none; }
#section-hero .wonit-hero-strip { background: #faf8ff; border-top: 1px solid #ded7ee; }
#section-hero .wonit-strip-item { color: #211a35 !important; border-right-color: #ded7ee; }
#section-hero .wonit-strip-title { color: #211a35; }
#section-hero .wonit-strip-item .meta { color: #80788f; }
#section-hero .wonit-strip-arrow { color: #655778; opacity: 1; }
#section-hero .wonit-strip-item:hover { background: #e6dfff; }
#section-hero .wonit-strip-item:hover .wonit-strip-arrow { color: #211a35; }
#section-hero .wonit-hero-copy a { background: #fff; color: #302344 !important; border-color: #d6cce8; box-shadow: none; }

/* Crisp hero copy and a solid white CTA. */
#section-hero .wonit-hero-copy,
#section-hero .wonit-hero-copy *,
#section-hero .wonit-hero-strip * { text-shadow: none !important; }
#section-hero .wonit-hero-copy h1 { font-size: 42px; }
#section-hero .wonit-hero-copy .wonit-lead { font-size: 18px; }
#section-hero .wonit-hero-copy .wonit-btn-pill,
#section-hero .wonit-hero-copy .wonit-btn-pill:hover,
#section-hero .wonit-hero-copy .wonit-btn-pill:focus {
  background: #fff;
  background-image: none;
  color: #302344 !important;
  border-color: #d6cce8;
  box-shadow: none;
  transform: none;
}

/* More breathing room inside the desktop hero. */
@media (min-width: 901px) {
  #section-hero .wonit-hero-card { --hero-side-padding: clamp(40px, 4vw, 64px); padding-left: var(--hero-side-padding); padding-right: var(--hero-side-padding); }
  #section-hero .wonit-hero-strip { margin-left: calc(-1 * var(--hero-side-padding)); margin-right: calc(-1 * var(--hero-side-padding)); }
  #section-hero .wonit-strip-item { padding-left: var(--hero-side-padding); padding-right: var(--hero-side-padding); }
  #section-hero .wonit-strip-arrow { right: var(--hero-side-padding); }
}

#section-hero .wonit-hero-copy, #section-hero .wonit-hero-copy *, #section-hero .wonit-hero-strip * { letter-spacing: 0 !important; }
@media (max-width: 768px) {
  #section-hero .wonit-hero-copy h1 { font-size: 30px; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 16px; }
}

/* Flat hero navigation with one consistent lavender surface. */
#section-hero .wonit-hero-strip { background: #e6dfff; border: 0; box-shadow: none; }
#section-hero .wonit-strip-item,
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus { background: #e6dfff; border: 0; box-shadow: none; }
#section-hero .wonit-hero-copy .wonit-btn-pill,
#section-hero .wonit-hero-copy .wonit-btn-pill:hover,
#section-hero .wonit-hero-copy .wonit-btn-pill:focus { border: 0; box-shadow: none; }

/* Edge controls and the current slide's detail link. */
#section-hero .wonit-hero-card { position: relative; }
#section-hero .wonit-hero-detail { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
#section-hero .wonit-hero-copy .wonit-btn-pill,
#section-hero .wonit-hero-strip { position: relative; z-index: 3; }
#section-hero .wonit-hero-nav { position: absolute; top: calc(50% - 40px); z-index: 4; width: 40px; height: 64px; padding: 12px; border: 0; background: transparent; color: #514a62; cursor: pointer; }
#section-hero .wonit-hero-nav.is-prev { left: 6px; }
#section-hero .wonit-hero-nav.is-next { right: 6px; }
#section-hero .wonit-hero-nav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
#section-hero .wonit-hero-nav:focus-visible { outline: 2px solid #655778; outline-offset: -4px; }
@media (max-width: 900px) { #section-hero .wonit-hero-card { padding-left: 46px; padding-right: 46px; } }

/* Clear pastel tones inspired by the supplied card reference. */
#section-hero .wonit-hero-card { background: var(--hero-card-tone, #e3ddff); }
#section-hero .wonit-hero-strip,
#section-hero .wonit-strip-item,
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus { background: var(--hero-menu-tone, #d9d0fb); }

/* Inset slide controls with clear space beside the copy. */
#section-hero .wonit-hero-nav.is-prev { left: 24px; }
#section-hero .wonit-hero-nav.is-next { right: 24px; }
#section-hero .wonit-strip-arrow,
#section-hero .wonit-strip-item:hover .wonit-strip-arrow,
#section-hero .wonit-strip-item:focus .wonit-strip-arrow { color: #655778; opacity: 1; transform: none; transition: none; }
@media (min-width: 901px) {
  #section-hero .wonit-hero-card { --hero-side-padding: clamp(88px, 6vw, 112px); }
  #section-hero .wonit-strip-item { padding-left: clamp(32px, 3vw, 48px); padding-right: clamp(32px, 3vw, 48px); }
  #section-hero .wonit-strip-arrow { right: clamp(32px, 3vw, 48px); }
}
@media (max-width: 900px) {
  #section-hero .wonit-hero-card { padding-left: 64px; padding-right: 64px; }
  #section-hero .wonit-hero-nav.is-prev { left: 12px; }
  #section-hero .wonit-hero-nav.is-next { right: 12px; }
}

/* Airier hero copy spacing and a larger detail button. */
#section-hero .wonit-hero-copy h1 { margin-bottom: 20px; }
#section-hero .wonit-hero-copy .wonit-lead { margin-bottom: 28px; }
#section-hero .wonit-hero-copy .wonit-btn-pill { min-height: 48px; padding: 12px 24px; font-size: 16px; line-height: 24px; gap: 10px; box-sizing: border-box; }
@media (max-width: 768px) {
  #section-hero .wonit-hero-copy h1 { margin-bottom: 16px; }
  #section-hero .wonit-hero-copy .wonit-lead { margin-bottom: 20px; }
  #section-hero .wonit-hero-copy .wonit-btn-pill { min-height: 44px; padding: 10px 20px; font-size: 14px; }
}

@media (min-width: 901px) and (min-height: 650px) {
  #section-hero .wonit-hero-card { min-height: 410px; }
  #section-hero .wonit-hero-grid { padding-bottom: 24px; }
}

#section-hero .wonit-hero-nav { padding: 10px 8px; }

@media (min-width: 901px) {
  #section-hero .wonit-hero-card { --hero-side-padding: 76px; }
}

@media (min-width: 901px) {
  #section-hero .wonit-hero-nav.is-prev { left: 24px; }
  #section-hero .wonit-hero-nav.is-next { right: 24px; }
}

#section-hero .wonit-hero-copy .wonit-btn-pill { min-width: 160px; justify-content: center; }

/* Equal space above the copy and below its CTA. */
@media (min-width: 901px) {
  #section-hero .wonit-hero-card { padding-top: 28px; min-height: 0; }
  #section-hero .wonit-hero-grid { flex: 0 0 auto; padding-bottom: 28px; }
  #section-hero .wonit-hero-strip { flex-shrink: 0; }
}

@media (min-width: 901px) {
  #section-hero .wonit-hero-card { flex: 0 0 auto; max-height: none; }
}

@media (min-width: 901px) {
  #section-hero .wonit-hero-card { padding-top: 36px; }
  #section-hero .wonit-hero-grid { padding-bottom: 36px; }
}

@media (min-width: 769px) {
  #section-hero .wonit-hero-copy h1 { font-size: 36px; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 16px; }
}

@media (min-width: 901px) {
  #section-hero .wonit-hero-card { padding-top: 40px; }
  #section-hero .wonit-hero-grid { padding-bottom: 40px; }
}

#section-hero .wonit-hero-copy .wonit-lead { margin-bottom: 28px; }

#section-hero .wonit-hero-nav { transform: translateY(-50%); }
#section-hero .wonit-hero-copy .wonit-btn-pill { min-width: 120px; width: 120px; }

/* Optical adjustment below the geometric center. */
#section-hero .wonit-hero-nav { transform: translateY(calc(-50% + 8px)); }

#section-hero .wonit-w-white-3d { display: block; width: 280px; height: 280px; max-width: 100%; object-fit: contain; animation: none; filter: none; }
@media (max-width: 960px) { #section-hero .wonit-w-white-3d { width: 180px; height: 180px; } }

@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { align-self: stretch; }
  #section-hero .wonit-w-white-3d { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}

/* Clear top spacing and deliberate right alignment for the hero artwork. */
@media (min-width: 901px) {
  #section-hero .wonit-hero-card { padding-top: 80px; }
}
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { left: auto; right: 24px; transform: translateY(-50%); }
}

@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { width: 360px; height: 240px; }
}

@media (min-width: 961px) {
  #section-hero .wonit-hero-grid { overflow: visible; }
  #section-hero .wonit-w-white-3d { width: 560px; height: 280px; max-width: none; right: -86px; top: 56%; }
}

/* Lower-left section pagination: quiet dots and an active capsule. */
body .menu.menu--six { position: fixed; top: auto; right: auto; bottom: 36px; left: 16px; width: 12px; height: auto; transform: none; gap: 10px; padding: 0; }
body .menu.menu--six::before, body .menu.menu--six::after { display: none; }
body .menu.menu--six > li, body .menu.menu--six > li:hover { width: 6px !important; height: 6px !important; border-radius: 999px !important; background: #cfd3da !important; }
body .menu.menu--six > li.active, body .menu.menu--six > li.active:hover { width: 6px !important; height: 24px !important; border-radius: 999px !important; background: #111827 !important; }
body .menu.menu--six > li > a { inset: -5px -10px; }
body .menu.menu--six > li > a::after { right: auto; left: 28px; }
@media (max-width: 900px) { body .menu.menu--six { left: 8px; bottom: 24px; } }

/* Reference light gray hero, with an edge-cropped sculptural accent. */
#section-hero .wonit-hero-card { background: #f3f3f6; }
#section-hero .wonit-hero-strip,
#section-hero .wonit-strip-item,
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus { background: #e9e9ef; }
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { right: -186px; }
}

/* First screen prioritizes the header and hero; search follows below. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { height: max(480px, calc(100svh - var(--wonit-header-offset, 90px) - 64px)); min-height: 0; }
  #section-hero .wonit-hero-grid { flex: 1 1 0; min-height: 0; }
  #section-hero .wonit-hero-wrap { gap: 24px; padding-bottom: 24px; }
  #section-hero .wonit-w-white-3d { width: 680px; height: 340px; right: -216px; }
}

@media (min-width: 961px) {
  #section-hero .wonit-hero-wrap { overflow-x: hidden; overflow-y: auto; max-height: 100svh !important; }
}

/* Keep the section indicator on the right side of the viewport. */
body .menu.menu--six { left: auto; right: 24px; top: 50%; bottom: auto; transform: translateY(-50%); }
body .menu.menu--six > li > a::after { left: auto; right: 28px; }
@media (max-width: 900px) { body .menu.menu--six { left: auto; right: 12px; } }

/* Give the four links more presence within the slightly shorter hero. */
@media (min-width: 961px) {
  #section-hero .wonit-strip-item { height: 120px; min-height: 120px; padding-top: 22px; padding-bottom: 22px; }
  #section-hero .wonit-strip-title { font-size: 18px; line-height: 1.4; }
  #section-hero .wonit-strip-arrow { top: 24px; }
}

#section-hero .wonit-hero-card { border-radius: 40px; }

/* A compact first screen: hero and a single-row search bar. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { height: max(424px, calc(100svh - var(--wonit-header-offset, 90px) - 180px)); }
  #section-hero .wonit-hero-wrap { gap: 40px; }
  #section-hero .wonit-hero-grid { padding-bottom: 24px; }
  #section-hero .wonit-w-white-3d { width: 580px; height: 290px; right: -186px; }
  #section-hero .wonit-kw-pill { flex-direction: row; align-items: center; height: 80px; padding: 16px 28px; gap: 24px; border: 0; border-radius: 40px; background: #f0f1f3; box-shadow: none; }
  #section-hero .wonit-keyword-title { display: none; }
  #section-hero .wonit-kw-input-row { flex: 1 1 0; width: auto; padding: 0; border: 0; gap: 12px; }
  #section-hero .wonit-kw-input { font-size: 18px; padding: 0; }
  #section-hero .wonit-kw-search-ico svg { width: 28px; height: 28px; }
  #section-hero .wonit-kw-chips { width: auto; flex-wrap: nowrap; gap: 12px; }
  #section-hero .wonit-tag--kw { padding: 12px 20px; font-size: 14px; font-weight: 500; background: #fff; border: 0; white-space: nowrap; transform: none; box-shadow: none; }
  #section-hero .wonit-tag--kw:nth-child(1),
  #section-hero .wonit-tag--kw:nth-child(4),
  #section-hero .wonit-tag--kw:nth-child(6),
  #section-hero .wonit-tag--kw:nth-child(7) { display: none; }
}

/* Position the section indicator above the lower-right edge. */
body .menu.menu--six { top: auto; bottom: 48px; transform: none; }

/* Brighter search surface and more readable hero typography. */
#section-hero .wonit-kw-pill,
#section-hero .wonit-keyword-block:focus-within .wonit-kw-pill { background: var(--color-search-bg); }
@media (min-width: 961px) {
  #section-hero .wonit-hero-copy h1 { font-size: 44px; line-height: 54px; letter-spacing: 0 !important; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 18px; }
  #section-hero .wonit-strip-title { font-size: 20px; }
}

/* Every slide starts its copy at the same top edge. */
#section-hero .wonit-hero-copy { align-self: start; }

/* Quiet separators and arrows revealed only on interaction. */
#section-hero .wonit-strip-item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 1px; height: 56px; transform: translateY(-50%);
  background: var(--color-divider-subtle); opacity: .55; pointer-events: none;
}
#section-hero .wonit-strip-item .wonit-strip-arrow,
#section-hero .wonit-strip-item:focus .wonit-strip-arrow {
  color: var(--color-icon-secondary); opacity: 0; transition: opacity .15s ease;
}
#section-hero .wonit-strip-item:hover .wonit-strip-arrow,
#section-hero .wonit-strip-item:focus-visible .wonit-strip-arrow { opacity: 1; }
@media (max-width: 768px) {
  #section-hero .wonit-strip-item:nth-child(2)::after { display: none; }
}

/* Oversized sculpture cropped by the hero card edge. */
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { width: 760px; height: 380px; right: -260px; }
}

@media (min-width: 961px) {
  #section-hero .wonit-hero-copy { padding-left: 28px; box-sizing: border-box; }
}

#section-hero .wonit-strip-item .meta {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 500; color: var(--color-text-caption);
}

#section-hero .wonit-strip-item .meta { margin-top: 6px; padding-top: 0; }

@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { width: 840px; height: 420px; right: -290px; }
}

@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { overflow: hidden; }
  #section-hero .wonit-w-white-3d { width: 840px; height: 420px; right: -250px; top: 72%; }
}

@media (min-width: 961px) {
  #section-hero .wonit-hero-card { height: max(540px, calc(100svh - var(--wonit-header-offset, 90px) - 180px)); }
  #section-hero .wonit-w-white-3d { top: 44%; }
}

@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { width: 680px; height: 380px; right: -140px; top: 48%; }
}

/* Restore the preferred flowing W silhouette and its generous crop. */
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { width: 840px; height: 420px; right: -290px; top: 48%; }
}

/* Crop the sculpture at the outer card, never at its inner grid column. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { overflow: visible; }
  #section-hero .wonit-hero-grid { overflow: visible; }
}
/* Smaller screens use content height instead of squeezing copy into a viewport. */
@media (min-width: 961px) and (max-width: 1200px) {
  #section-hero .wonit-hero-card { height: 600px; padding-top: 56px; }
  #section-hero .wonit-hero-copy h1 { font-size: 40px; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 16px; }
  #section-hero .wonit-w-white-3d { width: 640px; height: 360px; right: -300px; }
  #section-hero .wonit-strip-item { padding-left: 20px; padding-right: 20px; }
  #section-hero .wonit-strip-title { font-size: 17px; }
  #section-hero .wonit-kw-pill { gap: 16px; padding-left: 20px; padding-right: 20px; }
  #section-hero .wonit-tag--kw { padding: 10px 12px; font-size: 12px; }
}
@media (max-width: 960px) {
  #section-hero .wonit-hero-card { height: auto; max-height: none; flex: 0 0 auto; padding-top: 32px; }
  #section-hero .wonit-hero-grid { flex: 0 0 auto; padding-bottom: 32px; }
  #section-hero .wonit-hero-copy { padding-left: 0; }
  #section-hero .wonit-hero-copy h1 { font-size: 32px; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 16px; }
  #section-hero .wonit-hero-visual { overflow: visible; }
  #section-hero .wonit-w-white-3d { position: relative; width: 280px; height: 180px; max-width: 100%; top: auto; right: auto; left: auto; transform: none; }
  #section-hero .wonit-hero-wrap { max-height: none !important; overflow: visible; }
}

/* Center the artwork and the paired menu labels vertically. */
#section-hero .wonit-strip-item { justify-content: center; }
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { top: 50%; }
}

/* Slight optical adjustment below the artwork center. */
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { top: calc(50% + 88px); }
}

/* Subtle tilt with the right side lowered. */
@media (min-width: 961px) {
  #section-hero .wonit-w-white-3d { transform: translateY(-50%) rotate(8deg); transform-origin: center; }
}

#section-hero .wonit-hero-card { background: var(--color-bg-muted); }
#section-hero .wonit-tag--kw,
#section-hero .wonit-keyword-block:focus-within .wonit-tag--kw { background: var(--color-tag-bg); }

#section-hero .wonit-strip-item .meta { text-transform: lowercase; }
#section-hero .wonit-strip-item .meta::first-letter { text-transform: uppercase; }

/* Larger artwork makes the edge crop deliberate. */
@media (min-width: 1201px) {
  #section-hero .wonit-w-white-3d { width: 960px; height: 480px; right: -362px; }
}

#section-hero .wonit-strip-arrow { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
#section-hero .wonit-strip-arrow svg { width: 20px; height: 20px; display: block; }

#section-hero .wonit-strip-item { transition: background-color .15s ease; }
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus-visible { background: var(--color-hero-menu-hover); }

/* Keep the CTA on one baseline while titles retain their top alignment. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-copy { display: flex; flex-direction: column; align-self: stretch; }
  #section-hero .wonit-hero-copy h1,
  #section-hero .wonit-hero-copy .wonit-lead { flex-shrink: 0; }
  #section-hero .wonit-hero-copy .wonit-btn-pill { margin-top: auto; align-self: flex-start; flex-shrink: 0; }
}

#section-hero .wonit-hero-copy .wonit-lead { line-height: 32px; }

/* Native page scrolling while editing: no nested hero scroll container. */
#section-hero .wonit-hero-wrap { max-height: none !important; overflow: visible; }
#section-hero.section { height: auto !important; min-height: 100svh; }

@media (min-width: 961px) {
  #section-hero .wonit-hero-copy { align-self: start; }
  #section-hero .wonit-hero-grid { padding-bottom: 40px; }
}

/* Hide only the separators touching the hovered menu item. */
#section-hero .wonit-strip-item:hover::after,
#section-hero .wonit-strip-item:has(+ .wonit-strip-item:hover)::after {
  opacity: 0;
}

#section-hero .wonit-strip-item:hover .wonit-strip-arrow,
#section-hero .wonit-strip-item:focus-visible .wonit-strip-arrow {
  color: var(--color-hero-menu-icon-hover);
}

@media (min-width: 961px) {
  #section-hero .wonit-strip-item { padding-left: 32px; padding-right: 32px; }
  #section-hero .wonit-strip-arrow { right: 24px; }
}

#section-hero .wonit-kw-input::placeholder {
  color: var(--color-search-placeholder);
  opacity: 1;
}
#section-hero .wonit-tag--kw,
#section-hero .wonit-keyword-block:focus-within .wonit-tag--kw {
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: 16px;
}
#section-hero .wonit-kw-input { font-size: 20px; }
@media (min-width: 961px) and (max-width: 1200px) {
  #section-hero .wonit-tag--kw { font-size: 14px; }
}
@media (max-width: 960px) {
  #section-hero .wonit-kw-input { font-size: 18px; }
  #section-hero .wonit-tag--kw { font-size: 14px; }
}

#section-hero .wonit-tag--kw,
#section-hero .wonit-keyword-block:focus-within .wonit-tag--kw { font-weight: 600; }

#section-hero .wonit-kw-input { font-size: 24px; font-weight: 700; }
#section-hero .wonit-kw-input-row { gap: 20px; }
@media (max-width: 960px) {
  #section-hero .wonit-kw-input { font-size: 20px; }
}

#section-hero .wonit-hero-copy .wonit-btn-pill { width: 144px; min-width: 144px; }
#section-hero .wonit-strip-item .meta { font-size: 14px; }

#section-hero .wonit-strip-item .meta {
  color: var(--color-hero-menu-caption);
  font-weight: 600;
}
@media (min-width: 961px) {
  #section-hero .wonit-strip-item { padding-left: 40px; }
}

#section-hero .wonit-hero-copy .wonit-btn-pill:hover,
#section-hero .wonit-hero-copy .wonit-btn-pill:focus-visible {
  background: var(--color-hero-cta-hover-bg);
  color: var(--color-hero-cta-hover-text) !important;
}

#section-hero .wonit-hero-card { background: var(--color-hero-bg); }
#section-hero .wonit-hero-strip,
#section-hero .wonit-strip-item { background: var(--color-hero-menu-bg); }
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus-visible { background: var(--color-hero-menu-hover); }

#section-hero .wonit-strip-item:not(:last-child)::after {
  background: var(--color-hero-menu-divider);
  opacity: 1;
}
#section-hero .wonit-strip-item:hover::after,
#section-hero .wonit-strip-item:has(+ .wonit-strip-item:hover)::after { opacity: 0; }

#section-hero .wonit-hero-copy .wonit-btn-pill { font-weight: 700; }

/* Flat, centered service cards inspired by the reference layout. */
#section1.section_ai { background: var(--color-white) !important; min-height: auto !important; padding: 64px 32px 80px !important; }
#section1.section_ai .ai_box_gp { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100% !important; max-width: 1400px !important; gap: 24px !important; }
#section1.section_ai .ai_box_gp > div,
#section1.section_ai .ai_box_gp > div:hover {
  width: auto !important; min-height: 480px !important; height: auto !important;
  padding: 40px 24px !important; border: 0 !important; border-radius: 40px !important;
  background: var(--color-service-card-bg) !important; opacity: 1 !important;
  box-shadow: none !important; transform: none !important; text-align: center;
}
#section1 .wonit-service-visual { height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
#section1 .wonit-service-visual svg { width: 280px; height: 220px; max-width: 100%; }
#section1.section_ai .ai_box_txt { position: static !important; transform: none !important; width: auto !important; margin: 0 !important; font-size: 28px !important; line-height: 36px; font-weight: 700; color: var(--color-service-text) !important; }
#section1.section_ai .ai_box_txt span { display: none; }
#section1.section_ai .ai_box_tit { display: block; margin-top: 16px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--color-service-copy); }
#section1.section_ai .btn_aibox { position: static !important; transform: none !important; display: inline-flex; width: auto; margin: 24px auto 0; background: transparent; border: 0; color: var(--color-service-text) !important; }
#section1.section_ai .vr_box_hover { display: none !important; }
@media (max-width: 960px) {
  #section1.section_ai .ai_box_gp { grid-template-columns: 1fr; max-width: 560px !important; }
  #section1.section_ai .ai_box_gp > div { min-height: auto !important; }
}

#section1.section_ai > .btn_down { display: none !important; }

/* Shared content grid: align primary content with the hero and search. */
:root { --content-max-width: 1400px; --content-gutter: 56px; }
#section-hero { --wonit-hero-max-w: min(var(--content-max-width), 100%); }
#section1.section_ai { padding-left: var(--content-gutter) !important; padding-right: var(--content-gutter) !important; }
#section1.section_ai .ai_box_gp { max-width: var(--content-max-width) !important; }
#section2 .vr_box_gp.wonit-reveal {
  width: calc(100% - var(--content-gutter) * 2) !important;
  max-width: var(--content-max-width) !important;
}
@media (max-width: 960px) {
  :root { --content-gutter: 24px; }
  #section1.section_ai .ai_box_gp { max-width: var(--content-max-width) !important; }
}
@media (max-width: 600px) {
  :root { --content-gutter: 16px; }
}

/* Consistent spacing between main sections. */
.fullpage > .section + .section { margin-top: 128px !important; }
#section1.section_ai .intro_ai h2.main_title {
  font-size: 48px !important;
  letter-spacing: 0 !important;
  line-height: 60px;
}

#section-hero .wonit-hero-wrap { gap: 64px; padding-bottom: 48px; }

@media (min-width: 961px) {
  #section-hero .wonit-kw-pill { height: 90px; min-height: 90px; border-radius: 45px; }
}

/* Search has a smaller transition: 48px below + 48px above the next content. */
.fullpage > #section-hero + #section1.section_ai {
  margin-top: 0 !important;
  padding-top: 48px !important;
}
#section1.section_ai .intro_ai { margin-top: 0 !important; }

#section-hero .wonit-strip-item .meta { text-transform: none; }
#section-hero .wonit-strip-item .meta::first-letter { text-transform: none; }

#section1.section_ai .intro_ai h2.main_title { font-weight: 700; }
#section1.section_ai .btn_aibox { display: none !important; }
#section1 .wonit-service-visual img { width: 260px; height: 220px; max-width: 100%; object-fit: contain; }

#section1 .wonit-service-visual img { filter: saturate(.7); }

#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { font-size: 20px !important; line-height: 34px !important; }

#section1 .wonit-service-visual img { width: 200px; height: 168px; }
#section1.section_ai .ai_box_txt,
#section1.section_ai .ai_box_tit {
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
}

#section1.section_ai .intro_ai h2.main_title,
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc,
#section1.section_ai .ai_box_txt,
#section1.section_ai .ai_box_tit {
  color: var(--color-black) !important;
}

#section1.section_ai .ai_box_tit { font-weight: 400; }

#section1 .wonit-service-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; }
#section1 .wonit-service-card-link:focus-visible { outline: 2px solid var(--color-service-object-accent); outline-offset: 4px; }

#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { padding-top: 16px !important; }

/* One rounded system card, with synchronized accordion and visual. */
#section2 { height: auto !important; min-height: 0 !important; padding: 0 var(--content-gutter) !important; background: var(--color-white) !important; }
#section2 > .intro,
#section2 > .vr_box_gp,
#section2 > .btn_down { display: none !important; }
.wonit-system-card { display: grid; grid-template-columns: 38% 62%; max-width: var(--content-max-width); height: min(620px, calc(100svh - 130px)); min-height: 440px; margin: 0 auto; border-radius: 40px; overflow: hidden; text-align: left; }
.wonit-system-menu { padding: 40px 40px; background: var(--color-system-panel-bg); color: var(--color-system-panel-text); display: flex; flex-direction: column; justify-content: center; }
.wonit-system-eyebrow { margin: 0 0 8px; font-size: 14px; color: var(--color-gray-400); }
.wonit-system-menu h2 { font-size: 36px; line-height: 44px; font-weight: 700; margin: 0 0 28px; color: var(--color-white); }
.wonit-system-item + .wonit-system-item { border-top: 1px solid var(--color-system-divider); }
.wonit-system-item button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; background: transparent; border: 0; color: var(--color-white); font: inherit; font-size: 24px; font-weight: 600; text-align: left; cursor: pointer; }
.wonit-system-item button svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--color-gray-400); stroke-width: 2; }
.wonit-system-item.is-active button svg { transform: rotate(180deg); }
.wonit-system-panel { padding-bottom: 24px; }
.wonit-system-panel p { margin: 0; font-size: 16px; line-height: 26px; font-weight: 400; color: var(--color-white); }
.wonit-system-panel a { display: inline-block; margin-top: 16px; color: var(--color-white); font-size: 14px; }
.wonit-system-visual { background: var(--color-system-visual-bg); display: flex; align-items: center; justify-content: center; padding: 40px; min-width: 0; }
.wonit-system-visual img { width: 80%; height: 90%; object-fit: contain; filter: saturate(.7); }
@media (max-width: 960px) {
  .wonit-system-card { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .wonit-system-menu { padding: 32px; }
  .wonit-system-visual { height: 320px; padding: 24px; }
  .wonit-system-item button { font-size: 22px; }
}

#section2 .vr_box_gp.wonit-reveal { display: none !important; }

#section1.section_ai .ai_box_txt { font-weight: 600; }

.wonit-system-heading { text-align: center; max-width: var(--content-max-width); margin: 0 auto 40px; color: var(--color-black); }
.wonit-system-heading h2 { font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: 0; margin: 0; }
.wonit-system-heading p { font-size: 20px; line-height: 34px; font-weight: 400; letter-spacing: 0; margin: 16px 0 0; }
.wonit-system-menu { justify-content: flex-start; padding-top: 64px; }
.wonit-system-panel { height: 150px; box-sizing: border-box; }
.wonit-system-card { height: min(520px, calc(100svh - 270px)); }
@media (max-width: 960px) {
  .wonit-system-card { height: auto; }
  .wonit-system-menu { padding-top: 32px; }
  .wonit-system-panel { height: auto; min-height: 130px; }
  .wonit-system-heading h2 { font-size: 36px; line-height: 46px; }
}

.wonit-system-menu { justify-content: center; padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 960px) {
  .wonit-system-menu { padding-top: 32px; padding-bottom: 32px; }
}

#section2 .wonit-system-card { width: 100%; max-width: var(--content-max-width); flex-shrink: 0; box-sizing: border-box; }
#section2 .wonit-system-heading { width: 100%; }
#section2 .wonit-system-menu { justify-content: center; min-width: 0; }
#section2 .wonit-system-item button { line-height: 32px; letter-spacing: 0; }
#section2 .wonit-system-panel p { font-weight: 400; letter-spacing: 0; }

@media (min-width: 961px) { #section2 .wonit-system-panel { height: 118px; } }

#section2 .wonit-system-item button { font-size: 28px; line-height: 36px; }
#section2 .wonit-system-panel p { font-size: 16px; line-height: 26px; }
#section2 .wonit-system-panel a { color: var(--color-system-link); font-weight: 600; text-decoration: none; }

#section2 .wonit-system-item button { padding-top: 28px; padding-bottom: 28px; }
#section2 .wonit-system-item button svg { width: 28px; height: 28px; }
#section2 .wonit-system-panel { height: auto; padding-bottom: 28px; }
#section2 .wonit-system-menu { padding-top: 32px; padding-bottom: 32px; }

/* Remove legacy slide pagination and decorative scroll prompts. */
#section0 .flex-control-nav,
.fullpage .section > .btn_down { display: none !important; }

/* Search surface horizontal inset. */
:root { --wonit-search-padding-x: 32px; }
@media (min-width: 961px) {
  #section-hero .wonit-kw-pill {
    padding-left: var(--wonit-search-padding-x);
    padding-right: var(--wonit-search-padding-x);
  }
}

/* Company: heading, uncropped image, then the action. */
#section0 {
  height: auto !important; min-height: 0 !important;
  padding: 0 var(--content-gutter) !important;
  background: var(--color-white) !important;
}
#section0 .slide03 { display: none !important; }
#section0 .wonit-company-heading,
#section0 .wonit-company-actions {
  width: 100%; max-width: var(--content-max-width); margin: 0 auto; text-align: center;
}
#section0 .wonit-company-heading { margin-bottom: 40px; }
#section0 .wonit-company-heading .main_title {
  margin: 0; color: var(--color-black); font-size: 48px; line-height: 60px;
  font-weight: 700; letter-spacing: 0;
}
#section0 .wonit-company-heading .main_sub_title {
  margin: 16px 0 0; padding: 0; color: var(--color-black);
  font-size: 20px; line-height: 34px; font-weight: 400; letter-spacing: 0;
}
#section0 .wonit-company-image {
  display: block; width: 100%; max-width: var(--content-max-width);
  height: auto; margin: 0 auto; border-radius: 40px; object-fit: contain;
}
#section0 .wonit-company-actions { margin-top: 32px; }
#section0 .wonit-company-actions .btn_view { position: static; margin: 0 auto; }
@media (max-width: 960px) {
  #section0 .wonit-company-heading .main_title { font-size: 32px; line-height: 42px; }
  #section0 .wonit-company-heading .main_sub_title { font-size: 18px; line-height: 30px; }
}

/* Match the company heading typography to Vision without legacy glow. */
#section0 .wonit-company-heading .main_title,
#section0 .wonit-company-heading .main_sub_title {
  text-shadow: none !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
}
#section0 .wonit-company-heading .main_title {
  font-size: 48px; line-height: 60px; font-weight: 700;
}
#section0 .wonit-company-heading .main_sub_title {
  font-size: 20px; line-height: 34px; font-weight: 400;
}
@media (max-width: 960px) {
  #section0 .wonit-company-heading .main_title { font-size: 32px; line-height: 42px; }
  #section0 .wonit-company-heading .main_sub_title { font-size: 18px; line-height: 30px; }
}

#section0 .wonit-company-heading .wonit-company-actions { margin-top: 24px; margin-bottom: 24px; }

/* Keep the company image on the shared content grid without flex shrink. */
#section0 .wonit-company-image {
  width: 100% !important;
  max-width: var(--content-max-width) !important;
  height: auto !important;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
}

/* The source has 240px transparent side margins and a 1440×360 photo. */
#section0 .wonit-company-image-frame {
  position: relative; width: 100%; max-width: var(--content-max-width);
  aspect-ratio: 4 / 1; margin: 0 auto; overflow: hidden;
  border-radius: 40px; flex-shrink: 0;
}
#section0 .wonit-company-image-frame .wonit-company-image {
  position: absolute; top: 0; left: -16.666667%;
  width: 133.333333% !important; max-width: none !important;
  height: auto !important; margin: 0; border-radius: 0;
}

/* Company CTA: quiet outlined pill using the shared arrow. */
#section0 .wonit-company-actions .btn_view {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 14px 24px; box-sizing: border-box;
  border: 1px solid var(--color-gray-300); border-radius: 999px;
  background: var(--color-white); background-image: none;
  color: var(--color-black); font-size: 16px; line-height: 24px; font-weight: 500;
  letter-spacing: 0; z-index: auto; text-shadow: none;
  transition: background-color .2s, border-color .2s;
}
#section0 .wonit-company-actions .btn_view:hover,
#section0 .wonit-company-actions .btn_view:focus-visible {
  background: var(--color-blue-50); border-color: var(--color-blue-300);
}
#section0 .wonit-company-actions .btn_view svg { flex-shrink: 0; }

/* Focused server-room banner without source padding. */
#section0 .wonit-company-image-frame { aspect-ratio: auto; height: 460px; }
#section0 .wonit-company-image-frame .wonit-company-image {
  left: 0; width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center;
}
@media (max-width: 960px) {
  #section0 .wonit-company-image-frame { height: 340px; }
}
@media (max-width: 600px) {
  #section0 .wonit-company-image-frame { height: 260px; }
}

/* Company heading alignment preview. */
#section0 .wonit-company-heading .main_title,
#section0 .wonit-company-heading .main_sub_title { text-align: left; }

/* Minimal linked arrow beside the company text. */
#section0 .wonit-company-heading { position: relative; padding-right: 80px; box-sizing: border-box; }
#section0 .wonit-company-heading .wonit-company-actions {
  position: absolute; right: 0; bottom: 0; width: auto; margin: 0;
}
#section0 .wonit-company-actions .btn_view {
  width: 56px; height: 56px; min-height: 56px; padding: 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--color-black);
}
#section0 .wonit-company-actions .btn_view svg { width: 36px; height: 36px; }
#section0 .wonit-company-actions .btn_view:hover,
#section0 .wonit-company-actions .btn_view:focus-visible { background: transparent; color: var(--color-blue-950); }

/* Company editorial layout: heading, photo, then two columns of copy. */
#section0 .wonit-company-heading { padding-right: 0; }
#section0 .wonit-company-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  width: 100%; max-width: var(--content-max-width); margin: 40px auto 0;
  color: var(--color-black); text-align: left;
}
#section0 .wonit-company-message {
  margin: 0; font-size: 28px; line-height: 40px; font-weight: 600;
  letter-spacing: 0; text-shadow: none;
}
#section0 .wonit-company-explanation .main_sub_title {
  margin: 0; padding: 0; font-size: 20px; line-height: 34px;
  font-weight: 400; letter-spacing: 0; color: var(--color-black); text-shadow: none;
}
#section0 .wonit-company-explanation .wonit-company-actions {
  width: auto; margin: 16px 0 0; text-align: left;
}
@media (max-width: 960px) {
  #section0 .wonit-company-details { grid-template-columns: 1fr; gap: 24px; }
  #section0 .wonit-company-message { font-size: 24px; line-height: 34px; }
  #section0 .wonit-company-explanation .main_sub_title { font-size: 18px; line-height: 30px; }
}

/* Company link sits to the right of the top title. */
#section0 .wonit-company-heading { padding-right: 80px; }
#section0 .wonit-company-heading .wonit-company-actions {
  top: 50%; bottom: auto; transform: translateY(-50%);
}

/* Soft peripheral focus, preserving the original image colors. */
#section0 .wonit-company-image-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(to right, black, transparent 20%, transparent 80%, black);
  -webkit-mask-image: linear-gradient(to right, black, transparent 20%, transparent 80%, black);
}

/* Align the description block with the image's right edge. */
#section0 .wonit-company-explanation {
  width: fit-content; max-width: 100%; justify-self: end; text-align: left;
}
@media (max-width: 960px) {
  #section0 .wonit-company-explanation { width: 100%; justify-self: stretch; }
}

/* LG CNS wrapper proportions: wide hero, 1440px content, fluid minimum. */
:root {
  --content-max-width: 1440px;
  --content-gutter: 40px;
  --wonit-wide-max-width: 1920px;
}
#section-hero {
  --wonit-hero-max-w: 100%;
  --wonit-search-max-w: 100%;
}
#section-hero .wonit-hero-wrap {
  width: 100%;
  max-width: var(--wonit-wide-max-width);
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}
#section-hero .wonit-hero-card,
#section-hero .wonit-keyword-block { min-width: 0; }
#section3 .intro,
#section4 .intro {
  width: calc(100% - var(--content-gutter) * 2);
  max-width: var(--content-max-width);
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1440px) {
  :root { --content-gutter: 20px; }
}

/* Center the headline-to-button block between the card top and menu strip. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { padding-top: 0; }
  #section-hero .wonit-hero-grid {
    padding-top: 32px;
    padding-bottom: 32px;
    align-items: center;
  }
  #section-hero .wonit-hero-copy { align-self: center; }
  #section-hero .wonit-hero-copy .wonit-btn-pill { margin-top: auto; }
}

/* Search remains a single input, including while older JSPs are cached. */
#section-hero .wonit-kw-chips { display: none !important; }
#section-hero .wonit-kw-input::placeholder { color: var(--color-gray-400); opacity: 1; font-weight: 600; }

/* Desktop hero typography: larger copy with a lighter heading. */
@media (min-width: 1201px) {
  #section-hero .wonit-hero-copy h1 { font-size: 48px; line-height: 60px; font-weight: 600; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 20px; line-height: 32px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  #section-hero .wonit-hero-copy h1 { font-size: 44px; line-height: 54px; font-weight: 600; }
  #section-hero .wonit-hero-copy .wonit-lead { font-size: 18px; }
}

/* Align hero content and quick links to the reference card's inner grid. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { --hero-side-padding: clamp(48px, 5vw, 96px); padding-left: var(--hero-side-padding); padding-right: var(--hero-side-padding); }
  #section-hero .wonit-hero-copy { padding-left: 0; }
}
#section-hero .wonit-hero-strip {
  margin-left: 0; margin-right: 0; padding: 0 0 32px;
  gap: 24px; background: transparent; border: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#section-hero .wonit-strip-item,
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus {
  height: 104px; min-height: 104px; padding: 22px 28px 0 0;
  background: transparent; border: 0; border-top: 2px solid #cbd5e1;
  align-items: flex-start; justify-content: flex-start;
  transition: border-color .2s ease;
}
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus-visible { border-top-color: #2563eb; }
#section-hero .wonit-strip-item::after { display: none; }
#section-hero .wonit-strip-title { font-size: 20px; font-weight: 600; line-height: 28px; }
#section-hero .wonit-strip-item .meta { margin-top: 8px; color: #64748b; font-weight: 400; line-height: 20px; }
#section-hero .wonit-strip-item .wonit-strip-arrow { top: 25px; right: 0; color: #2563eb; }
@media (min-width: 961px) and (max-width: 1200px) {
  #section-hero .wonit-strip-title { font-size: 17px; }
  #section-hero .wonit-hero-strip { gap: 20px; }
}
@media (max-width: 960px) {
  #section-hero .wonit-hero-card { --hero-side-padding: 24px; padding-left: 24px; padding-right: 24px; }
  #section-hero .wonit-hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding-bottom: 24px; }
  #section-hero .wonit-strip-item { height: auto; min-height: 100px; padding: 16px 0 0; }
  #section-hero .wonit-strip-title { font-size: 16px; line-height: 24px; }
  #section-hero .wonit-strip-item .meta { font-size: 12px; }
  #section-hero .wonit-strip-arrow { display: none; }
}
#section-hero .wonit-hero-strip { background: var(--color-hero-bg); }

/* Indigo hero with synchronized carousel progress. */
#section-hero { --color-hero-bg: #eef2ff; }
#section-hero .wonit-strip-item { position: relative; border-top-color: #c7d2fe; }
#section-hero .wonit-strip-item.is-active .wonit-strip-title { color: #4338ca !important; }
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus-visible { border-top-color: #6366f1; }
#section-hero .wonit-strip-item .wonit-strip-arrow { color: #4f46e5; }
#section-hero .wonit-slide-progress {
  position: absolute; top: -2px; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, #818cf8, #4f46e5);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
#section-hero .is-autoplay-paused .wonit-slide-progress { animation-play-state: paused !important; }
@keyframes wonit-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  #section-hero .wonit-strip-item.is-active .wonit-slide-progress { animation: none !important; transform: scaleX(1); }
}
/* Reserve the desktop layout while the hero artwork is being redesigned. */
#section-hero .wonit-hero-visual { visibility: hidden; }
#section-hero .wonit-w-white-3d { display: none; }
@media (max-width: 960px) {
  #section-hero .wonit-hero-visual { display: none; }
}

/* Neutral labels and rails; only the active progress uses the gradient. */
#section-hero .wonit-strip-item,
#section-hero .wonit-strip-item:hover,
#section-hero .wonit-strip-item:focus-visible { border-top-color: #e2e2e8; }
#section-hero .wonit-strip-item .wonit-strip-title,
#section-hero .wonit-strip-item.is-active .wonit-strip-title { color: #000 !important; }
#section-hero .wonit-slide-progress { background: linear-gradient(90deg, var(--color-hero-progress-start), var(--color-hero-progress-end)); }
/* Softer lavender surface balances the purple-to-indigo progress rail. */
#section-hero { --color-hero-bg: #f1eff8; }

/* Match supporting copy to the headline and give the two a little more air. */
#section-hero .wonit-hero-copy h1,
#section-hero .wonit-hero-copy .wonit-lead,
#section-hero .wonit-hero-copy .wonit-lead * { color: #211a35 !important; }
#section-hero .wonit-hero-copy h1 { margin-bottom: 28px; }
/* Scale the hero CTA to match the larger heading and supporting copy. */
#section-hero .wonit-hero-copy .wonit-btn-pill {
  width: 168px; min-width: 168px; height: 56px; min-height: 56px;
  padding: 0 28px; font-size: 18px; line-height: 1; box-sizing: border-box;
}
@media (max-width: 960px) {
  #section-hero .wonit-hero-copy .wonit-btn-pill {
    width: 160px; min-width: 160px; height: 52px; min-height: 52px; font-size: 17px;
  }
}
/* Home sections share the wide 1920px shell and its side gutters. */
:root { --content-max-width: calc(1920px - var(--content-gutter) * 2); }
#section1.section_ai,
#section0.section_company,
#section2.section_system { padding-left: var(--content-gutter) !important; padding-right: var(--content-gutter) !important; }
#section1 .ai_box_gp { width: 100% !important; max-width: var(--content-max-width) !important; }
.wrap:has(#section-hero) .wonit-footer { padding-left: var(--content-gutter); padding-right: var(--content-gutter); }
.wrap:has(#section-hero) .wonit-footer-inner { max-width: var(--content-max-width); }
#section0.section, #section2.section { padding-left: var(--content-gutter) !important; padding-right: var(--content-gutter) !important; }

/* Native scrolling does not need the floating section dots. */
.wrap:has(#section-hero) #menu, .wrap:has(#section-hero) #fp-nav { display: none !important; }

/* Give the keyword search icon and text a little more presence. */
#section-hero .wonit-kw-input { font-size: 28px; }
#section-hero .wonit-kw-search-ico { width: 32px; height: 32px; flex: 0 0 32px; }
#section-hero .wonit-kw-search-ico svg { width: 32px; height: 32px; }
@media (max-width: 960px) {
  #section-hero .wonit-kw-input { font-size: 24px; }
  #section-hero .wonit-kw-search-ico { width: 28px; height: 28px; flex-basis: 28px; }
  #section-hero .wonit-kw-search-ico svg { width: 28px; height: 28px; }
}
/* More breathing room in the keyword search, with lighter type. */
#section-hero .wonit-kw-pill { padding-left: 40px; padding-right: 40px; }
#section-hero .wonit-kw-input-row { gap: 28px; }
#section-hero .wonit-kw-input { font-size: 26px; font-weight: 500; }
#section-hero .wonit-kw-input::placeholder { font-weight: 500; }
@media (max-width: 960px) {
  #section-hero .wonit-kw-pill { padding-left: 28px; padding-right: 28px; }
  #section-hero .wonit-kw-input-row { gap: 24px; }
  #section-hero .wonit-kw-input { font-size: 20px; }
}
#section-hero .wonit-kw-input { font-size: 20px; }

/* Slightly open the English quick-link captions. */
#section-hero .wonit-hero-strip .wonit-strip-item .meta { letter-spacing: 0.3px !important; }

#section-hero .wonit-kw-input { font-size: 24px; }

#section-hero .wonit-kw-input-row { gap: 20px; }

/* Vision: photographic title panels with supporting copy below. */
#section1.section_ai .ai_box_gp > .wonit-photo-card,
#section1.section_ai .ai_box_gp > .wonit-photo-card:hover {
  padding: 0 !important; min-height: 0 !important; background: transparent !important;
  border-radius: 0 !important; text-align: left; overflow: visible;
}
#section1 .wonit-photo-card .wonit-service-visual {
  position: relative; display: block; height: auto; aspect-ratio: 4 / 3;
  margin: 0; border-radius: 24px; overflow: hidden; background: #1e293b;
}
#section1 .wonit-photo-card .wonit-service-visual img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none;
  transition: transform .5s ease;
}
#section1 .wonit-photo-card:nth-child(1) img { object-position: 15% center; }
#section1 .wonit-photo-card:nth-child(2) img { object-position: 50% center; }
#section1 .wonit-photo-card:nth-child(3) img { object-position: 85% center; }
#section1 .wonit-photo-card .wonit-service-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); pointer-events: none;
}
#section1.section_ai .wonit-photo-card .ai_box_txt {
  position: absolute !important; left: 28px; bottom: 28px; z-index: 1;
  color: #fff !important; font-size: 28px !important; line-height: 36px;
}
#section1.section_ai .wonit-photo-card .ai_box_tit {
  margin: 20px 0 0; padding: 0; color: #211a35; font-size: 20px; line-height: 32px;
}
#section1 .wonit-photo-card:hover .wonit-service-visual img { transform: scale(1.035); }
#section1 .wonit-photo-card .wonit-service-card-link { border-radius: 24px; }
@media (max-width: 960px) {
  #section1 .wonit-photo-card .wonit-service-visual { aspect-ratio: 4 / 3; }
  #section1.section_ai .wonit-photo-card .ai_box_txt { left: 24px; bottom: 24px; font-size: 24px !important; }
  #section1.section_ai .wonit-photo-card .ai_box_tit { font-size: 18px; line-height: 28px; margin-top: 16px; }
}
#section1.section_ai .wonit-photo-card .ai_box_txt { top: auto !important; right: auto !important; bottom: 28px !important; }

/* Align the vision introduction and give photo captions more inset. */
#section1.section_ai .intro_ai { width: 100%; max-width: var(--content-max-width); margin-left: auto; margin-right: auto; text-align: left; }
#section1.section_ai .intro_ai .main_title,
#section1.section_ai .intro_ai h2,
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { text-align: left; }
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { max-width: none; margin-left: 0; margin-right: 0; }
#section1.section_ai .wonit-photo-card .ai_box_txt { left: 40px !important; bottom: 40px !important; }
@media (max-width: 960px) {
  #section1.section_ai .wonit-photo-card .ai_box_txt { left: 32px !important; bottom: 32px !important; }
}
/* Lower landscape panels keep the vision section light. */
#section1 .wonit-photo-card .wonit-service-visual { aspect-ratio: 16 / 9; }
#section1.section_ai .wonit-photo-card .ai_box_tit { margin-top: 18px; }

/* Center the vision introduction; place card labels beneath each photo. */
#section1.section_ai .intro_ai,
#section1.section_ai .intro_ai .main_title,
#section1.section_ai .intro_ai h2,
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { text-align: center; }
#section1 .wonit-photo-card .wonit-service-visual::after { display: none; }
#section1.section_ai .wonit-photo-card .ai_box_txt {
  position: static !important; left: auto !important; bottom: auto !important;
  margin: 24px 0 0 !important; color: #211a35 !important;
  font-size: 28px !important; line-height: 36px; text-align: left;
}
#section1.section_ai .wonit-photo-card .ai_box_tit { margin-top: 8px; }
@media (max-width: 960px) {
  #section1.section_ai .wonit-photo-card .ai_box_txt { margin-top: 20px !important; font-size: 24px !important; }
}
/* Keep the vision introduction and cards within a centered 1440px frame. */
#section1.section_ai .intro_ai,
#section1.section_ai .ai_box_gp { max-width: 1440px !important; margin-left: auto; margin-right: auto; }

/* Larger vision introduction on a white background. */
#section1.section_ai { background: #fff !important; }

#section1.section_ai .intro_ai h2.main_title { font-size: 56px !important; line-height: 70px; }
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { font-size: 24px !important; line-height: 38px !important; }
@media (max-width: 960px) {
  #section1.section_ai .intro_ai h2.main_title { font-size: 36px !important; line-height: 46px; }
  #section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { font-size: 20px !important; line-height: 32px !important; }
}

/* Vision follows the home shell, with portrait photos and existing spacing. */
#section1.section_ai { padding-left: var(--content-gutter) !important; padding-right: var(--content-gutter) !important; }
#section1.section_ai .intro_ai,
#section1.section_ai .ai_box_gp { max-width: var(--content-max-width) !important; }
#section1.section_ai .ai_box_gp { gap: 24px !important; }
#section1 .wonit-photo-card .wonit-service-visual { aspect-ratio: 4 / 5; }
@media (max-width: 960px) {
  #section1.section_ai .intro_ai { box-sizing: border-box; }

}


/* Give home sections a calmer rhythm while keeping the agreed horizontal grid. */
.fullpage > .section + .section { margin-top: 180px !important; }
.fullpage > #section-hero + #section1.section_ai { margin-top: 0 !important; padding-top: 48px !important; }
#section1.section_ai { padding-bottom: 0 !important; }
#section1 .wonit-photo-card .wonit-service-visual { aspect-ratio: 3 / 2; }
@media (max-width: 960px) {
  .fullpage > .section + .section { margin-top: 96px !important; }
  .fullpage > #section-hero + #section1.section_ai { padding-top: 40px !important; }
}


/* Slightly shorten the desktop hero and its space above the quick links. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { height: max(492px, calc(100svh - var(--wonit-header-offset, 90px) - 228px)); }
}


/* End the hero after the search instead of reserving an empty viewport. */
#section-hero.section { min-height: 0 !important; }


#section1.section_ai { height: auto !important; justify-content: flex-start !important; }


/* Service titles sit above the geometric artwork; descriptions stay below. */
#section1.section_ai .wonit-photo-card .ai_box_txt {
  position: absolute !important; top: 36px !important; left: 40px !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; color: #fff !important; z-index: 1;
}
#section1.section_ai .wonit-photo-card .ai_box_tit { margin-top: 20px; }
@media (max-width: 960px) {
  #section1.section_ai .wonit-photo-card .ai_box_txt { top: 24px !important; left: 24px !important; }
}


/* Remove the retired maintenance showcase, including cached page markup. */
#section3.section { display: none !important; }


/* Larger navigation chevrons, preserving the original stroke thickness. */
#section-hero .wonit-hero-nav svg { transform: scale(1.2); overflow: visible; }
#section-hero .wonit-hero-nav svg path { vector-effect: non-scaling-stroke; }


/* Optical adjustment for chevrons and a slightly deeper desktop copy inset. */
#section-hero .wonit-hero-nav { transform: translateY(calc(-50% + 14px)); }
@media (min-width: 961px) {
  #section-hero .wonit-hero-copy { padding-left: 16px; }
}

/* Keep legacy high-z-index section text beneath the sticky header. */
section.wrap > .fullpage { position: relative; z-index: 0; isolation: isolate; }

/* Satin WON sculpture in the desktop hero artwork slot. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual {
    visibility: visible; align-self: stretch; min-width: 0;
    background: url('../img/hero-won-natural-v9.png') left center / 100% auto no-repeat;
  }
}

/* Extend the flowing sculpture through the hero's outer crop. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { margin-right: calc(-1 * var(--hero-side-padding) - 48px); transform: translateY(24px); }
}

/* Blend the cropped W into a soft pool of light. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual {
    background-image: url('../img/hero-won-natural-v9.png'), radial-gradient(ellipse at 56% 54%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.42) 32%, rgba(255,255,255,0) 70%);
    background-size: 100% auto, 100% 100%;
    background-position: left center, center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
  }
}

/* A complete rounded W end, brighter porcelain and pure white ambient glow. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual {
    -webkit-mask-image: none; mask-image: none;
    background-image: url('../img/hero-won-natural-v9.png'), radial-gradient(ellipse at 56% 54%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 72%);
  }
}

/* Show the WON sculpture only on the company introduction slide. */
#section-hero .wonit-hero-card:not(:has(.wonit-strip-item:first-child.is-active)) .wonit-hero-visual { visibility: hidden; }

/* Larger artwork, anchored independently of copy and carousel motion. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { background-size: 115% auto, 100% 100%; background-position: left center, center; }
}

/* Anchor artwork to the midpoint above the four divider lines. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual {
    position: absolute; left: 50%; right: calc(-1 * var(--hero-side-padding) - 48px);
    top: var(--hero-art-center, 50%); height: var(--hero-art-height, 100%);
    margin: 0; max-height: none; transform: translateY(-50%);
    background-size: 130% auto, 100% 100%; background-position: left center, center;
    pointer-events: none;
  }
}

/* Move the artwork left without changing its size or vertical anchor. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { left: calc(50% - 48px); right: calc(-1 * var(--hero-side-padding)); }
}

/* Reduce sculpture size by 15% and shift its fixed frame right by 32px. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-visual { left: calc(50% - 16px); right: calc(-1 * var(--hero-side-padding) - 32px); background-size: 110.5% auto, 100% 100%; }
}

/* System services: three image-and-copy rows within the home grid. */
#section2.section { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#section2 .wonit-system-heading { text-align: left; margin-bottom: 48px; }
#section2 .wonit-system-rows { width: 100%; max-width: var(--content-max-width); margin: 0 auto; display: grid; gap: 24px; }
#section2 .wonit-system-row { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: clamp(32px,4vw,80px); padding: 28px; border-radius: 32px; background: #f7f7fa; text-align: left; }
#section2 .wonit-system-row-image { aspect-ratio: 16 / 9; border-radius: 22px; background: #f1eff8; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section2 .wonit-system-row-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#section2 .wonit-system-row-copy { padding: 16px 32px 16px 0; }
#section2 .wonit-system-row-copy h3 { margin: 0 0 20px; font-size: 32px; line-height: 44px; font-weight: 600; color: #211a35; }
#section2 .wonit-system-row-copy p { margin: 0; max-width: 640px; font-size: 20px; line-height: 34px; font-weight: 400; color: #514a62; }
#section2 .wonit-system-row-copy a { display: inline-flex; align-items: center; gap: 20px; margin-top: 28px; font-size: 16px; line-height: 26px; font-weight: 600; color: #211a35; text-decoration: none; }
#section2 .wonit-system-row-copy a span { font-size: 24px; }
@media(max-width:960px) {
  #section2 .wonit-system-heading { margin-bottom: 32px; }
  #section2 .wonit-system-row { grid-template-columns: 1fr; gap: 24px; padding: 20px; border-radius: 24px; }
  #section2 .wonit-system-row-copy { padding: 0 4px 12px; }
  #section2 .wonit-system-row-copy h3 { font-size: 26px; line-height: 36px; margin-bottom: 12px; }
  #section2 .wonit-system-row-copy p { font-size: 18px; line-height: 30px; }
}
/* Open image-and-copy rows without nested card surfaces or detail links. */
#section2 .wonit-system-row { background: transparent; padding: 0; border-radius: 0; }
#section2 .wonit-system-row-image { background: transparent; border-radius: 0; }
#section2 .wonit-system-row-copy a { display: none; }
#section2 .wonit-system-rows { gap: 48px; }
@media(max-width:960px) { #section2 .wonit-system-rows { gap: 40px; } }
/* Focus the supplied network image in the first vision card. */
#section1 .ai_box_gp > div:first-child .wonit-service-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; transform: scale(1); }
/* Keep the flowing blue data lines in focus on the ERP vision card. */
#section1 .ai_box_gp > div:nth-child(2) .wonit-service-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 100%; transform: translateY(-16px) scale(1.10); }
#section1 .ai_box_gp > div:first-child .wonit-service-visual { background: #000; }

#section1 .ai_box_gp > div:first-child .wonit-service-visual img { mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }

/* Preserve crisp geometric edges without fading. */
#section1 .ai_box_gp > div:first-child .wonit-service-visual img { mask-image: none; filter: none; }

/* Full-width system section with a centered 1440px card grid. */
#section2.section { width: 100%; max-width: none; box-sizing: border-box; background: #f1f2f5 !important; padding: 100px var(--content-gutter) !important; }
#section2 .wonit-system-heading, #section2 .wonit-system-rows { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }
#section2 .wonit-system-rows { gap: 24px; }
#section2 .wonit-system-row { background: #fff; padding: 32px; border-radius: 28px; grid-template-columns: 38% 1fr; gap: 64px; }
#section2 .wonit-system-row-image { border-radius: 18px; }
#section2 .wonit-system-row-copy { padding: 16px 24px 16px 0; }
#section2 .wonit-system-row-copy p { word-break: keep-all; }
@media (max-width: 960px) {
  #section2.section { padding: 64px var(--content-gutter) !important; }
  #section2 .wonit-system-row { padding: 24px; grid-template-columns: 1fr; gap: 24px; border-radius: 24px; }
  #section2 .wonit-system-row-copy { padding: 0 0 8px; }
}
/* Fill the first vision panel without extra zoom; gently enlarge on hover. */
#section1 .ai_box_gp > div:first-child .wonit-service-visual img { object-position: 50% 55%; transform: scale(1); transition: transform .6s ease; mask-image: none; filter: none; }
#section1 .ai_box_gp > div:first-child:hover .wonit-service-visual img { transform: scale(1.035); }
/* Center the light ERP cube and retain gentle hover zoom. */
#section1 .ai_box_gp > div:nth-child(2) .wonit-service-visual img { object-position: 50% 50%; transform: scale(1); filter: none; transition: transform .6s ease; }
#section1 .ai_box_gp > div:nth-child(2):hover .wonit-service-visual img { transform: scale(1.035); }
#section1.section_ai .wonit-photo-card:nth-child(2) .ai_box_txt { color: #211a35 !important; }
/* Preserve vision image frames as black placeholders. */
#section1 .wonit-photo-card .wonit-service-visual { background: #000 !important; }
#section1 .wonit-photo-card .wonit-service-visual img { visibility: hidden !important; }
#section1.section_ai .wonit-photo-card .ai_box_txt { color: #fff !important; }
#section1.section_ai .wonit-photo-card:nth-child(2) .ai_box_txt { color: #fff !important; }

/* Light gray vision placeholders with readable dark titles. */
#section1 .wonit-photo-card .wonit-service-visual { background: #f1f2f5 !important; }
#section1.section_ai .wonit-photo-card .ai_box_txt,
#section1.section_ai .wonit-photo-card:nth-child(2) .ai_box_txt { color: #211a35 !important; }
@media (min-width: 961px) { #section-hero .wonit-hero-strip { gap: 40px; } }

/* Keep photo frames ready while removing temporary system objects. */
#section2 .wonit-system-row-image { background: #f1f2f5; }
#section2 .wonit-system-row-image img { visibility: hidden; }
/* Give the desktop hero copy more breathing room above and below. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card {
    height: max(540px, calc(100svh - var(--wonit-header-offset, 90px) - 180px));
  }
  #section-hero .wonit-hero-grid { padding-top: 56px; padding-bottom: 48px; }
}

/* Reference lavender for the main visual card. */
#section-hero { --color-hero-bg: var(--color-hero-reference-blue); }

/* Increase spacing between the hero description and its action. */
#section-hero { --hero-copy-action-gap: 40px; }
#section-hero .wonit-hero-copy .wonit-lead { margin-bottom: var(--hero-copy-action-gap); }

/* Desktop carousel arrows sit slightly farther from the card edges. */
@media (min-width: 961px) {
  #section-hero { --hero-nav-inset: 28px; }
  #section-hero .wonit-hero-nav.is-prev { left: var(--hero-nav-inset); }
  #section-hero .wonit-hero-nav.is-next { right: var(--hero-nav-inset); }
}

/* Focus the first Vision photo on the blue cube cluster. */
#section1 .ai_box_gp > div:first-child .wonit-service-visual img {
  visibility: visible !important; object-fit: cover; object-position: 64% 50%;
  transform: translate(26%, 85%) scale(3.4); transform-origin: 70% 65%; filter: none;
}
#section1 .ai_box_gp > div:first-child:hover .wonit-service-visual img { transform: translate(26%, 85%) scale(3.44); }

/* Constrain content below the hero independently of the hero grid. */
#section1, #section0, #section2, #section3, #section4 {
  --content-max-width: 1440px;
}
@media (min-width: 961px) {
  #section1, #section0, #section2, #section3, #section4 { --content-gutter: 40px; }
}
#section1.section_ai .intro_ai,
#section1.section_ai .ai_box_gp,
#section0 .wonit-company-heading,
#section0 .wonit-company-image-frame,
#section0 .wonit-company-details,
#section2 .wonit-system-heading,
#section2 .wonit-system-rows {
  max-width: var(--content-max-width) !important;
  margin-left: auto; margin-right: auto;
}

/* Vision: alternating image-and-copy rows on the 1440px grid. */
#section1.section_ai .intro_ai { text-align: center; margin-bottom: 64px; }
#section1.section_ai .intro_ai p.sub_title.wonit-vision-desc { text-align: center; }
#section1.section_ai .ai_box_gp { display: grid !important; grid-template-columns: 1fr !important; gap: 96px !important; }
#section1.section_ai .ai_box_gp > .wonit-vision-row {
  display: grid !important; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 80px; width: 100% !important; float: none; margin: 0 !important;
}
#section1 .wonit-vision-row .wonit-service-visual { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 4 / 3; border-radius: 32px; }
#section1 .wonit-vision-row-copy { grid-column: 1; grid-row: 1; padding: 32px 0; }
#section1 .wonit-vision-row:nth-child(2) .wonit-service-visual { grid-column: 1; }
#section1 .wonit-vision-row:nth-child(2) .wonit-vision-row-copy { grid-column: 2; }
#section1 .wonit-vision-row .wonit-service-visual::after { display: none; }
#section1.section_ai .wonit-vision-row .ai_box_txt {
  position: static !important; margin: 0 !important; padding: 0 !important;
  color: var(--color-black) !important; font-size: 36px !important; line-height: 48px;
  font-weight: 600; letter-spacing: 0; text-align: left;
}
#section1.section_ai .wonit-vision-row .ai_box_tit {
  margin: 24px 0 0 !important; padding: 0 !important; color: var(--color-black);
  font-size: 20px; line-height: 34px; font-weight: 400; text-align: left;
}
#section1 .wonit-vision-row-link { display: inline-flex; gap: 16px; align-items: center; margin-top: 28px; color: var(--color-black); font-size: 16px; font-weight: 600; }
#section1 .wonit-vision-row-link span { font-size: 24px; }
@media (max-width: 960px) {
  #section1.section_ai .ai_box_gp { gap: 64px !important; }
  #section1.section_ai .ai_box_gp > .wonit-vision-row { grid-template-columns: 1fr; gap: 24px; }
  #section1 .wonit-vision-row .wonit-service-visual,
  #section1 .wonit-vision-row:nth-child(2) .wonit-service-visual { grid-column: 1; grid-row: 1; }
  #section1 .wonit-vision-row .wonit-vision-row-copy,
  #section1 .wonit-vision-row:nth-child(2) .wonit-vision-row-copy { grid-column: 1; grid-row: 2; padding: 0; }
  #section1.section_ai .wonit-vision-row .ai_box_txt { font-size: 24px !important; line-height: 34px; }
}

/* Vision image frames use the requested 590 × 480 desktop dimensions. */
#section1 { --vision-image-width: 590px; --vision-image-height: 480px; }
#section1 .wonit-vision-row .wonit-service-visual {
  width: min(100%, var(--vision-image-width));
  height: var(--vision-image-height); aspect-ratio: auto; justify-self: end;
}
#section1 .wonit-vision-row:nth-child(2) .wonit-service-visual { justify-self: start; }
@media (max-width: 960px) {
  #section1 .wonit-vision-row .wonit-service-visual {
    width: 100%; max-width: var(--vision-image-width); height: auto;
    aspect-ratio: 590 / 480; justify-self: center;
  }
  #section1 .wonit-vision-row:nth-child(2) .wonit-service-visual { justify-self: center; }
}

/* One shared 1440px grid for the header, hero and page content. */
:root { --content-max-width: 1440px; }
@media (min-width: 961px) {
  :root { --content-gutter: 40px; }
  #section-hero .wonit-hero-wrap {
    width: calc(100% - 80px); max-width: var(--content-max-width);
    padding-left: 0; padding-right: 0;
  }
}

/* Enforce the homepage header grid after all shared header styles. */
@media (min-width: 961px) {
  .wrap:has(#section-hero) header.site-header .header-inner {
    width: calc(100% - 80px) !important;
    max-width: 1440px !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: auto !important; margin-right: auto !important;
    box-sizing: border-box;
  }
}

#section1 .wonit-vision-row-label {
  margin: 0 0 20px; padding: 0; font-size: 14px; line-height: 22px;
  font-weight: 500; letter-spacing: 0; color: var(--color-gray-600);
}

/* Restrained selection rail and boxed Vision actions. */
#section-hero .wonit-slide-progress { background: var(--color-hero-progress); }
#section1 .wonit-vision-row-label { color: var(--color-vision-label); }
#section1 .wonit-vision-row-link {
  min-height: 40px; padding: 8px 16px; box-sizing: border-box;
  border: 1px solid var(--color-gray-200); border-radius: 8px;
  background: var(--color-gray-50); gap: 10px; font-size: 14px; line-height: 22px;
  transition: background-color .2s, border-color .2s;
}
#section1 .wonit-vision-row-link span { font-size: 20px; line-height: 22px; }
#section1 .wonit-vision-row-link:hover,
#section1 .wonit-vision-row-link:focus-visible {
  background: var(--color-blue-50); border-color: var(--color-blue-300);
}

/* Desktop spacing is determined by content, independently of viewport height. */
@media (min-width: 961px) {
  #section-hero {
    --hero-copy-top-space: 56px;
    --hero-copy-bottom-space: 48px;
  }
  #section-hero .wonit-hero-card {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding-top: 0; flex: 0 0 auto;
  }
  #section-hero .wonit-hero-grid {
    flex: 0 0 auto; min-height: 0;
    padding-top: var(--hero-copy-top-space);
    padding-bottom: var(--hero-copy-bottom-space);
  }
  #section-hero .wonit-hero-copy { height: auto !important; align-self: start; }
  #section-hero .wonit-hero-copy .wonit-btn-pill { margin-top: 0 !important; }
}

/* Keep the homepage header on the same 1440px grid as every subpage. */
@media (min-width: 961px) {
  .wrap:has(#section-hero) header.site-header .header-inner {
    width: calc(100% - 80px) !important;
    max-width: 1440px !important;
  }
  #section-hero .wonit-hero-wrap {
    width: calc(100% - 80px); max-width: none;
  }
  #section-hero .wonit-hero-card { max-width: none; }
  #section-hero .wonit-keyword-block {
    width: 100%; max-width: none; margin-left: auto; margin-right: auto;
  }
}

/* Inset rounded quick-menu panel, matching the requested reference. */
#section-hero { --color-hero-bg: var(--color-hero-surface); }
#section-hero .wonit-hero-strip {
  margin: 0 0 40px !important; width: 100%; border-radius: 32px;
  background: var(--color-quick-menu-surface); overflow: hidden;
  gap: 0 !important; padding: 0; flex-shrink: 0;
}
#section-hero .wonit-hero-strip .wonit-strip-item {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  height: 160px; min-height: 160px; padding: 32px 40px;
  border: 0; background: transparent; box-sizing: border-box;
  color: var(--color-black); text-decoration: none;
}
#section-hero .wonit-hero-strip .wonit-strip-title {
  font-size: 22px; line-height: 32px; font-weight: 600;
  color: var(--color-black) !important; letter-spacing: 0;
}
#section-hero .wonit-hero-strip .meta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--color-black); letter-spacing: 0 !important;
}
#section-hero .wonit-hero-strip .wonit-strip-item::after {
  top: 32px; bottom: 32px; height: auto; background: rgba(0,0,0,.1);
}
#section-hero .wonit-hero-strip .wonit-strip-item:hover,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible { background: var(--color-quick-menu-hover); }
@media (max-width: 1200px) {
  #section-hero .wonit-hero-strip .wonit-strip-item { padding: 24px; }
  #section-hero .wonit-hero-strip .wonit-strip-title { font-size: 18px; line-height: 28px; }
}
@media (max-width: 960px) {
  #section-hero .wonit-hero-strip { margin-bottom: 24px !important; border-radius: 24px; }
  #section-hero .wonit-hero-strip .wonit-strip-item { height: 160px; min-height: 160px; padding: 20px; }
  #section-hero .wonit-hero-strip .meta { font-size: 14px; }
}
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after {
  content: ''; display: block; position: absolute; right: 0; width: 1px;
}
#section-hero .wonit-hero-strip .wonit-strip-item:hover::after,
#section-hero .wonit-hero-strip .wonit-strip-item:has(+ .wonit-strip-item:hover)::after { opacity: 0; }

/* Separate hero and quick-panel insets, following the reference. */
#section-hero .wonit-hero-nav { display: none !important; }
@media (min-width: 961px) {
  #section-hero {
    --hero-side-padding: 40px;
    --hero-text-inset: 56px;
    --quick-item-inset: 40px;
  }
  #section-hero .wonit-hero-card { padding-left: var(--hero-side-padding); padding-right: var(--hero-side-padding); }
  #section-hero .wonit-hero-copy { padding-left: var(--hero-text-inset); }
  #section-hero .wonit-hero-strip .wonit-strip-item { padding-left: var(--quick-item-inset); padding-right: var(--quick-item-inset); }
}
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after {
  top: 40px; bottom: 40px; height: auto; right: 0; width: 1px;
  background: color-mix(in srgb, var(--color-black) 12%, transparent);
  opacity: 1; display: block;
}
#section-hero .wonit-hero-strip .wonit-strip-item:hover::after,
#section-hero .wonit-hero-strip .wonit-strip-item:has(+ .wonit-strip-item:hover)::after { opacity: 1; }
#section-hero .wonit-hero-strip .meta svg {
  opacity: 0; transform: translate(-3px, 3px); transition: opacity .18s, transform .18s;
}
#section-hero .wonit-hero-strip .wonit-strip-item:hover .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible .meta svg { opacity: 1; transform: none; }
@media (max-width: 960px) {
  #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(2)::after { display: none; }
}

/* Reference hero: 40px shell inset plus 40px quick-panel inset. */
@media (min-width: 961px) {
  #section-hero .wonit-hero-card { --hero-side-padding: 40px; padding-left: 40px; padding-right: 40px; }
}

/* System expertise: introduction and three fixed cards on a photo backdrop. */
#section2.section {
  background: linear-gradient(90deg, rgba(16,27,48,.96), rgba(16,27,48,.82)), url('../img/company-server-room-original.jpg') center / cover no-repeat !important;
  padding: 96px var(--content-gutter) !important;
}
#section2 .wonit-system-showcase { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 56px; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; }
#section2 .wonit-system-heading { margin: 0; text-align: left; color: var(--color-white); }
#section2 .wonit-system-heading h2 { color: var(--color-white); font-size: 44px; line-height: 56px; }
#section2 .wonit-system-heading p { color: var(--color-white); font-size: 18px; line-height: 30px; margin-top: 24px; }
#section2 .wonit-system-rows { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 0; }
#section2 .wonit-system-row { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 24px; overflow: hidden; background: var(--color-system-showcase-panel); align-items: stretch; }
#section2 .wonit-system-row-image { height: 240px; aspect-ratio: auto; border-radius: 0; background: rgba(255,255,255,.12); flex-shrink: 0; }
#section2 .wonit-system-row-copy { padding: 24px; }
#section2 .wonit-system-row-copy h3 { color: var(--color-white); font-size: 22px; line-height: 32px; margin-bottom: 12px; }
#section2 .wonit-system-row-copy p { color: rgba(255,255,255,.8); font-size: 15px; line-height: 25px; }
#section2 .wonit-system-row-copy p br { display: none; }
@media (max-width: 1200px) {
  #section2 .wonit-system-showcase { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  #section2 .wonit-system-rows { grid-template-columns: 1fr; }
  #section2.section { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Quick links: centered separators and an arrow on the headline row. */
#section-hero .wonit-hero-strip .wonit-strip-item { position: relative; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after {
  top: 50%; bottom: auto; height: 100px; transform: translateY(-50%);
  right: 0; width: 1px; margin: 0;
}
#section-hero .wonit-hero-strip .meta svg {
  position: absolute; top: 36px; right: 32px; width: 24px; height: 24px;
}
#section-hero .wonit-hero-strip .wonit-strip-title { padding-right: 32px; }
#section-hero .wonit-hero-strip .wonit-strip-item:hover,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible { background: transparent !important; }
@media (max-width: 1200px) {
  #section-hero .wonit-hero-strip .meta svg { top: 34px; right: 20px; }
}
@media (max-width: 960px) {
  #section-hero .wonit-hero-strip .meta svg { top: 28px; right: 16px; }
}

/* Align hero title, description and CTA with the first quick-link text. */
@media (min-width: 961px) {
  #section-hero { --hero-text-inset: 40px; }
  #section-hero .wonit-hero-copy { padding-left: var(--hero-text-inset); }
}

/* Softer quick-menu separators. */
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after {
  background: color-mix(in srgb, var(--color-black) 6%, transparent);
}

#section-hero .wonit-hero-strip .meta svg {
  top: var(--quick-arrow-top, 40px); transform: translateX(-3px);
}
#section-hero .wonit-hero-strip .wonit-strip-item:hover .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible .meta svg { transform: none; }

/* Vision actions: thin black outline and pill silhouette. */
#section1 .wonit-vision-row-link {
  min-height: 56px; padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--color-black); background: transparent;
  color: var(--color-black); gap: 12px; font-size: 18px; line-height: 26px; font-weight: 600;
}
#section1 .wonit-vision-row-link svg { flex-shrink: 0; }
#section1 .wonit-vision-row-link:hover,
#section1 .wonit-vision-row-link:focus-visible {
  background: var(--color-gray-100); border-color: var(--color-black);
}

/* Compact inline Vision actions with no decorative hover change. */
#section1 .wonit-vision-row-link {
  min-height: 44px; padding: 10px 18px; gap: 8px;
  font-size: 16px; line-height: 22px; transition: none;
}
#section1 .wonit-vision-row-link svg { width: 18px; height: 18px; }
#section1 .wonit-vision-row-link:hover,
#section1 .wonit-vision-row-link:focus-visible {
  background: transparent; border-color: var(--color-black); color: var(--color-black);
}

/* Larger Vision headlines and a more comfortable action inset. */
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-row .ai_box_txt { font-size: 40px !important; line-height: 52px; }
}
#section1 .wonit-vision-row-link { padding-left: 24px; }

#section1 .wonit-vision-row-label { font-size: 16px; font-weight: 600; }

#section1 .wonit-vision-row-label { margin-bottom: 20px; }
#section1 .wonit-vision-row-link { margin-top: 48px; }

#section1 .wonit-vision-row-copy,
#section1 .wonit-vision-row-link { letter-spacing: 0; }

/* Landscape Vision imagery balances the two-column editorial copy. */
#section1 { --vision-image-width: 640px; --vision-image-height: 420px; }
#section1 .wonit-vision-row .wonit-service-visual {
  width: min(100%, var(--vision-image-width)); height: auto;
  aspect-ratio: 32 / 21;
}
@media (max-width: 960px) {
  #section1 .wonit-vision-row .wonit-service-visual { aspect-ratio: 32 / 21; }
}

/* First Vision image: flowing glass, without the previous cube crop. */
#section1 .ai_box_gp > div:first-child .wonit-service-visual img {
  visibility: visible !important; object-fit: cover; object-position: center;
  transform: none; transform-origin: center; filter: none;
}
#section1 .ai_box_gp > div:first-child:hover .wonit-service-visual img { transform: scale(1.035); }

/* ERP glass blocks: close crop, offset toward the lower left. */
#section1 .ai_box_gp > div:nth-child(2) .wonit-service-visual img {
  visibility: visible !important; object-fit: cover; object-position: 58% 46%;
  transform: translate(-6%, 8%) scale(1.48); transform-origin: 50% 60%; filter: none;
}
#section1 .ai_box_gp > div:nth-child(2):hover .wonit-service-visual img { transform: translate(-6%, 8%) scale(1.515); }

#section1 .wonit-vision-row-link {
  height: 52px; min-height: 52px; padding: 14px 28px;
}

/* Vision typography and 16:9 service-photo proportions. */
#section1.section_ai .intro_ai h2.main_title { letter-spacing: 1px !important; }
#section1 { --vision-image-width: 640px; --vision-image-height: 360px; }
#section1 .wonit-vision-row .wonit-service-visual { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 960px) {
  #section1 .wonit-vision-row .wonit-service-visual { aspect-ratio: 16 / 9; }
}

#section1 .wonit-vision-row-link {
  width: 44px; height: 44px; min-height: 44px; padding: 8px;
  justify-content: center; border: 0; border-radius: 0; background: transparent;
  margin-top: 48px;
}
#section1 .wonit-vision-row-link svg { width: 28px; height: 28px; }

/* Reference proportions: two 681px columns with a 78px gap at 1440px. */
#section1 { --vision-image-width: 681px; }
@media (min-width: 961px) {
  #section1.section_ai .ai_box_gp > .wonit-vision-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 78px; align-items: start;
  }
  #section1 .wonit-vision-row-copy { padding-top: 0; padding-bottom: 0; }
}
#section1 .wonit-vision-row .wonit-service-visual {
  width: 100%; max-width: var(--vision-image-width); aspect-ratio: 16 / 9;
}

/* Lock all Vision copy blocks to the top edge of their image frames. */
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-row .wonit-vision-row-copy {
    align-self: start; margin-top: 0; padding-top: 0 !important;
  }
  #section1.section_ai .wonit-vision-row .ai_box_txt { margin-top: 0 !important; }
}

/* Vision follows the reference's fluid half-width image/text policy. */
#section1.section_ai .ai_box_gp { gap: 64px !important; }
#section1.section_ai .ai_box_gp > .wonit-vision-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: start;
}
#section1 .wonit-vision-row .wonit-service-visual {
  width: 100%; max-width: none; height: auto;
  aspect-ratio: 16 / 9; border-radius: 32px;
}
#section1.section_ai .wonit-vision-row .wonit-vision-row-copy {
  min-width: 0; box-sizing: border-box; padding: 0 72px !important;
  margin: 0; align-self: start;
}
@media (max-width: 960px) {
  #section1.section_ai .ai_box_gp > .wonit-vision-row { grid-template-columns: 1fr; gap: 24px; }
  #section1.section_ai .wonit-vision-row .wonit-vision-row-copy { padding: 0 !important; }
}

/* Outer text edges align with image edges; inset only the facing edge. */
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-row:nth-child(odd) .wonit-vision-row-copy { padding: 0 72px 0 0 !important; }
  #section1.section_ai .wonit-vision-row:nth-child(even) .wonit-vision-row-copy { padding: 0 0 0 72px !important; }
}

/* More separation between Vision rows and the new commerce photograph. */
#section1.section_ai .ai_box_gp { gap: 96px !important; }
#section1 .ai_box_gp > div:nth-child(3) .wonit-service-visual img {
  visibility: visible !important; object-fit: cover; object-position: center;
  transform: none; filter: none;
}
#section1 .ai_box_gp > div:nth-child(3):hover .wonit-service-visual img { transform: scale(1.035); }

/* System services: centered introduction followed by three editorial cards. */
#section2.section {
  background: var(--color-white) !important;
  padding: 0 var(--content-gutter) !important;
}
#section2 .wonit-system-showcase {
  display: block; width: 100%; max-width: 1440px; margin: 0 auto;
}
#section2 .wonit-system-heading { text-align: center; margin: 0 auto 64px; }
#section2 .wonit-system-heading h2 { color: var(--color-black); font-size: 48px; line-height: 60px; }
#section2 .wonit-system-heading p { color: var(--color-black); font-size: 20px; line-height: 34px; margin-top: 16px; }
#section2 .wonit-system-rows { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
#section2 .wonit-system-row { background: transparent; border-radius: 0; overflow: visible; }
#section2 .wonit-system-row-image {
  height: auto; aspect-ratio: 16 / 9; border-radius: 32px;
  background: var(--color-gray-100); overflow: hidden;
}
#section2 .wonit-system-row-copy { padding: 20px 0 0; }
#section2 .wonit-system-row-copy h3 { color: var(--color-black); font-size: 24px; line-height: 34px; margin: 0 0 12px; font-weight: 600; letter-spacing: 0; }
#section2 .wonit-system-row-copy p { color: var(--color-black); font-size: 18px; line-height: 30px; font-weight: 400; letter-spacing: 0; }
@media (max-width: 960px) {
  #section2 .wonit-system-heading h2 { font-size: 32px; line-height: 42px; }
  #section2 .wonit-system-heading { margin-bottom: 40px; }
}
@media (max-width: 700px) {
  #section2 .wonit-system-rows { grid-template-columns: 1fr; gap: 40px; }
}

/* Vision: three image-filled cards with hover descriptions. */
#section1.section_ai .ai_box_gp { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 24px !important; }
#section1.section_ai .ai_box_gp > .wonit-vision-row {
  position: relative; display: block !important; height: 520px;
  overflow: hidden; border-radius: 32px !important;
}
#section1 .wonit-vision-row .wonit-service-visual {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; aspect-ratio: auto; border-radius: 0;
}
#section1 .wonit-vision-row .wonit-service-visual::after {
  display: block; content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.72) 100%);
}
#section1.section_ai .wonit-vision-row .wonit-vision-row-copy {
  position: absolute; left: 32px; right: 32px; bottom: 36px;
  padding: 0 !important; z-index: 2; pointer-events: none;
}
#section1.section_ai .wonit-vision-row .ai_box_txt { color: var(--color-white) !important; font-size: 32px !important; line-height: 44px; }
#section1.section_ai .wonit-vision-row .ai_box_tit {
  color: var(--color-white); font-size: 18px; line-height: 30px;
  max-height: 0; margin-top: 0 !important; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
}
#section1 .wonit-vision-row:hover .ai_box_tit,
#section1 .wonit-vision-row:focus-within .ai_box_tit {
  max-height: 240px; opacity: 1; margin-top: 20px !important;
}
#section1 .wonit-vision-card-link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
#section1 .wonit-vision-card-link:focus-visible { outline: 2px solid var(--color-white); outline-offset: -6px; }
#section1 .wonit-vision-card-arrow { position: absolute; top: 32px; right: 32px; z-index: 3; color: var(--color-white); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
#section1 .wonit-vision-row:hover .wonit-vision-card-arrow,
#section1 .wonit-vision-row:focus-within .wonit-vision-card-arrow { opacity: 1; transform: none; }
#section1 .ai_box_gp > div:nth-child(2) .wonit-service-visual img { object-position: 50% 55%; transform: scale(1.15); }
#section1 .ai_box_gp > div:nth-child(2):hover .wonit-service-visual img { transform: scale(1.185); }
@media (max-width: 960px) {
  #section1.section_ai .ai_box_gp { grid-template-columns: 1fr !important; }
  #section1.section_ai .ai_box_gp > .wonit-vision-row { height: 480px; }
}
@media (hover: none) {
  #section1.section_ai .wonit-vision-row .ai_box_tit { max-height: 240px; opacity: 1; margin-top: 20px !important; }
  #section1 .wonit-vision-card-arrow { opacity: 1; transform: none; }
}
#section1.section_ai .ai_box_gp > .wonit-vision-row { height: 520px !important; }
@media (max-width: 960px) {
  #section1.section_ai .ai_box_gp > .wonit-vision-row { height: 480px !important; }
}
#section1.section_ai .wonit-vision-row:nth-child(n) .wonit-vision-row-copy { padding: 0 !important; }
#section1.section_ai .wonit-vision-row:nth-child(n) .ai_box_txt,
#section1.section_ai .wonit-vision-row:nth-child(n) .ai_box_tit { color: var(--color-white) !important; }

/* Match System section introduction to Vision typography. */
#section2 .wonit-system-heading { text-align: center; margin-bottom: 64px; }
#section2 .wonit-system-heading h2 {
  margin: 0; font-size: 44px; line-height: 56px; font-weight: 700;
  letter-spacing: 1px; color: var(--color-black); text-shadow: none;
}
#section2 .wonit-system-heading p {
  margin: 0; padding-top: 20px; padding-bottom: 20px;
  font-size: 24px; line-height: 38px; font-weight: 400;
  letter-spacing: 0; color: var(--color-black); text-shadow: none;
}
@media (max-width: 960px) {
  #section2 .wonit-system-heading h2 { font-size: 36px; line-height: 46px; }
  #section2 .wonit-system-heading p { font-size: 20px; line-height: 32px; }
}

/* Wide Vision backdrop: introduction left, three hover cards right. */
#section1.section_ai { padding-left: 40px !important; padding-right: 40px !important; }
#section1 .wonit-vision-panel {
  width: 100%; box-sizing: border-box; padding: 80px 40px;
  background: var(--color-vision-panel-bg); border-radius: 40px;
  display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,2fr); gap: 56px; align-items: center;
}
#section1.section_ai .wonit-vision-panel .intro_ai { margin: 0; text-align: left; width: 100%; max-width: none; }
#section1.section_ai .wonit-vision-panel .intro_ai p.sub_title.wonit-vision-desc { text-align: left; padding-bottom: 0 !important; }
#section1.section_ai .wonit-vision-panel .ai_box_gp { width: 100% !important; max-width: none !important; margin: 0; gap: 20px !important; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row { height: 480px !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row .ai_box_txt { font-size: 24px !important; line-height: 34px; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row .ai_box_tit { font-size: 16px; line-height: 28px; }
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-row-copy { left: 24px; right: 24px; bottom: 28px; }
@media (max-width: 1200px) {
  #section1 .wonit-vision-panel { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 960px) {
  #section1.section_ai { padding-left: 20px !important; padding-right: 20px !important; }
  #section1 .wonit-vision-panel { padding: 40px 24px; border-radius: 24px; }
}

/* System service list follows the reference's three-column news grid. */
#section2 .wonit-system-heading { margin-bottom: 80px; }
#section2 .wonit-system-rows {
  width: 100%; max-width: 1440px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px;
}
#section2 .wonit-system-row-image {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 32px;
  box-sizing: border-box; border: 1px solid transparent;
}
#section2 .wonit-system-row-image img { width: 100%; height: 100%; object-fit: cover; }
#section2 .wonit-system-row-copy { padding: 20px 0 0; }
#section2 .wonit-system-row-copy h3 { font-size: 24px; line-height: 34px; font-weight: 600; }
@media (max-width: 700px) {
  #section2 .wonit-system-rows { grid-template-columns: 1fr; gap: 40px; }
  #section2 .wonit-system-heading { margin-bottom: 48px; }
}

/* Dark Vision panel with restrained typography and compact hover cards. */
#section1 .wonit-vision-panel { padding: 72px 40px; gap: 48px; grid-template-columns: minmax(300px,.9fr) minmax(0,2fr); }
#section1.section_ai .wonit-vision-panel .intro_ai h2.main_title {
  color: var(--color-white) !important; font-size: 44px !important; line-height: 56px;
}
#section1.section_ai .wonit-vision-panel .intro_ai p.sub_title.wonit-vision-desc {
  color: rgba(255,255,255,.76) !important; font-size: 18px !important; line-height: 30px !important;
}
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row { height: 380px !important; border-radius: 24px !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n) .ai_box_txt { font-size: 22px !important; line-height: 32px; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n) .ai_box_tit { font-size: 16px; line-height: 26px; }
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-row-copy { left: 24px; right: 24px; bottom: 24px; }
@media (max-width: 1200px) {
  #section1 .wonit-vision-panel { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  #section1 .wonit-vision-panel { padding: 40px 24px; }
  #section1.section_ai .wonit-vision-panel .intro_ai h2.main_title { font-size: 36px !important; line-height: 46px; }
}
#section1.section_ai .wonit-vision-panel .intro_ai h2.main_title { text-align: left !important; }

/* Vision copy stays at the upper left, with image contrast behind it. */
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-row-copy {
  top: 28px; bottom: auto; left: 24px; right: 64px;
}
#section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual::after {
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.08) 100%);
}

/* Distinct resting surfaces; photographic content appears only on hover. */
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(1) {
  background: radial-gradient(ellipse at 85% 90%, rgba(96,165,250,.2), transparent 65%), var(--color-vision-card-blue) !important;
}
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(2) {
  background: radial-gradient(ellipse at 20% 10%, rgba(165,180,252,.18), transparent 65%), var(--color-vision-card-indigo) !important;
}
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(3) {
  background: radial-gradient(ellipse at 85% 20%, rgba(148,163,184,.2), transparent 65%), var(--color-vision-card-slate) !important;
}
#section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual { opacity: 0; transition: opacity .35s ease; }
#section1 .wonit-vision-panel .wonit-vision-row:hover .wonit-service-visual,
#section1 .wonit-vision-panel .wonit-vision-row:focus-within .wonit-service-visual { opacity: 1; }
#section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual::after {
  background: var(--color-vision-card-dim);
}
@media (hover: none) {
  #section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual { opacity: 1; }
}

/* Generous staggered Vision cards; geometry stays stable on interaction. */
#section1.section_ai .wonit-vision-panel .ai_box_gp { align-items: start; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:focus-within {
  height: 600px !important; border-radius: 32px !important;
  overflow: hidden !important; margin: 0 !important;
}
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):hover {
  margin-top: 64px !important;
}
#section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual { border-radius: inherit; }
@media (max-width: 960px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:hover { height: 480px !important; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):hover { margin-top: 0 !important; }
}

/* Balance Vision card proportions and give the introduction more room. */
#section1 .wonit-vision-panel { grid-template-columns: minmax(360px,1fr) minmax(0,2fr); gap: 48px; }
#section1.section_ai .wonit-vision-panel .ai_box_gp { gap: 32px !important; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:focus-within { height: 500px !important; }
#section1.section_ai .wonit-vision-panel .intro_ai p.sub_title.wonit-vision-desc {
  word-break: keep-all; overflow-wrap: normal; text-wrap: pretty;
}
@media (max-width: 1200px) {
  #section1 .wonit-vision-panel { grid-template-columns: 1fr; }
}

#section2 .wonit-system-row:first-child .wonit-system-row-image img {
  visibility: visible; object-fit: cover; object-position: 65% center;
}

/* Align the Vision introduction with the upper card row. */
#section1 .wonit-vision-panel { align-items: start; }
#section1.section_ai .wonit-vision-panel .intro_ai { align-self: start; margin-top: 0; padding-top: 0; }
#section1.section_ai .wonit-vision-panel .intro_ai h2.main_title {
  font-size: 56px !important; line-height: 68px;
}
@media (max-width: 960px) {
  #section1.section_ai .wonit-vision-panel .intro_ai h2.main_title { font-size: 36px !important; line-height: 46px; }
}

/* Prevent bright hover seams at the rounded image boundary. */
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n),
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n):hover {
  border: 0 !important; box-shadow: none !important;
}
#section1 .wonit-vision-panel .wonit-vision-row .wonit-service-visual {
  inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 0;
  border: 0; box-shadow: none;
}
#section1 .wonit-vision-card-link:focus-visible {
  outline: 2px solid var(--color-blue-300); outline-offset: -6px;
}

/* One explicit gap from the System description to the image list. */
#section2 .wonit-system-heading { margin-bottom: 64px; }
#section2 .wonit-system-heading p { padding-bottom: 0; }

/* Vision introduction shares the hero headline's horizontal start. */
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-panel .intro_ai {
    padding-left: 40px; box-sizing: border-box;
  }
}
#section2 .wonit-system-row:first-child .wonit-system-row-image img {
  object-position: 66% 45%; transform: scale(1.14); transform-origin: 66% 45%;
}

/* Lower the Vision introduction and strengthen the staggered card rhythm. */
@media (min-width: 1201px) {
  #section1.section_ai .wonit-vision-panel .intro_ai { margin-top: 0 !important; padding-top: 96px !important; }
}

#section2 .wonit-system-row:first-child .wonit-system-row-image img {
  object-position: 24% 46%; transform: translate(40px, 24px) scale(1.8); transform-origin: 22% 48%;
}

@media (min-width: 1201px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):hover,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):focus-within {
    margin-top: 128px !important;
  }
}

/* Vision cards keep their resting surfaces without hover photographs. */
#section1 .wonit-vision-panel .wonit-service-visual { display: none !important; }
#section1 .wonit-vision-panel .wonit-vision-card-arrow { top: auto; right: 28px; bottom: 28px; opacity: 1; transform: none; transition: none; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n) .ai_box_txt {
  font-size: 26px !important; line-height: 34px;
}

#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-row-copy { right: 24px; }

/* Service titles sit over a locally blurred, shaded image footer. */
#section2 .wonit-system-row-image { position: relative; isolation: isolate; overflow: clip; display: block; }
#section2 .wonit-system-row-image img { position: absolute; inset: 0; }
#section2 .wonit-system-row-image::after {
  content: ""; position: absolute; inset: auto 0 0; height: 46%; z-index: 1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,16,24,0), rgba(10,16,24,.66));
  mask-image: linear-gradient(180deg, transparent, black 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 55%);
  pointer-events: none;
}
#section2 .wonit-system-row-image h3 {
  position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2;
  margin: 0; color: var(--color-white); font-size: 24px; line-height: 34px;
  font-weight: 600; letter-spacing: 0; text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* More breathing room above the hero service strip. */
@media (min-width: 961px) { #section-hero { --hero-copy-top-space: 88px; --hero-copy-bottom-space: 80px; } }

/* User-selected hero and quick-menu colors. */
#section-hero .wonit-hero-card { background: #d6e3ee !important; }
#section-hero .wonit-hero-strip { background: #c1d5e5 !important; }

#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background: #b9cddc; }

/* Colors sampled from the user's adjusted reference. */
#section-hero .wonit-hero-card { background: #dee4f2 !important; }
#section-hero .wonit-hero-strip { background: #cad5eb !important; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background: #c1cce3; }

/* Slightly clearer blue tones with less gray. */
#section-hero .wonit-hero-card { background: #e0e8f8 !important; }
#section-hero .wonit-hero-strip { background: #cbdaf2 !important; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background: #bdcee7; }

/* Lighter airy blue surfaces for the text-rich hero. */
#section-hero .wonit-hero-card { background: #edf3ff !important; }
#section-hero .wonit-hero-strip { background: #dae8ff !important; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background: #ccdaf0; }

/* Equal 64px gaps above and below the desktop search bar. */
@media (min-width: 961px) { .fullpage > #section-hero + #section1.section_ai { padding-top: 16px !important; } }

/* Original diagonal teal and violet highlights over a black vision surface. */
#section1 .wonit-vision-panel { position: relative; isolation: isolate; overflow: hidden; background: #08090d !important; }
#section1 .wonit-vision-panel::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 860px; height: 330px; right: -240px; top: -70px;
  background: radial-gradient(ellipse, rgba(0,213,194,.62) 0%, rgba(0,137,162,.35) 38%, transparent 72%);
  transform: rotate(-32deg); filter: blur(60px);
}
#section1 .wonit-vision-panel::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 900px; height: 360px; left: -180px; bottom: -210px;
  background: radial-gradient(ellipse, rgba(121,64,241,.68) 0%, rgba(71,35,154,.38) 40%, transparent 74%);
  transform: rotate(18deg); filter: blur(68px);
}
@media (max-width: 960px) {
  #section1 .wonit-vision-panel::before { width: 640px; right: -300px; opacity: .75; }
  #section1 .wonit-vision-panel::after { width: 700px; left: -260px; }
}
/* Four geometric vision panels in an offset two-column composition. */
#section1 .wonit-vision-panel { padding-bottom: 136px; }
#section1.section_ai .wonit-vision-panel .ai_box_gp { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-rows: 280px; gap: 24px !important; align-items: start; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within { width: 100% !important; height: 280px !important; min-height: 0 !important; margin: 0 !important; border-radius: 28px !important; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even):focus-within { transform: translateY(64px); }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(4) { background: linear-gradient(135deg,#454090,#2d285a) !important; }
#section1 .wonit-vision-panel .wonit-vision-ai .ai_box_tit { opacity: 1; visibility: visible; }
@media (max-width: 960px) {
  #section1 .wonit-vision-panel { padding-bottom: 64px; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp { grid-auto-rows: 260px; gap: 20px !important; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within { height: 260px !important; transform: none; }
}
@media (max-width: 600px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp { grid-template-columns: 1fr !important; }
}
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even):hover,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(even):focus-within { position: relative; top: 64px; transform: none !important; }
}
#section1 .wonit-vision-panel .wonit-vision-ai .ai_box_tit { opacity: 0; transition: opacity .25s; }
#section1 .wonit-vision-panel .wonit-vision-ai:hover .ai_box_tit,
#section1 .wonit-vision-panel .wonit-vision-ai:focus .ai_box_tit { opacity: 1; }
/* Clear saturated vision colors with a quiet white outline at rest. */
#section1 .wonit-vision-panel::before { background: radial-gradient(ellipse, rgba(0,245,219,.88) 0%, rgba(0,185,214,.5) 38%, transparent 72%); filter: blur(48px); }
#section1 .wonit-vision-panel::after { background: radial-gradient(ellipse, rgba(140,65,255,.92) 0%, rgba(91,37,226,.55) 40%, transparent 74%); filter: blur(54px); }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover { border: 1px solid rgba(255,255,255,.26) !important; box-sizing: border-box; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(1) { background: linear-gradient(135deg,#1644a4,#245deb) !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(2) { background: linear-gradient(135deg,#5936bd,#7447dc) !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(3) { background: linear-gradient(135deg,#075868,#087f8d) !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(4) { background: linear-gradient(135deg,#3930a5,#5842de) !important; }
/* Navy-blue and violet light accents for the vision background. */
#section1 .wonit-vision-panel::before { background: radial-gradient(ellipse, rgba(49,86,246,.9) 0%, rgba(23,45,157,.62) 38%, transparent 72%); }
#section1 .wonit-vision-panel::after { background: radial-gradient(ellipse, rgba(132,62,255,.92) 0%, rgba(82,32,205,.55) 40%, transparent 74%); }
/* Transparent vision cards with only a subtle white stroke. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within {
  background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important;
}
/* Secondary quick-menu labels in a softer readable gray. */
#section-hero .wonit-hero-strip .wonit-strip-item .meta { color: #66758b !important; }

/* Taller vision proportions and a lower introduction on wide screens. */
@media (min-width: 1201px) {
  #section1.section_ai .wonit-vision-panel .intro_ai { padding-top: 152px !important; }
}
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp { grid-auto-rows: 340px; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within { height: 340px !important; }
}
/* Restore compact card size, narrowing the grid for a slightly taller ratio. */
@media (min-width: 961px) {
  #section1.section_ai .wonit-vision-panel .ai_box_gp { grid-auto-rows: 280px; width: 92% !important; justify-self: end; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within { height: 280px !important; }
}
#section1 .wonit-vision-panel::before { background: radial-gradient(ellipse, rgba(49,86,246,.55) 0%, rgba(23,45,157,.36) 38%, transparent 72%); filter: blur(60px); }
/* Broader violet light across the lower-left background. */
#section1 .wonit-vision-panel::after { width: 1200px; height: 500px; left: -220px; bottom: -280px; filter: blur(80px); }
@media (max-width: 960px) { #section1 .wonit-vision-panel::after { width: 850px; left: -300px; } }

/* Wider, quieter violet wash across the lower vision background. */
#section1 .wonit-vision-panel::after {
  width: 1450px; height: 580px; left: -230px; bottom: -320px;
  background: radial-gradient(ellipse, rgba(115,57,228,.58) 0%, rgba(71,32,172,.34) 42%, transparent 76%);
  filter: blur(100px);
}
@media (max-width: 960px) { #section1 .wonit-vision-panel::after { width: 1000px; left: -320px; } }
/* Slightly tighter tracking only for secondary quick-menu labels. */
html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item .meta { letter-spacing: -0.3px !important; }

/* Airier vision descriptions and black quick-menu arrows. */
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n) .ai_box_tit {
  font-size: 16px; line-height: 28px; color: rgba(255,255,255,.8) !important;
}
#section-hero .wonit-hero-strip .wonit-strip-item .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-item:hover .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-arrow { color: #000 !important; }
/* Company section spans the desktop viewport without side gutters. */
@media (min-width: 961px) {
  #section0.section { padding-left: 0 !important; padding-right: 0 !important; }
  #section0 .wonit-company-heading,
  #section0 .wonit-company-image-frame,
  #section0 .wonit-company-details { width: 100%; max-width: none !important; }
}
/* Quick-menu arrows point diagonally upward. */
#section-hero .wonit-hero-strip .wonit-strip-item .meta svg { transform: translateX(-3px) rotate(-45deg); }
#section-hero .wonit-hero-strip .wonit-strip-item:hover .meta svg,
#section-hero .wonit-hero-strip .wonit-strip-item:focus-visible .meta svg { transform: rotate(-45deg); }
/* Reviewed hero and vision appearance. */
#section-hero .wonit-hero-card { background:#edf3ff !important; position:relative; isolation:isolate; overflow:hidden; }
#section-hero .wonit-hero-copy h1,#section-hero .wonit-hero-copy .wonit-lead,#section-hero .wonit-hero-copy .wonit-lead * { color:#211a35 !important; }
#section-hero .wonit-hero-card .wonit-hero-visual { display:block; visibility:visible !important; background:none !important; position:absolute; left:36%; right:-6%; top:0; height:100%; margin:0; transform:none; z-index:0; overflow:hidden; pointer-events:none; }
#section-hero .wonit-hero-visual canvas { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:none; filter:hue-rotate(32deg) saturate(.95) contrast(1.03); }
#section-hero .wonit-hero-copy,#section-hero .wonit-hero-strip { position:relative; z-index:2; }
@media(max-width:960px) { #section-hero .wonit-hero-card .wonit-hero-visual { display:none; } }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n),#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):hover,#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n):focus-within { border-color:rgba(255,255,255,.10) !important; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n) .ai_box_tit { max-height:none; opacity:1; visibility:visible; overflow:visible; margin-top:12px !important; color:rgba(255,255,255,.58) !important; transition:color .25s; }
#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n):hover .ai_box_tit,#section1.section_ai .wonit-vision-panel .wonit-vision-row:nth-child(n):focus-within .ai_box_tit { color:rgba(255,255,255,.94) !important; }
#section1 .wonit-vision-panel .wonit-vision-row::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:5; background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.24) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:0; transition:opacity .25s; }
#section1 .wonit-vision-panel .wonit-vision-row:hover::before,#section1 .wonit-vision-panel .wonit-vision-row:focus-within::before { opacity:1; }
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-card-arrow { opacity:0; transform:translateX(-6px); transition:opacity .25s,transform .25s; }
#section1 .wonit-vision-panel .wonit-vision-row:hover .wonit-vision-card-arrow,#section1 .wonit-vision-panel .wonit-vision-row:focus-within .wonit-vision-card-arrow { opacity:1; transform:none; }
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai,#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai:hover,#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai:focus-within { background:linear-gradient(90deg,#050d28 0%,#050d28 38%,rgba(5,13,40,.96) 48%,transparent 76%),url('../img/vision-ai-blue-flow.jpg') 100% 0% / auto 230% no-repeat !important; background-clip:padding-box !important; isolation:isolate; }
#section1 .wonit-vision-panel .wonit-vision-ai::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:linear-gradient(135deg,rgba(6,9,23,.72),rgba(6,9,23,.42) 40%,transparent 100%); opacity:1; transition:opacity .25s; }
#section1 .wonit-vision-panel .wonit-vision-ai:hover::after,#section1 .wonit-vision-panel .wonit-vision-ai:focus-within::after { opacity:.45; }
#section1 .wonit-vision-panel .wonit-vision-ai .wonit-vision-row-copy { z-index:1; }
/* Full-width company photo and overlaid copy. */
#section0.section { display:grid; grid-template-columns:minmax(0,1fr); padding:0 !important; isolation:isolate; }
#section0 .wonit-company-image-frame,#section0 .wonit-company-heading,#section0 .wonit-company-details { grid-area:1/1; }
#section0 .wonit-company-image-frame { width:100%; max-width:none !important; height:clamp(660px,44vw,860px); border-radius:0; margin:0; }
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(9,18,30,.5),rgba(9,18,30,.08) 42%,rgba(9,18,30,.72)); backdrop-filter:none; -webkit-backdrop-filter:none; mask-image:none; -webkit-mask-image:none; }
#section0 .wonit-company-heading { z-index:1; align-self:start; width:100%; max-width:1600px !important; margin:0 auto; padding:64px 80px 0; text-align:left; }
#section0 .wonit-company-heading .main_title { color:var(--color-white) !important; max-width:1100px; }
#section0 .wonit-company-heading .wonit-company-actions { top:64px; right:80px; transform:none; }
#section0 .wonit-company-actions .btn_view,#section0 .wonit-company-actions .btn_view:hover,#section0 .wonit-company-actions .btn_view:focus-visible { color:var(--color-white); }
#section0 .wonit-company-details { z-index:1; align-self:end; width:100%; max-width:1600px !important; box-sizing:border-box; margin:0 auto; padding:0 80px 64px; gap:48px; color:var(--color-white); }
#section0 .wonit-company-explanation .main_sub_title { color:var(--color-white); }
@media(max-width:960px) {
#section0 .wonit-company-image-frame { height:620px; }
#section0 .wonit-company-heading { padding:40px 32px 0; }
#section0 .wonit-company-heading .main_title { padding-right:48px; }
#section0 .wonit-company-heading .wonit-company-actions { top:40px; right:24px; }
#section0 .wonit-company-details { padding:0 32px 40px; gap:20px; }
}
@media(max-width:600px) {
#section0 .wonit-company-image-frame { height:680px; }
#section0 .wonit-company-heading { padding:32px 24px 0; }
#section0 .wonit-company-heading .main_title { font-size:28px; line-height:40px; }
#section0 .wonit-company-heading .wonit-company-actions { top:32px; right:16px; }
#section0 .wonit-company-details { padding:0 24px 32px; }
#section0 .wonit-company-explanation .main_sub_title { font-size:16px; line-height:28px; }
}

/* Keep the ring center visible above the floating quick menu. */
#section-hero .wonit-hero-card .wonit-hero-visual {
  left:calc(39% + 80px); right:calc(1% - 80px); top:calc(-3% - 24px); height:88%;
}
#section-hero .wonit-hero-visual canvas { object-fit:contain; }
#section-hero .wonit-hero-visual canvas { transform:scale(1); }

/* Quick links must receive hover/click above the card-wide detail link. */
#section-hero .wonit-hero-strip { position:relative; z-index:3; }

/* Lift the quick-menu hover arrow slightly. */
#section-hero .wonit-hero-strip .meta svg { top:calc(var(--quick-arrow-top,40px) - 3px); }

/* Slightly inset vision arrows and a restrained violet wash on the AI photo. */
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-card-arrow { right:34px; }
#section1 .wonit-vision-panel .wonit-vision-ai::after {
  background:linear-gradient(135deg,rgba(6,9,23,.72),rgba(6,9,23,.42) 40%,transparent 100%),linear-gradient(rgba(100,55,210,.12),rgba(100,55,210,.12));
}

/* Soft white-to-blue light behind the animated ring opening. */
#section-hero .wonit-hero-visual::before {
  content:""; position:absolute; left:50%; top:50%;
  width:clamp(220px,23vw,400px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 32%,rgba(255,255,255,.32) 58%,rgba(255,255,255,0) 78%);
  filter:blur(24px); pointer-events:none;
}
#section-hero .wonit-hero-visual canvas { position:relative; z-index:1; }

/* Remove the glow that emphasizes the keyed animation edges. */
#section-hero .wonit-hero-visual::before { content:none; }

/* First vision card: digital cubes above, quiet copy below. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1):focus-within {
  background:linear-gradient(180deg,#050c19 0px,#050c19 120px,rgba(5,12,25,.72) 175px,rgba(5,12,25,.2) 100%),url('../img/vision-solution-blue-cubes.jpg') 68% 140px / cover no-repeat !important;
  background-clip:padding-box !important;
}

/* Cubes emerge organically from the lower right, without a horizontal cutoff. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(1):focus-within { background:#050c19 !important; isolation:isolate; }
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:url('../img/vision-solution-blue-cubes.jpg') 78% bottom / auto 65% no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 82% 100%,#000 0%,#000 30%,rgba(0,0,0,.8) 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 65% at 82% 100%,#000 0%,#000 30%,rgba(0,0,0,.8) 55%,transparent 100%);
  pointer-events:none; z-index:0; opacity:1; transition:opacity .25s;
}
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1):focus-within::after { opacity:1; }

/* Larger cubes with a feathered image layer, including its left/top edges. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  inset:25% -8% -18% 14%;
  background-position:68% 25%; background-size:cover;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 62% 66%,#000 0%,#000 30%,rgba(0,0,0,.75) 58%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 66% at 62% 66%,#000 0%,#000 30%,rgba(0,0,0,.75) 58%,transparent 100%);
}

/* Bolder cube crop, with the existing soft perimeter retained. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  background-size:auto 154%; background-position:70% -10%;
  filter:brightness(1.22);
}

/* Vision heading-to-description spacing. */
#section1.section_ai .wonit-vision-panel .intro_ai p.sub_title.wonit-vision-desc { padding-top:32px !important; }

/* Feather the actual photo's upper edge independently of its radial reveal. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 62% 66%,#000 0%,#000 30%,rgba(0,0,0,.75) 58%,transparent 100%),linear-gradient(180deg,transparent 0%,transparent 10%,#000 32%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 62% 66% at 62% 66%,#000 0%,#000 30%,rgba(0,0,0,.75) 58%,transparent 100%),linear-gradient(180deg,transparent 0%,transparent 10%,#000 32%,#000 100%);
  mask-composite:intersect;
}

/* Extended dark background preserves the raised cube faces without fading them. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  inset:0; background-image:url('../img/vision-solution-blue-cubes-extended.png');
  background-size:auto 130%; background-position:right 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.6) 27%,#000 42%,#000 100%),radial-gradient(ellipse 70% 85% at 0% 0%,transparent 0%,rgba(0,0,0,.35) 42%,#000 80%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.6) 27%,#000 42%,#000 100%),radial-gradient(ellipse 70% 85% at 0% 0%,transparent 0%,rgba(0,0,0,.35) 42%,#000 80%);
  -webkit-mask-composite:source-over; mask-composite:add;
  filter:brightness(1.12);
}

/* Keep Korean hero copy from splitting a word at the edge. */
#section-hero .wonit-hero-copy .wonit-lead-line { word-break:keep-all; }

/* Restore an explicit brightness difference for the first vision card. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after { transition:filter .25s ease; }
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1):focus-within::after { filter:brightness(1.32); }

/* English quick-menu labels. */
html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(n) .meta {
  letter-spacing:.3px !important; font-size:14px; font-weight:700;
  color:var(--color-slate-400) !important;
}

/* Tighter spacing between quick-menu copy and English label. */
#section-hero .wonit-hero-strip .wonit-strip-item .meta { margin-top:8px; }

/* AI light trails with extended quiet background for the card copy. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai:hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row.wonit-vision-ai:focus-within {
  background:url('../img/vision-ai-light-trails-extended.png') center / 100% 100% no-repeat !important;
  background-clip:padding-box !important;
}
#section1 .wonit-vision-panel .wonit-vision-ai::after {
  background:linear-gradient(135deg,rgba(6,9,23,.2),rgba(6,9,23,.08));
}

/* Softer AI highlights, closer to the muted indigo-violet reference. */
#section1 .wonit-vision-panel .wonit-vision-ai::after {
  background:linear-gradient(180deg,rgba(12,10,35,.1) 30%,rgba(18,16,48,.4) 100%),linear-gradient(rgba(27,25,67,.18),rgba(27,25,67,.18));
  opacity:1;
}
#section1 .wonit-vision-panel .wonit-vision-ai:hover::after,
#section1 .wonit-vision-panel .wonit-vision-ai:focus-within::after { opacity:.8; }

/* Shorter centered dividers for the 160px quick-menu panel. */
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { height:80px; }

/* Vision arrows point up-right when revealed. */
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-card-arrow { transform:translateX(-6px) rotate(-45deg); }
#section1 .wonit-vision-panel .wonit-vision-row:hover .wonit-vision-card-arrow,
#section1 .wonit-vision-panel .wonit-vision-row:focus-within .wonit-vision-card-arrow { transform:rotate(-45deg); }

/* Small cube enlargement; quieter upper-left AI trails without retinting. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after { background-size:auto 134%; }
#section1 .wonit-vision-panel .wonit-vision-ai::after {
  background:linear-gradient(135deg,rgba(11,11,32,.52) 0%,rgba(11,11,32,.32) 42%,transparent 78%),linear-gradient(180deg,rgba(12,10,35,.1) 30%,rgba(18,16,48,.4) 100%),linear-gradient(rgba(27,25,67,.18),rgba(27,25,67,.18));
}

/* Slight rightward adjustment of the solution cubes. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after { background-position:calc(100% + 8px) -4px; }

/* Slightly soften quick-menu separators without changing their length. */
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background:rgba(204,218,240,.7); }

/* Keep the hero CTA interactive above the card-wide detail link. */
#section-hero .wonit-hero-copy { z-index:3; }

/* Commerce: violet surface with a quiet oversized shopping-bag illustration. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3):focus-within { background:transparent !important; isolation:isolate; }
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url('../img/vision-commerce-bag.svg') right -52px bottom 12px / 230px auto no-repeat;
  opacity:.17;
}

/* Commerce illustration temporarily removed pending a replacement asset. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after { content:none; }

/* Commerce color field fades into the dark vision surface around the copy. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:url('../img/vision-commerce-coral-gradient.jpg') 70% center / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 110% 100% at 100% 100%,#000 0%,rgba(0,0,0,.9) 38%,rgba(0,0,0,.42) 68%,transparent 100%);
  mask-image:radial-gradient(ellipse 110% 100% at 100% 100%,#000 0%,rgba(0,0,0,.9) 38%,rgba(0,0,0,.42) 68%,transparent 100%);
  opacity:.8; filter:saturate(1.12) brightness(1.04); transition:opacity .25s ease; z-index:0; pointer-events:none;
}
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3):focus-within::after { opacity:.9; }

/* ERP glass geometry below the copy, with an extended quiet upper background. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(2):focus-within { background:#080d1b !important; isolation:isolate; }
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:url('../img/vision-erp-triangles-extended.png') center / 100% 100% no-repeat;
  opacity:.78; transition:opacity .25s ease;
}
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2):focus-within::after { opacity:.94; }

/* Preserve ERP artwork proportions; enlarge and focus on right-hand geometry. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after {
  background-size:auto 175%; background-position:right bottom;
  -webkit-mask-image:radial-gradient(ellipse 105% 95% at 100% 100%,#000 0%,#000 38%,rgba(0,0,0,.65) 65%,transparent 100%);
  mask-image:radial-gradient(ellipse 105% 95% at 100% 100%,#000 0%,#000 38%,rgba(0,0,0,.65) 65%,transparent 100%);
}

/* Commerce image removed at the user's request. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after { content:none; }

/* ERP monochrome glass panels, focused below and to the right of the copy. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after {
  background-image:url('../img/vision-erp-glass-panels.jpg');
  background-size:auto 115%; background-position:78% bottom;
  -webkit-mask-image:radial-gradient(ellipse 105% 90% at 100% 100%,#000 0%,#000 30%,rgba(0,0,0,.55) 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 105% 90% at 100% 100%,#000 0%,#000 30%,rgba(0,0,0,.55) 60%,transparent 100%);
}

/* A smaller, brighter ERP glass cluster fading from the lower-right corner. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after {
  inset:25% -3% -10% 20%;
  background-size:cover; background-position:76% 65%;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 78%,#000 0%,#000 32%,rgba(0,0,0,.65) 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 80% at 72% 78%,#000 0%,#000 32%,rgba(0,0,0,.65) 62%,transparent 100%);
  filter:brightness(1.42); opacity:.96;
}
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2):focus-within::after { opacity:1; }

/* Slightly smaller ERP cluster, still anchored at the lower right. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after { inset:43.472% calc(-0.3% + 52px) -7.228% calc(38.2% - 52px); }

/* Align vision hover arrows with the copy at the lower left. */
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-card-arrow { left:24px; right:auto; bottom:40px; }

/* Vision hover arrows point right from the lower-left copy grid. */
#section1 .wonit-vision-panel .wonit-vision-row .wonit-vision-card-arrow { transform:translateX(-6px); }
#section1 .wonit-vision-panel .wonit-vision-row:hover .wonit-vision-card-arrow,
#section1 .wonit-vision-panel .wonit-vision-row:focus-within .wonit-vision-card-arrow { transform:none; }

/* Keep Korean words together as vision cards become narrower. */
#section1 .wonit-vision-panel .wonit-vision-row .ai_box_tit { word-break:keep-all; }

/* Center the vision introduction against both staggered card columns. */
@media (min-width:961px) {
  #section1.section_ai .wonit-vision-panel .intro_ai { align-self:center; margin-top:0 !important; padding-top:0 !important; transform:translateY(46px); }
}

/* Soften only the last few pixels of the ERP image right edge. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(2)::after {
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 78%,#000 0%,#000 32%,rgba(0,0,0,.65) 62%,transparent 100%),linear-gradient(to right,#000 0%,#000 calc(100% - 16px),transparent 100%);
  mask-image:radial-gradient(ellipse 70% 80% at 72% 78%,#000 0%,#000 32%,rgba(0,0,0,.65) 62%,transparent 100%),linear-gradient(to right,#000 0%,#000 calc(100% - 16px),transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Commerce glass bag sits inside the lower-right area with a soft surrounding fade. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:url('../img/vision-commerce-glass-bag.jpg') calc(100% + 20px) top / auto 109.25% no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 66% 70% at 76% 78%,#000 0%,#000 35%,rgba(0,0,0,.7) 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 66% 70% at 76% 78%,#000 0%,#000 35%,rgba(0,0,0,.7) 62%,transparent 100%);
  -webkit-mask-composite:source-over; mask-composite:add;
  filter:brightness(1.12); opacity:.92; transition:opacity .25s ease;
}
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3):hover::after,
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3):focus-within::after { opacity:1; }

/* Blend the narrow portrait asset into the card without a vertical seam. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  -webkit-mask-image:radial-gradient(ellipse 66% 70% at 76% 78%,#000 0%,#000 35%,rgba(0,0,0,.7) 62%,transparent 100%),linear-gradient(to right,transparent 0%,transparent 32%,#000 55%);
  mask-image:radial-gradient(ellipse 66% 70% at 76% 78%,#000 0%,#000 35%,rgba(0,0,0,.7) 62%,transparent 100%),linear-gradient(to right,transparent 0%,transparent 32%,#000 55%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Follow the portrait image edge in pixels, including wide desktop cards. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  background-position:calc(100% - 6px) -1px;
  -webkit-mask-image:linear-gradient(to right,transparent calc(100% - 245px),rgba(0,0,0,.12) calc(100% - 228px),rgba(0,0,0,.55) calc(100% - 198px),#000 calc(100% - 170px)),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.5) 28%,#000 48%),linear-gradient(to left,transparent 0px,rgba(0,0,0,.08) 8px,rgba(0,0,0,.3) 20px,rgba(0,0,0,.7) 36px,#000 54px);
  mask-image:linear-gradient(to right,transparent calc(100% - 245px),rgba(0,0,0,.12) calc(100% - 228px),rgba(0,0,0,.55) calc(100% - 198px),#000 calc(100% - 170px)),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 12%,rgba(0,0,0,.5) 28%,#000 48%),linear-gradient(to left,transparent 0px,rgba(0,0,0,.08) 8px,rgba(0,0,0,.3) 20px,rgba(0,0,0,.7) 36px,#000 54px);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Slightly clearer reception-system photo beneath the title. */
#section2 .wonit-system-row:first-child .wonit-system-row-image::after { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* Round fade follows the bag rather than the portrait image rectangle. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3)::after {
  -webkit-mask-image:radial-gradient(ellipse 104px 172px at calc(100% - 120px) 78%,#000 0%,#000 48%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.3) 82%,transparent 100%),radial-gradient(ellipse 120px 105px at calc(100% - 120px) 100%,#000 0%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.5) 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 104px 172px at calc(100% - 120px) 78%,#000 0%,#000 48%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.3) 82%,transparent 100%),radial-gradient(ellipse 120px 105px at calc(100% - 120px) 100%,#000 0%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.5) 72%,transparent 100%);
  -webkit-mask-composite:source-over; mask-composite:add;
  filter:brightness(1.14) contrast(1.04); opacity:.96;
}

/* Preserve the broad original ambient glow independently of the bag edge fade. */
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3),
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3):hover,
#section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(3):focus-within {
  background:radial-gradient(ellipse 215px 155px at calc(100% - 120px) 88%,rgba(119,135,164,.22) 0%,rgba(106,122,153,.16) 35%,rgba(94,109,141,.075) 65%,transparent 100%) !important;
}

/* Custom IT solution: clear workplace photography with a restrained cool tone. */
#section2 .wonit-system-row:nth-child(2) .wonit-system-row-image img {
  visibility:visible; object-position:46% 45%; transform:translate(52px,10px) scale(1.35); transform-origin:46% 50%; filter:saturate(.9) contrast(1.03);
}
#section2 .wonit-system-row:nth-child(2) .wonit-system-row-image::after { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* Website development photography matches the adjacent service cards. */
#section2 .wonit-system-row:nth-child(3) .wonit-system-row-image img {
  visibility:visible; object-position:52% top; transform:scale(1.2); transform-origin:52% top; filter:saturate(.92) brightness(1.12) contrast(1.01);
}
#section2 .wonit-system-row:nth-child(3) .wonit-system-row-image::after { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* Preserve the requested two-line reception-system copy. */
#section2 .wonit-system-row:first-child .wonit-system-row-copy p br { display:block; }

/* Combine the solution left-edge and upper-left fades. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after { -webkit-mask-composite:source-in; mask-composite:intersect; }

/* Fade the actual left background into the surrounding dark surface. */
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(1)::after {
  background-image:linear-gradient(90deg,#08090d 0%,rgba(8,9,13,.88) 12%,rgba(8,9,13,.46) 26%,transparent 43%),radial-gradient(ellipse 78% 68% at 0% 0%,#08090d 0%,rgba(8,9,13,.65) 42%,transparent 100%),url('../img/vision-solution-blue-cubes-extended.png');
  background-size:100% 100%,100% 100%,auto 134%;
  background-position:center,center,calc(100% + 8px) -4px;
  -webkit-mask-image:none; mask-image:none;
}

/* Quiet consulting banner above the footer. */
#section4.section {
  display:flex !important; align-items:center; min-height:440px !important; height:auto !important;
  padding:56px 0 !important; box-sizing:border-box; background:#f4f6f8 !important;
  isolation:isolate; overflow:hidden !important;
}
#section4 #wrapper_bu,#section4 #wrapper_mr { display:none !important; }
#section4 .intro { text-align:left !important; padding:0 80px; box-sizing:border-box; z-index:2 !important; }
#section4 .intro .title { font-size:48px !important; line-height:1.2 !important; font-weight:600; letter-spacing:-1.5px; margin:0 0 24px !important; }
#section4 .intro .sub_title { font-size:18px !important; line-height:1.7 !important; max-width:560px; padding:0 !important; margin:0 0 32px !important; color:#55606e !important; word-break:keep-all; }
#section4 .intro .btn_view { display:inline-flex !important; align-items:center; gap:20px; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; color:#15191e !important; font-size:18px; font-weight:600; box-shadow:none; }
#section4 .intro .btn_view::after { content:'→'; position:static; font-size:28px; background:none; width:auto; height:auto; }
#section4::before,#section4::after {
  content:''; position:absolute; z-index:0; pointer-events:none; width:390px; height:390px;
  border:64px solid #fdfdfd; border-radius:140px; transform:rotate(-38deg); box-sizing:border-box;
  box-shadow:inset 14px 16px 24px rgba(40,48,58,.12),inset -7px -9px 15px #fff,14px 20px 24px rgba(40,48,58,.13),-8px -10px 20px rgba(255,255,255,.8);
}
#section4::before { right:-30px; top:-245px; width:600px; height:600px; border-width:88px; border-radius:190px; }
#section4::after { right:70px; bottom:-280px; width:570px; height:570px; border-width:82px; border-radius:180px; }
@media(max-width:960px) {
  #section4.section { min-height:420px !important; padding:72px 0 !important; }
  #section4 .intro { padding:0 24px; }
  #section4 .intro .title { font-size:40px !important; font-weight:700; }
  #section4 .intro .sub_title { max-width:58%; font-size:16px !important; }
  #section4::before,#section4::after { opacity:.65; right:-260px; }
}
@media(max-width:600px) {
  #section4 .intro .sub_title { max-width:85%; }
  #section4::before,#section4::after { opacity:.3; right:-370px; }
}

/* Match consulting supporting copy to the system section typography. */
#section4 .intro .sub_title { font-size:24px !important; line-height:38px !important; font-weight:400; letter-spacing:0; color:#000 !important; max-width:660px; }
@media(max-width:960px) { #section4 .intro .sub_title { font-size:18px !important; line-height:30px !important; max-width:58%; } }
@media(max-width:600px) { #section4 .intro .sub_title { max-width:85%; } }

#section4 .intro .btn_view::after { content:none; }
#section4 .intro .btn_view .wonit-consulting-arrow { display:block; flex-shrink:0; }

/* Compact consulting link aligned to the heading copy grid. */
#section4 .intro .btn_view { font-size:16px !important; line-height:24px !important; font-weight:500; gap:12px; text-indent:0 !important; transform:none !important; left:auto !important; padding:0 !important; margin-left:0 !important; }
#section4 .intro .btn_view .wonit-consulting-arrow { width:24px; height:24px; }

/* Monochrome consulting image dissolves into a quiet copy surface. */
#section4.section { background:#f8f8f8 !important; }
#section4::after { content:none; }
#section4::before {
  content:''; position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0;
  transform:none; box-shadow:none; opacity:1;
  background:url('../img/consulting-white-lines.jpg') right center / auto 100% no-repeat;
  filter:grayscale(1) brightness(1.025) contrast(1.12); opacity:.88;
  -webkit-mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.15) 44%,#000 68%);
  mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.15) 44%,#000 68%);
}
@media(max-width:960px) {
  #section4::before { right:0; opacity:.65; background-position:70% center; }
}
@media(max-width:600px) {
  #section4::before { right:0; opacity:.4; }
}

/* Align consulting copy with the service-card outer grid. */
#section4 .intro { padding-left:0 !important; padding-right:0 !important; }

/* Keep the requested sentence breaks in all three system cards. */
#section2 .wonit-system-row .wonit-system-row-copy p br { display:block; }

/* Inset the consulting artwork and dissolve it before the right gutter. */
#section4::before {
  background-position:right 12vw center;
  -webkit-mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.15) 44%,#000 64%,#000 73%,rgba(0,0,0,.45) 80%,transparent 87%);
  mask-image:linear-gradient(to right,transparent 30%,rgba(0,0,0,.15) 44%,#000 64%,#000 73%,rgba(0,0,0,.45) 80%,transparent 87%);
}
@media(max-width:960px) { #section4::before { background-position:right 8vw center; } }

/* Responsive foundation for the redesigned homepage. */
@media(max-width:1200px) {
  #section-hero { padding-top:24px !important; }
  #section1.section_ai .wonit-vision-panel .intro_ai { padding:0 !important; transform:none !important; align-self:start; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp { width:100% !important; }
}
@media(max-width:960px) {
  html body section.wrap { min-width:0 !important; }
  #section-hero .wonit-hero-card { height:auto !important; min-height:0 !important; padding:40px 24px 24px !important; }
  #section-hero .wonit-hero-copy { width:100% !important; max-width:none; padding:0 !important; }
  #section-hero .wonit-hero-grid { display:block !important; min-height:0 !important; }
  #section-hero .wonit-hero-title { font-size:40px !important; line-height:1.3 !important; }
  #section-hero .wonit-hero-strip { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; height:auto !important; margin-top:36px !important; }
  #section-hero .wonit-hero-strip .wonit-strip-item { min-height:132px !important; height:auto !important; padding:24px !important; }
  #section-hero .wonit-hero-strip .wonit-strip-item::after { display:none !important; }
  #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(odd) { border-right:1px solid rgba(150,174,213,.2); }
  #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(-n+2) { border-bottom:1px solid rgba(150,174,213,.2); }
  #section1 .wonit-vision-panel { grid-template-columns:minmax(0,1fr) !important; }
  #section1.section_ai .wonit-vision-panel .intro_ai p.sub_title { max-width:100%; }
  #section2 .wonit-system-heading { margin-bottom:40px; }
  #section2 .wonit-system-rows { grid-template-columns:minmax(0,1fr) !important; gap:40px !important; }
  #section2 .wonit-system-row { min-width:0; }
  #section2 .wonit-system-row-image { aspect-ratio:16/9; height:auto !important; }
  #section2 .wonit-system-row-copy { width:100%; }
  #section4 .intro .sub_title { max-width:75%; }
  #section4::before { opacity:.45; }
}
@media(max-width:600px) {
  #section-hero { padding-left:16px !important; padding-right:16px !important; }
  #section-hero .wonit-hero-card { border-radius:24px; padding:32px 20px 20px !important; }
  #section-hero .wonit-hero-title { font-size:30px !important; line-height:1.35 !important; letter-spacing:-.7px !important; }
  #section-hero .wonit-hero-copy p { font-size:16px !important; line-height:27px !important; }
  #section-hero .wonit-hero-strip .wonit-strip-item { padding:20px 14px !important; min-height:128px !important; }
  #section-hero .wonit-strip-title { font-size:16px !important; line-height:25px !important; }
  #section1.section_ai { padding:40px 16px !important; }
  #section1 .wonit-vision-panel { padding:36px 20px 44px; gap:32px; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp { grid-template-columns:minmax(0,1fr) !important; gap:20px !important; }
  #section1.section_ai .wonit-vision-panel .ai_box_gp > .wonit-vision-row:nth-child(n) { top:0 !important; transform:none !important; height:280px !important; }
  #section1 .wonit-vision-panel .intro_ai br { display:initial; }
  #section0 .wonit-company-heading { padding:32px 24px !important; }
  #section0 .wonit-company-heading .main_title { font-size:28px !important; line-height:40px !important; max-width:85%; }
  #section0 .wonit-company-details { padding:32px 24px !important; }
  #section2 .wonit-system-heading h2 { font-size:32px !important; line-height:42px !important; }
  #section2 .wonit-system-heading p { font-size:18px !important; line-height:30px !important; }
  #section2 .wonit-system-row-image h3 { font-size:22px; left:20px; bottom:20px; }
  #section2 .wonit-system-row-copy p { font-size:16px !important; line-height:28px !important; word-break:keep-all; }
  #section4.section { min-height:400px !important; padding:56px 0 !important; }
  #section4 .intro .title { font-size:36px !important; }
  #section4 .intro .sub_title { max-width:100%; font-size:18px !important; line-height:30px !important; }
  #section4::before { opacity:.2; }
}

/* Simplified line artwork without broad grey shadows. */
#section4::before { background-image:url('../img/consulting-lines-clean.png'); filter:grayscale(1); opacity:.9; }




/* Compact header shared by the homepage and subpages. */
.wonit-nav-toggle,.wonit-compact-menu { display:none; }
.wonit-compact-menu[hidden],.wonit-nav-group > div[hidden] { display:none !important; }
@media(max-width:1200px) {
  :root { --header-h:72px; }
  header.site-header { height:72px !important; min-height:72px !important; z-index:10020 !important; background:#fff !important; }
  header.site-header .header-inner { display:flex !important; align-items:center !important; justify-content:space-between !important; height:72px !important; min-height:0 !important; padding:0 24px !important; gap:16px !important; }
  header.site-header .logo { margin:0 !important; width:auto !important; flex:1; }
  header.site-header .logo img { max-width:116px; max-height:32px; }
  header.site-header nav.gnb,header.site-header .header-util { display:none !important; }
  header.site-header .wonit-nav-toggle { display:flex !important; flex-direction:column; justify-content:center; gap:7px; width:44px; height:44px; border:0; border-radius:8px; padding:10px; background:transparent; color:#111; cursor:pointer; }
  .wonit-nav-toggle span { display:block; width:24px; height:2px; background:currentColor; transition:transform .2s; }
  .wonit-nav-open .wonit-nav-toggle span:first-child { transform:translateY(4.5px) rotate(45deg); }
  .wonit-nav-open .wonit-nav-toggle span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
  .wonit-nav-toggle:focus-visible,.wonit-nav-group button:focus-visible { outline:2px solid #3768db; outline-offset:2px; }
  .wonit-compact-menu { display:block; position:fixed; inset:72px 0 0; background:#fff; z-index:10010; overflow:auto; overscroll-behavior:contain; padding:24px max(24px,calc((100vw - 920px)/2)) 48px; }
  .wonit-nav-group { border-bottom:1px solid #e9eaed; }
  .wonit-nav-group > button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:22px 0; border:0; background:none; font:600 24px/32px inherit; font-family:inherit; font-size:24px; font-weight:600; color:#15171c; text-align:left; }
  .wonit-nav-group > button::after { content:'+'; font-size:26px; font-weight:400; }
  .wonit-nav-group > button[aria-expanded=true]::after { content:'−'; }
  .wonit-nav-group > div { padding:0 0 20px; }
  .wonit-nav-group a { display:block; padding:12px 8px; color:#4b5260; font-size:16px; line-height:24px; }
  .wonit-nav-contact { display:inline-block; margin-top:28px; padding:13px 24px; border:1px solid #cbd0d8; border-radius:28px; color:#15171c; }
}
@media(max-width:600px) { header.site-header .header-inner { padding:0 16px !important; } }




@media(max-width:960px) {
 html body section.wrap #section-hero .wonit-hero-wrap { width:100% !important; margin:0 !important; padding:0 0 40px !important; }
 html body section.wrap #section-hero .wonit-hero-copy h1 { font-size:36px !important; line-height:1.3 !important; word-break:keep-all; }
 html body section.wrap #section-hero .wonit-hero-strip { width:100% !important; position:relative !important; inset:auto !important; }
 html body section.wrap #section-hero .wonit-hero-copy .wonit-lead { font-size:18px !important; line-height:30px !important; }
}
@media(max-width:600px) {
 html body section.wrap #section-hero .wonit-hero-copy h1 { font-size:28px !important; line-height:38px !important; text-align:left !important; }
 html body section.wrap #section-hero .wonit-hero-copy .wonit-lead { font-size:16px !important; line-height:27px !important; text-align:left !important; }
 html body section.wrap #section-hero .wonit-hero-copy .wonit-lead-line { display:inline !important; }
 html body section.wrap #section-hero .wonit-hero-copy .wonit-lead-line + .wonit-lead-line::before { content:' '; }
 html body section.wrap #section-hero .wonit-hero-copy .wonit-btn-pill { margin-left:0 !important; }
}

@media(min-width:961px) and (max-width:1200px) {
 html body section.wrap #section-hero .wonit-hero-copy h1 { font-size:36px !important; line-height:48px !important; word-break:keep-all; }
}

/* Consulting arrow inside a fully rounded shape with an inner 1px stroke. */
#section4 .intro .btn_view .wonit-consulting-arrow {
  width:36px; height:36px; padding:8px; box-sizing:border-box; border-radius:50%;
  box-shadow:inset 0 0 0 1px currentColor;
}

/* More restrained consulting typography. */
#section4 .intro .title { font-size:40px !important; font-weight:700; }
#section4 .intro .sub_title { font-size:20px !important; line-height:32px !important; }
@media(max-width:600px) { #section4 .intro .title { font-size:32px !important; } }

/* Clear periwinkle hero surfaces with a deeper quick-menu tone. */
#section-hero .wonit-hero-card { background:#e2eaff !important; }
#section-hero .wonit-hero-strip,
#section-hero .wonit-hero-strip .wonit-strip-item:hover,
#section-hero .wonit-hero-strip .wonit-strip-item:focus { background:#cadbfa !important; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background:#b6cbed; }

/* Right-side circular artwork blends into a quiet, uninterrupted copy surface. */
#section4.section { background:#fafafa !important; }
#section4::before {
  inset:0 0 0 auto; width:54%; height:100%; border:0; border-radius:0;
  background:url('../img/consulting-white-circles.jpg') right center / auto 85% no-repeat;
  transform:none; filter:none; opacity:1; box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%);
  mask-image:linear-gradient(to right,transparent 0%,#000 28%);
}
#section4::after { display:none; }
@media(max-width:960px) { #section4::before { width:48%; opacity:.75; } }
@media(max-width:600px) { #section4::before { width:48%; opacity:.3; } }
/* Standalone consulting arrow with a comfortable click target. */
#section4 .intro .btn_view { width:44px !important; height:44px !important; justify-content:center; gap:0; }
#section4 .intro .btn_view .wonit-consulting-arrow { width:32px; height:32px; padding:0; border:0; border-radius:0; box-shadow:none; }

/* Blend the reduced artwork edges into the extended background. */
#section4::before { -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,transparent 4%,#000 16%,#000 78%,transparent 94%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,transparent 4%,#000 16%,#000 78%,transparent 94%); mask-composite:intersect; }

/* Restore the larger, cropped composition with only a slight scale reduction. */
#section4::before { width:54%; background-size:97% auto; background-position:right top; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%); mask-image:linear-gradient(to right,transparent 0%,#000 28%); -webkit-mask-composite:source-over; mask-composite:add; }
@media(max-width:960px) { #section4::before { width:48%; background-size:auto 105%; background-position:left center; } }

/* Keep the small lower-left ring out of the three-object composition. */
#section4::before { background-image:radial-gradient(ellipse 28% 48% at 18% 100%,#fafafa 0%,#fafafa 56%,rgba(250,250,250,0) 100%),url('../img/consulting-white-circles.jpg'); background-size:100% 100%,97% auto; background-position:center,right top; }

/* Subtle consulting composition and surface adjustment. */
#section4.section { background:#f6f6f6 !important; }
#section4::before { background-image:radial-gradient(ellipse 28% 48% at 18% 100%,#f6f6f6 0%,#f6f6f6 56%,rgba(246,246,246,0) 100%),url('../img/consulting-white-circles.jpg'); background-size:100% 100%,94% auto; background-position:center,right top; }

/* Move only the left ring; keep the right artwork flush with the section top. */
@media(min-width:961px) {
  #section4::before { clip-path:polygon(56% 0,100% 0,100% 100%,0 100%,0 85%,56% 85%); }
  #section4::after {
    content:''; display:block; position:absolute; z-index:0; pointer-events:none;
    inset:42px 0 auto auto; width:54%; height:100%; border:0; border-radius:0;
    transform:none; box-shadow:none; filter:none; opacity:1;
    background-image:radial-gradient(ellipse 28% 48% at 18% 100%,#f6f6f6 0%,#f6f6f6 56%,rgba(246,246,246,0) 100%),url('../img/consulting-white-circles.jpg');
    background-size:100% 100%,94% auto; background-position:center,right top; background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%);
    mask-image:linear-gradient(to right,transparent 0%,#000 28%);
    clip-path:inset(0 44% 15% 0);
  }
}
/* Consulting hierarchy and understated text CTA. */
#section4 .intro .wonit-consulting-label { margin:0 0 12px; padding:0; font-size:12px; line-height:18px; font-weight:400; letter-spacing:0; color:#59616b; }
#section4 .intro .title { margin-bottom:22px !important; }
#section4 .intro .sub_title { max-width:100%; margin-bottom:36px !important; }
#section4 .intro .btn_view { width:auto !important; min-height:44px; height:auto !important; gap:10px; justify-content:flex-start; font-size:16px !important; line-height:24px !important; }
#section4 .intro .btn_view .wonit-consulting-arrow { width:20px; height:20px; transform:none; }
@media(max-width:960px) { #section4 .intro .sub_title { max-width:75%; } }
@media(max-width:600px) { #section4 .intro .sub_title { max-width:100%; } }
/* Slightly more compact consulting section on desktop. */
@media(min-width:961px) { #section4.section { min-height:400px !important; } }

/* Rounded outline consulting CTA. */
#section4 .intro .btn_view { min-height:48px; padding:0 20px 0 24px !important; border:1px solid #222 !important; border-radius:999px; gap:12px; background:transparent !important; box-sizing:border-box; }

/* Split through the empty space between rings, keeping the complete left silhouette. */
@media(min-width:961px) {
  #section4::before { clip-path:polygon(61% 0,100% 0,100% 100%,0 100%,0 calc(25.2vw + 42px),61% calc(25.2vw + 42px)); }
  #section4::after { clip-path:polygon(0 0,61% 0,61% 25.2vw,0 25.2vw); }
}
@media(min-width:961px) {
 #section4::before { clip-path:polygon(61% 0,100% 0,100% 100%,0 100%,0 23.8vw,61% 23.8vw); }
 #section4::after { clip-path:ellipse(20% 10.8vw at 38.3% 13.23vw); }
}

/* Size clipping with the artwork itself so responsive widths preserve each ring. */
@media(min-width:961px) {
 #section4::before,#section4::after { width:54%; height:auto; aspect-ratio:1919 / 1279; bottom:auto; background-size:100% 100%,94% auto; }
 #section4::before { top:-40px; clip-path:polygon(61% 0,100% 0,100% 100%,0 100%,0 71%,61% 71%); }
 #section4::after { top:42px; clip-path:ellipse(20% 30% at 38.3% 36.8%); }
}
@media(max-width:960px) {
 #section4::before { inset:0 -80px auto auto; width:580px; height:auto; aspect-ratio:1919 / 1279; clip-path:none; background-image:url('../img/consulting-white-circles.jpg'); background-size:100% auto; background-position:right top; opacity:.45; }
 #section4::after { display:none; }
}
@media(max-width:600px) {
 #section4::before { top:30px; right:-210px; width:540px; opacity:.22; }
}
@media(max-width:960px) { #section4::before { -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,#000 70%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,#000 28%),linear-gradient(to bottom,#000 70%,transparent 100%); mask-composite:intersect; } }

/* Grey hero palette with white typography. */
#section-hero .wonit-hero-card { background:#a8aab4 !important; }
#section-hero .wonit-hero-strip,
#section-hero .wonit-hero-strip .wonit-strip-item:hover,
#section-hero .wonit-hero-strip .wonit-strip-item:focus { background:#8f929f !important; }
html body section.wrap #section-hero .wonit-hero-card .wonit-hero-copy *,
html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item *,
html body section.wrap #section-hero .wonit-hero-card .wonit-hero-nav,
html body section.wrap #section-hero .wonit-hero-card .wonit-hero-pagination { color:#fff !important; }
html body section.wrap #section-hero .wonit-hero-copy .wonit-btn-pill { background:transparent !important; border:1px solid #fff !important; }
#section-hero .wonit-hero-strip .wonit-strip-item:not(:last-child)::after { background:rgba(255,255,255,.14); }
html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(n) .meta,
html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(n) .meta * { color:#fff !important; }

html body section.wrap #section-hero .wonit-hero-strip .wonit-strip-item:nth-child(n) .meta { color:rgba(255,255,255,.7) !important; font-weight:400 !important; font-size:15px; }

/* Reduce the fluid sphere around its existing center. */
#section-hero .wonit-hero-visual canvas { transform:scale(.8); transform-origin:center; }

/* Hide hero artwork while the visual direction is being revised. */
#section-hero .wonit-hero-card .wonit-hero-visual { display:none !important; }


/* Transparent cube motion in the right half of the hero card. */
#section-hero .wonit-hero-card .wonit-hero-visual { display:block !important; position:absolute; left:48%; right:0; top:0; bottom:0; width:auto; height:auto; margin:0; overflow:visible; transform:none; background:none !important; pointer-events:none; z-index:0; }
#section-hero .wonit-hero-visual::before,#section-hero .wonit-hero-visual::after { content:none; }
#section-hero .wonit-hero-visual .wonit-hero-cubes { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1.12); transform-origin:center; }
#section-hero .wonit-hero-copy { position:relative; z-index:1; }
@media(max-width:960px) { #section-hero .wonit-hero-card .wonit-hero-visual { left:50%; right:-12%; bottom:120px; opacity:.75; } }
@media(max-width:600px) { #section-hero .wonit-hero-card .wonit-hero-visual { display:none !important; } }
@media(prefers-reduced-motion:reduce) { #section-hero .wonit-hero-visual .wonit-hero-cubes { visibility:hidden; } #section-hero .wonit-hero-card .wonit-hero-visual { background:url('/resources/img/hero-network-poster.png') center / 125% auto no-repeat !important; } }

#section-hero .wonit-hero-title-line { display:inline-block; vertical-align:top; }

#section-hero .wonit-kw-pill, #section-hero .wonit-keyword-block:focus-within .wonit-kw-pill { background:#edeef1; }

#section-hero .wonit-hero-card .wonit-hero-visual { display:none !important; }

/* Original connected-world motion background in the company introduction. */
#section0 .wonit-company-image-frame { position:relative; overflow:hidden; background:#050c1b; }
#section0 .wonit-company-image { object-position:center; }
#section0 .wonit-company-earth-video,#section0 .wonit-company-data-motion { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#section0 .wonit-company-earth-video { object-fit:cover; object-position:center; z-index:0; }
#section0 .wonit-company-data-motion { z-index:1; }
#section0 .wonit-company-image-frame::after { z-index:2; background:linear-gradient(180deg,rgba(3,9,22,.4),rgba(3,9,22,.05) 42%,rgba(3,9,22,.7)); }
#section0 .wonit-company-heading,#section0 .wonit-company-details { z-index:3; }
@media(prefers-reduced-motion:reduce) { #section0 .wonit-company-earth-video,#section0 .wonit-company-data-motion { display:none; } }
/* Quiet sculptural silver surface replaces the circular consultation artwork. */
#section4.section { background:#f6f6f6 url('../img/consulting-silver-folds.png') center / cover no-repeat !important; }
#section4::before,#section4::after { content:none !important; }
@media(max-width:960px) { #section4.section { background-position:65% center !important; } }
@media(max-width:600px) { #section4.section { background-image:linear-gradient(90deg,rgba(246,246,246,.6),rgba(246,246,246,.25)),url('../img/consulting-silver-folds.png') !important; background-position:center,65% center !important; } }
/* Orbit artwork supplied for the main hero. */
#section-hero .wonit-hero-card .wonit-hero-visual { display:block !important; position:absolute; left:47%; right:-3%; top:0; bottom:90px; width:auto; height:auto; overflow:hidden; pointer-events:none; z-index:0; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 85%,transparent); }
#section-hero .wonit-hero-visual .wonit-hero-orbit { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
@media(max-width:960px) { #section-hero .wonit-hero-card .wonit-hero-visual { left:46%; right:-10%; bottom:100px; opacity:.8; } }
@media(max-width:600px) { #section-hero .wonit-hero-card .wonit-hero-visual { display:none !important; } }
#section-hero .wonit-hero-card .wonit-hero-visual { mask-image:linear-gradient(90deg,transparent,#000 18%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent); mask-composite:intersect; }

/* Larger orbit artwork with a broad, seamless gray fade. */
#section-hero .wonit-hero-card .wonit-hero-visual { left:43%; right:-7%; top:-20px; bottom:65px; mask-image:linear-gradient(90deg,transparent,#000 23%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 23%,#000 70%,transparent); mask-composite:intersect; }
#section-hero .wonit-hero-visual .wonit-hero-orbit { transform:scale(1.14); transform-origin:center; }
@media(max-width:960px) { #section-hero .wonit-hero-card .wonit-hero-visual { left:43%; right:-15%; top:0; bottom:95px; } }
/* Increase the orbit's presence and lower its visual center. */
#section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translateY(32px) scale(1.38); transform-origin:center; }
@media(max-width:960px) { #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translateY(24px) scale(1.3); } }
/* Keep the orbit opaque; feather only the outer background edges. */
#section-hero .wonit-hero-card .wonit-hero-visual { bottom:25px; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 94%,transparent); mask-composite:intersect; opacity:1; }
#section-hero .wonit-hero-visual .wonit-hero-orbit { filter:contrast(1.06) saturate(1.04); opacity:1; }
@media(max-width:960px) { #section-hero .wonit-hero-card .wonit-hero-visual { bottom:65px; opacity:1; } }
#section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translateY(12px) scale(1.18); }
@media(max-width:960px) { #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translateY(9px) scale(1.112); } }

/* Fade the actual video bounds so letterboxing cannot leave a hard seam. */
#section-hero .wonit-hero-card .wonit-hero-visual { overflow:visible; mask-image:none; }
#section-hero .wonit-hero-visual .wonit-hero-orbit { position:absolute; top:50%; left:0; width:100%; height:auto; aspect-ratio:16/9; object-fit:fill; transform:translateY(calc(-50% + 12px)) scale(1.18); mask-image:linear-gradient(90deg,transparent,#000 19%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 94%,transparent); mask-composite:intersect; }
@media(max-width:960px) { #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translateY(calc(-50% + 9px)) scale(1.112); } }
/* Bound the artwork on wide screens while retaining the edge fade. */
#section-hero .wonit-hero-visual .wonit-hero-orbit { left:calc(50% - 24px); width:min(100%,900px); transform:translate(-50%,calc(-50% + 12px)) scale(1.18); }
@media(max-width:960px) { #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translate(-50%,calc(-50% + 9px)) scale(1.112); } }
/* Give the consulting CTA one stronger weight. */
#section4 .intro .btn_view { font-weight:700; }

/* Particle field rises from the lower section into a generous dark upper backdrop. */
#section0 .wonit-company-image-frame { background:#030713; }
#section0 .wonit-company-image,#section0 .wonit-company-data-motion { display:none !important; }
#section0 .wonit-company-earth-video {
  inset:auto 0 0; width:100%; height:65%; object-fit:cover; object-position:center 58%;
  filter:brightness(.82) saturate(.92);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 13%,rgba(0,0,0,.65) 30%,#000 48%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 13%,rgba(0,0,0,.65) 30%,#000 48%);
}
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(3,7,19,.12),transparent 42%,rgba(3,7,19,.58) 100%); }
@media(max-width:600px) { #section0 .wonit-company-earth-video { height:62%; object-position:55% center; } }

/* Slightly reduce the hero orbit while preserving its center and feathered edges. */
#section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translate(-50%,calc(-50% + 12px)) scale(1.13); }
@media(max-width:960px) { #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translate(-50%,calc(-50% + 9px)) scale(1.065); } }

/* Company story: two-line heading, lower wave, and CTA beneath the description. */
#section0 .wonit-company-heading .main_title { max-width:none; line-height:1.35 !important; padding-right:0; }
#section0 .wonit-company-earth-video { height:55%; }
#section0 .wonit-company-details { grid-template-columns:1fr 1fr; align-items:start; }
#section0 .wonit-company-explanation .wonit-company-actions { position:static; margin:26px 0 0; transform:none; display:flex; }
#section0 .wonit-company-actions .btn_view { display:inline-flex !important; align-items:center; justify-content:space-between; width:200px !important; height:46px !important; padding:0 20px !important; border:1px solid rgba(255,255,255,.5) !important; border-radius:999px; font-size:16px !important; line-height:24px; background:transparent !important; }
#section0 .wonit-company-actions .btn_view::before,#section0 .wonit-company-actions .btn_view::after { content:none !important; }
#section0 .wonit-company-actions .btn_view svg { width:22px; height:22px; }
@media(max-width:600px) {
 #section0 .wonit-company-details { grid-template-columns:1fr; gap:24px; }
 #section0 .wonit-company-earth-video { height:52%; }
 #section0 .wonit-company-explanation .wonit-company-actions { margin-top:20px; }
}
#section0 .wonit-company-actions .btn_view { margin:0 !important; }

/* Company wireframe: strong upper title and asymmetric lower story. */
#section0 .wonit-company-heading { padding-top:64px; }
#section0 .wonit-company-heading::before { content:''; display:block; width:88px; height:2px; background:currentColor; color:#fff; margin:0 0 32px; }
#section0 .wonit-company-heading .main_title { font-size:clamp(40px,3.6vw,64px) !important; line-height:1.3 !important; }
#section0 .wonit-company-details { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; gap:64px; padding-bottom:64px; }
#section0 .wonit-company-message { margin:0 0 12px; font-weight:500; }
#section0 .wonit-company-actions .btn_view { width:auto !important; height:40px !important; padding:0 !important; border:0 !important; border-radius:0; gap:18px; justify-content:flex-start; font-weight:600; }
#section0 .wonit-company-actions .btn_view svg { width:36px; height:36px; padding:8px; border:1px solid currentColor; border-radius:50%; box-sizing:border-box; }
#section0 .wonit-company-earth-video { height:53%; }
@media(max-width:960px){
 #section0 .wonit-company-heading::before { margin-bottom:24px; width:64px; }
 #section0 .wonit-company-details { grid-template-columns:1fr 1fr; gap:32px; padding-bottom:40px; }
 #section0 .wonit-company-heading .main_title { font-size:36px !important; }
}
@media(max-width:600px){
 #section0 .wonit-company-image-frame { height:780px; }
 #section0 .wonit-company-heading .main_title { font-size:28px !important; line-height:40px !important; max-width:100%; }
 #section0 .wonit-company-details { grid-template-columns:1fr; gap:28px; }
 #section0 .wonit-company-message { margin:0; }
 #section0 .wonit-company-heading::before { width:48px; margin-bottom:20px; }
 #section0 .wonit-company-explanation .main_sub_title br { display:none; }
}
/* Light fluid ribbon: extend its pale backdrop above the lower video. */
#section0 .wonit-company-image-frame { background:linear-gradient(120deg,#eef3fa,#dce7f5 65%,#e4edf8); }
#section0 .wonit-company-earth-video { inset:auto 0 -10%; height:85%; object-fit:cover; object-position:center; filter:brightness(1.08) saturate(.85); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 12%,#000 32%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 12%,#000 32%); }
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(238,243,250,.12),transparent 48%,rgba(238,243,250,.65)); }
#section0 .wonit-company-heading .main_title,#section0 .wonit-company-details,#section0 .wonit-company-explanation .main_sub_title { color:#0b1d3a !important; }
#section0 .wonit-company-heading::before { color:#0b1d3a; }
#section0 .wonit-company-actions .btn_view,#section0 .wonit-company-actions .btn_view:hover,#section0 .wonit-company-actions .btn_view:focus-visible { color:#0b1d3a !important; }
@media(max-width:600px){ #section0 .wonit-company-earth-video { height:70%; bottom:-3%; } }
/* Match the Vision heading scale and use neutral black copy. */
#section0 .wonit-company-heading .main_title { font-size:56px !important; line-height:68px !important; }
#section0 .wonit-company-heading .main_title,#section0 .wonit-company-details,#section0 .wonit-company-explanation .main_sub_title,#section0 .wonit-company-heading::before,#section0 .wonit-company-actions .btn_view,#section0 .wonit-company-actions .btn_view:hover,#section0 .wonit-company-actions .btn_view:focus-visible { color:#000 !important; }
@media(max-width:960px){ #section0 .wonit-company-heading .main_title { font-size:36px !important; line-height:46px !important; } }
@media(max-width:600px){ #section0 .wonit-company-heading .main_title { font-size:28px !important; line-height:40px !important; } }
/* Slightly smaller heading and ribbon, softly blended into the extended backdrop. */
#section0 .wonit-company-heading .main_title { font-size:52px !important; line-height:64px !important; }
#section0 .wonit-company-earth-video { left:5%; right:auto; width:90%; height:76%; bottom:-7%; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 32%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
@media(max-width:960px){ #section0 .wonit-company-heading .main_title { font-size:36px !important; line-height:46px !important; } }
@media(max-width:600px){ #section0 .wonit-company-heading .main_title { font-size:28px !important; line-height:40px !important; } #section0 .wonit-company-earth-video { height:63%; bottom:0; } }
/* Align the lower copy blocks and remove the decorative heading rule. */
#section0 .wonit-company-heading::before { content:none; display:none; }
#section0 .wonit-company-details { align-items:start; }
#section0 .wonit-company-message { align-self:start; margin-top:0; }
#section1 .wonit-vision-panel .wonit-vision-row:nth-child(3) .wonit-vision-card-arrow { bottom:34px; }
/* Pale mesh video blends into the extended upper backdrop. */
#section0 .wonit-company-earth-video { left:0; width:100%; height:78%; bottom:0; object-position:center; filter:brightness(1.08) saturate(.8); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 15%,#000 38%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 15%,#000 38%); }
@media(max-width:600px){ #section0 .wonit-company-earth-video { height:65%; } }
/* White company copy over the mesh, with a restrained dark overlay for contrast. */
#section0 .wonit-company-image-frame { background:#27354b; }
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(16,27,46,.35),rgba(16,27,46,.28) 45%,rgba(12,23,41,.48)); }
#section0 .wonit-company-earth-video { filter:brightness(.72) saturate(.8); }
#section0 .wonit-company-heading .main_title,
#section0 .wonit-company-details,
#section0 .wonit-company-explanation .main_sub_title,
#section0 .wonit-company-actions .btn_view,
#section0 .wonit-company-actions .btn_view:hover,
#section0 .wonit-company-actions .btn_view:focus-visible { color:#fff !important; }
/* Preserve the airy mesh highlights; concentrate contrast behind the copy. */
#section0 .wonit-company-image-frame { background:linear-gradient(120deg,#8293ad,#a6b4c9); }
#section0 .wonit-company-earth-video { filter:brightness(.98) saturate(.8); }
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(35,51,76,.12),transparent 48%),linear-gradient(0deg,rgba(30,46,70,.22),transparent 42%); }
#section0 .wonit-company-heading .main_title { text-shadow:0 1px 10px rgba(23,40,65,.16); }
#section0 .wonit-company-message,#section0 .wonit-company-explanation .main_sub_title,#section0 .wonit-company-actions .btn_view { text-shadow:0 1px 5px rgba(23,40,65,.3); }
/* Gently restore mesh definition without harsh highlights or vivid color. */
#section0 .wonit-company-earth-video { filter:brightness(1.01) contrast(1.07) saturate(.9); }
#section0 .wonit-company-image-frame::after { background:linear-gradient(180deg,rgba(35,51,76,.08),transparent 45%),linear-gradient(0deg,rgba(30,46,70,.16),transparent 38%); }

/* Centered company message over the mesh video. */
#section0 .wonit-company-heading { text-align:center; padding-top:100px; }
#section0 .wonit-company-heading .main_title { text-align:center !important; margin:0 auto; }
#section0 .wonit-company-message { display:none; }
#section0 .wonit-company-details { display:block; align-self:start; padding:280px 40px 60px; text-align:center; }
#section0 .wonit-company-explanation { max-width:1000px; margin:0 auto; }
#section0 .wonit-company-explanation .main_sub_title { text-align:center !important; }
#section0 .wonit-company-explanation .wonit-company-actions { justify-content:center; margin-top:32px; }
@media(max-width:960px){ #section0 .wonit-company-heading { padding-top:80px !important; } #section0 .wonit-company-details { padding-top:230px !important; } }
@media(max-width:600px){ #section0 .wonit-company-heading { padding-top:72px !important; } #section0 .wonit-company-details { padding-top:210px !important; } #section0 .wonit-company-explanation .main_sub_title { max-width:340px; margin:auto; } }
/* Lower the top hero orbit by another 8px. */
#section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translate(-50%,calc(-50% + 20px)) scale(1.13); }
@media(max-width:960px){ #section-hero .wonit-hero-visual .wonit-hero-orbit { transform:translate(-50%,calc(-50% + 17px)) scale(1.065); } }

/* Center the complete title, description and CTA as one vertical group. */
#section0 .wonit-company-centered-content { grid-area:1/1; z-index:3; align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px; padding:64px 40px; }
#section0 .wonit-company-centered-content .wonit-company-heading { padding:0 !important; margin:0; width:100%; }
#section0 .wonit-company-centered-content .wonit-company-details { padding:0 !important; margin:0; width:100%; align-self:auto; }
@media(max-width:600px){ #section0 .wonit-company-centered-content { padding:48px 24px; gap:28px; } }
/* Compact consulting banner with a sculptural white W. */
#section4.section { background:#f6f7f9 url('../img/consulting-white-w-ribbon.png') center / cover no-repeat !important; }
@media(min-width:961px){ #section4.section { min-height:360px !important; } }
@media(max-width:960px){ #section4.section { background-position:65% center !important; } }
@media(max-width:600px){ #section4.section { background-image:linear-gradient(90deg,rgba(246,247,249,.88),rgba(246,247,249,.48)),url('../img/consulting-white-w-ribbon.png') !important; background-position:center,65% center !important; } }

/* Hold the company section layout while its next visual is being considered. */
#section0 .wonit-company-earth-video { display:none !important; }
#section0 .wonit-company-image-frame { background:#8c9bb2; }
#section0 .wonit-company-image-frame::after { background:none; }
/* Smaller flowing W on the right, with its outer edge intentionally cropped. */
#section4.section { background:#f6f7f9 !important; }
#section4.section::before { content:'' !important; position:absolute; inset:0 -8% 0 auto; width:68%; height:100%; aspect-ratio:auto; clip-path:none; border:0; border-radius:0; background:url('../img/consulting-white-w-ribbon.png') right center / auto 100% no-repeat; opacity:1; transform:none; filter:none; -webkit-mask-image:linear-gradient(to right,transparent,#000 18%); mask-image:linear-gradient(to right,transparent,#000 18%); }
#section4.section::after { content:none !important; }
@media(max-width:960px){ #section4.section::before { width:74%; right:-16%; opacity:.7; } }
@media(max-width:600px){ #section4.section::before { width:100%; right:-32%; opacity:.35; } }
#section4.section::before { background-size:auto 85%; }
/* Keep the consulting backdrop while hiding the W artwork. */
#section4.section::before { content:none !important; display:none !important; }

/* Company introduction: panoramic motion with a fixed white values card. */
#section0 .wonit-company-image-frame { height:720px; background:#eeeef0; }
#section0 .wonit-company-earth-video { display:block !important; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(1.02) saturate(.65); mask-image:none; -webkit-mask-image:none; }
#section0 .wonit-company-image-frame::after { background:linear-gradient(90deg,rgba(246,246,248,.35),transparent 70%); }
#section0 .wonit-company-centered-content { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:72px; width:100%; max-width:1600px; margin:auto; padding:64px 80px; align-items:center; }
#section0 .wonit-company-intro-column { min-width:0; }
#section0 .wonit-company-centered-content .wonit-company-heading { text-align:left; }
#section0 .wonit-company-centered-content .wonit-company-heading .main_title { text-align:left !important; color:#151515 !important; font-size:48px !important; line-height:1.35 !important; text-shadow:none; }
#section0 .wonit-company-centered-content .wonit-company-details { margin-top:32px; text-align:left; }
#section0 .wonit-company-explanation .main_sub_title { text-align:left !important; color:#303036 !important; font-size:20px; line-height:34px; text-shadow:none; }
#section0 .wonit-company-explanation .wonit-company-actions { justify-content:flex-start; margin-top:36px; }
#section0 .wonit-company-actions .btn_view,#section0 .wonit-company-actions .btn_view:hover,#section0 .wonit-company-actions .btn_view:focus-visible { color:#151515 !important; text-shadow:none; }
#section0 .wonit-company-value-card { align-self:center; padding:40px; border-radius:28px; background:#fff; box-shadow:0 12px 50px rgba(23,28,39,.1); color:#202020; }
#section0 .wonit-value-label { display:block; margin-bottom:24px; color:#62626c; font-size:16px; line-height:24px; }
#section0 .wonit-company-value-card h3 { margin:0 0 28px; font-size:30px; line-height:42px; font-weight:700; letter-spacing:0; word-break:keep-all; }
#section0 .wonit-company-value-card p { margin:0; font-size:18px; line-height:31px; color:#45454b; word-break:keep-all; }
#section0 .wonit-company-value-card p+p { margin-top:20px; }
@media(max-width:1100px){ #section0 .wonit-company-centered-content { padding:48px 40px; gap:40px; grid-template-columns:1fr 1fr; } #section0 .wonit-company-centered-content .wonit-company-heading .main_title { font-size:36px !important; } #section0 .wonit-company-value-card { padding:32px; } #section0 .wonit-company-value-card h3 { font-size:26px; line-height:36px; } }
@media(max-width:700px){ #section0 .wonit-company-image-frame { height:auto; min-height:100%; } #section0 .wonit-company-centered-content { grid-template-columns:1fr; padding:48px 24px; gap:36px; } #section0 .wonit-company-centered-content .wonit-company-heading .main_title { font-size:28px !important; line-height:40px !important; } #section0 .wonit-company-explanation .main_sub_title { max-width:none; font-size:16px; line-height:28px; } #section0 .wonit-company-value-card { padding:28px; border-radius:24px; } #section0 .wonit-company-value-card h3 { font-size:24px; line-height:34px; } #section0 .wonit-company-value-card p { font-size:16px; line-height:28px; } }
#section0 .wonit-company-intro-column .wonit-company-explanation { width:100%; max-width:none; margin:0; }
#section0 .wonit-company-value-card { text-align:left; }