/* ==========================================================================
   Home4 Landing Page - Clean Modern Design (Pure CSS)
   Scoped: #home4-page-wrapper
   ========================================================================== */

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* --- Floating CTA (?꾩껜 ?붾컮?댁뒪) --- */
#home4-page-wrapper .h4-float-cta {
	position: fixed;
	bottom: -80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

#home4-page-wrapper .h4-float-cta--show {
	bottom: 32px;
	pointer-events: auto;
}

#home4-page-wrapper .h4-float-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 36px;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	border-radius: 60px;
	text-decoration: none !important;
	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
	transition: all 0.3s ease;
	white-space: nowrap;
}

#home4-page-wrapper .h4-float-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
	color: #fff !important;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-float-cta--show {
		bottom: 20px;
	}

	#home4-page-wrapper .h4-float-cta-btn {
		padding: 12px 24px;
		font-size: 14px;
		box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
	}
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Variables --- */
#home4-page-wrapper {
	--h4-blue: #6366F1;
	--h4-blue-dark: #4F46E5;
	--h4-indigo: #8B5CF6;
	--h4-cyan: #06B6D4;
	--h4-bg: #FAFAF8;
	--h4-white: #FFFFFF;
	--h4-zinc-50: #FAFAF8;
	--h4-zinc-100: #F5F5F0;
	--h4-zinc-200: #E8E8E3;
	--h4-zinc-300: #D4D4CF;
	--h4-zinc-400: #A1A1AA;
	--h4-zinc-500: #71717A;
	--h4-zinc-600: #52525B;
	--h4-zinc-700: #3F3F46;
	--h4-zinc-800: #27272A;
	--h4-zinc-900: #18181B;
	--h4-emerald: #34D399;
	--h4-amber: #F59E0B;
	--h4-gradient: linear-gradient(135deg, #6366F1, #A855F7, #EC4899);
	--h4-gradient-hover: linear-gradient(135deg, #4F46E5, #9333EA, #DB2777);
	background: var(--h4-zinc-50);
	color: var(--h4-zinc-900);
	padding: 0;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	line-height: 1.6;
}

#home4-page-wrapper *,
#home4-page-wrapper *::before,
#home4-page-wrapper *::after {
	box-sizing: border-box;
}

/* Custom Cursor */
#home4-page-wrapper .h4-cursor {
	position: fixed;
	width: 12px;
	height: 12px;
	background: var(--h4-blue);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: width 0.2s, height 0.2s;
	mix-blend-mode: multiply;
}

#home4-page-wrapper .h4-cursor-ring {
	position: fixed;
	width: 40px;
	height: 40px;
	border: 2px solid var(--h4-blue);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	opacity: 0.5;
}

@media (max-width: 767px) {

	#home4-page-wrapper .h4-cursor,
	#home4-page-wrapper .h4-cursor-ring {
		display: none;
	}
}

#home4-page-wrapper .h4-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-container {
		padding: 0 10px;
	}
}

/* --- Utility --- */
#home4-page-wrapper .h4-gradient-text {
	background: var(--h4-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#home4-page-wrapper .h4-br-desktop {
	display: none;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-br-desktop {
		display: block;
	}
}

/* --- Scroll Reveal --- */
#home4-page-wrapper .h4-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-reveal.h4-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Hero animations --- */
@keyframes h4-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#home4-page-wrapper .h4-anim {
	opacity: 0;
	animation: h4-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#home4-page-wrapper .h4-anim-d1 {
	animation-delay: 0.1s;
}

#home4-page-wrapper .h4-anim-d2 {
	animation-delay: 0.2s;
}

#home4-page-wrapper .h4-anim-d3 {
	animation-delay: 0.3s;
}

#home4-page-wrapper .h4-anim-d4 {
	animation-delay: 0.4s;
}

#home4-page-wrapper .h4-anim-d5 {
	animation-delay: 0.5s;
}

@keyframes h4-ping {

	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* --- Section commons --- */
#home4-page-wrapper .h4-section-label {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--h4-blue);
	margin: 0 0 12px;
}

#home4-page-wrapper .h4-section-title {
	text-align: center;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.5px;
	margin: 0 0 16px;
	color: var(--h4-zinc-900);
	word-break: keep-all;
}

@media (max-width: 767px) {

	#home4-page-wrapper .h4-section-title,
	#home4-page-wrapper .h4-steps-title {
		font-size: clamp(20px, 6.5vw, 25px);
		line-height: 1.35;
	}
}

#home4-page-wrapper .h4-section-subtitle {
	text-align: center;
	font-size: 17px;
	color: var(--h4-zinc-500);
	margin: 0 auto 56px;
	max-width: 560px;
	line-height: 1.7;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
#home4-page-wrapper .h4-nav {
	position: fixed;
	top: 52px;
	/* ?좊같???믪씠留뚰겮 ?꾨옒?먯꽌 ?쒖옉 */
	left: 0;
	right: 0;
	z-index: 100;
	padding: 24px 0;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-nav--scrolled {
	top: 0;
	/* ?ㅽ겕濡???理쒖긽??怨좎젙 */
	padding: 14px 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border-bottom: 1px solid var(--h4-zinc-100);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

#home4-page-wrapper .h4-nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#home4-page-wrapper .h4-nav-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--h4-zinc-900);
	text-decoration: none;
}

#home4-page-wrapper .h4-nav-logo-icon {
	width: 32px;
	height: 32px;
	background: var(--h4-zinc-900);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-nav-logo-dot {
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 3px;
}

#home4-page-wrapper .h4-nav-links {
	display: none;
	align-items: center;
	gap: 32px;
}

#home4-page-wrapper .h4-nav-links a {
	font-size: 14px;
	font-weight: 500;
	color: var(--h4-zinc-600);
	text-decoration: none;
	transition: color 0.2s;
}

#home4-page-wrapper .h4-nav-links a:hover {
	color: var(--h4-zinc-900);
}

#home4-page-wrapper .h4-nav-actions {
	display: none;
	align-items: center;
	gap: 16px;
}

#home4-page-wrapper .h4-nav-login {
	font-size: 14px;
	font-weight: 500;
	color: var(--h4-zinc-600);
	text-decoration: none;
	transition: color 0.2s;
}

#home4-page-wrapper .h4-nav-login:hover {
	color: var(--h4-zinc-900);
}

/* Buttons */
#home4-page-wrapper .h4-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: var(--h4-gradient);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}

#home4-page-wrapper .h4-btn-primary:hover {
	background: var(--h4-gradient-hover);
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

#home4-page-wrapper .h4-btn-sm {
	padding: 10px 20px;
}

#home4-page-wrapper .h4-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 36px;
	background: var(--h4-gradient);
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-btn-dark:hover {
	background: var(--h4-gradient-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45);
	color: #fff !important;
}

.h4-hero-typo-row2 {
	margin-left : 30px;
}

#home4-page-wrapper .h4-btn-dark svg {
	transition: transform 0.2s;
}

#home4-page-wrapper .h4-btn-dark:hover svg {
	transform: translateX(3px);
}

#home4-page-wrapper .h4-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, 0.15);
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
	color: #fff !important;
}

#home4-page-wrapper .h4-btn-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 36px;
	background: var(--h4-white);
	color: var(--h4-zinc-900) !important;
	font-size: 16px;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

#home4-page-wrapper .h4-btn-white:hover {
	background: var(--h4-zinc-100);
	color: var(--h4-zinc-900) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
}

/* Mobile toggle */
#home4-page-wrapper .h4-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--h4-zinc-900);
	padding: 4px;
}

/* Mobile menu */
#home4-page-wrapper .h4-mobile-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--h4-zinc-100);
}

#home4-page-wrapper .h4-mobile-menu--open {
	display: flex;
}

#home4-page-wrapper .h4-mobile-menu a {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--h4-zinc-700);
	text-decoration: none;
	border-bottom: 1px solid var(--h4-zinc-100);
}

/* ==========================================================================
   HERO (Bold Typography Layout)
   ========================================================================== */
#home4-page-wrapper .h4-hero {
	position: relative;
	padding: clamp(80px, 10vw, 120px) 24px;
	overflow: hidden;
	background: #FAFAF8;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-hero {
		padding: 240px 24px 180px;
	}
}

/* 誘몄꽭??洹몃━???⑦꽩 */
#home4-page-wrapper .h4-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 0;
}

/* ?곷떒 以묒븰 ?€?€??湲€濡쒖슦 */
#home4-page-wrapper .h4-hero::after {
	content: '';
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 600px;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* 釉붾∼ (?몃뵒怨??쇳뵆 紐⑤끂?? */
#home4-page-wrapper .h4-hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.08;
	animation: h4-float-blob 10s ease-in-out infinite;
	z-index: 0;
}

#home4-page-wrapper .h4-hero-b1 {
	width: 400px;
	height: 400px;
	background: #6366F1;
	top: 5%;
	left: 0%;
	animation-delay: 0s;
}

#home4-page-wrapper .h4-hero-b2 {
	width: 300px;
	height: 300px;
	background: #8B5CF6;
	top: 10%;
	right: 5%;
	animation-delay: 3s;
}

#home4-page-wrapper .h4-hero-b3 {
	width: 350px;
	height: 350px;
	background: #6366F1;
	bottom: 10%;
	left: 10%;
	animation-delay: 5s;
}

#home4-page-wrapper .h4-hero-b4 {
	width: 250px;
	height: 250px;
	background: #A78BFA;
	bottom: 5%;
	right: 8%;
	animation-delay: 1.5s;
}

@keyframes h4-float-blob {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	33% {
		transform: translate(20px, -20px) scale(1.05);
	}

	66% {
		transform: translate(-15px, 15px) scale(0.95);
	}
}

#home4-page-wrapper .h4-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Sparkle particles */
#home4-page-wrapper .h4-hero-sparkle {
	position: absolute;
	border-radius: 50%;
	background: rgba(99, 102, 241, 0.15);
	z-index: 0;
	pointer-events: none;
}

#home4-page-wrapper .h4-hero-sp1 {
	width: 6px;
	height: 6px;
	top: 25%;
	left: 15%;
	animation: h4-sparkle 4s ease-in-out infinite;
}

#home4-page-wrapper .h4-hero-sp2 {
	width: 4px;
	height: 4px;
	top: 35%;
	right: 20%;
	animation: h4-sparkle 5s ease-in-out infinite 1s;
	background: rgba(168, 85, 247, 0.15);
}

#home4-page-wrapper .h4-hero-sp3 {
	width: 8px;
	height: 8px;
	top: 60%;
	left: 25%;
	animation: h4-sparkle 6s ease-in-out infinite 2s;
	background: rgba(59, 130, 246, 0.12);
}

#home4-page-wrapper .h4-hero-sp4 {
	width: 5px;
	height: 5px;
	top: 20%;
	right: 30%;
	animation: h4-sparkle 4.5s ease-in-out infinite 0.5s;
}

#home4-page-wrapper .h4-hero-sp5 {
	width: 3px;
	height: 3px;
	top: 70%;
	right: 15%;
	animation: h4-sparkle 5.5s ease-in-out infinite 3s;
	background: rgba(168, 85, 247, 0.12);
}

@keyframes h4-sparkle {

	0%,
	100% {
		opacity: 0;
		transform: scale(0.5);
	}

	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}

/* Main typography */
#home4-page-wrapper .h4-hero-typo {
	width: 100%;
	margin-bottom: 48px;
}

#home4-page-wrapper .h4-hero-typo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2vw, 24px);
	flex-wrap: wrap;
}

#home4-page-wrapper .h4-hero-typo-big {
	font-size: clamp(48px, 10vw, 120px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1.3;
	color: var(--h4-zinc-900);
	white-space: nowrap;
}

#home4-page-wrapper .h4-hero-typo-row2 {
	margin-top: clamp(12px, 2vw, 24px);
	margin-left: 70px;
}

#home4-page-wrapper .h4-hero-typo-row2 .h4-hero-typo-big {
	background: linear-gradient(135deg, #3B82F6, #6366F1, #A855F7, #EC4899);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Side description */
#home4-page-wrapper .h4-hero-typo-side {
	display: none;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-hero-typo-side {
		display: block;
		flex-shrink: 0;
	}

	#home4-page-wrapper .h4-hero-typo-side p {
		font-size: 22px;
		color: var(--h4-zinc-600);
		line-height: 1.7;
		margin: 0;
		text-align: center;
		font-weight: 600;
		animation: h4-side-fade 3s ease-in-out infinite alternate;
	}

	@keyframes h4-side-fade {
		0% {
			opacity: 0.5;
			transform: translateY(4px);
		}

		100% {
			opacity: 1;
			transform: translateY(-4px);
		}
	}
}

/* CTA */
#home4-page-wrapper .h4-hero-cta-wrap {
	display: flex;
	justify-content: center;
}

#home4-page-wrapper .h4-hero-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 20px 44px;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	border-radius: 60px;
	text-decoration: none !important;
	border: none;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(99, 102, 241, 0.3);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

#home4-page-wrapper .h4-hero-cta-primary::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 62px;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	z-index: -1;
	filter: blur(16px);
	opacity: 0.5;
	animation: h4-cta-glow 2.5s ease-in-out infinite alternate;
}

@keyframes h4-cta-glow {
	0% {
		opacity: 0.4;
		transform: scale(1);
	}

	100% {
		opacity: 0.7;
		transform: scale(1.08);
	}
}

#home4-page-wrapper .h4-hero-cta-primary:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 16px 40px rgba(99, 102, 241, 0.4);
	color: #fff !important;
}

#home4-page-wrapper .h4-hero-cta-primary:active {
	transform: scale(0.97);
}

@media (max-width: 480px) {
	#home4-page-wrapper .h4-hero-cta-primary {
		padding: 14px 28px;
		font-size: 15px;
		gap: 8px;
	}

	#home4-page-wrapper .h4-hero-cta-primary svg {
		width: 16px;
		height: 16px;
	}
}

/* ?덉뼱濡??대? ?꾧린 */
#home4-page-wrapper .h4-hero-reviews {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 100px;
	flex-wrap: wrap;
}

#home4-page-wrapper .h4-hero-review-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	color: var(--h4-zinc-600);
	font-weight: 600;
}

#home4-page-wrapper .h4-hero-review-stars {
	font-size: 24px;
	color: #FBBF24;
	letter-spacing: 2px;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-hero-reviews {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		margin-top: 56px;
	}

	#home4-page-wrapper .h4-hero-review-item {
		font-size: 16px;
	}

	#home4-page-wrapper .h4-hero-review-stars {
		font-size: 22px;
	}

	#home4-page-wrapper .h4-hero-typo-row2 {
		margin-left: unset;
	}
}

/* Mobile: description below typo */
@media (max-width: 767px) {
	#home4-page-wrapper .h4-hero-typo {
		margin-bottom: 24px;
	}

	#home4-page-wrapper .h4-hero-typo::after {
		content: '?대뼸寃??쒖옉?댁빞 ?좎? 紐⑤Ⅴ寃좊떎硫?A?곕え?꾩뿉???쎄퀬 鍮좊Ⅴ寃??쒖옉?섏꽭??;
 white-space: pre-line;
		display: block;
		font-size: 20px;
		color: var(--h4-zinc-600);
		font-weight: 600;
		line-height: 1.6;
		margin-top: 24px;
		text-align: center;
	}
}

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */
#home4-page-wrapper .h4-social-proof {
	padding: 28px 0;
	border-top: 1px solid var(--h4-zinc-200);
	border-bottom: 1px solid var(--h4-zinc-200);
	background: var(--h4-white);
}

#home4-page-wrapper .h4-social-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	opacity: 0.4;
	filter: grayscale(100%);
}

#home4-page-wrapper .h4-social-label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--h4-zinc-600);
	margin: 0;
}

#home4-page-wrapper .h4-social-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	font-size: 20px;
	font-weight: 700;
	font-family: Georgia, serif;
	color: var(--h4-zinc-700);
}

/* Platform big text marquee */
#home4-page-wrapper .h4-platform-bigtext {
	overflow: hidden;
	padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 80px);
	margin-top: 0;
}

#home4-page-wrapper .h4-platform-bigtext-track {
	display: flex;
	gap: 80px;
	width: max-content;
	animation: h4-bigtext-scroll 20s linear infinite;
}

#home4-page-wrapper .h4-platform-bigtext-track span {
	font-size: clamp(80px, 14vw, 200px);
	font-weight: 900;
	letter-spacing: -2px;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(139, 92, 246, 0.15);
	line-height: 1;
}

@keyframes h4-bigtext-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-33.333% - 27px));
	}
}

/* ==========================================================================
   SHOWCASE (怨좉컼 ?ㅽ넗由?- ?щ씪?대뜑)
   ========================================================================== */
#home4-page-wrapper .h4-showcase {
	padding: clamp(80px, 10vw, 120px) 24px;
	background: #1A1740;
	overflow: hidden;
}

/* ?곷떒: ?€?댄? 醫뚯륫 + ?붿궡??*/
#home4-page-wrapper .h4-showcase-top {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

#home4-page-wrapper .h4-showcase-heading {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	line-height: 1.35;
	color: #fff;
	margin: 0;
}

#home4-page-wrapper .h4-showcase-arrows {
	display: flex;
	gap: 16px;
	align-self: flex-end;
}

#home4-page-wrapper .h4-showcase-arrow {
	width: 44px;
	height: 44px;
	border-radius: 0;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease;
	padding: 0;
}

#home4-page-wrapper .h4-showcase-arrow:hover {
	color: #fff;
}

/* ?щ씪?대뜑 */
#home4-page-wrapper .h4-showcase-slider {
	overflow: visible;
	padding: 0 24px;
	max-width: 1280px;
	margin: 0 auto;
}

#home4-page-wrapper .h4-showcase-track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 8px;
}

#home4-page-wrapper .h4-showcase-track::-webkit-scrollbar {
	display: none;
}

#home4-page-wrapper .h4-showcase-slide {
	flex: 0 0 52%;
	min-width: 320px;
	scroll-snap-align: center;
	transition: transform 0.4s ease;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-showcase-slide {
		flex: 0 0 88%;
	}
	#home4-page-wrapper .h4-showcase {
		padding: 32px 24px;
	}
}

/* 移대뱶 */
#home4-page-wrapper .h4-showcase-card-link {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
}

#home4-page-wrapper .h4-showcase-card-img {
	width: 100%;
	aspect-ratio: 16/10;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#home4-page-wrapper .h4-showcase-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#home4-page-wrapper .h4-showcase-slide:hover .h4-showcase-card-img img {
	transform: scale(1.03);
}

#home4-page-wrapper .h4-showcase-stars {
	font-size: 20px;
	color: #FBBF24;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

#home4-page-wrapper .h4-showcase-card-info {
	display: flex;
	flex-direction: column;
}

#home4-page-wrapper .h4-showcase-card-title {
	font-size: clamp(16px, 1.8vw, 22px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.5;
}

#home4-page-wrapper .h4-showcase-card-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#home4-page-wrapper .h4-showcase-card-brand {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

#home4-page-wrapper .h4-showcase-card-cat {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   MINI REVIEW (?쒖쨪 ?꾧린)
   ========================================================================== */
#home4-page-wrapper .h4-mini-review {
	padding: 80px 24px;
	background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
	border-top: 1px solid var(--h4-zinc-100);
}

#home4-page-wrapper .h4-mini-review-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-mini-review-inner {
		flex-direction: row;
		gap: 24px;
		justify-content: center;
	}
}

#home4-page-wrapper .h4-mini-review-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	flex: 1;
	padding: 44px 36px 40px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 20px;
	border: 1px solid rgba(99, 102, 241, 0.08);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-mini-review-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.15);
}

#home4-page-wrapper .h4-mini-stars {
	font-size: 28px;
	color: #fbbf24;
	letter-spacing: 2px;
	display: inline-block;
	background: rgba(251, 191, 36, 0.1);
	padding: 6px 12px;
	border-radius: 8px;
}

#home4-page-wrapper .h4-mini-review-item p {
	font-size: 18px;
	font-weight: 600;
	color: var(--h4-zinc-900);
	margin: 0;
	line-height: 1.5;
	letter-spacing: -0.3px;
}

#home4-page-wrapper .h4-mini-review-item span {
	font-size: 14px;
	color: var(--h4-zinc-500);
	font-weight: 500;
}

/* ==========================================================================
   TICKER BANNER (?좊같??
   ========================================================================== */
#home4-page-wrapper .h4-ticker {
	background: var(--h4-zinc-900);
	padding: 16px 0;
	height: 52px;
	overflow: hidden;
	position: relative;
	z-index: 101;
	/* ?대퉬寃뚯씠?섎낫???곷떒 */
}

#home4-page-wrapper .h4-ticker-track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	animation: h4-ticker-scroll 40s linear infinite;
}

#home4-page-wrapper .h4-ticker-track span {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
	letter-spacing: 0px;
}

#home4-page-wrapper .h4-ticker-dot {
	width: 4px;
	height: 4px;
	background: var(--h4-blue);
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	opacity: 0.6;
}

@keyframes h4-ticker-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-ticker {
		padding: 12px 0;
		height: auto;
	}

	#home4-page-wrapper .h4-ticker-track {
		gap: 24px;
		animation-duration: 30s;
	}

	#home4-page-wrapper .h4-ticker-track span {
		font-size: 13px;
	}
}

/* ==========================================================================
   EMPATHY SECTION (怨듦컧 ?뱀뀡)
   ========================================================================== */
#home4-page-wrapper .h4-empathy {
	position: relative;
	width: 100%;
	min-height: 700px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(80px, 10vw, 120px) 24px;
	overflow: hidden;
	background: #0f0f14;
}

#home4-page-wrapper .h4-empathy-glow1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: rgba(99, 102, 241, 0.12);
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
	z-index: 0;
}

#home4-page-wrapper .h4-empathy-glow2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	background: rgba(168, 85, 247, 0.08);
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

#home4-page-wrapper .h4-empathy-header {
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 64px);
	position: relative;
	z-index: 10;
}

#home4-page-wrapper .h4-empathy-header .h4-section-title {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.5;
	color: #fff;
}

#home4-page-wrapper .h4-empathy-desc {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.8;
	margin: 0 auto;
	max-width: 600px;
	text-align: center;
}

#home4-page-wrapper .h4-empathy-desc strong {
	color: #fff;
}

/* Bubbles container */
#home4-page-wrapper .h4-empathy-bubbles {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
	z-index: 10;
	/* Mobile: flex wrap */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-empathy-bubbles {
		height: 500px;
		display: block;
		padding: 0;
	}
}

/* Central core (desktop only) */
#home4-page-wrapper .h4-empathy-core {
	display: none;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-empathy-core {
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		align-items: center;
		justify-content: center;
		z-index: 0;
	}
}

#home4-page-wrapper .h4-empathy-ring {
	position: absolute;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	border: 2px solid;
}

#home4-page-wrapper .h4-empathy-ring1 {
	border-color: rgba(168, 85, 247, 0.4);
	animation: h4-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

#home4-page-wrapper .h4-empathy-ring2 {
	border-color: rgba(96, 165, 250, 0.4);
	animation: h4-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 1s;
}

#home4-page-wrapper .h4-empathy-ring3 {
	border-color: rgba(99, 102, 241, 0.35);
	animation: h4-pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 2s;
}

/* 以묒븰 湲€濡쒖슦 ?ъ씤??*/
#home4-page-wrapper .h4-empathy-glow-dot {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.8), rgba(99, 102, 241, 0.4), transparent);
	box-shadow: 0 0 40px 16px rgba(139, 92, 246, 0.25), 0 0 80px 32px rgba(99, 102, 241, 0.1);
	animation: h4-glow-dot-pulse 2s ease-in-out infinite alternate;
	z-index: 1;
}

@keyframes h4-glow-dot-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
		box-shadow: 0 0 40px 16px rgba(139, 92, 246, 0.25), 0 0 80px 32px rgba(99, 102, 241, 0.1);
	}

	100% {
		transform: scale(1.3);
		opacity: 1;
		box-shadow: 0 0 60px 24px rgba(139, 92, 246, 0.35), 0 0 120px 48px rgba(99, 102, 241, 0.15);
	}
}

@keyframes h4-pulse-ring {
	0% {
		transform: scale(0.8);
		opacity: 0.6;
	}

	100% {
		transform: scale(3);
		opacity: 0;
	}
}

#home4-page-wrapper .h4-empathy-mascot {
	position: relative;
	z-index: 1;
	animation: h4-mascot-bounce 3s ease-in-out infinite;
}

/* ?먮옒 罹먮┃???대?吏€ */
#home4-page-wrapper .h4-empathy-mascot-img {
	width: 180px;
	height: 180px;
	object-fit: contain;
	filter: drop-shadow(0 16px 32px rgba(99, 102, 241, 0.4));
}

/* ?댄럺??而⑦뀒?대꼫 */
#home4-page-wrapper .h4-mascot-effects {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

/* 臾쇱쓬??*/
#home4-page-wrapper .h4-mascot-question {
	position: absolute;
	top: -10px;
	right: -5px;
	font-size: 28px;
	font-weight: 900;
	color: #fbbf24;
	animation: h4-q-pop 6s ease-in-out infinite;
}

@keyframes h4-q-pop {

	0%,
	30%,
	100% {
		opacity: 0;
		transform: translateY(0) scale(0.5);
	}

	35%,
	48% {
		opacity: 1;
		transform: translateY(-8px) scale(1);
	}
}

/* ?먮굦??*/
#home4-page-wrapper .h4-mascot-exclaim {
	position: absolute;
	top: -15px;
	right: 10px;
	font-size: 28px;
	font-weight: 900;
	color: #f87171;
	animation: h4-ex-pop 6s ease-in-out infinite;
}

@keyframes h4-ex-pop {

	0%,
	50%,
	70%,
	100% {
		opacity: 0;
		transform: translateY(0) scale(0.5);
	}

	55%,
	65% {
		opacity: 1;
		transform: translateY(-10px) scale(1.2);
	}
}

/* ?€諛⑹슱 */
#home4-page-wrapper .h4-mascot-sweat {
	position: absolute;
	top: 5px;
	right: -15px;
	font-size: 18px;
	animation: h4-sw-drop 6s ease-in-out infinite;
}

@keyframes h4-sw-drop {

	0%,
	72%,
	100% {
		opacity: 0;
		transform: translateY(0);
	}

	75% {
		opacity: 1;
		transform: translateY(0);
	}

	88% {
		opacity: 0;
		transform: translateY(20px);
	}
}

@keyframes h4-mascot-bounce {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	25% {
		transform: translateY(-14px) rotate(-3deg);
	}

	50% {
		transform: translateY(-6px) rotate(0deg);
	}

	75% {
		transform: translateY(-18px) rotate(3deg);
	}
}

/* Glass bubbles (?ㅽ겕 諛곌꼍?? */
#home4-page-wrapper .h4-bubble {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	padding: 16px 24px;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

#home4-page-wrapper .h4-bubble:hover {
	transform: scale(1.05) translateY(-5px) !important;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(99, 102, 241, 0.4);
	box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2);
	z-index: 20;
}

#home4-page-wrapper .h4-bubble span {
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-bubble {
		position: absolute;
		border-radius: 50px;
	}

	#home4-page-wrapper .h4-bubble span {
		font-size: 22px;
		white-space: nowrap;
	}
}

#home4-page-wrapper .h4-em-purple {
	color: #F87171;
	font-weight: 700;
}

#home4-page-wrapper .h4-em-blue {
	color: #F87171;
	font-weight: 700;
}

/* 踰꾨툝 ??以묒븰 鍮쏆쨪湲??곌껐 (?곗뒪?ы깙) */
@media (min-width: 768px) {
	#home4-page-wrapper .h4-bubble::after {
		content: '';
		position: absolute;
		height: 1px;
		pointer-events: none;
		z-index: -1;
	}

	/* 醫뚯륫 踰꾨툝 ???ㅻⅨ履쎌쑝濡?鍮쏆쨪湲?*/
	#home4-page-wrapper .h4-bubble-1::after,
	#home4-page-wrapper .h4-bubble-3::after,
	#home4-page-wrapper .h4-bubble-5::after {
		right: -140px;
		top: 50%;
		width: 140px;
		background: linear-gradient(to right, rgba(168, 85, 247, 0.2), transparent);
	}

	/* ?곗륫 踰꾨툝 ???쇱そ?쇰줈 鍮쏆쨪湲?*/
	#home4-page-wrapper .h4-bubble-2::after,
	#home4-page-wrapper .h4-bubble-4::after,
	#home4-page-wrapper .h4-bubble-6::after {
		left: -140px;
		top: 50%;
		width: 140px;
		background: linear-gradient(to left, rgba(96, 165, 250, 0.2), transparent);
	}

	/* 媛곷룄 議곗젙 */
	#home4-page-wrapper .h4-bubble-1::after {
		transform: rotate(16deg);
		transform-origin: left;
	}

	#home4-page-wrapper .h4-bubble-2::after {
		transform: rotate(-14deg);
		transform-origin: right;
	}

	#home4-page-wrapper .h4-bubble-5::after {
		transform: rotate(-16deg);
		transform-origin: left;
	}

	#home4-page-wrapper .h4-bubble-6::after {
		transform: rotate(14deg);
		transform-origin: right;
	}
}

/* Bubble positions + individual sizes (desktop) */
@media (min-width: 768px) {

	/* ?곷떒 2媛?- ?볤쾶 醫뚯슦 諛곗튂 */
	#home4-page-wrapper .h4-bubble-1 {
		top: 6%;
		left: 5%;
		padding: 18px 30px;
		border-radius: 50px;
		box-shadow: 0 12px 40px -8px rgba(168, 85, 247, 0.15);
	}

	#home4-page-wrapper .h4-bubble-2 {
		top: 8%;
		right: 3%;
		padding: 18px 30px;
		border-radius: 50px;
		box-shadow: 0 12px 40px -8px rgba(96, 165, 250, 0.15);
	}

	/* 以묐떒 2媛?- 留??묒쁿 */
	#home4-page-wrapper .h4-bubble-3 {
		top: 42%;
		left: 2%;
		padding: 20px 32px;
		border-radius: 20px;
		box-shadow: 0 16px 48px -8px rgba(168, 85, 247, 0.12);
	}

	#home4-page-wrapper .h4-bubble-4 {
		top: 40%;
		right: 2%;
		padding: 20px 32px;
		border-radius: 20px;
		box-shadow: 0 16px 48px -8px rgba(96, 165, 250, 0.12);
	}

	/* ?섎떒 2媛?- 醫뚯슦 ?€移?*/
	#home4-page-wrapper .h4-bubble-5 {
		bottom: 8%;
		left: 8%;
		padding: 18px 28px;
		border-radius: 50px;
		opacity: 0.9;
	}

	#home4-page-wrapper .h4-bubble-6 {
		bottom: 6%;
		right: 5%;
		padding: 18px 28px;
		border-radius: 50px;
		opacity: 0.9;
	}
}

/* Float animations */
@keyframes h4-float-a {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-10px, -15px);
	}
}

@keyframes h4-float-b {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(15px, -10px);
	}
}

@keyframes h4-float-c {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-15px, 15px);
	}
}

@keyframes h4-float-d {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(10px, 15px);
	}
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-float-a {
		animation: h4-float-a 7s ease-in-out infinite;
	}

	#home4-page-wrapper .h4-float-b {
		animation: h4-float-b 8s ease-in-out infinite;
	}

	#home4-page-wrapper .h4-float-c {
		animation: h4-float-c 6s ease-in-out infinite;
	}

	#home4-page-wrapper .h4-float-d {
		animation: h4-float-d 7.5s ease-in-out infinite;
	}
}

/* ==========================================================================
   COMPARE (鍮꾧탳 ?뱀뀡)
   ========================================================================== */
#home4-page-wrapper .h4-compare {
	padding: clamp(80px, 10vw, 128px) 0;
	background: #0F0B2E;
	overflow: hidden;
}

#home4-page-wrapper .h4-compare-header {
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 64px);
}

#home4-page-wrapper .h4-compare-header .h4-platform-tag {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #C4B5FD;
	box-shadow: none;
}

#home4-page-wrapper .h4-compare-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-compare-table {
		flex-direction: row;
	}
}

/* 而щ읆 怨듯넻 */
#home4-page-wrapper .h4-compare-col {
	flex: 1;
	padding: 36px 28px;
}

#home4-page-wrapper .h4-compare-col-head {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 28px;
	letter-spacing: -0.3px;
}

#home4-page-wrapper .h4-compare-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 12px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	transition: transform 0.2s ease;
}

#home4-page-wrapper .h4-compare-item svg {
	flex-shrink: 0;
}

#home4-page-wrapper .h4-compare-item strong {
	font-weight: 700;
}

/* 湲곗〈 ?뚮옯??(醫? */
#home4-page-wrapper .h4-compare-old {
	background: #1A1740;
}

#home4-page-wrapper .h4-compare-old .h4-compare-col-head {
	color: rgba(255, 255, 255, 0.5);
}

#home4-page-wrapper .h4-compare-old .h4-compare-item {
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.5);
}

/* ?곕え??(?? */
#home4-page-wrapper .h4-compare-new {
	background: #fff;
	border: 2px solid rgba(99, 102, 241, 0.15);
}

#home4-page-wrapper .h4-compare-new .h4-compare-col-head {
	color: #6366F1;
}

#home4-page-wrapper .h4-compare-new .h4-compare-item {
	background: #F5F3FF;
	color: #18181B;
}

#home4-page-wrapper .h4-compare-new .h4-compare-item:hover {
	transform: translateX(4px);
}

#home4-page-wrapper .h4-compare-new .h4-compare-item strong {
	color: #6366F1;
}

/* VS 諭껋? */
#home4-page-wrapper .h4-compare-vs {
	display: none;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-compare-vs {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6));
		color: #fff;
		font-size: 16px;
		font-weight: 900;
		z-index: 2;
		box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
	}
}

/* 紐⑤컮??*/
@media (max-width: 767px) {
	#home4-page-wrapper .h4-compare-col {
		padding: 28px 20px;
	}

	#home4-page-wrapper .h4-compare-new {
		border-radius: 0 0 24px 24px;
		border-top: none;
	}

	#home4-page-wrapper .h4-compare-old {
		border-radius: 24px 24px 0 0;
	}

	#home4-page-wrapper .h4-compare-item {
		font-size: 15px;
		padding: 14px 14px;
	}
}

/* ==========================================================================
   4-STEP PROCESS
   ========================================================================== */
#home4-page-wrapper .h4-steps {
	padding: clamp(80px, 10vw, 128px) 0;
	background: transparent;
}

#home4-page-wrapper .h4-steps-header {
	text-align: center;
	margin-bottom: clamp(48px, 6vw, 80px);
}

#home4-page-wrapper .h4-steps-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.5px;
	margin: 0 0 16px;
	color: var(--h4-zinc-900);
}

#home4-page-wrapper .h4-steps-sub {
	font-size: 17px;
	color: var(--h4-zinc-500);
	margin: 0 auto;
	max-width: 560px;
	line-height: 1.7;
}

#home4-page-wrapper .h4-steps-grid {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: center;
	position: relative;
}

/* ?곌껐??(?곗뒪?ы깙) */
#home4-page-wrapper .h4-steps-line {
	display: none;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-steps-grid {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
	}

	#home4-page-wrapper .h4-steps-line {
		display: block;
		position: absolute;
		top: 48px;
		left: 12.5%;
		right: 12.5%;
		height: 1px;
		background: var(--h4-zinc-200, #E4E4E7);
		z-index: 0;
	}
}

#home4-page-wrapper .h4-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-step {
		width: 25%;
		padding: 0 16px;
	}
}

#home4-page-wrapper .h4-step:hover {
	transform: translateY(-8px);
}

/* 湲€?섏뒪紐⑦뵾利??꾩씠肄?*/
#home4-page-wrapper .h4-step-circle {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	box-shadow: 0 0 24px rgba(99, 102, 241, 0.3);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	color: #fff;
}

#home4-page-wrapper .h4-step-circle .h4-lucide-icon {
	width: 36px;
	height: 36px;
	stroke-width: 1.5;
}

#home4-page-wrapper .h4-step:hover .h4-step-circle {
	box-shadow: 0 0 48px rgba(99, 102, 241, 0.45);
	transform: scale(1.08);
}

#home4-page-wrapper .h4-step-name {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--h4-zinc-900);
	letter-spacing: -0.3px;
}

#home4-page-wrapper .h4-step-desc {
	font-size: 15px;
	color: var(--h4-zinc-500);
	line-height: 1.6;
	margin: 0;
	word-break: keep-all;
}

/* ?ㅽ겕濡??깆옣 紐⑥뀡 (?쒖감) - h4-reveal ?ㅻ쾭?쇱씠??*/
#home4-page-wrapper .h4-step.h4-reveal {
	opacity: 0;
	transform: translateY(32px) scale(0.95);
	transition: none;
}

#home4-page-wrapper .h4-step.h4-reveal.h4-visible {
	animation: h4-step-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#home4-page-wrapper .h4-step:nth-child(2).h4-visible {
	animation-delay: 0s;
}

#home4-page-wrapper .h4-step:nth-child(3).h4-visible {
	animation-delay: 0.15s;
}

#home4-page-wrapper .h4-step:nth-child(4).h4-visible {
	animation-delay: 0.3s;
}

#home4-page-wrapper .h4-step:nth-child(5).h4-visible {
	animation-delay: 0.45s;
}

@keyframes h4-step-in {
	from {
		opacity: 0;
		transform: translateY(32px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* 紐⑤컮?? ?좊땲硫붿씠???€??諛붾줈 ?쒖떆 */
@media (max-width: 767px) {
	#home4-page-wrapper .h4-step.h4-reveal {
		opacity: 1;
		transform: none;
	}

	#home4-page-wrapper .h4-steps {
		padding: 60px 0;
	}

	#home4-page-wrapper .h4-steps-grid {
		gap: 36px;
	}

	#home4-page-wrapper .h4-step-circle {
		width: 72px;
		height: 72px;
	}

	#home4-page-wrapper .h4-step-circle .h4-lucide-icon {
		width: 28px;
		height: 28px;
	}

	#home4-page-wrapper .h4-step-name {
		font-size: 17px;
	}

	#home4-page-wrapper .h4-step-desc {
		font-size: 14px;
	}
}

/* ==========================================================================
   PLATFORM INTRODUCTION (Zigzag Layout)
   ========================================================================== */
#home4-page-wrapper .h4-platform {
	padding: clamp(80px, 10vw, 120px) 24px;
	background: transparent;
}

#home4-page-wrapper .h4-platform-header {
	text-align: center;
	margin-bottom: clamp(60px, 8vw, 100px);
}

#home4-page-wrapper .h4-platform-header .h4-section-title {
	font-size: clamp(36px, 5.5vw, 56px);
	line-height: 1.5;
}

#home4-page-wrapper .h4-platform-arrow {
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
}

#home4-page-wrapper .h4-platform-arrow-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--h4-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
	animation: h4-bounce 2s ease-in-out infinite;
}

@keyframes h4-bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* Lucide icon sizing */
#home4-page-wrapper .h4-lucide-icon {
	width: 24px;
	height: 24px;
}

#home4-page-wrapper .h4-lucide-sm {
	width: 12px;
	height: 12px;
}

#home4-page-wrapper .h4-lucide-check {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-right: 12px;
}

#home4-page-wrapper .h4-check-blue {
	color: #3b82f6;
}

#home4-page-wrapper .h4-check-pink {
	color: #ec4899;
}

#home4-page-wrapper .h4-check-orange {
	color: #f97316;
}

#home4-page-wrapper .h4-check-purple {
	color: #a855f7;
}

/* Sections container */
#home4-page-wrapper .h4-platform-sections {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 8vw, 120px);
}

/* Row layout */
#home4-page-wrapper .h4-platform-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-platform-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 80px;
	}

	#home4-page-wrapper .h4-platform-row-reverse {
		flex-direction: row-reverse;
	}
}

#home4-page-wrapper .h4-platform-visual {
	width: 100%;
}

#home4-page-wrapper .h4-platform-text {
	width: 100%;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-platform-visual {
		width: 50%;
	}

	#home4-page-wrapper .h4-platform-text {
		width: 50%;
	}
}

/* Visual background panels */
#home4-page-wrapper .h4-platform-visual-bg {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 3 / 3;
	border-radius: 2.5rem;
	padding: clamp(32px, 5vw, 48px);
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-platform-visual-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 16px;
}

#home4-page-wrapper .h4-platform-bg-blue {
	background: rgba(219, 234, 254, 0.5);
	box-shadow: 0 20px 50px -12px rgba(59, 130, 246, 0.15);
}

#home4-page-wrapper .h4-platform-bg-pink {
	background: rgba(252, 231, 243, 0.6);
	box-shadow: 0 20px 50px -12px rgba(236, 72, 153, 0.15);
}

#home4-page-wrapper .h4-platform-bg-orange {
	background: rgba(255, 237, 213, 0.5);
	box-shadow: 0 20px 50px -12px rgba(249, 115, 22, 0.15);
}

#home4-page-wrapper .h4-platform-bg-purple {
	background: rgba(243, 232, 255, 0.5);
	box-shadow: 0 20px 50px -12px rgba(168, 85, 247, 0.15);
}

/* Float animations */
@keyframes h4-float-subtle {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-8px);
	}

	100% {
		transform: translateY(0px);
	}
}

#home4-page-wrapper .h4-platform-float {
	animation: h4-float-subtle 6s ease-in-out infinite;
}

#home4-page-wrapper .h4-platform-float-delayed {
	animation: h4-float-subtle 7s ease-in-out infinite 1s;
}

/* 紐⑥뀡洹몃옒?? ?대? ?붿냼 ?쒖꽌?€濡??깆옣 */
@keyframes h4-mock-fadein {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ?명듃遺??€?쒕낫????*/
#home4-page-wrapper .h4-lui-sidebar {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-lui-tabs {
	animation: h4-mock-fadein 0.5s ease both 0.6s;
}

#home4-page-wrapper .h4-lui-thead {
	animation: h4-mock-fadein 0.5s ease both 0.8s;
}

#home4-page-wrapper .h4-lui-row:nth-child(1) {
	animation: h4-mock-fadein 0.4s ease both 1.0s;
}

#home4-page-wrapper .h4-lui-row:nth-child(2) {
	animation: h4-mock-fadein 0.4s ease both 1.2s;
}

#home4-page-wrapper .h4-lui-row:nth-child(3) {
	animation: h4-mock-fadein 0.4s ease both 1.4s;
}

#home4-page-wrapper .h4-lui-row:nth-child(4) {
	animation: h4-mock-fadein 0.4s ease both 1.6s;
}

/* ?곹뭹 ?뚯떛 紐⑹뾽 */
#home4-page-wrapper .h4-plat-prod-title-bar {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-plat-prod-card:nth-child(1) {
	animation: h4-mock-fadein 0.5s ease both 0.6s;
}

#home4-page-wrapper .h4-plat-prod-card:nth-child(2) {
	animation: h4-mock-fadein 0.5s ease both 0.9s;
}

/* ?띾낫 紐⑹뾽 */
#home4-page-wrapper .h4-plat-promo-header {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-plat-promo-stats {
	animation: h4-mock-fadein 0.5s ease both 0.6s;
}

#home4-page-wrapper .h4-plat-promo-chart>div:nth-child(1) {
	animation: h4-mock-grow 0.6s ease both 0.9s;
}

#home4-page-wrapper .h4-plat-promo-chart>div:nth-child(2) {
	animation: h4-mock-grow 0.6s ease both 1.1s;
}

#home4-page-wrapper .h4-plat-promo-chart>div:nth-child(3) {
	animation: h4-mock-grow 0.6s ease both 1.3s;
}

#home4-page-wrapper .h4-plat-promo-chart>div:nth-child(4) {
	animation: h4-mock-grow 0.6s ease both 1.5s;
}

#home4-page-wrapper .h4-plat-promo-chart>div:nth-child(5) {
	animation: h4-mock-grow 0.6s ease both 1.7s;
}

@keyframes h4-mock-grow {
	0% {
		opacity: 0;
		transform: scaleY(0);
		transform-origin: bottom;
	}

	100% {
		opacity: 1;
		transform: scaleY(1);
		transform-origin: bottom;
	}
}

/* ?뺤궛 紐⑹뾽 */
#home4-page-wrapper .h4-plat-settle-header {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-plat-settle-body .h4-plat-settle-item:nth-child(1) {
	animation: h4-mock-fadein 0.4s ease both 0.7s;
}

#home4-page-wrapper .h4-plat-settle-body .h4-plat-settle-item:nth-child(2) {
	animation: h4-mock-fadein 0.4s ease both 1.0s;
}

/* ?€?€ 紐⑹뾽 ??留덉슦??而ㅼ꽌 ?€?€ */
#home4-page-wrapper .h4-mock-cursor {
	position: absolute;
	z-index: 20;
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 而ㅼ꽌 1: ?쒗뵆由?(?몃뵒怨? */
#home4-page-wrapper .h4-mock-cursor-1 {
	animation: h4-cur1 7s ease-in-out infinite;
}

@keyframes h4-cur1 {
	0% {
		top: 30%;
		left: 25%;
	}

	20% {
		top: 20%;
		left: 60%;
	}

	40% {
		top: 55%;
		left: 40%;
	}

	60% {
		top: 70%;
		left: 65%;
	}

	80% {
		top: 40%;
		left: 30%;
	}

	100% {
		top: 30%;
		left: 25%;
	}
}

/* 而ㅼ꽌 2: ?뚯떛 (?묓겕) */
#home4-page-wrapper .h4-mock-cursor-2 {
	animation: h4-cur2 8s ease-in-out infinite;
}

@keyframes h4-cur2 {
	0% {
		top: 25%;
		left: 35%;
	}

	25% {
		top: 45%;
		left: 70%;
	}

	50% {
		top: 60%;
		left: 30%;
	}

	75% {
		top: 35%;
		left: 55%;
	}

	100% {
		top: 25%;
		left: 35%;
	}
}

/* 而ㅼ꽌 3: ?€?쒕낫??(?ㅻ젋吏€) */
#home4-page-wrapper .h4-mock-cursor-3 {
	animation: h4-cur3 6s ease-in-out infinite;
}

@keyframes h4-cur3 {
	0% {
		top: 20%;
		left: 20%;
	}

	30% {
		top: 35%;
		left: 55%;
	}

	60% {
		top: 65%;
		left: 40%;
	}

	100% {
		top: 20%;
		left: 20%;
	}
}

/* 而ㅼ꽌 4: ?뺤궛 (?쇳뵆) */
#home4-page-wrapper .h4-mock-cursor-4 {
	animation: h4-cur4 7.5s ease-in-out infinite;
}

@keyframes h4-cur4 {
	0% {
		top: 30%;
		left: 40%;
	}

	33% {
		top: 50%;
		left: 60%;
	}

	66% {
		top: 70%;
		left: 35%;
	}

	100% {
		top: 30%;
		left: 40%;
	}
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-mock-cursor {
		display: none;
	}
}

/* Text area */
#home4-page-wrapper .h4-platform-tag {
	display: inline-block;
	padding: 6px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #fff;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6));
	border: none;
	border-radius: 50px;
	margin-bottom: 18px;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

#home4-page-wrapper .h4-platform-title {
	font-size: clamp(22px, 2.8vw, 32px);
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.35;
	color: var(--h4-zinc-900);
	margin: 0 0 24px;
}

#home4-page-wrapper .h4-platform-desc {
	font-size: 18px;
	color: var(--h4-zinc-600);
	line-height: 1.7;
	margin: 0 0 24px;
}

#home4-page-wrapper .h4-platform-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-platform-list li {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--h4-zinc-700);
}

/* Feature list (?꾩씠肄?+ ?ъ씤??而щ윭) */
#home4-page-wrapper .h4-platform-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#home4-page-wrapper .h4-platform-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 18px;
	color: var(--h4-zinc-600);
	line-height: 1.6;
}

#home4-page-wrapper .h4-pf-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #6366F1;
	background: rgba(99, 102, 241, 0.08);
	padding: 6px;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	margin-top: 0;
}

#home4-page-wrapper .h4-pf-point {
	color: var(--h4-zinc-900);
	font-weight: 700;
}

/* ?€?€ Laptop Mockup ?€?€ */
#home4-page-wrapper .h4-laptop {
	width: 100%;
}

#home4-page-wrapper .h4-laptop-screen {
	background: #222;
	border-radius: 10px 10px 0 0;
	border: 2px solid #333;
	border-bottom: none;
	overflow: hidden;
}

#home4-page-wrapper .h4-laptop-bezel {
	height: 16px;
	background: #222;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-laptop-cam {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #444;
}

#home4-page-wrapper .h4-laptop-base {
	height: 12px;
	background: linear-gradient(180deg, #c0c0c4, #a8a8ac);
	border-radius: 0 0 3px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#home4-page-wrapper .h4-laptop-notch {
	width: 60px;
	height: 3px;
	background: #8a8a8e;
	border-radius: 0 0 3px 3px;
	position: absolute;
	top: 0;
}

#home4-page-wrapper .h4-laptop-bottom {
	width: 108%;
	height: 5px;
	background: linear-gradient(180deg, #b0b0b4, #d0d0d4);
	border-radius: 0 0 6px 6px;
	margin: 0 -4%;
}

/* Template UI inside laptop */
#home4-page-wrapper .h4-tpl-ui {
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 220px;
}

/* Nav */
#home4-page-wrapper .h4-tpl-nav {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	border-bottom: 1px solid #f1f5f9;
	gap: 6px;
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-tpl-logo {
	font-size: 8px;
	font-weight: 900;
	color: #1e293b;
	letter-spacing: 1px;
	white-space: nowrap;
}

#home4-page-wrapper .h4-tpl-nav-menu {
	display: flex;
	gap: 8px;
	margin-left: 12px;
}

#home4-page-wrapper .h4-tpl-nav-menu div {
	font-size: 7px;
	color: #64748b;
	font-weight: 600;
	white-space: nowrap;
}

#home4-page-wrapper .h4-tpl-nav-right {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

#home4-page-wrapper .h4-tpl-nav-icons {
	display: flex;
	gap: 3px;
}

#home4-page-wrapper .h4-tpl-nav-icons div {
	width: 8px;
	height: 8px;
	border: 1px solid #cbd5e1;
	border-radius: 2px;
}

#home4-page-wrapper .h4-tpl-login {
	font-size: 6px;
	font-weight: 600;
	color: #64748b;
	padding: 2px 6px;
	border: 1px solid #e2e8f0;
	border-radius: 3px;
	white-space: nowrap;
}

/* Hero */
#home4-page-wrapper .h4-tpl-hero {
	position: relative;
	overflow: hidden;
	animation: h4-mock-fadein 0.6s ease both 0.6s;
}

#home4-page-wrapper .h4-tpl-hero-svg {
	width: 100%;
	display: block;
}

/* Products */
#home4-page-wrapper .h4-tpl-products {
	padding: 8px 12px 10px;
	animation: h4-mock-fadein 0.5s ease both 0.9s;
}

#home4-page-wrapper .h4-tpl-products-title {
	font-size: 8px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
}

#home4-page-wrapper .h4-tpl-products-grid {
	display: flex;
	gap: 6px;
}

#home4-page-wrapper .h4-tpl-prod-thumb {
	flex: 1;
	aspect-ratio: 3/4;
	border-radius: 4px;
	overflow: hidden;
}

#home4-page-wrapper .h4-tpl-prod-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Dashboard UI inside laptop */
#home4-page-wrapper .h4-laptop-ui {
	display: flex;
	background: #fff;
	min-height: 220px;
}

#home4-page-wrapper .h4-lui-sidebar {
	width: 48px;
	background: #f8fafc;
	border-right: 1px solid #eee;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-lui-logo {
	width: 100%;
	height: 10px;
	background: #6366F1;
	border-radius: 3px;
}

#home4-page-wrapper .h4-lui-menu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

#home4-page-wrapper .h4-lui-menu div {
	width: 100%;
	height: 6px;
	background: #e2e8f0;
	border-radius: 2px;
}

#home4-page-wrapper .h4-lui-menu div:first-child {
	background: #c7d2fe;
}

#home4-page-wrapper .h4-lui-main {
	flex: 1;
	padding: 10px;
	overflow: hidden;
}

/* Tabs */
#home4-page-wrapper .h4-lui-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

#home4-page-wrapper .h4-lui-tab {
	font-size: 7px;
	padding: 3px 6px;
	border-radius: 4px;
	background: #f1f5f9;
	color: #64748b;
	font-weight: 600;
	white-space: nowrap;
}

#home4-page-wrapper .h4-lui-tab--active {
	background: #1e1b4b;
	color: #fff;
}

/* Table header */
#home4-page-wrapper .h4-lui-thead {
	display: flex;
	gap: 4px;
	padding-bottom: 6px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 4px;
}

#home4-page-wrapper .h4-lui-th {
	height: 5px;
	background: #e2e8f0;
	border-radius: 2px;
}

/* Table rows */
#home4-page-wrapper .h4-lui-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 0;
	border-bottom: 1px solid #f8fafc;
}

#home4-page-wrapper .h4-lui-cell-icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-lui-ic-blue {
	background: #6366F1;
}

#home4-page-wrapper .h4-lui-ic-green {
	background: #10b981;
}

#home4-page-wrapper .h4-lui-ic-gray {
	background: #94a3b8;
}

#home4-page-wrapper .h4-lui-ic-orange {
	background: #f97316;
}

#home4-page-wrapper .h4-lui-cell-text {
	width: 22%;
	height: 8px;
	background: #1e293b;
	border-radius: 2px;
}

#home4-page-wrapper .h4-lui-cell-prod {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 28%;
}

#home4-page-wrapper .h4-lui-prod-img {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-lui-prod-red {
	background: #fecaca;
}

#home4-page-wrapper .h4-lui-prod-black {
	background: #1e293b;
}

#home4-page-wrapper .h4-lui-prod-mint {
	background: #a7f3d0;
}

#home4-page-wrapper .h4-lui-prod-blue {
	background: #bfdbfe;
}

#home4-page-wrapper .h4-lui-prod-name {
	width: 100%;
	height: 6px;
	background: #e2e8f0;
	border-radius: 2px;
}

#home4-page-wrapper .h4-lui-cell-sm {
	width: 12%;
	height: 8px;
	background: #e2e8f0;
	border-radius: 2px;
}

#home4-page-wrapper .h4-lui-row:nth-child(odd) .h4-lui-cell-sm:last-child {
	background: #22c55e;
}

/* ?€?€ Platform Mockup 1: Site Builder ?€?€ */
#home4-page-wrapper .h4-plat-mockup-site {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

#home4-page-wrapper .h4-plat-mock-bar {
	height: 32px;
	background: rgba(249, 250, 251, 0.8);
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 8px;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-plat-mock-dots {
	display: flex;
	gap: 6px;
}

#home4-page-wrapper .h4-plat-dot-r,
#home4-page-wrapper .h4-plat-dot-y,
#home4-page-wrapper .h4-plat-dot-g {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
}

#home4-page-wrapper .h4-plat-dot-r {
	background: #f87171;
}

#home4-page-wrapper .h4-plat-dot-y {
	background: #fbbf24;
}

#home4-page-wrapper .h4-plat-dot-g {
	background: #34d399;
}

#home4-page-wrapper .h4-plat-mock-url-bar {
	margin-left: 16px;
	height: 16px;
	width: 128px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#home4-page-wrapper .h4-plat-mock-body {
	display: flex;
	flex: 1;
	padding: 12px;
	gap: 12px;
	background: rgba(249, 250, 251, 0.3);
}

#home4-page-wrapper .h4-plat-mock-sidebar {
	width: 25%;
	background: rgba(239, 246, 255, 0.5);
	border-radius: 8px;
	border: 1px solid rgba(191, 219, 254, 0.5);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#home4-page-wrapper .h4-plat-sidebar-line {
	height: 12px;
	background: #dbeafe;
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-mock-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#home4-page-wrapper .h4-plat-hero-block {
	width: 100%;
	height: 80px;
	background: linear-gradient(to right, #dbeafe, #eef2ff);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#home4-page-wrapper .h4-plat-hero-title {
	width: 33%;
	height: 12px;
	background: #bfdbfe;
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-hero-text {
	width: 50%;
	height: 8px;
	background: rgba(191, 219, 254, 0.5);
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-card-row {
	display: flex;
	gap: 8px;
	flex: 1;
}

#home4-page-wrapper .h4-plat-card {
	flex: 1;
	border-radius: 8px;
	min-height: 48px;
}

#home4-page-wrapper .h4-plat-card-pink {
	background: rgba(252, 231, 243, 0.5);
}

#home4-page-wrapper .h4-plat-card-purple {
	background: rgba(243, 232, 255, 0.5);
}

#home4-page-wrapper .h4-plat-card-green {
	background: rgba(209, 250, 229, 0.5);
}

/* ?€?€ Platform Mockup 2: Sourcing UI ?€?€ */
#home4-page-wrapper .h4-plat-sourcing {
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}

/* Search bar */
#home4-page-wrapper .h4-src-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
}

#home4-page-wrapper .h4-src-search-input {
	flex: 1;
	font-size: 10px;
	color: #94a3b8;
	font-weight: 500;
}

#home4-page-wrapper .h4-src-search-btn {
	padding: 6px 14px;
	background: var(--h4-blue);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	border-radius: 8px;
	white-space: nowrap;
}

/* Body */
#home4-page-wrapper .h4-src-body {
	display: flex;
	gap: 10px;
	flex: 1;
}

#home4-page-wrapper .h4-src-categories {
	width: 70px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#home4-page-wrapper .h4-src-cat {
	font-size: 8px;
	font-weight: 600;
	color: #64748b;
	padding: 6px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

#home4-page-wrapper .h4-src-cat--active {
	color: var(--h4-blue);
	background: #eef2ff;
	border-left: 2px solid var(--h4-blue);
}

/* Products grid */
#home4-page-wrapper .h4-src-products {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

#home4-page-wrapper .h4-src-product {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

#home4-page-wrapper .h4-src-prod-img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	position: relative;
}

#home4-page-wrapper .h4-src-img-green {
	background: #d1fae5;
}

#home4-page-wrapper .h4-src-img-yellow {
	background: #fef3c7;
}

#home4-page-wrapper .h4-src-img-beige {
	background: #fde68a;
}

#home4-page-wrapper .h4-src-img-pink {
	background: #fce7f3;
}

#home4-page-wrapper .h4-src-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 6px;
	background: var(--h4-blue);
	color: #fff;
	font-size: 7px;
	font-weight: 700;
	border-radius: 4px;
}

#home4-page-wrapper .h4-src-prod-name {
	height: 7px;
	width: 80%;
	background: #e2e8f0;
	border-radius: 3px;
}

#home4-page-wrapper .h4-src-prod-price {
	height: 9px;
	width: 50%;
	background: #1e293b;
	border-radius: 3px;
}

#home4-page-wrapper .h4-src-svg {
	width: 60%;
	height: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#home4-page-wrapper .h4-src-prod-img {
	position: relative;
}

/* 紐⑥뀡: ?뚯떛 UI */
#home4-page-wrapper .h4-src-search {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-src-categories {
	animation: h4-mock-fadein 0.5s ease both 0.5s;
}

#home4-page-wrapper .h4-src-product:nth-child(1) {
	animation: h4-mock-fadein 0.4s ease both 0.7s;
}

#home4-page-wrapper .h4-src-product:nth-child(2) {
	animation: h4-mock-fadein 0.4s ease both 0.9s;
}

#home4-page-wrapper .h4-src-product:nth-child(3) {
	animation: h4-mock-fadein 0.4s ease both 1.1s;
}

#home4-page-wrapper .h4-src-product:nth-child(4) {
	animation: h4-mock-fadein 0.4s ease both 1.3s;
}

/* ?€?€ (Legacy) Platform Mockup 2: Product ?€?€ */
#home4-page-wrapper .h4-plat-mockup-product {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

#home4-page-wrapper .h4-plat-prod-title-bar {
	height: 24px;
	width: 128px;
	background: #f472b6;
	border-radius: 6px;
	margin-bottom: 24px;
}

#home4-page-wrapper .h4-plat-prod-cards {
	display: flex;
	gap: 16px;
	flex: 1;
}

#home4-page-wrapper .h4-plat-prod-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#home4-page-wrapper .h4-plat-prod-img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	position: relative;
}

#home4-page-wrapper .h4-plat-prod-img-purple {
	background: #e9d5ff;
}

#home4-page-wrapper .h4-plat-prod-img-pink {
	background: #fbcfe8;
}

#home4-page-wrapper .h4-plat-prod-heart {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c084fc;
}

#home4-page-wrapper .h4-plat-prod-sparkle {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: #ec4899;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

#home4-page-wrapper .h4-plat-prod-name {
	height: 12px;
	width: 75%;
	background: #e5e7eb;
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-prod-price {
	height: 16px;
	width: 50%;
	background: #1f2937;
	border-radius: 4px;
}

/* ?€?€ Platform Mockup 3: Dashboard Stats ?€?€ */
#home4-page-wrapper .h4-plat-dashboard {
	width: 100%;
	height: 100%;
	background: #f8fafc;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
}

#home4-page-wrapper .h4-dash-row {
	display: flex;
	gap: 10px;
	flex: 1;
}

#home4-page-wrapper .h4-dash-card {
	flex: 1;
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-left: 3px solid transparent;
	position: relative;
	overflow: hidden;
	border: 1px solid #f1f5f9;
}

#home4-page-wrapper .h4-dash-card-head {
	display: flex;
	align-items: center;
	gap: 6px;
}

#home4-page-wrapper .h4-dash-card-head span {
	font-size: 8px;
	font-weight: 600;
	color: #64748b;
}

#home4-page-wrapper .h4-dash-icon {
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

#home4-page-wrapper .h4-dash-icon-green {
	background: #d1fae5;
	border-left: 2px solid #10b981;
}

#home4-page-wrapper .h4-dash-icon-purple {
	background: #ede9fe;
	border-left: 2px solid #8b5cf6;
}

#home4-page-wrapper .h4-dash-icon-blue {
	background: #dbeafe;
	border-left: 2px solid #6366f1;
}

#home4-page-wrapper .h4-dash-icon-cyan {
	background: #cffafe;
	border-left: 2px solid #06b6d4;
}

#home4-page-wrapper .h4-dash-icon-pink {
	background: #fce7f3;
	border-left: 2px solid #a855f7;
}

#home4-page-wrapper .h4-dash-icon-orange {
	background: #ffedd5;
	border-left: 2px solid #f97316;
}

#home4-page-wrapper .h4-dash-amount {
	font-size: 11px;
	font-weight: 800;
	color: #1e293b;
	letter-spacing: -0.5px;
}

#home4-page-wrapper .h4-dash-ring {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 44px;
	height: 44px;
}

#home4-page-wrapper .h4-dash-bar {
	height: 4px;
	background: #e2e8f0;
	border-radius: 4px;
	margin-top: auto;
}

#home4-page-wrapper .h4-dash-bar-fill {
	height: 100%;
	border-radius: 4px;
}

/* 紐⑥뀡: ?€?쒕낫??*/
#home4-page-wrapper .h4-dash-row:nth-child(1) {
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-dash-row:nth-child(2) {
	animation: h4-mock-fadein 0.5s ease both 0.7s;
}

/* ?€?€ (Legacy) Platform Mockup 3: Promotion ?€?€ */
#home4-page-wrapper .h4-plat-mockup-promo {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

#home4-page-wrapper .h4-plat-promo-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

#home4-page-wrapper .h4-plat-promo-title-bar {
	height: 20px;
	width: 96px;
	background: #1f2937;
	border-radius: 6px;
}

#home4-page-wrapper .h4-plat-promo-dots {
	display: flex;
	gap: 4px;
}

#home4-page-wrapper .h4-plat-dot-orange {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fb923c;
	display: block;
}

#home4-page-wrapper .h4-plat-dot-gray {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e5e7eb;
	display: block;
}

#home4-page-wrapper .h4-plat-promo-stats {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

#home4-page-wrapper .h4-plat-promo-stat {
	flex: 1;
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#home4-page-wrapper .h4-plat-stat-orange {
	background: #fff7ed;
}

#home4-page-wrapper .h4-plat-stat-green {
	background: #ecfdf5;
}

#home4-page-wrapper .h4-plat-promo-stat-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-plat-icon-orange {
	background: #fed7aa;
	color: #ea580c;
}

#home4-page-wrapper .h4-plat-icon-green {
	background: #a7f3d0;
	color: #059669;
}

#home4-page-wrapper .h4-plat-promo-stat-val {
	height: 16px;
	width: 64px;
	background: #1f2937;
	border-radius: 4px;
	margin-top: 4px;
}

#home4-page-wrapper .h4-plat-promo-chart {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 0 4px;
	border-bottom: 1px solid #f3f4f6;
	padding-bottom: 8px;
}

#home4-page-wrapper .h4-plat-promo-chart>div {
	flex: 1;
	background: #fed7aa;
	border-radius: 6px 6px 0 0;
}

#home4-page-wrapper .h4-plat-bar-peak {
	background: linear-gradient(to top, #f97316, #fb923c) !important;
	position: relative;
}

#home4-page-wrapper .h4-plat-bar-dot {
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	display: block;
}

/* ?€?€ Platform Mockup 5: RunPick ?€?€ */
#home4-page-wrapper .h4-platform-bg-indigo {
	background: rgba(224, 231, 255, 0.5);
	box-shadow: 0 20px 50px -12px rgba(99, 102, 241, 0.15);
}

/* ?ъ씠???뚯떛/留덉???諛곌꼍 ?쒓굅 */
#home4-page-wrapper .h4-platform-row-site,
#home4-page-wrapper .h4-platform-row-sourcing,
#home4-page-wrapper .h4-platform-row-marketing {
	background: transparent;
}

/* ?고뵿 ?뱀뀡 諛곌꼍 */
#home4-page-wrapper .h4-platform-row-runpick {
	background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
	border-radius: 20px;
	padding: 36px 20px;
	margin-top: 24px;
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-platform-row-runpick {
		border-radius: 32px;
		padding: 80px 56px;
		margin-top: 40px;
	}
}

/* ?고뵿 CTA 踰꾪듉 */
#home4-page-wrapper .h4-runpick-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
	padding: 14px 32px;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none !important;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
	transition: all 0.3s ease;
}

#home4-page-wrapper .h4-runpick-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(99, 102, 241, 0.4);
	color: #fff !important;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-platform-row-runpick {
		padding: 36px 18px;
		border-radius: 20px;
	}

	/* ?뚮옯???뱀뀡 紐⑤컮???띿뒪??媛쒖꽑 */
	#home4-page-wrapper .h4-platform-title {
		font-size: 22px;
	}

	#home4-page-wrapper .h4-platform-desc {
		font-size: 15px;
	}

	#home4-page-wrapper .h4-platform-feature-list li {
		font-size: 15px;
	}

	#home4-page-wrapper .h4-platform-tag {
		font-size: 12px;
		padding: 5px 14px;
	}

	#home4-page-wrapper .h4-pf-icon {
		width: 28px;
		height: 28px;
		padding: 5px;
	}
}

#home4-page-wrapper .h4-plat-runpick {
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}

/* 以묒븰 ?먯궗紐?*/
#home4-page-wrapper .h4-rp-center {
	display: flex;
	justify-content: center;
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-rp-store {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 12px;
}

#home4-page-wrapper .h4-rp-store-icon {
	display: flex;
}

#home4-page-wrapper .h4-rp-store span {
	font-size: 11px;
	font-weight: 700;
	color: #4338ca;
}

/* ?곌껐??+ 梨꾨꼸 */
#home4-page-wrapper .h4-rp-channels {
	display: flex;
	justify-content: center;
	gap: 16px;
	position: relative;
	padding: 12px 0;
	animation: h4-mock-fadein 0.5s ease both 0.6s;
}

#home4-page-wrapper .h4-rp-line {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 12px;
	background: #c7d2fe;
}

#home4-page-wrapper .h4-rp-channel {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

#home4-page-wrapper .h4-rp-ch-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6366f1;
}

#home4-page-wrapper .h4-rp-dot-green {
	background: #10b981;
}

#home4-page-wrapper .h4-rp-dot-orange {
	background: #f97316;
}

#home4-page-wrapper .h4-rp-channel span {
	font-size: 9px;
	font-weight: 600;
	color: #475569;
}

/* 吏€??*/
#home4-page-wrapper .h4-rp-stats {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: auto;
	animation: h4-mock-fadein 0.5s ease both 0.9s;
}

#home4-page-wrapper .h4-rp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

#home4-page-wrapper .h4-rp-stat-num {
	font-size: 18px;
	font-weight: 800;
	color: #6366f1;
}

#home4-page-wrapper .h4-rp-stat-label {
	font-size: 9px;
	font-weight: 600;
	color: #94a3b8;
}

/* RunPick UI inside laptop */
#home4-page-wrapper .h4-rpui {
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 220px;
}

/* Header */
#home4-page-wrapper .h4-rpui-header {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	gap: 6px;
	border-bottom: 1px solid #f1f5f9;
	animation: h4-mock-fadein 0.5s ease both 0.3s;
}

#home4-page-wrapper .h4-rpui-logo {
	font-size: 9px;
	font-weight: 900;
	color: #1e293b;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

#home4-page-wrapper .h4-rpui-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 8px;
}

#home4-page-wrapper .h4-rpui-search-bar {
	flex: 1;
	height: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
}

#home4-page-wrapper .h4-rpui-search-btn {
	font-size: 6px;
	padding: 3px 8px;
	background: #e2e8f0;
	border-radius: 4px;
	color: #475569;
	font-weight: 600;
	white-space: nowrap;
}

#home4-page-wrapper .h4-rpui-login {
	font-size: 6px;
	color: #94a3b8;
	white-space: nowrap;
}

/* Banner */
#home4-page-wrapper .h4-rpui-banner {
	background: linear-gradient(135deg, #e0f7fa, #e8f5e9);
	padding: 14px;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	min-height: 80px;
	animation: h4-mock-fadein 0.5s ease both 0.5s;
}

#home4-page-wrapper .h4-rpui-banner-badge {
	font-size: 6px;
	padding: 2px 6px;
	background: #1e293b;
	color: #fff;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 6px;
	font-weight: 600;
}

#home4-page-wrapper .h4-rpui-banner-title {
	font-size: 11px;
	font-weight: 900;
	color: #1e293b;
	line-height: 1.4;
}

#home4-page-wrapper .h4-rpui-phone {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 50px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	border: 1px solid #e0e0e0;
}

#home4-page-wrapper .h4-rpui-phone-screen {
	width: 100%;
	height: 100%;
}

#home4-page-wrapper .h4-rpui-cart-svg {
	width: 100%;
	height: 100%;
}

/* Categories */
#home4-page-wrapper .h4-rpui-cats {
	display: flex;
	gap: 4px;
	padding: 8px 10px;
	justify-content: center;
	animation: h4-mock-fadein 0.5s ease both 0.7s;
}

#home4-page-wrapper .h4-rpui-cat {
	font-size: 7px;
	font-weight: 600;
	color: #94a3b8;
	padding: 4px 8px;
	border-radius: 50px;
	background: #f8fafc;
}

#home4-page-wrapper .h4-rpui-cat--active {
	background: #d1fae5;
	color: #059669;
}

/* Products */
#home4-page-wrapper .h4-rpui-products {
	display: flex;
	gap: 6px;
	padding: 0 10px 10px;
	animation: h4-mock-fadein 0.5s ease both 0.9s;
}

#home4-page-wrapper .h4-rpui-prod {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#home4-page-wrapper .h4-rpui-prod-img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 4px;
}

#home4-page-wrapper .h4-rpui-prod-name {
	width: 80%;
	height: 5px;
	background: #e2e8f0;
	border-radius: 2px;
}

/* 而ㅼ꽌 5 */
#home4-page-wrapper .h4-mock-cursor-5 {
	animation: h4-cur1 7s ease-in-out infinite;
}

/* ?€?€ Platform Mockup 4: Settlement ?€?€ */
#home4-page-wrapper .h4-plat-mockup-settle {
	width: 280px;
	max-width: 100%;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 1px solid #f3f4f6;
	margin: 0 auto;
}

#home4-page-wrapper .h4-plat-settle-header {
	height: 50%;
	background: linear-gradient(to bottom right, #a855f7, #6366f1);
	padding: 24px;
	color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#home4-page-wrapper .h4-plat-settle-mesh {
	position: absolute;
	top: 0;
	right: 0;
	width: 96px;
	height: 96px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	filter: blur(32px);
	margin-right: -24px;
	margin-top: -24px;
}

#home4-page-wrapper .h4-plat-settle-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 1;
}

#home4-page-wrapper .h4-plat-settle-label {
	height: 12px;
	width: 64px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-settle-amount {
	position: relative;
	z-index: 1;
	margin-top: auto;
}

#home4-page-wrapper .h4-plat-settle-amount p {
	font-size: 12px;
	color: #e9d5ff;
	margin: 0 0 8px;
	font-weight: 500;
}

#home4-page-wrapper .h4-plat-settle-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

#home4-page-wrapper .h4-plat-settle-price span {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

#home4-page-wrapper .h4-plat-settle-price div {
	height: 32px;
	width: 128px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-plat-settle-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-plat-settle-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

#home4-page-wrapper .h4-plat-settle-item-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-plat-settle-icon-green {
	background: #ecfdf5;
	color: #22c55e;
}

#home4-page-wrapper .h4-plat-settle-icon-gray {
	background: #f9fafb;
	color: #9ca3af;
}

#home4-page-wrapper .h4-plat-settle-item-info {
	flex: 1;
}

#home4-page-wrapper .h4-plat-settle-item-name {
	height: 12px;
	width: 64px;
	background: #1f2937;
	border-radius: 4px;
	margin-bottom: 4px;
}

#home4-page-wrapper .h4-plat-settle-item-date {
	height: 8px;
	width: 40px;
	background: #9ca3af;
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-settle-item-amt {
	height: 12px;
	width: 48px;
	background: #6b7280;
	border-radius: 4px;
}

#home4-page-wrapper .h4-plat-amt-green {
	background: #22c55e !important;
}

/* ==========================================================================
   PROCESS (Interactive Accordion + Visual Showcase)
   ========================================================================== */
#home4-page-wrapper .h4-process {
	padding: clamp(80px, 10vw, 128px) 0;
	background: #FAFAFA;
}

#home4-page-wrapper .h4-process-header {
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 64px);
}

/* Layout */
#home4-page-wrapper .h4-process-layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

@media (min-width: 1024px) {
	#home4-page-wrapper .h4-process-layout {
		flex-direction: row;
		gap: 64px;
		align-items: stretch;
	}
}

#home4-page-wrapper .h4-process-accordion {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 1024px) {
	#home4-page-wrapper .h4-process-accordion {
		width: 40%;
	}
}

#home4-page-wrapper .h4-process-visual {
	width: 100%;
	min-height: 450px;
	position: relative;
	border-radius: 2.5rem;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

@media (min-width: 1024px) {
	#home4-page-wrapper .h4-process-visual {
		width: 60%;
		min-height: 600px;
		padding: 32px;
	}
}

/* Aurora glow background */
#home4-page-wrapper .h4-aurora-bg {
	position: absolute;
	inset: 0;
	width: 120%;
	height: 120%;
	left: -10%;
	top: -10%;
	border-radius: 9999px;
	transition: background 0.8s ease;
	filter: blur(80px);
	opacity: 0.6;
	z-index: -1;
}

#home4-page-wrapper .h4-glow-blue {
	background: #60a5fa;
}

#home4-page-wrapper .h4-glow-orange {
	background: #fb923c;
}

#home4-page-wrapper .h4-glow-emerald {
	background: #34d399;
}

#home4-page-wrapper .h4-glow-purple {
	background: #a78bfa;
}

/* Glass panel */
#home4-page-wrapper .h4-glass-panel {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

#home4-page-wrapper .h4-noise-texture {
	position: absolute;
	inset: 0;
	opacity: 0.03;
	background-image: url('https://grainy-gradients.vercel.app/noise.svg');
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Visual transition */
#home4-page-wrapper .h4-visual-fade {
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	transform: translateY(0) scale(1);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-visual-hidden {
	opacity: 0;
	transform: translateY(20px) scale(0.95);
}

@keyframes h4-float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-12px);
	}

	100% {
		transform: translateY(0px);
	}
}

#home4-page-wrapper .h4-visual-float {
	animation: h4-float 6s ease-in-out infinite;
}

#home4-page-wrapper .h4-visual-hidden.h4-visual-float {
	animation: none;
}

/* ?€?€ Accordion Items ?€?€ */
#home4-page-wrapper .h4-acc-item {
	border: none;
	outline: none;
	font-family: inherit;
}

#home4-page-wrapper .h4-acc-active {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
	border-left: 4px solid transparent;
	transition: all 0.5s;
}

#home4-page-wrapper .h4-border-blue {
	border-left-color: #3b82f6;
}

#home4-page-wrapper .h4-border-orange {
	border-left-color: #f97316;
}

#home4-page-wrapper .h4-border-emerald {
	border-left-color: #10b981;
}

#home4-page-wrapper .h4-border-purple {
	border-left-color: #a855f7;
}

#home4-page-wrapper .h4-acc-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

#home4-page-wrapper .h4-acc-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-iconbg-blue {
	background: #eff6ff;
}

#home4-page-wrapper .h4-iconbg-orange {
	background: #fff7ed;
}

#home4-page-wrapper .h4-iconbg-emerald {
	background: #ecfdf5;
}

#home4-page-wrapper .h4-iconbg-purple {
	background: #faf5ff;
}

#home4-page-wrapper .h4-icon-blue {
	color: #3b82f6;
}

#home4-page-wrapper .h4-icon-orange {
	color: #f97316;
}

#home4-page-wrapper .h4-icon-emerald {
	color: #10b981;
}

#home4-page-wrapper .h4-icon-purple {
	color: #a855f7;
}

#home4-page-wrapper .h4-acc-title {
	font-weight: 700;
	font-size: clamp(20px, 2.5vw, 28px);
	margin: 0;
}

#home4-page-wrapper .h4-acc-title-gradient {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#home4-page-wrapper .h4-acc-gradient-blue {
	background-image: linear-gradient(to right, #3b82f6, #22d3ee);
}

#home4-page-wrapper .h4-acc-gradient-orange {
	background-image: linear-gradient(to right, #f97316, #fbbf24);
}

#home4-page-wrapper .h4-acc-gradient-emerald {
	background-image: linear-gradient(to right, #10b981, #2dd4bf);
}

#home4-page-wrapper .h4-acc-gradient-purple {
	background-image: linear-gradient(to right, #a855f7, #d946ef);
}

/* Accordion expand */
#home4-page-wrapper .h4-acc-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#home4-page-wrapper .h4-acc-expanded {
	grid-template-rows: 1fr;
}

#home4-page-wrapper .h4-acc-inner {
	overflow: hidden;
}

#home4-page-wrapper .h4-acc-desc {
	color: #6b7280;
	font-size: 15px;
	line-height: 1.7;
	padding-left: 56px;
	margin: 4px 0 0;
}

/* Inactive tab */
#home4-page-wrapper .h4-acc-inactive {
	width: 100%;
	text-align: left;
	background: transparent;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	opacity: 0.7;
	transition: all 0.3s;
}

#home4-page-wrapper .h4-acc-inactive:hover {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	opacity: 1;
}

#home4-page-wrapper .h4-acc-num-inactive {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	transition: all 0.3s;
}

#home4-page-wrapper .h4-acc-inactive:hover .h4-acc-num-inactive {
	border-color: #9ca3af;
	color: #4b5563;
}

#home4-page-wrapper .h4-acc-title-inactive {
	font-weight: 700;
	font-size: 18px;
	color: #4b5563;
	transition: color 0.3s;
}

#home4-page-wrapper .h4-acc-inactive:hover .h4-acc-title-inactive {
	color: #111827;
}

/* ?€?€ Mockup Preview Common ?€?€ */
#home4-page-wrapper .h4-mockup-preview {
	width: 100%;
	max-width: 380px;
}

/* ?€?€ Mockup 1: Site Builder ?€?€ */
#home4-page-wrapper .h4-mockup-site {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px -12px rgba(59, 130, 246, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
	aspect-ratio: 4/3;
}

#home4-page-wrapper .h4-mp-bar {
	height: 40px;
	background: rgba(249, 250, 251, 0.8);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid #f3f4f6;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 8px;
}

#home4-page-wrapper .h4-mp-dots {
	display: flex;
	gap: 6px;
}

#home4-page-wrapper .h4-mp-dot-r,
#home4-page-wrapper .h4-mp-dot-y,
#home4-page-wrapper .h4-mp-dot-g {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: block;
}

#home4-page-wrapper .h4-mp-dot-r {
	background: #f87171;
}

#home4-page-wrapper .h4-mp-dot-y {
	background: #fbbf24;
}

#home4-page-wrapper .h4-mp-dot-g {
	background: #34d399;
}

#home4-page-wrapper .h4-mp-url {
	margin-left: 16px;
	height: 20px;
	width: 160px;
	background: #fff;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	padding: 0 8px;
}

#home4-page-wrapper .h4-mp-url-text {
	height: 8px;
	width: 64px;
	background: #e5e7eb;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-body {
	display: flex;
	flex: 1;
	overflow: hidden;
	background: rgba(249, 250, 251, 0.3);
}

#home4-page-wrapper .h4-mp-sidebar {
	width: 28%;
	background: #fff;
	border-right: 1px solid #f3f4f6;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-sidebar-title {
	height: 20px;
	width: 100%;
	background: linear-gradient(to right, #dbeafe, #ecfeff);
	border-radius: 6px;
}

#home4-page-wrapper .h4-mp-sidebar-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

#home4-page-wrapper .h4-mp-sidebar-lines div {
	height: 12px;
	background: #f3f4f6;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-sidebar-lines div:nth-child(1) {
	width: 75%;
}

#home4-page-wrapper .h4-mp-sidebar-lines div:nth-child(2) {
	width: 85%;
}

#home4-page-wrapper .h4-mp-sidebar-lines div:nth-child(3) {
	width: 66%;
}

#home4-page-wrapper .h4-mp-sidebar-btn {
	margin-top: auto;
	height: 48px;
	background: #eff6ff;
	border-radius: 12px;
	border: 1px dashed #bfdbfe;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3b82f6;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

#home4-page-wrapper .h4-mp-canvas {
	flex: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-canvas-hero {
	width: 100%;
	height: 128px;
	background: linear-gradient(to bottom right, #eff6ff, #eef2ff);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(191, 219, 254, 0.5);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-mp-canvas-title {
	width: 50%;
	height: 24px;
	background: #1f2937;
	border-radius: 6px;
	margin: 8px auto 0;
}

#home4-page-wrapper .h4-mp-canvas-text {
	width: 75%;
	height: 12px;
	background: #d1d5db;
	border-radius: 4px;
	margin: 0 auto;
}

#home4-page-wrapper .h4-mp-canvas-cards {
	display: flex;
	gap: 12px;
	margin-top: auto;
}

#home4-page-wrapper .h4-mp-canvas-cards div {
	flex: 1;
	height: 80px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #f3f4f6;
	transition: transform 0.3s;
}

#home4-page-wrapper .h4-mp-canvas-cards div:hover {
	transform: translateY(-4px);
}

/* ?€?€ Mockup 2: Product Registration ?€?€ */
#home4-page-wrapper .h4-mockup-product {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px -12px rgba(249, 115, 22, 0.25);
	border: 1px solid #fff;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#home4-page-wrapper .h4-mp-prod-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#home4-page-wrapper .h4-mp-prod-title {
	height: 24px;
	width: 112px;
	background: #1f2937;
	border-radius: 6px;
	margin-bottom: 6px;
}

#home4-page-wrapper .h4-mp-prod-sub {
	height: 12px;
	width: 64px;
	background: #9ca3af;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-prod-save {
	padding: 8px 16px;
	background: linear-gradient(to right, #f97316, #fbbf24);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
	cursor: pointer;
	transition: transform 0.3s;
}

#home4-page-wrapper .h4-mp-prod-save:hover {
	transform: scale(1.05);
}

#home4-page-wrapper .h4-mp-prod-upload {
	width: 100%;
	height: 144px;
	border: 2px dashed #fed7aa;
	background: rgba(255, 247, 237, 0.5);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	transition: background 0.3s;
}

#home4-page-wrapper .h4-mp-prod-upload:hover {
	background: #fff7ed;
}

#home4-page-wrapper .h4-mp-prod-upload-icon {
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f97316;
	transition: transform 0.3s;
}

#home4-page-wrapper .h4-mp-prod-upload:hover .h4-mp-prod-upload-icon {
	transform: translateY(-4px);
}

#home4-page-wrapper .h4-mp-prod-upload span {
	font-size: 12px;
	font-weight: 500;
	color: rgba(234, 88, 12, 0.7);
}

#home4-page-wrapper .h4-mp-prod-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-prod-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#home4-page-wrapper .h4-mp-prod-label {
	height: 12px;
	width: 64px;
	background: #9ca3af;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-prod-input {
	height: 44px;
	width: 100%;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-mp-prod-input-text {
	height: 10px;
	width: 33%;
	background: #d1d5db;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-prod-price {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-mp-prod-won {
	color: #9ca3af;
	font-weight: 600;
	margin-right: 8px;
}

/* ?€?€ Mockup 3: Promotion Dashboard ?€?€ */
#home4-page-wrapper .h4-mockup-promo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-promo-stats {
	display: flex;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-promo-stat {
	flex: 1;
	background: #fff;
	padding: 20px;
	border-radius: 16px;
	transition: transform 0.3s;
	cursor: pointer;
}

#home4-page-wrapper .h4-mp-promo-stat:hover {
	transform: translateY(-4px);
}

#home4-page-wrapper .h4-mp-promo-stat-green {
	box-shadow: 0 15px 30px -10px rgba(16, 185, 129, 0.2);
	border: 1px solid rgba(236, 253, 245, 0.5);
}

#home4-page-wrapper .h4-mp-promo-stat-blue {
	box-shadow: 0 15px 30px -10px rgba(14, 165, 233, 0.2);
	border: 1px solid rgba(240, 249, 255, 0.5);
}

#home4-page-wrapper .h4-mp-promo-stat-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transition: transform 0.3s;
}

#home4-page-wrapper .h4-mp-promo-stat:hover .h4-mp-promo-stat-icon {
	transform: scale(1.1);
}

#home4-page-wrapper .h4-mp-promo-icon-green {
	background: linear-gradient(to bottom right, #d1fae5, #ecfdf5);
	color: #10b981;
}

#home4-page-wrapper .h4-mp-promo-icon-blue {
	background: linear-gradient(to bottom right, #e0f2fe, #f0f9ff);
	color: #0ea5e9;
}

#home4-page-wrapper .h4-mp-promo-stat-label {
	height: 12px;
	width: 64px;
	background: #9ca3af;
	border-radius: 4px;
	margin-bottom: 8px;
}

#home4-page-wrapper .h4-mp-promo-stat-value {
	height: 32px;
	width: 96px;
	background: #1f2937;
	border-radius: 6px;
	margin-bottom: 12px;
}

#home4-page-wrapper .h4-mp-promo-stat-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	width: fit-content;
}

#home4-page-wrapper .h4-mp-badge-green {
	color: #059669;
	background: #ecfdf5;
}

#home4-page-wrapper .h4-mp-badge-blue {
	color: #0284c7;
	background: #f0f9ff;
}

#home4-page-wrapper .h4-mp-promo-chart {
	background: #fff;
	padding: 24px;
	border-radius: 16px;
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
	border: 1px solid #fff;
}

#home4-page-wrapper .h4-mp-promo-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

#home4-page-wrapper .h4-mp-promo-chart-title {
	height: 20px;
	width: 96px;
	background: #1f2937;
	border-radius: 6px;
}

#home4-page-wrapper .h4-mp-promo-chart-dots {
	display: flex;
	gap: 4px;
}

#home4-page-wrapper .h4-dot-em {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	display: block;
}

#home4-page-wrapper .h4-dot-gray {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e5e7eb;
	display: block;
}

#home4-page-wrapper .h4-mp-promo-bars {
	height: 128px;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 0 4px;
	border-bottom: 1px solid rgba(243, 244, 246, 0.8);
	padding-bottom: 8px;
}

#home4-page-wrapper .h4-mp-promo-bars>div {
	flex: 1;
	background: #a7f3d0;
	border-radius: 8px 8px 0 0;
	transition: background 0.3s;
}

#home4-page-wrapper .h4-mp-promo-bars>div:hover {
	background: #6ee7b7;
}

#home4-page-wrapper .h4-mp-promo-bar-active {
	background: linear-gradient(to top, #34d399, #2dd4bf) !important;
	box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
	position: relative;
}

#home4-page-wrapper .h4-mp-promo-bar-dot {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	border: 2px solid #10b981;
	display: block;
}

/* ?€?€ Mockup 4: Settlement ?€?€ */
#home4-page-wrapper .h4-mockup-settle {
	max-width: 320px;
	width: 100%;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 0 25px 50px -12px rgba(168, 85, 247, 0.3);
	border: 1px solid #fff;
	overflow: hidden;
}

#home4-page-wrapper .h4-mp-settle-header {
	background: linear-gradient(to bottom right, #9333ea, #a855f7, #d946ef);
	padding: 32px;
	color: #fff;
	position: relative;
}

#home4-page-wrapper .h4-mp-settle-mesh1 {
	position: absolute;
	top: 0;
	right: 0;
	width: 160px;
	height: 160px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	filter: blur(48px);
	margin-right: -40px;
	margin-top: -40px;
}

#home4-page-wrapper .h4-mp-settle-mesh2 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 128px;
	height: 128px;
	background: rgba(99, 102, 241, 0.3);
	border-radius: 50%;
	filter: blur(32px);
	margin-left: -40px;
	margin-bottom: -40px;
}

#home4-page-wrapper .h4-mp-settle-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	position: relative;
	z-index: 1;
}

#home4-page-wrapper .h4-mp-settle-top-label {
	height: 14px;
	width: 96px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 6px;
}

#home4-page-wrapper .h4-mp-settle-top-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

#home4-page-wrapper .h4-mp-settle-amount {
	position: relative;
	z-index: 1;
}

#home4-page-wrapper .h4-mp-settle-amount p {
	color: #e9d5ff;
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 4px;
}

#home4-page-wrapper .h4-mp-settle-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

#home4-page-wrapper .h4-mp-settle-price span {
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}

#home4-page-wrapper .h4-mp-settle-price div {
	height: 40px;
	width: 176px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#home4-page-wrapper .h4-mp-settle-actions {
	padding: 0 24px;
	margin-top: -28px;
	position: relative;
	z-index: 2;
}

#home4-page-wrapper .h4-mp-settle-actions>div:first-child {
	display: none;
}

#home4-page-wrapper .h4-mp-settle-actions {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	padding: 8px;
	display: flex;
	justify-content: space-between;
	border: 1px solid #f9fafb;
	margin: -28px 24px 0;
}

#home4-page-wrapper .h4-mp-settle-action {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	gap: 8px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.3s;
}

#home4-page-wrapper .h4-mp-settle-action:hover {
	background: #f9fafb;
}

#home4-page-wrapper .h4-mp-settle-action-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #faf5ff;
	color: #9333ea;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-mp-settle-action span {
	font-size: 11px;
	font-weight: 700;
	color: #4b5563;
}

#home4-page-wrapper .h4-mp-settle-divider {
	width: 1px;
	background: #f3f4f6;
	margin: 8px 0;
}

#home4-page-wrapper .h4-mp-settle-list {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#home4-page-wrapper .h4-mp-settle-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#home4-page-wrapper .h4-mp-settle-item-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
}

#home4-page-wrapper .h4-mp-settle-item-avatar div {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #d1d5db;
}

#home4-page-wrapper .h4-mp-settle-item-info {
	flex: 1;
}

#home4-page-wrapper .h4-mp-settle-item-name {
	height: 14px;
	width: 80px;
	background: #1f2937;
	border-radius: 4px;
	margin-bottom: 6px;
}

#home4-page-wrapper .h4-mp-settle-item-date {
	height: 10px;
	width: 48px;
	background: #9ca3af;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-settle-item-amount {
	height: 16px;
	width: 64px;
	background: #6b7280;
	border-radius: 4px;
}

#home4-page-wrapper .h4-mp-green {
	background: #22c55e !important;
}

/* ==========================================================================
   STATS
   ========================================================================== */
#home4-page-wrapper .h4-stats {
	padding: clamp(60px, 8vw, 100px) 0;
	background: var(--h4-zinc-50);
}

#home4-page-wrapper .h4-stats-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: var(--h4-white);
	border: 1px solid var(--h4-zinc-200);
	border-radius: 24px;
	padding: 56px 32px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	position: relative;
	overflow: hidden;
}

#home4-page-wrapper .h4-stats-grid::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--h4-gradient);
}

#home4-page-wrapper .h4-stat-item {
	flex: 1;
	min-width: 120px;
	text-align: center;
	padding: 8px 0;
}

#home4-page-wrapper .h4-stat-value {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 900;
	background: var(--h4-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 8px;
	letter-spacing: -1px;
}

#home4-page-wrapper .h4-stat-label {
	font-size: 14px;
	color: var(--h4-zinc-500);
	font-weight: 500;
}

#home4-page-wrapper .h4-stat-divider {
	width: 1px;
	height: 48px;
	background: var(--h4-zinc-200);
	flex-shrink: 0;
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
#home4-page-wrapper .h4-reviews {
	padding: clamp(80px, 10vw, 128px) 0;
	background: var(--h4-white);
}

#home4-page-wrapper .h4-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

#home4-page-wrapper .h4-review-card {
	background: var(--h4-zinc-50);
	border: 1px solid var(--h4-zinc-200);
	border-radius: 24px;
	padding: 36px 28px;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

#home4-page-wrapper .h4-review-card::before {
	content: '\201C';
	position: absolute;
	top: 20px;
	right: 24px;
	font-size: 64px;
	font-family: Georgia, serif;
	background: var(--h4-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0.15;
	line-height: 1;
	pointer-events: none;
}

#home4-page-wrapper .h4-review-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08);
	border-color: rgba(99, 102, 241, 0.2);
}

#home4-page-wrapper .h4-review-stars {
	color: var(--h4-amber);
	font-size: 18px;
	margin: 0 0 16px;
	letter-spacing: 2px;
}

#home4-page-wrapper .h4-review-text {
	font-size: 15px;
	color: var(--h4-zinc-700);
	line-height: 1.85;
	margin: 0 0 24px;
}

#home4-page-wrapper .h4-review-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

#home4-page-wrapper .h4-review-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--h4-blue), var(--h4-indigo));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
}

#home4-page-wrapper .h4-review-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--h4-zinc-900);
}

#home4-page-wrapper .h4-review-role {
	font-size: 13px;
	color: var(--h4-zinc-500);
	margin-top: 2px;
}

/* ==========================================================================
   PRICING
   ========================================================================== */
#home4-page-wrapper .h4-pricing {
	padding: clamp(80px, 10vw, 128px) 0;
	background: var(--h4-zinc-50);
}

#home4-page-wrapper .h4-pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

#home4-page-wrapper .h4-price-card {
	background: var(--h4-white);
	border: 1px solid var(--h4-zinc-200);
	border-radius: 24px;
	padding: 40px 28px;
	text-align: center;
	position: relative;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

#home4-page-wrapper .h4-price-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}

/* Popular */
#home4-page-wrapper .h4-price-popular {
	border-color: transparent;
	box-shadow: 0 8px 40px rgba(99, 102, 241, 0.15);
	background: var(--h4-white);
	position: relative;
}

#home4-page-wrapper .h4-price-popular::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 25px;
	padding: 2px;
	background: var(--h4-gradient);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

#home4-page-wrapper .h4-price-popular::after {
	content: '';
	position: absolute;
	inset: -20px;
	background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

#home4-page-wrapper .h4-price-popular:hover {
	box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2);
}

#home4-page-wrapper .h4-price-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--h4-gradient);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 6px 22px;
	border-radius: 50px;
	letter-spacing: 1.5px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

#home4-page-wrapper .h4-price-name {
	font-size: 22px;
	font-weight: 700;
	margin: 8px 0 6px;
	color: var(--h4-zinc-900);
}

#home4-page-wrapper .h4-price-desc {
	font-size: 14px;
	color: var(--h4-zinc-500);
	margin: 0 0 24px;
}

#home4-page-wrapper .h4-price-amount {
	font-size: 48px;
	font-weight: 800;
	color: var(--h4-zinc-900);
	line-height: 1;
	margin: 0;
}

#home4-page-wrapper .h4-price-amount span {
	font-size: 16px;
	font-weight: 500;
	color: var(--h4-zinc-500);
}

#home4-page-wrapper .h4-price-period {
	font-size: 14px;
	color: var(--h4-zinc-500);
	margin: 8px 0 28px;
}

#home4-page-wrapper .h4-price-features {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	text-align: left;
}

#home4-page-wrapper .h4-price-features li {
	font-size: 14px;
	color: var(--h4-zinc-700);
	padding: 10px 0;
	border-bottom: 1px solid var(--h4-zinc-100);
	display: flex;
	align-items: center;
	gap: 10px;
}

#home4-page-wrapper .h4-price-features li::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ECFDF5;
	color: #059669;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Price button */
#home4-page-wrapper .h4-price-btn {
	display: block;
	width: 100%;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 600;
	background: var(--h4-white);
	color: var(--h4-zinc-900) !important;
	border: 1px solid var(--h4-zinc-200);
	border-radius: 14px;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	transition: all 0.25s ease;
}

#home4-page-wrapper .h4-price-btn:hover {
	background: var(--h4-zinc-50);
	border-color: var(--h4-zinc-300);
	color: var(--h4-zinc-900) !important;
}

/* Popular button */
#home4-page-wrapper .h4-price-btn--primary {
	background: var(--h4-gradient);
	color: #fff !important;
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

#home4-page-wrapper .h4-price-btn--primary:hover {
	background: var(--h4-gradient-hover);
	border-color: transparent;
	color: #fff !important;
	box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
	transform: translateY(-1px);
}

/* ==========================================================================
   CORE SERVICES (?듭떖 ?쒕퉬??
   ========================================================================== */
#home4-page-wrapper .h4-core-services {
	padding: 120px 24px 80px;
	background: linear-gradient(180deg, #f5f5f7 0%, #f9f9fb 100%);
	position: relative;
}

#home4-page-wrapper .h4-core-services::before {
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: auto;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

#home4-page-wrapper .h4-core-services-header {
	text-align: center;
	margin-bottom: 80px;
	position: relative;
	z-index: 1;
}

#home4-page-wrapper .h4-core-services-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 900;
	color: var(--h4-zinc-900);
	line-height: 1.3;
	margin: 0 0 20px;
	letter-spacing: -0.5px;
}

#home4-page-wrapper .h4-core-services-desc {
	font-size: 18px;
	color: var(--h4-zinc-600);
	margin: 0;
	line-height: 1.6;
}

#home4-page-wrapper .h4-core-services-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#home4-page-wrapper .h4-service-card {
	padding: 48px 40px;
	background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
	border-radius: 24px;
	border: 1px solid transparent;
	text-align: center;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
}

/* 移대뱶蹂?洹몃씪?곗씠??*/
#home4-page-wrapper .h4-service-card:nth-child(1) {
	background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

#home4-page-wrapper .h4-service-card:nth-child(2) {
	background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
}

#home4-page-wrapper .h4-service-card:nth-child(3) {
	background: linear-gradient(135deg, #ec4899 0%, #ef4444 100%);
}

#home4-page-wrapper .h4-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
	pointer-events: none;
}

#home4-page-wrapper .h4-service-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

#home4-page-wrapper .h4-service-card:hover {
	transform: translateY(-24px) scale(1.03);
	box-shadow: 0 32px 64px rgba(99, 102, 241, 0.25);
	border-color: rgba(255, 255, 255, 0.4);
}

#home4-page-wrapper .h4-service-icon {
	font-size: 64px;
	margin-bottom: 24px;
	display: inline-block;
	animation: bounce 2s infinite;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

#home4-page-wrapper .h4-service-title {
	font-size: 24px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 16px;
	letter-spacing: -0.4px;
	position: relative;
	z-index: 2;
}

#home4-page-wrapper .h4-service-desc {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.8;
	margin: 0;
	position: relative;
	z-index: 2;
	font-weight: 500;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

/* ==========================================================================
   PRESS / RUNMOA STORY (?몃줎 ?뚭컻)
   ========================================================================== */
#home4-page-wrapper .h4-press {
	padding: clamp(48px, 6vw, 80px) 0;
	background: #FAFAF8;
}

#home4-page-wrapper .h4-press-inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#home4-page-wrapper .h4-press-header {
	margin-bottom: 0;
}

#home4-page-wrapper .h4-press-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #6366F1;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

#home4-page-wrapper .h4-press-heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	color: #18181B;
	line-height: 1.3;
	letter-spacing: -0.5px;
	margin: 0;
}

/* 湲곗궗 ?쇱쿂 移대뱶 - ?곹븯 援ъ“ */
#home4-page-wrapper .h4-press-feature {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 24px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
	text-decoration: none !important;
	color: inherit !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#home4-page-wrapper .h4-press-feature:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 60px rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.15);
}

/* ?곷떒: ?대?吏€ */
#home4-page-wrapper .h4-press-feature-right {
	width: 100%;
	overflow: hidden;
}

#home4-page-wrapper .h4-press-feature-img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#home4-page-wrapper .h4-press-feature:hover .h4-press-feature-img {
	transform: scale(1.03);
}

/* ?섎떒: 湲곗궗 ?뺣낫 */
#home4-page-wrapper .h4-press-feature-left {
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#home4-page-wrapper .h4-press-feature-badge {
	display: inline-flex;
	align-items: center;
}

#home4-page-wrapper .h4-press-logo-img {
	height: 24px;
	width: auto;
	object-fit: contain;
}

#home4-page-wrapper .ai-home4-press-badge-text {
	font-size: 18px;
	font-weight: 800;
	color: #18181B;
	letter-spacing: -0.03em;
}

#home4-page-wrapper .h4-press-feature-title {
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 800;
	color: #18181B;
	line-height: 1.45;
	margin: 0;
	letter-spacing: -0.3px;
}

#home4-page-wrapper .h4-press-feature-date {
	font-size: 14px;
	color: #A1A1AA;
	font-weight: 500;
}

#home4-page-wrapper .h4-press-feature-cta {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	color: #6366F1;
	margin-top: 8px;
	transition: gap 0.2s;
}

#home4-page-wrapper .h4-press-feature:hover .h4-press-feature-cta {
	text-decoration: underline;
}

/* 紐⑤컮??*/
@media (max-width: 767px) {
	#home4-page-wrapper .h4-press {
		padding: 32px 0;
	}

	#home4-page-wrapper .h4-press-header {
		margin-bottom: 0;
	}

	#home4-page-wrapper .h4-press-heading {
		font-size: 26px;
	}

	#home4-page-wrapper .h4-press-feature {
		border-radius: 16px;
	}

	#home4-page-wrapper .h4-press-feature-img {
		aspect-ratio: 16/10;
	}

	#home4-page-wrapper .h4-press-feature-left {
		padding: 24px 20px;
		gap: 10px;
	}

	#home4-page-wrapper .h4-press-logo-img {
		height: 20px;
	}

	#home4-page-wrapper .ai-home4-press-badge-text {
		font-size: 16px;
	}

	#home4-page-wrapper .h4-press-feature-title {
		font-size: 16px;
	}

	#home4-page-wrapper .h4-press-feature-date {
		font-size: 13px;
	}

	#home4-page-wrapper .h4-press-feature-cta {
		font-size: 14px;
	}
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
#home4-page-wrapper .h4-final-cta {
	padding: 0;
}

#home4-page-wrapper .h4-final-inner {
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	padding: 56px 24px;
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-final-inner {
		border-radius: 0;
		padding: 100px 32px;
	}
}

#home4-page-wrapper .h4-final-bg {
	position: absolute;
	inset: 0;
	background: #0c0a2a;
	z-index: 0;
}

#home4-page-wrapper .h4-final-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 80% at 85% 20%, rgba(99, 102, 241, 0.4) 0%, transparent 60%),
		radial-gradient(ellipse 40% 60% at 15% 80%, rgba(139, 92, 246, 0.25) 0%, transparent 60%),
		radial-gradient(ellipse 40% 60% at 70% 60%, rgba(6, 182, 212, 0.2) 0%, transparent 60%);
	animation: h4-final-mesh 8s ease-in-out infinite alternate;
}

@keyframes h4-final-mesh {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}

	100% {
		opacity: 1;
	}
}

#home4-page-wrapper .h4-final-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

#home4-page-wrapper .h4-final-content {
	position: relative;
	z-index: 1;
	text-align: center;
}

#home4-page-wrapper .h4-final-title {
	font-size: clamp(22px, 3.5vw, 38px);
	font-weight: 800;
	color: #fff;
	line-height: 1.45;
	margin: 0 0 16px;
	letter-spacing: -0.5px;
	word-break: keep-all;
}

#home4-page-wrapper .h4-final-desc {
	font-size: clamp(14px, 2vw, 16px);
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.7;
	margin: 0 auto 28px;
	max-width: 480px;
	word-break: keep-all;
}

#home4-page-wrapper .h4-final-actions {
	display: flex;
	justify-content: center;
}

#home4-page-wrapper .h4-final-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 36px;
	background: var(--h4-gradient);
	color: #fff !important;
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
	white-space: nowrap;
}

#home4-page-wrapper .h4-final-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
	color: #fff !important;
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-final-btn {
		padding: 12px 24px;
		font-size: 14px;
	}

	#home4-page-wrapper .h4-btn-dark,
	#home4-page-wrapper .h4-btn-white,
	#home4-page-wrapper .h4-btn-outline {
		padding: 12px 24px;
		font-size: 14px;
	}
}

#home4-page-wrapper .h4-final-note {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--h4-zinc-400);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
	#home4-page-wrapper .h4-hero-buttons {
		flex-direction: row;
		justify-content: center;
	}

	#home4-page-wrapper .h4-final-actions {
		flex-direction: row;
		justify-content: center;
	}
}

@media (min-width: 768px) {
	#home4-page-wrapper .h4-br-desktop {
		display: inline;
	}

	#home4-page-wrapper .h4-hero {
		padding-top: 200px;
	}

	#home4-page-wrapper .h4-nav-links {
		display: flex;
	}

	#home4-page-wrapper .h4-nav-actions {
		display: flex;
	}

	#home4-page-wrapper .h4-mobile-toggle {
		display: none;
	}

	#home4-page-wrapper .h4-social-inner {
		flex-direction: row;
		gap: 48px;
	}

	#home4-page-wrapper .h4-social-logos {
		gap: 40px;
	}

	/* Mockup */
	#home4-page-wrapper .h4-mockup-body {
		height: 480px;
	}

	#home4-page-wrapper .h4-mockup-sidebar {
		display: flex;
	}

	#home4-page-wrapper .h4-mockup-main {
		padding: 24px 32px;
	}

	#home4-page-wrapper .h4-mockup-window {
		border-radius: 24px;
	}

	#home4-page-wrapper .h4-canvas-img {
		height: 160px;
	}

	/* Showcase - handled by horizontal scroll */
	/* Process - handled by flex layout */
	/* Reviews */
	#home4-page-wrapper .h4-reviews-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Pricing */
	#home4-page-wrapper .h4-pricing-grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Popular scale */
	#home4-page-wrapper .h4-price-popular {
		transform: scale(1.04);
	}

	#home4-page-wrapper .h4-price-popular:hover {
		transform: scale(1.04) translateY(-4px);
	}

	/* Stats */
	#home4-page-wrapper .h4-stats-grid {
		flex-wrap: nowrap;
	}

	/* Final CTA */
	#home4-page-wrapper .h4-final-inner {
		padding: 100px 32px;
		border-radius: 0;
	}
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-stat-divider {
		display: none;
	}

	#home4-page-wrapper .h4-stats-grid {
		flex-direction: column;
		gap: 24px;
		padding: 36px 24px;
	}
}

@media (min-width: 1024px) {
	#home4-page-wrapper .h4-mockup-body {
		height: 560px;
	}
}

/* ==========================================================================
   CLIENTS LOGO MARQUEE (怨좉컼??
   ========================================================================== */
#home4-page-wrapper .h4-clients {
	padding: clamp(60px, 8vw, 100px) 0;
	background: #fff;
	overflow: hidden;
}

#home4-page-wrapper .h4-clients-header {
	text-align: center;
	margin-bottom: clamp(36px, 4vw, 48px);
}

#home4-page-wrapper .h4-clients-subtitle-new {
	font-size: clamp(18px, 2.5vw, 24px);
	color: #374151;
	font-weight: 500;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}

#home4-page-wrapper .h4-clients-title-new {
	font-size: clamp(24px, 4vw, 36px);
	color: #111827;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}

#home4-page-wrapper .h4-highlight-purple {
	color: #8B5CF6;
	font-weight: 700;
}

#home4-page-wrapper .h4-clients-title-new .h4-highlight-purple {
	font-weight: 800;
}

#home4-page-wrapper .h4-clients-marquee {
	position: relative;
	overflow: hidden;
	padding: 32px 0;
	margin-top: 16px;
}

#home4-page-wrapper .h4-clients-marquee::before,
#home4-page-wrapper .h4-clients-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 150px;
	z-index: 2;
	pointer-events: none;
}

#home4-page-wrapper .h4-clients-marquee::before {
	left: 0;
	background: linear-gradient(to right, #fff, transparent);
}

#home4-page-wrapper .h4-clients-marquee::after {
	right: 0;
	background: linear-gradient(to left, #fff, transparent);
}

#home4-page-wrapper .h4-clients-track {
	display: flex;
	gap: 80px;
	animation: h4-marquee 20s linear infinite;
	width: max-content;
	align-items: center;
	padding: 0 40px;
}

#home4-page-wrapper .h4-clients-track:hover {
	animation-play-state: paused;
}

#home4-page-wrapper .h4-client-item {
	min-width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

#home4-page-wrapper .h4-client-item:hover {
	transform: scale(1.05);
}

/* Logos */
#home4-page-wrapper .h4-logo-hanwha-new {
	display: flex;
	align-items: center;
	gap: 6px;
}

#home4-page-wrapper .h4-logo-text {
	font-size: 1.2rem;
	font-weight: 500;
	color: #1F2937;
	letter-spacing: -0.02em;
}

#home4-page-wrapper .h4-logo-mcdonalds-new {
	background-color: #DA291C;
	padding: 4px 12px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-logo-text-white {
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	font-family: Arial, sans-serif;
}

#home4-page-wrapper .h4-logo-samsung-new {
	display: flex;
	align-items: center;
}

#home4-page-wrapper .h4-logo-text-samsung {
	font-size: 1.3rem;
	font-weight: 700;
	color: #1428A0;
}

#home4-page-wrapper .h4-logo-lotte-new {
	display: flex;
	align-items: center;
	gap: 6px;
}

#home4-page-wrapper .h4-logo-circle-red {
	width: 24px;
	height: 24px;
	background-color: #ED1A3B;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-logo-circle-red span {
	color: #fff;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 14px;
	font-weight: 700;
	padding-right: 2px;
}

#home4-page-wrapper .h4-logo-text-lotte {
	font-size: 1.3rem;
	font-weight: 700;
	color: #ED1A3B;
}

#home4-page-wrapper .h4-logo-golfzon-new {
	display: flex;
	align-items: center;
	gap: 6px;
}

#home4-page-wrapper .h4-logo-flag-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#home4-page-wrapper .h4-logo-dot-orange {
	position: absolute;
	bottom: 6px;
	right: 2px;
	width: 8px;
	height: 8px;
	background-color: #E85B24;
	border-radius: 50%;
}

@keyframes h4-marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-25%);
	}
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-clients {
		padding: 48px 0;
	}

	#home4-page-wrapper .h4-clients-subtitle-new {
		font-size: 16px;
		margin-bottom: 8px;
	}

	#home4-page-wrapper .h4-clients-title-new {
		font-size: 22px;
	}

	#home4-page-wrapper .h4-clients-track {
		gap: 40px;
		/* 紐⑤컮?쇱뿉?쒕뒗 媛꾧꺽??醫곴쾶 */
		padding: 0 20px;
	}

	#home4-page-wrapper .h4-client-item {
		min-width: 100px;
		transform: scale(0.85);
		/* 濡쒓퀬 ?ш린 ?댁쭩 異뺤냼 */
	}

	#home4-page-wrapper .h4-client-item:hover {
		transform: scale(0.9);
	}
}

/* ==========================================================================
   TRUST & PROOF
   ========================================================================== */
#home4-page-wrapper .h4-trust {
	padding: clamp(32px, 4vw, 56px) 0;
	background: #FAFAFC;
	margin-bottom: clamp(12px, 2vw, 24px);
}

#home4-page-wrapper .h4-trust-header {
	text-align: center;
	margin-bottom: 64px;
}

#home4-page-wrapper .h4-trust-heading {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	color: #18181B;
	letter-spacing: -0.5px;
	margin: 0 0 16px;
}

#home4-page-wrapper .h4-trust-sub {
	font-size: clamp(16px, 2vw, 19px);
	color: #71717A;
	margin: 0;
}

/* ?뱁뿀利??뺤쟻 由ъ뒪??(?щ씪?대뱶 ?④낵 ?쒓굅) */
#home4-page-wrapper .h4-patent-static-grid {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 0;
	padding: 0 0 40px 0;
	flex-wrap: wrap;
}

#home4-page-wrapper .h4-patent-static-grid img {
	height: 300px;
	/* 怨좎젙 ??媛€?낆꽦???꾪빐 ?ш린 ?뺣? */
	width: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background: #fff;
}

#home4-page-wrapper .h4-patent-static-grid img:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-patent-static-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	#home4-page-wrapper .h4-patent-static-grid img {
		height: auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	#home4-page-wrapper .h4-patent-track img {
		height: 150px;
	}

	#home4-page-wrapper .h4-patent-marquee {
		margin-bottom: 40px;
	}

	#home4-page-wrapper .h4-br-desktop {
		display: none !important;
	}
}

#home4-page-wrapper .h4-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

/* 醫뚯륫 */
#home4-page-wrapper .h4-trust-left {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#home4-page-wrapper .h4-trust-title {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.35;
	color: #18181B;
	letter-spacing: -0.5px;
	margin: 0 0 20px;
	word-break: keep-all;
}

#home4-page-wrapper .h4-trust-desc {
	font-size: 16px;
	color: #52525B;
	line-height: 1.75;
	margin: 0 0 36px;
	word-break: keep-all;
}

#home4-page-wrapper .h4-trust-stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 40px;
}

#home4-page-wrapper .h4-trust-stat-num {
	font-size: 64px;
	font-weight: 900;
	letter-spacing: -3px;
	line-height: 1;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#home4-page-wrapper .h4-trust-stat-num span {
	font-size: 40px;
}

#home4-page-wrapper .h4-trust-stat-labels {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	color: #71717A;
	font-weight: 500;
	text-align: left;
}

#home4-page-wrapper .h4-trust-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 32px;
	background: var(--h4-gradient, linear-gradient(135deg, #6366F1, #8B5CF6));
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
	transition: all 0.3s ease;
}

#home4-page-wrapper .h4-trust-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(99, 102, 241, 0.35);
	color: #fff !important;
}

#home4-page-wrapper .h4-trust-cta svg {
	transition: transform 0.2s;
}

#home4-page-wrapper .h4-trust-cta:hover svg {
	transform: translateX(3px);
}

/* ?곗륫 */
#home4-page-wrapper .h4-trust-right {
	position: relative;
}

#home4-page-wrapper .h4-trust-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(ellipse at center, rgba(238, 242, 255, 0.8), rgba(219, 234, 254, 0.4), transparent 70%);
	border-radius: 50%;
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

#home4-page-wrapper .h4-trust-group-label {
	position: relative;
	z-index: 1;
	font-size: 13px;
	font-weight: 700;
	color: #A1A1AA;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
	padding-left: 4px;
}

#home4-page-wrapper .h4-trust-list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#home4-page-wrapper .h4-trust-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px 28px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
}

#home4-page-wrapper .h4-trust-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

#home4-page-wrapper .h4-trust-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

#home4-page-wrapper .h4-trust-icon .h4-lucide-icon {
	width: 20px;
	height: 20px;
}

#home4-page-wrapper .h4-trust-icon-indigo {
	background: #6366F1;
}

#home4-page-wrapper .h4-trust-icon-blue {
	background: #3B82F6;
}

#home4-page-wrapper .h4-trust-icon-emerald {
	background: #10B981;
}

#home4-page-wrapper .h4-trust-item-body {
	flex: 1;
	min-width: 0;
}

#home4-page-wrapper .h4-trust-item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

#home4-page-wrapper .h4-trust-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
}

#home4-page-wrapper .h4-trust-badge-indigo {
	background: #EEF2FF;
	color: #4338CA;
}

#home4-page-wrapper .h4-trust-badge-blue {
	background: #DBEAFE;
	color: #1D4ED8;
}

#home4-page-wrapper .h4-trust-badge-emerald {
	background: #D1FAE5;
	color: #047857;
}

#home4-page-wrapper .h4-trust-date {
	font-size: 13px;
	color: #A1A1AA;
	font-weight: 500;
}

#home4-page-wrapper .h4-trust-item-title {
	font-size: 18px;
	font-weight: 700;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #18181B;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s;
}

#home4-page-wrapper .h4-trust-item:hover .h4-trust-item-title {
	color: #6366F1;
}

#home4-page-wrapper .h4-trust-arrow {
	flex-shrink: 0;
	color: #D4D4D8;
	opacity: 0;
	transform: translateX(-6px);
	transition: all 0.3s ease;
}

#home4-page-wrapper .h4-trust-arrow .h4-lucide-icon {
	width: 18px;
	height: 18px;
}

#home4-page-wrapper .h4-trust-item:hover .h4-trust-arrow {
	opacity: 1;
	transform: translateX(0);
	color: #6366F1;
}

/* 諛섏쓳??*/
@media (min-width: 960px) {
	#home4-page-wrapper .h4-trust-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (max-width: 959px) {
	#home4-page-wrapper .h4-trust {
		padding: 32px 0;
		margin-bottom: 0;
	}

	#home4-page-wrapper .h4-trust-header {
		margin-bottom: 40px;
	}

	#home4-page-wrapper .h4-trust-grid {
		gap: 32px;
	}

	#home4-page-wrapper .h4-trust-left {
		text-align: center;
		max-width: 100%;
		padding-top: 0;
	}

	#home4-page-wrapper .h4-trust-title {
		font-size: 22px;
	}

	#home4-page-wrapper .h4-trust-desc {
		font-size: 15px;
	}

	#home4-page-wrapper .h4-trust-stat {
		justify-content: center;
	}

	#home4-page-wrapper .h4-trust-stat-num {
		font-size: 48px;
	}

	#home4-page-wrapper .h4-trust-cta {
		padding: 12px 28px;
		font-size: 15px;
	}

	#home4-page-wrapper .h4-trust-right {
		width: 100%;
	}

	#home4-page-wrapper .h4-trust-glow {
		display: none;
	}

	#home4-page-wrapper .h4-trust-item {
		padding: 16px 16px;
		gap: 14px;
	}

	#home4-page-wrapper .h4-trust-icon {
		width: 40px;
		height: 40px;
	}

	#home4-page-wrapper .h4-trust-item-title {
		font-size: 13px;
		white-space: normal;
	}

	#home4-page-wrapper .h4-trust-arrow {
		display: none;
	}
}

/* (Template Showcase section was here - removed) */
/* END OF FILE */
/* REMOVED BELOW */
#home4-page-wrapper .h4-ts-REMOVED {
	padding: clamp(80px, 10vw, 140px) 0;
	background: #FAFAF8;
	overflow: hidden;
}

/* 2???덉씠?꾩썐 */
#home4-page-wrapper .h4-ts-layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: center;
}

/* --- 釉뚮씪?곗? ?꾨젅??--- */
#home4-page-wrapper .h4-ts-frame {
	width: 100%;
	max-width: 640px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
	will-change: transform, opacity;
}

#home4-page-wrapper .h4-ts-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #f8f8f8;
	border-bottom: 1px solid #eee;
}

#home4-page-wrapper .h4-ts-dots {
	display: flex;
	gap: 6px;
}

#home4-page-wrapper .h4-ts-dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
}

#home4-page-wrapper .h4-ts-dots i:nth-child(1) {
	background: #FF5F57;
}

#home4-page-wrapper .h4-ts-dots i:nth-child(2) {
	background: #FFBD2E;
}

#home4-page-wrapper .h4-ts-dots i:nth-child(3) {
	background: #28CA41;
}

#home4-page-wrapper .h4-ts-url {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 11px;
	color: #999;
	flex: 1;
	max-width: 260px;
}

#home4-page-wrapper .h4-ts-url svg {
	flex-shrink: 0;
	color: #aaa;
}

/* --- 酉고룷??(?쒗뵆由??곸뿭) --- */
#home4-page-wrapper .h4-ts-viewport {
	position: relative;
	height: 380px;
	overflow: hidden;
	background: #f0f0f0;
}

#home4-page-wrapper .h4-ts-screen {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
}

#home4-page-wrapper .h4-ts-screen-active {
	z-index: 1;
}

/* --- ?쒗뵆由?怨듯넻 ?ㅽ???--- */
#home4-page-wrapper .h4-ts-tpl {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#home4-page-wrapper .h4-ts-tnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}

#home4-page-wrapper .h4-ts-tlogo {
	font-size: 13px;
	font-weight: 700;
}

#home4-page-wrapper .h4-ts-tmenu {
	display: flex;
	gap: 12px;
	font-size: 10px;
	color: #888;
}

#home4-page-wrapper .h4-ts-thero {
	flex-shrink: 0;
	height: 180px;
	overflow: hidden;
	background-size: 120% auto;
	background-position: 50% 50%;
}

#home4-page-wrapper .h4-ts-thero-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	position: relative;
	padding: 16px 24px;
}

#home4-page-wrapper .h4-ts-thero-text {
	position: relative;
	z-index: 1;
	text-align: center;
}

#home4-page-wrapper .h4-ts-ttag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8px;
}

#home4-page-wrapper .h4-ts-ttitle {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-bottom: 6px;
}

#home4-page-wrapper .h4-ts-tsub {
	font-size: 10px;
	margin-bottom: 10px;
}

#home4-page-wrapper .h4-ts-tcta {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 20px;
	font-size: 9px;
	font-weight: 600;
	color: #fff;
}

/* ?곹뭹 洹몃━??*/
#home4-page-wrapper .h4-ts-tproducts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 12px 16px;
	flex: 1;
	background: #fff;
}

#home4-page-wrapper .h4-ts-tproducts-4 {
	grid-template-columns: repeat(4, 1fr);
}

#home4-page-wrapper .h4-ts-tprod {
	text-align: center;
}

#home4-page-wrapper .h4-ts-tprod-img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8px;
	margin-bottom: 6px;
}

#home4-page-wrapper .h4-ts-tprod-name {
	font-size: 9px;
	color: #666;
	margin-bottom: 2px;
}

#home4-page-wrapper .h4-ts-tprod-price {
	font-size: 10px;
	font-weight: 700;
}

/* ?곗퐫 ?붿냼 */
#home4-page-wrapper .h4-ts-farm-deco {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #81C784, #388E3C);
	opacity: 0.3;
	will-change: transform;
}

#home4-page-wrapper .h4-ts-coffee-deco {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #D7CCC8, #8D6E63);
	opacity: 0.25;
	will-change: transform;
}

#home4-page-wrapper .h4-ts-fashion-deco {
	position: absolute;
	right: 30px;
	top: 20%;
	width: 60px;
	height: 120px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	will-change: transform;
}

/* --- ?ㅻⅨ履??띿뒪??--- */
#home4-page-wrapper .h4-ts-info {
	width: 100%;
	max-width: 480px;
	position: relative;
	min-height: 320px;
	will-change: transform, opacity;
}

#home4-page-wrapper .h4-ts-text {
	will-change: transform, opacity;
}

#home4-page-wrapper .h4-ts-badge {
	display: inline-block;
	padding: 4px 14px;
	background: #EEF2FF;
	color: #6366F1;
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	margin-bottom: 16px;
}

#home4-page-wrapper .h4-ts-title {
	font-size: clamp(24px, 3.5vw, 32px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.5px;
	color: #18181B;
	margin: 0 0 14px;
}

#home4-page-wrapper .h4-ts-desc {
	font-size: 15px;
	color: #71717A;
	line-height: 1.7;
	margin: 0 0 28px;
}

#home4-page-wrapper .h4-ts-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#home4-page-wrapper .h4-ts-features li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 20px;
	position: relative;
	font-size: 14px;
	line-height: 1.6;
}

#home4-page-wrapper .h4-ts-features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6366F1, #06B6D4);
}

#home4-page-wrapper .h4-ts-features li strong {
	color: #18181B;
	font-weight: 700;
}

#home4-page-wrapper .h4-ts-features li span {
	color: #71717A;
	font-size: 13px;
}

/* 吏꾪뻾 ??*/
#home4-page-wrapper .h4-ts-dots {
	display: flex;
	gap: 10px;
	margin-top: 32px;
}

#home4-page-wrapper .h4-ts-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #D4D4D8;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}

#home4-page-wrapper .h4-ts-dot-active {
	background: #6366F1;
	width: 28px;
	border-radius: 5px;
}

/* --- 諛섏쓳??--- */
@media (min-width: 960px) {
	#home4-page-wrapper .h4-ts-layout {
		flex-direction: row;
		gap: 64px;
		align-items: center;
	}

	#home4-page-wrapper .h4-ts-frame {
		flex: 1;
		max-width: 580px;
	}

	#home4-page-wrapper .h4-ts-viewport {
		height: 420px;
	}

	#home4-page-wrapper .h4-ts-info {
		flex: 0 0 380px;
	}
}

@media (min-width: 1200px) {
	#home4-page-wrapper .h4-ts-frame {
		max-width: 640px;
	}

	#home4-page-wrapper .h4-ts-viewport {
		height: 460px;
	}

	#home4-page-wrapper .h4-ts-info {
		flex: 0 0 420px;
	}
}

@media (max-width: 959px) {
	#home4-page-wrapper .h4-ts-info {
		min-height: auto;
		text-align: center;
	}

	#home4-page-wrapper .h4-ts-features li {
		text-align: left;
	}

	#home4-page-wrapper .h4-ts-dots {
		justify-content: center;
	}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	#home4-page-wrapper .h4-ts-screen {
		transition: none !important;
	}
}

/* ==========================================================================
   PRICING COMPARISON (비용 비교 섹션)
   ========================================================================== */
#home4-page-wrapper .h4-pricing-comparison {
	padding: clamp(80px, 10vw, 128px) 0;
	background: transparent;
	position: relative;
	font-family: inherit;
	overflow: hidden;
}

#home4-page-wrapper .h4-pricing-comparison-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 헤더 */
#home4-page-wrapper .h4-pricing-comparison-header {
	text-align: center;
	margin-bottom: clamp(48px, 6vw, 64px);
}

#home4-page-wrapper .h4-pricing-flow-arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto clamp(40px, 6vw, 64px) auto;
	background: var(--h4-blue, #6366F1);
	color: #ffffff;
	border-radius: 50%;
	animation: h4FlowArrowPulse 2.5s infinite ease-in-out;
}

#home4-page-wrapper .h4-pricing-flow-arrow svg {
	animation: h4FlowArrowFloat 2s infinite ease-in-out;
}

@keyframes h4FlowArrowPulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
	}
	50% {
		box-shadow: 0 0 0 16px rgba(99, 102, 241, 0);
	}
}

@keyframes h4FlowArrowFloat {
	0%, 100% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(4px);
	}
}

#home4-page-wrapper .h4-pricing-comparison-header h2 {
	font-size: clamp(32px, 5vw, 44px);
	font-weight: 800;
	color: var(--h4-zinc-900);
	letter-spacing: -0.03em;
	margin-bottom: 20px;
	line-height: 1.25;
}

#home4-page-wrapper .h4-pricing-comparison-header p {
	font-size: clamp(17px, 2vw, 19px);
	color: var(--h4-zinc-600);
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.6;
	word-break: keep-all;
}

#home4-page-wrapper .h4-gradient-text {
	background: var(--h4-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 막대 그래프 시각화 */
#home4-page-wrapper .h4-pricing-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80px;
}

#home4-page-wrapper .h4-pricing-bars-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 24px;
	width: 100%;
	max-width: 768px;
}

#home4-page-wrapper .h4-pricing-bar-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 160px;
	position: relative;
}

#home4-page-wrapper .h4-pricing-bar-label {
	text-align: center;
	margin-bottom: 20px;
}

#home4-page-wrapper .h4-pricing-bar-label .title {
	font-size: 14px;
	color: var(--h4-zinc-600);
	font-weight: 600;
	margin: 0 0 2px 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#home4-page-wrapper .h4-pricing-bar-label .percent {
	font-size: 28px;
	font-weight: 800;
	color: var(--h4-zinc-900);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#home4-page-wrapper .h4-pricing-bar-stack {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* 개별 막대 아이템 */
#home4-page-wrapper .h4-pricing-bar-item {
	width: 100%;
	height: 0;
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	transition: height 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
	overflow: hidden;
}

#home4-page-wrapper .h4-pricing-bar-item span {
	display: block;
}

#home4-page-wrapper .h4-pricing-bar-item .sub {
	font-size: 11px;
	opacity: 0.7;
	font-weight: 500;
	margin-top: 2px;
}

/* 애니메이션 상태 */
#home4-page-wrapper .h4-bar-visible {
	opacity: 1;
}

#home4-page-wrapper .h4-bar-sns {
	background: #6b7280;
	border-radius: 12px 12px 0 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#home4-page-wrapper .h4-bar-sourcing {
	background: #9ca3af;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#home4-page-wrapper .h4-bar-store {
	background: #d1d5db;
	border-radius: 0 0 12px 12px;
	color: #374151;
}

/* 런모아 바 */
#home4-page-wrapper .h4-pricing-bar-group--runmoa .percent {
	color: #818cf8;
}

#home4-page-wrapper .h4-pricing-bar-badge {
	position: absolute;
	top: -36px;
	background: #EEF2FF;
	color: #6366F1;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 50px;
	white-space: nowrap;
}

#home4-page-wrapper .h4-bar-runmoa {
	background: var(--h4-gradient);
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(99, 102, 241, 0.20);
}

/* VS */
#home4-page-wrapper .h4-pricing-vs {
	padding-bottom: 60px;
}

#home4-page-wrapper .h4-pricing-vs-circle {
	width: 44px;
	height: 44px;
	background: #1e1b4b;
	border: 1.5px solid rgba(99, 102, 241, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #818cf8;
	font-weight: 900;
	font-style: italic;
	font-size: 15px;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

#home4-page-wrapper .h4-pricing-caption {
	margin-top: 32px;
	text-align: center;
	border-top: 1px solid #e4e4e7;
	padding-top: 24px;
	width: 100%;
	max-width: 600px;
}

#home4-page-wrapper .h4-pricing-caption p {
	font-size: 12px;
	color: var(--h4-zinc-400);
}

/* 상세 비교 테이블 */
#home4-page-wrapper .h4-pricing-table {
	display: grid;
	grid-template-columns: 1fr;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

#home4-page-wrapper .h4-pricing-table-col {
	padding: clamp(24px, 5vw, 40px);
}

#home4-page-wrapper .h4-pricing-table-col--old {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

#home4-page-wrapper .h4-pricing-table-title {
	font-size: clamp(18px, 4vw, 20px);
	font-weight: 800;
	color: var(--h4-zinc-800);
	margin-bottom: 24px;
	display: flex;
	justify-content: center;
	gap: 12px;
	align-items: center;
}

#home4-page-wrapper .h4-pricing-table-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid #e4e4e7;
	background: #f4f4f5;
	color: var(--h4-zinc-600);
}

#home4-page-wrapper .h4-pricing-table-col--new .h4-pricing-table-title {
	color: var(--h4-blue);
}

#home4-page-wrapper .h4-pricing-table-col--new .h4-pricing-table-tag {
	background: #e0e7ff;
	border-color: #c7d2fe;
	color: var(--h4-blue);
}

/* 리스트 */
#home4-page-wrapper .h4-pricing-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	width: fit-content;
}

#home4-page-wrapper .h4-pricing-list-item {
	display: flex;
	gap: 12px;
	margin-bottom: 12px !important;
}

#home4-page-wrapper .h4-pricing-list-item:last-child {
	margin-bottom: 0;
}

#home4-page-wrapper .h4-pricing-list-item .text-main {
	font-size: 16px;
	font-weight: 700;
	color: var(--h4-zinc-800);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#home4-page-wrapper .h4-pricing-list-item .text-sub {
	font-size: 14px;
	color: var(--h4-zinc-500);
	margin: 2px 0 0 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

#home4-page-wrapper .h4-pricing-table-col--new .text-main {
	color: var(--h4-zinc-900);
}

#home4-page-wrapper .h4-pricing-table-col--new .text-sub {
	color: var(--h4-zinc-600);
}

/* 푸터 섹션 (금액/버튼) */
#home4-page-wrapper .h4-pricing-table-footer {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #18181b;
}

#home4-page-wrapper .h4-pricing-summary {
	display: flex;
	justify-content: center;
	gap: 16px;
	align-items: baseline;
	margin-bottom: 24px;
}

#home4-page-wrapper .h4-pricing-price-label {
	font-size: 14px;
	color: #94a3b8;
	font-weight: 600;
}

@keyframes h4PriceMotion {
	0%, 100% {
		transform: scale(1) translateY(0);
		filter: drop-shadow(0 0 0 rgba(99, 102, 241, 0));
	}
	50% {
		transform: scale(1.04) translateY(-3px);
		filter: drop-shadow(0 8px 20px rgba(99, 102, 241, 0.4));
	}
}

#home4-page-wrapper .h4-pricing-price-value {
	text-align: left;
	animation: h4PriceMotion 3s infinite ease-in-out;
	transform-origin: center bottom;
}

#home4-page-wrapper .h4-pricing-price-value .amount {
	font-size: 36px;
	font-weight: 900;
	color: #ffffff;
}

#home4-page-wrapper .h4-pricing-price-value .unit {
	font-size: 17px;
	font-weight: 700;
	color: #94a3b8;
	margin-left: 4px;
}

#home4-page-wrapper .h4-pricing-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #6366F1;
	color: #fff !important;
	font-weight: 800;
	font-size: 17px;
	padding: 16px;
	border-radius: 14px;
	transition: all 0.25s ease;
	text-decoration: none !important;
}

#home4-page-wrapper .h4-pricing-cta-btn:hover {
	background: #4F46E5;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(99, 102, 241, 0.25);
}

/* 미세 조정 (반응형) */
@media (min-width: 992px) {
	#home4-page-wrapper .h4-pricing-table {
		grid-template-columns: 1fr 1fr;
	}

	#home4-page-wrapper .h4-pricing-table-col--old {
		border-bottom: 0;
		border-right: 1px solid #e2e8f0;
	}

	#home4-page-wrapper .h4-pricing-bars-wrap {
		gap: 64px;
	}
}

@media (max-width: 768px) {
	#home4-page-wrapper .h4-pricing-bars-wrap {
		gap: 12px;
	}

	#home4-page-wrapper .h4-pricing-bar-group {
		width: 100%;
		max-width: none;
	}

	#home4-page-wrapper .h4-pricing-bar-item {
		font-size: 12px;
	}

	#home4-page-wrapper .h4-pricing-vs {
		padding-bottom: 40px;
	}
	#home4-page-wrapper .h4-pricing-caption p {
		font-size: 10px;
		white-space: nowrap;
		letter-spacing: -0.3px;
	}
}

/* 모바일 전용 줄바꿈 */
#home4-page-wrapper .rp-mo-br { display: none; }
@media (max-width: 767px) {
	#home4-page-wrapper .rp-mo-br { display: block; }
}

/* 런픽 섹션 모바일 가독성 */
@media (max-width: 767px) {
	#home4-page-wrapper .h4-platform-row-runpick .h4-platform-tag {
		display: block;
		margin: 0 auto 12px;
		width: fit-content;
	}
	#home4-page-wrapper .h4-platform-row-runpick .h4-platform-title {
		font-size: 22px;
		line-height: 1.4;
		letter-spacing: -0.5px;
		word-break: keep-all;
		text-align: center;
	}
	#home4-page-wrapper .h4-platform-row-runpick .h4-platform-desc {
		font-size: 14px;
		line-height: 1.75;
		letter-spacing: -0.2px;
		word-break: keep-all;
		text-align: center;
		color: #52525B;
	}
	#home4-page-wrapper .h4-platform-row-runpick .h4-platform-feature-list {
		margin-top: 20px;
	}
	#home4-page-wrapper .h4-platform-row-runpick .h4-platform-feature-list li {
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: -0.2px;
		word-break: keep-all;
		align-items: flex-start;
		gap: 8px;
	}
	#home4-page-wrapper .h4-platform-row-runpick .h4-runpick-cta {
		display: block;
		text-align: center;
		margin: 24px auto 0;
	}
}

/* 히어로 모바일 서브텍스트 */
#home4-page-wrapper .h4-hero-mobile-sub {
	display: none;
}
@media (max-width: 767px) {
	#home4-page-wrapper .h4-hero-mobile-sub {
		display: block;
		font-size: 15px;
		color: var(--h4-zinc-600);
		font-weight: 600;
		line-height: 1.7;
		margin: 16px 0 0;
		text-align: center;
		word-break: keep-all;
	}
}