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

:root {
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3,
.section-title,
.product-title {
  font-family: var(--font-heading);
  font-weight: 800;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #111111 #000000;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #000;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #111, #000);
	border-radius: 20px;
}

:root {
	--font-color: white;
	--bg-color: black;
	--secondary-color: black;
	--bg2: #0b0f16;
	--glass: rgba(10, 14, 22, .55);
	--glass2: rgba(14, 18, 28, .62);
	--border: rgba(255, 255, 255, .08);
	--text: #e7eaf0;
	--muted: rgba(231, 234, 240, .70);
	--muted2: rgba(231, 234, 240, .55);
	--shadow: 0 20px 60px rgba(0, 0, 0, .55);
	--shadow2: 0 12px 40px rgba(0, 0, 0, .45);
	--radius: 14px;
	--radius2: 18px;
	--grad: linear-gradient(90deg, #8b5cf6, #22d3ee, #a78bfa);
	--grad2: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(34, 211, 238, .18));
	--btn: rgba(255, 255, 255, .08);
	--btnHover: rgba(255, 255, 255, .12);
	--focus: rgba(34, 211, 238, .35);
	--max: 1180px;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: black;
	color: var(--text);
	overflow-x: hidden;
}

.nx-nav-wrap {
	position: fixed;
	left: 0;
	width: 100%;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-image: linear-gradient(90deg, #00000000, orange, #00000000) 1;
	border-bottom-style: solid;
	border-width: 2px;
}

.nx-nav {
	max-width: var(--max);
	margin: 0 auto;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: space-between;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--text);
}

.logo {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background:
		radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .85), transparent 55%),
		radial-gradient(circle at 70% 60%, rgba(139, 92, 246, .85), transparent 55%),
		linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	position: relative;
	overflow: hidden;
}

.logo:after {
	content: "";
	position: absolute;
	inset: -40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
	transform: rotate(25deg) translateX(-30%);
	animation: shimmer 4.5s infinite;
	opacity: .8;
}

@keyframes shimmer {
	0% {
		transform: rotate(25deg) translateX(-55%)
	}

	55% {
		transform: rotate(25deg) translateX(55%)
	}

	100% {
		transform: rotate(25deg) translateX(55%)
	}
}

.brand span {
	font-weight: 700;
	letter-spacing: .2px;
}

.badge {
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, .25);
	color: rgba(34, 211, 238, .95);
	background: rgba(34, 211, 238, .08);
	margin-left: 6px;
}

.nx-nav_ left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.nx-nav-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.nx-nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
}

.nx-nav-item {
	position: relative;
}

.nx-nav-btn {
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 10px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: .15s ease;
	user-select: none;
}

.nx-nav-btn:hover {
	color: var(--text);
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .08);
}

.nx-nav-btn[aria-expanded="true"] {
	color: var(--text);
	background: rgba(255, 255, 255, .08);
	border-color: rgba(34, 211, 238, .18);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);
}

.chev {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 0;
	margin-left: auto;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 62%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 18px rgba(0, 0, 0, .20);
	opacity: .96;
	transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.chev::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -60%) rotate(45deg);
	transform-origin: center;
	transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.nx-nav-btn:hover .chev,
.nx-nav-btn:focus-visible .chev,
.nx-nav-btn[aria-expanded="true"] .chev {
	background: radial-gradient(circle at 30% 30%, rgba(163, 230, 53, .22), rgba(99, 102, 241, .10) 68%, rgba(255, 255, 255, .03));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px rgba(0, 0, 0, .24), 0 0 0 1px rgba(163, 230, 53, .10);
}

.nx-nav-btn[aria-expanded="true"] .chev::before {
	transform: translate(-50%, -40%) rotate(225deg);
}

.nx-nav-right {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 240px;
	justify-content: flex-end;
}

.pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, .05);
	color: var(--muted);
	font-size: 13px;
	cursor: pointer;
	transition: .15s ease;
}

.pill:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--text);
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(34, 211, 238, .9);
	box-shadow: 0 0 0 4px rgba(34, 211, 238, .12);
}

.link {
	color: var(--muted);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 10px;
	border-radius: 10px;
	transition: .15s ease;
	border: 1px solid transparent;
}

.link:hover {
	color: var(--text);
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .08);
}

.cta {
	text-decoration: none;
	color: #061018;
	font-weight: 800;
	font-size: 14px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: 0 16px 40px rgba(34, 211, 238, .08), 0 16px 40px rgba(139, 92, 246, .10);
	transition: transform .15s ease, filter .15s ease;
	white-space: nowrap;
}

.cta:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.cta:active {
	transform: translateY(0px);
}

.menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 820px;
	max-width: calc(100vw - 28px);
	background: linear-gradient(181deg, rgb(0 0 0), rgb(0 0 0));
	border-radius: var(--radius2);
	box-shadow: var(--shadow);
	padding: 16px;
	display: block;
	visibility: hidden;
	pointer-events: none;
	transform-origin: top left;
	transform: translateY(10px) scale(.975);
	opacity: 0;
	transition: opacity .24s cubic-bezier(0.16, 1, 0.3, 1), transform .24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .24s;
	overflow: hidden;
	border-image: linear-gradient(90deg, #00000000, orange, #00000000) 1;
	border-bottom-style: solid;
	border-width: 2px;
}

.menu.open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}

.menu:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(800px 300px at 10% 0%, rgba(34, 211, 238, .13), transparent 60%),
		radial-gradient(800px 300px at 90% 0%, rgba(139, 92, 246, .14), transparent 60%);
	pointer-events: none;
}

.menu-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 14px;
}

.menu-col {
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .04);
	border-radius: 14px;
	padding: 14px;
	overflow: hidden;
}

.menu-title {
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .2px;
	color: rgba(231, 234, 240, .90);
	margin: 0 0 10px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-title small {
	font-weight: 700;
	font-size: 12px;
	color: rgba(34, 211, 238, .85);
	border: 1px solid rgba(34, 211, 238, .22);
	background: rgba(34, 211, 238, .08);
	padding: 4px 8px;
	border-radius: 999px;
}

.menu-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.menu-card {
	display: flex;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(0, 0, 0, .12);
	transition: .15s ease;
	min-height: 66px;
}

.menu-card:hover {
	border-color: rgba(34, 211, 238, .22);
	background: rgba(255, 255, 255, .06);
	transform: translateY(-1px);
}

.ic {
	width: 34px;
	height: 34px;
	border-radius: 3px;
	background: var(--grad2);
	flex: 0 0 auto;
}

.menu-card b {
	display: block;
	color: var(--text);
	font-size: 13px;
	margin-bottom: 2px;
	letter-spacing: .1px;
}

.menu-card p {
	margin: 0;
	color: var(--muted2);
	font-size: 12px;
	line-height: 1.25;
}

.menu-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.side-hero {
	border-radius: 14px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .10);
	background:
		radial-gradient(420px 200px at 20% 0%, rgba(34, 211, 238, .18), transparent 60%),
		radial-gradient(420px 200px at 90% 0%, rgba(139, 92, 246, .22), transparent 60%),
		rgba(255, 255, 255, .04);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	overflow: hidden;
	position: relative;
}

.side-hero h4 {
	margin: 0 0 6px 0;
	font-size: 13px;
	letter-spacing: .2px;
}

.side-hero p {
	margin: 0 0 10px 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}

.side-hero a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--text);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: 9px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	transition: .15s ease;
}

.side-hero a:hover {
	background: rgba(255, 255, 255, .12);
}

.tiny {
	display: flex;
	gap: 10px;
}

.tiny a {
	flex: 1;
	text-decoration: none;
	color: var(--muted);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	transition: .15s ease;
	text-align: center;
}

.tiny a:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--text);
	border-color: rgba(34, 211, 238, .18);
}

.hamburger {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 0px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .05);
	cursor: pointer;
	transition: .15s ease;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex-direction: column;
}

.hamburger:hover {
	background: rgba(255, 255, 255, .08);
}

.hamburger span {
	width: 18px;
	height: 2px;
	background: rgba(231, 234, 240, .85);
	border-radius: 99px;
	transition: .15s ease;
}

.overlay {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 85%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter .35s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 60;
}

.overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 92vw);
	border-left: 1px solid rgba(255, 255, 255, .10);
	box-shadow: var(--shadow);
	transform: translateX(110%);
	transition: .4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 70;
	display: flex;
	flex-direction: column;
}

.drawer.open {
	transform: translateX(0);
}

.drawer-top {
	padding: 14px 14px 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.drawer-top .brand {
	min-width: 0;
}

.close {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .06);
	cursor: pointer;
	transition: .15s ease;
	color: var(--text);
	font-weight: 900;
	font-size: 16px;
}

.close:hover {
	background: rgb(255 255 255);
}

.drawer-body {
	padding-top: 0px;
	padding-right: 14px;
	padding-bottom: 18px;
	padding-left: 14px;
	overflow: auto;
}

.m-section {
	margin: 10px 0 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .04);
	border-radius: 14px;
	overflow: hidden;
}

.m-head {
	width: 100%;
	padding: 12px 12px;
	border: 0;
	background: transparent;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-weight: 800;
	font-size: 13px;
}

.m-head span {
	color: var(--muted);
	font-weight: 700;
	font-size: 12px;
}

.m-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height .2s ease;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.m-panel.open {
	max-height: 560px;
}

.m-links {
	display: flex;
	flex-direction: column;
	padding: 10px;
	gap: 8px;
}

.m-links a {
	display: flex;
	gap: 10px;
	text-decoration: none;
	color: var(--text);
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(0, 0, 0, .10);
	padding: 10px;
	border-radius: 12px;
	transition: .15s ease;
}

.m-links a:hover {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(34, 211, 238, .18);
}

.m-links a b {
	font-size: 13px;
}

.m-links a small {
	color: var(--muted2);
	display: block;
	margin-top: 2px;
}

.drawer-cta {
	margin-top: 12px;
	display: flex;
	gap: 10px;
}

.drawer-cta a {
	flex: 1;
	text-align: center;
	text-decoration: none;
	font-weight: 900;
	padding: 12px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	transition: .15s ease;
}

.drawer-cta a:hover {
	background: rgba(255, 255, 255, .10);
}

.drawer-cta a.primary {
	border: 0;
	background: var(--grad);
	color: #061018;
}

@media (max-width: 1024px) {
	.nx-nav-links {
		display: none;
	}

	.nx-nav-right .pill,
	.nx-nav-right .link {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.nx-nav-right {
		min-width: auto;
	}

	.brand {
		min-width: auto;
	}
}

.hero {
	max-width: var(--max);
	margin: 40px auto 0;
	padding: 0 18px 80px;
}

.hero h1 {
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.05;
	margin: 30px 0 10px;
	letter-spacing: -.02em;
}

.hero p {
	margin: 0;
	color: var(--muted);
	max-width: 70ch;
	line-height: 1.5;
}

.card-demo {
	margin-top: 22px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
	border-radius: 18px;
	padding: 18px;
	box-shadow: var(--shadow2);
}

.vc-user-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.vc-user-icon i {
	font-size: 20px;
	line-height: 1;
}

.btn-warning,
.btn-primary {
	color: #000;
	transition: transform .5s;
	background-color: #181818;
	border: 1px solid #181818;

}

.flickity-prev-next-button.previous,
.flickity-prev-next-button.next {
	display: none !important;
}

.hb-promo-section {
	padding-bottom: 38px;
	padding-left: 0;
	padding-right: 0;
	position: relative;
}

.hb-promo-section .container,
.pb-4 > .container {
	max-width: var(--max, 1180px);
	padding-left: 36px;
	padding-right: 36px;
}

@media (max-width: 1024px) {
	.hb-promo-section .container,
	.pb-4 > .container {
		padding-left: 28px;
		padding-right: 28px;
	}
}

@media (max-width: 768px) {
	.hb-promo-section .container,
	.pb-4 > .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 480px) {
	.hb-promo-section .container,
	.pb-4 > .container {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.hb-promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.hb-promo-card {
	height: 145px;
	border-radius: 18px;
	padding: 0;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.35s ease,
	            border-color 0.3s ease;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	display: block;
}

.hb-promo-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.52) 100%);
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.hb-promo-card:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: rgba(139, 92, 246, 0.4);
}

.hb-promo-card:hover::after {
	opacity: 0.8;
}

.hb-promo-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 100%;
	padding: 14px 16px;
	position: relative;
	z-index: 2;
}

.hb-promo-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hb-promo-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hb-promo-subtitle {
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	font-style: italic;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hb-promo-badge {
	padding: 8px 20px;
	border-radius: 25px;
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}

.hb-promo-software {
	background-image: url(/upload/hbpromofreefire.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-promo-software .hb-promo-title,
.hb-promo-software .hb-promo-subtitle {
	color: #fff;
}

.hb-promo-adobe {
	background-image: url(/upload/hbpromoml.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-promo-youtube {
	background-image: url(/upload/hbpromopubg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-promo-xbox {
	background-image: url(/upload/hbpromofreefiremax.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-promo-playstation {
	background-image: url(/upload/hbpromoxbox.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-promo-steam {
	background-image: url(/upload/hbpromosteam.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hb-badge-red {
	background: #ff4444;
	color: #fff;
}

.hb-badge-purple {
	background: #c92cbb;
	color: #fff;
}

.hb-badge-blue {
	background: #00a8ff;
	color: #fff;
}

.hb-badge-green {
	background: #9acd32;
	color: #000;
}

@media (min-width: 1400px) {
	.hb-banner-img {
		max-width: 1200px;
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.hb-banner-img {
		max-width: 1000px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.hb-banner-img {
		max-width: 900px;
		height: 280px;
	}

	.hb-flickity-slider .flickity-button {
		width: 45px;
		height: 45px;
	}

	.hb-cat-icon {
		width: 65px;
		height: 65px;
		font-size: 30px;
	}
}

@media (max-width: 991px) {
	.hb-banner-img {
		width: calc(100% - 30px);
		height: 250px;
		border-radius: 16px;
	}

	.hb-flickity-slider .flickity-button {
		width: 40px;
		height: 40px;
	}

	.hb-flickity-slider .flickity-button.previous {
		left: 15px;
	}

	.hb-flickity-slider .flickity-button.next {
		right: 15px;
	}

	.hb-category-grid {
		gap: 20px;
	}

	.hb-cat-icon {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.hb-banner-img {
		width: calc(100% - 20px);
		height: 220px;
		border-radius: 15px;
	}

	.hb-flickity-slider .flickity-button {
		display: none;
	}

	.hb-flickity-slider .flickity-page-dots {
		bottom: 15px;
	}

	.hb-category-wrapper {
		padding: 20px 15px;
		border-radius: 15px;
	}

	.hb-category-grid {
		gap: 15px;
	}

	.hb-promo-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.hb-promo-card {
		height: 115px;
	}

	.hb-promo-title {
		font-size: 15px;
	}

	.hb-promo-badge {
		font-size: 14px;
		padding: 6px 14px;
	}
}

@media (max-width: 575px) {
	.hb-hero-section {
		padding: 15px 0;
	}

	.hb-banner-img {
		width: calc(100% - 15px);
		height: 180px;
		border-radius: 12px;
	}

	.hb-flickity-slider .flickity-page-dots {
		bottom: 12px;
	}

	.hb-flickity-slider .flickity-page-dots .dot {
		width: 10px;
		height: 10px;
		margin: 0 4px;
	}

	.hb-category-wrapper {
		border-radius: 12px;
	}

	.hb-cat-icon {
		width: 55px;
		height: 55px;
		font-size: 26px;
		border-radius: 12px;
	}

	.hb-cat-name {
		font-size: 12px;
	}

	.hb-promo-card {
		height: 100px;
	}

	.hb-promo-title {
		font-size: 14px;
	}

	.hb-promo-subtitle {
		font-size: 12px;
	}

	.hb-promo-badge {
		font-size: 13px;
		padding: 5px 12px;
	}
}

@media (max-width: 375px) {
	.hb-banner-img {
		height: 160px;
	}

	.hb-promo-grid {
		gap: 8px;
	}

	.hb-promo-card {
		height: 90px;
	}

	.hb-promo-title {
		font-size: 13px;
	}

	.hb-promo-inner {
		padding: 10px 12px;
	}
}

.carousel:not(.flickity-enabled) img:not(:first-child) {
	display: none;
}

.carousel .flickity-slider {
	display: flex;
}

.carousel img {
	width: 100%;
	height: auto;
}

.tpw2-wrapper {
	background: #181818;
	border-radius: 14px;
	padding: 24px;
	color: #fff;
	font-family: Arial, sans-serif;
}

.tpw2-stars {
	display: flex;
	gap: 4px;
}

.tpw2-stars span {
	width: 18px;
	height: 18px;
	background: #00b67a;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
			68% 57%, 79% 91%,
			50% 70%, 21% 91%,
			32% 57%, 2% 35%,
			39% 35%);
}

.tpw2-stars.small span {
	width: 14px;
	height: 14px;
}

.tpw2-stars .half {
	background: linear-gradient(90deg, #00b67a 50%, #3a4060 50%);
}

.tpw2-logo {
	color: #00b67a;
	font-weight: bold;
}

.tpw2-score {
	font-size: 13px;
	color: #d0d4ff;
}

.tpw2-sub {
	font-size: 12px;
	color: #b9c0ff;
}

.tpw2-desktop-summary {
	display: none;
	min-width: 230px;
}

.tpw2-reviews {
	display: flex;
	gap: 30px;
}

.tpw2-review {
	max-width: 260px;
}

.tpw2-review h4 {
	margin: 8px 0 4px;
}

.tpw2-review p {
	font-size: 13px;
	color: #d7dbff;
}

.tpw2-user {
	font-size: 12px;
	color: #aab1ff;
}

.tpw2-mobile-header {
	display: block;
}

.tpw2-review {
	display: none;
}

.tpw2-review.active {
	display: block;
}

.tpw2-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}

.tpw2-nav button {
	background: none;
	border: 1px solid #6f76a8;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
}

.tpw2-dots span {
	width: 7px;
	height: 7px;
	background: #6f76a8;
	border-radius: 50%;
	display: inline-block;
	margin: 0 4px;
}

.tpw2-dots .active {
	background: #fff;
}

@media (min-width: 992px) {
	.tpw2-wrapper {
		display: flex;
		gap: 30px;
		align-items: center;
	}

	.tpw2-mobile-header,
	.tpw2-nav {
		display: none;
	}

	.tpw2-desktop-summary {
		display: block;
		margin-left: 15px;
	}

	.tpw2-review {
		display: block !important;
	}
}

.hstg-container {
	position: relative;
	max-width: var(--max, 1220px);
	margin: 0 auto 16px;
	padding: 40px 36px 36px;
	border-radius: 20px;
	background:
		radial-gradient(ellipse 55% 90% at 0% 50%, rgba(109, 40, 217, 0.38) 0%, transparent 70%),
		linear-gradient(135deg, #1a1230 0%, #111827 40%, #0f1420 100%);
	overflow-x: clip;
	overflow-y: visible;
}

.hstg-container::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -60px;
	transform: translateY(-50%);
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.35) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	filter: blur(40px);
	z-index: 0;
}

.hstg-header,
.hstg-games-grid {
	position: relative;
	z-index: 1;
}

.hstg-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 38px;
	gap: 16px;
	flex-wrap: wrap;
}

.hstg-header-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 4px;
}

.hstg-view-all-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .2px;
	color: #ffd84a;
	background: rgba(255, 204, 0, .08);
	border: 1px solid rgba(255, 204, 0, .35);
	text-decoration: none;
	white-space: nowrap;
	transition: all .25s ease;
}

.hstg-view-all-btn i {
	font-size: .75rem;
	transition: transform .25s ease;
}

.hstg-view-all-btn:hover,
.hstg-view-all-btn:focus {
	color: #0c0c0c;
	background: linear-gradient(135deg, #ffd84a, #ffb703);
	border-color: rgba(255, 216, 74, .9);
	text-decoration: none;
	transform: translateY(-1px);
}

.hstg-view-all-btn:hover i {
	transform: translateX(3px);
}

.hstg-title {
	font-size: 26px;
	font-weight: 800;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.4px;
	line-height: 1.2;
}

.hstg-subtitle {
	font-size: 13px;
	color: rgba(200, 200, 230, 0.6);
	margin: 0;
	font-weight: 400;
}

.hstg-games-grid {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 10px 4px 10px;
	margin: -10px -4px -10px;
	scrollbar-width: none;
	cursor: grab;
}
.hstg-games-grid:active {
	cursor: grabbing;
}
.hstg-games-grid::-webkit-scrollbar { display: none; }

.hstg-game-card {
	flex: 0 0 200px;
	min-width: 200px;
	background: #000000;
	border-radius: 16px;
	overflow: hidden;
	scroll-snap-align: start;
	position: relative;
	transition:
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.28s ease,
		border-color 0.28s ease;
	cursor: pointer;
}

.hstg-game-card:hover {
	transform: translateY(-6px);
	border-color: rgba(139, 92, 246, 0.45);
}

.hstg-card-image-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hstg-card-image-wrapper::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(8, 10, 20, 0.95) 0%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

.hstg-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.hstg-game-card:hover .hstg-card-image {
	transform: scale(1.08);
}

.hstg-discount-badge {
	position: absolute;
	top: 9px;
	right: 9px;
	background: linear-gradient(135deg, #7c3aed, #6d28d9);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 30px;
	box-shadow: 0 2px 10px rgba(109, 40, 217, 0.5);
	letter-spacing: 0.2px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 3px;
}

.hstg-card-info {
	padding: 14px 13px 13px;
}

.hstg-game-name {
	font-size: 14px;
	font-weight: 700;
	color: #f0f2ff;
	margin: 0 0 10px 0;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hstg-game-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.hstg-sold {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 500;
	color: rgba(180, 190, 230, 0.7);
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.2);
	padding: 2px 9px;
	border-radius: 30px;
	letter-spacing: 0.1px;
}

.hstg-rating { color: #f5a623; display: flex; align-items: center; gap: 2px; }
.hstg-rating strong { color: #fff; font-weight: 600; }
.hstg-divider { color: rgba(255,255,255,0.2); font-weight: 300; }
.hstg-view-all { font-size:14px;color:rgba(255,255,255,.75);text-decoration:none;display:flex;align-items:center;gap:4px;font-weight:500;transition:color .2s; }
.hstg-view-all:hover { color:#a78bfa; }
.hstg-arrow { font-size:18px;font-weight:600; }

@media (max-width: 1024px) {
	.hstg-container {
		padding: 32px 28px 28px;
		border-radius: 20px;
	}
	.hstg-game-card { flex: 0 0 185px; min-width: 185px; }
}

@media (max-width: 768px) {
	.hstg-container {
		padding: 26px 20px 22px;
		border-radius: 20px;
	}
	.hstg-title { font-size: 20px; }
	.hstg-game-card { flex: 0 0 165px; min-width: 165px; }
}

@media (max-width: 480px) {
	.hstg-container {
		padding: 20px 14px 18px;
		border-radius: 20px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.hstg-header {
		margin-bottom: 18px;
	}
	.hstg-title { font-size: 20px; }
	.hstg-subtitle { font-size: 13px; }
	.hstg-game-card { flex: 0 0 128px; min-width: 128px; }
	.hstg-game-name { font-size: 11px; }
	.hstg-card-info { padding: 8px; }
}

.tx-header {
	background: linear-gradient(90deg, #ffcc00, #ff5a3c);
	color: #000;
	font-weight: 700;
	font-size: 20px;
	padding: 14px 20px;
	border-radius: 14px;
	margin-bottom: 20px;
	margin-top: 28px;
}

.vch-jenis-badge {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 14px;
	padding: 10px 12px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	line-height: 1.2;
}

.vch-jenis-badge h5 {
	margin: 0 0 2px 0;
}

.vch-jenis-badge small {
	opacity: .75;
	display: block;
}

.vchg2-sec {
	width: calc(100% - 72px);
	max-width: var(--max, 1180px);
	margin: 0 auto;
	padding: 56px 0 42px;
	background:
		radial-gradient(ellipse 55% 90% at 0% 50%, rgba(109, 40, 217, 0.38) 0%, transparent 70%),
		linear-gradient(135deg, #1a1230 0%, #111827 40%, #0f1420 100%);
	border-radius: 28px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .06),
		0 18px 55px rgba(0, 0, 0, .45);
	overflow: hidden;
}

.vchg2-inner {
	padding: 0 36px;
}

.vchg2-head {
	text-align: center;
	margin-bottom: 22px;
}

.vchg2-title {
	margin: 0;
	color: #fff;
	font-weight: 900;
	letter-spacing: .2px;
	font-size: clamp(28px, 3vw, 46px);
	line-height: 1.08;
	text-shadow: 0 10px 35px rgba(0, 0, 0, .55);
}

.vchg2-sub {
	margin-top: 10px;
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
}

.vchg2-wrap {
	position: relative;
	border-radius: 16px;
}

.vchg2-wrap.vchg2-wrap--fade {
	max-height: 420px;
	overflow: hidden;
}

.vchg2-wrap.vchg2-wrap--fade:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 130px;
	background: linear-gradient(180deg, rgba(11, 17, 24, 0) 0%, rgba(11, 17, 24, .92) 70%, rgba(11, 17, 24, 1) 100%);
	pointer-events: none;
}

.vchg2-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	padding: 10px;
	align-items: start;
}

.vchg2-grid.vchg2-grid--few {
	max-width: 260px;
	margin: 0 auto;
}

.vchg2-card {
	display: block;
	text-decoration: none !important;
	color: inherit;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 16px 45px rgba(0, 0, 0, .35);
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vchg2-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
}

.vchg2-media {
	position: relative;
	width: 100%;
	background: rgba(0, 0, 0, .25);
	overflow: hidden;
}

.vchg2-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform .25s ease;
}

.vchg2-media--contain img {
	object-fit: contain;
	transform: none;
	background: rgba(0, 0, 0, .20);
}

.vchg2-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 800;
	border-radius: 999px;
	color: #fff;
	background: rgba(255, 59, 48, .92);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
}

.vchg2-body {
	padding: 12px 12px 14px;
}

.vchg2-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	margin-bottom: 8px;
}

.vchg2-metaItem {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.vchg2-meta svg {
	width: 14px;
	height: 14px;
	opacity: .9;
}

.vchg2-ttl {
	margin: 0;
	color: #fff;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.35;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vchg2-cta {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.vchg2-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  color: #000000 !important;
  text-decoration: none !important;
  font-weight: 900;
  line-height: 1;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, .12), transparent 34%),
    rgba(0, 0, 0, .22);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.vchg2-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffcc00, #ff5a3c);
  pointer-events: none;
}

.vchg2-btn::after {
  content: "";
  position: absolute;
  top: -140%;
  left: -85%;
  z-index: 1;
  width: 58%;
  height: 380%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .18),
    rgba(255, 255, 255, .65),
    rgba(255, 255, 255, .18),
    transparent
  );
  transform: translateX(-140%) rotate(24deg);
  opacity: 0;
  pointer-events: none;
}

.vchg2-btn:hover,
.vchg2-btn:focus {
  color: #000000 !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .48),
    0 0 0 4px rgba(255, 204, 0, .08),
    0 0 26px rgba(255, 90, 60, .18),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.vchg2-btn:hover::after,
.vchg2-btn:focus::after {
  opacity: 1;
  animation: vchg2BtnShine .75s ease forwards;
}

.vchg2-btn:active {
  transform: translateY(0) scale(.98);
}

@keyframes vchg2BtnShine {
  0% {
    transform: translateX(-140%) rotate(24deg);
  }

  100% {
    transform: translateX(430%) rotate(24deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vchg2-btn,
  .vchg2-btn::after {
    transition: none;
    animation: none !important;
  }
}

@media (max-width: 992px) {
	.vchg2-sec {
		width: calc(100% - 56px);
		padding: 44px 0 34px;
		border-radius: 22px;
		margin: 0 auto;
	}

	.vchg2-wrap.vchg2-wrap--fade {
		max-height: 520px;
	}
}

@media (max-width: 640px) {
	.vchg2-sec {
		width: calc(100% - 28px);
		padding: 40px 0 34px;
		border-radius: 24px;
	}

	.vchg2-inner {
		padding: 0 18px;
	}

	.vchg2-head {
		margin-bottom: 28px;
	}

	.vchg2-title {
		font-size: clamp(31px, 8.5vw, 40px);
		line-height: 1.08;
	}

	.vchg2-sub {
		max-width: 330px;
		margin: 18px auto 0;
		font-size: 18px;
		line-height: 1.45;
	}

	.vchg2-wrap {
		overflow: visible;
	}

	.vchg2-wrap.vchg2-wrap--fade {
		max-height: none;
		overflow: visible;
	}

	.vchg2-wrap.vchg2-wrap--fade:after {
		display: none;
	}

	.vchg2-grid {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 100%);
		grid-template-columns: unset;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 10px 0 12px;
		gap: 16px;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 0;
		scroll-padding-right: 0;
	}

	.vchg2-card {
		width: 100%;
		max-width: 100%;
		scroll-snap-align: start;
		border-radius: 18px;
	}

	.vchg2-body {
		padding: 16px 18px 18px;
	}

	.vchg2-meta {
		font-size: 16px;
		gap: 8px;
		margin-bottom: 12px;
	}

	.vchg2-meta svg {
		width: 18px;
		height: 18px;
	}

	.vchg2-ttl {
		font-size: 21px;
		line-height: 1.2;
	}

	.vchg2-cta {
		margin-top: 18px;
	}

	.vchg2-btn {
		width: auto;
		max-width: 100%;
		padding: 11px 18px;
		font-size: 13px;
		line-height: 1.15;
	}

	.vchg2-grid.vchg2-grid--few {
		grid-auto-flow: row !important;
		grid-auto-columns: unset !important;
		grid-template-columns: 1fr !important;
		overflow-x: visible !important;
		scroll-snap-type: none !important;
		padding: 10px 0 0 !important;
		justify-items: center;
		max-width: 100% !important;
		margin: 0 auto;
	}

	.vchg2-grid.vchg2-grid--few .vchg2-card {
		width: 100%;
	}
}

.clearfix {
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.clearfix {
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.clearfix {
		padding-bottom: 4.5rem;
	}
}

.vch-section-view-all {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;

  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;

  color: #000;
  background: linear-gradient(90deg, #ffcc00, #ff5a3c);
  box-shadow: 0 8px 22px rgba(255, 183, 3, .16);

  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.vch-section-view-all::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -80%;
  z-index: -1;

  width: 60%;
  height: 340%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .28),
    rgba(255, 255, 255, .65),
    rgba(255, 255, 255, .28),
    transparent
  );

  transform: translateX(-120%) rotate(24deg);
  opacity: 0;
  pointer-events: none;
}

.vch-section-view-all::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .35), transparent 32%),
    linear-gradient(90deg, #ffcc00, #ff5a3c);
  pointer-events: none;
}

.vch-section-view-all:hover,
.vch-section-view-all:focus {
  color: #000000;
  border-color: rgba(255, 204, 0, .65);
  filter: brightness(1.08) saturate(1.08);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(255, 183, 3, .22),
    0 0 0 4px rgba(255, 204, 0, .08);
}

.vch-section-view-all:hover::before,
.vch-section-view-all:focus::before {
  opacity: 1;
  animation: vchButtonShine .75s ease forwards;
}

.vch-section-view-all:active {
  transform: translateY(0) scale(.98);
}

@keyframes vchButtonShine {
  0% {
    transform: translateX(-140%) rotate(24deg);
  }

  100% {
    transform: translateX(420%) rotate(24deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vch-section-view-all,
  .vch-section-view-all::before {
    transition: none;
    animation: none !important;
  }
}

@media (max-width: 575px) {
  .vch-section-view-all {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }

  .vch-jenis-badge h5 {
    font-size: 15px;
  }

  .vch-jenis-badge small {
    font-size: 10px;
  }
}

.hb-promo-card {
  position: relative;
  overflow: hidden;
}

.hb-promo-inner {
  position: relative;
  min-height: 100%;
}

.hb-promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px 14px 4px 14px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.hb-promo-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hb-promo-badge::after {
  content: 'PROMO';
  position: absolute;
  top: 4px;
  left: 9px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  color: rgba(255, 255, 255, .78);
}

.hb-promo-card:hover .hb-promo-badge,
.hb-promo-card:focus .hb-promo-badge {
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1.08);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.hb-badge-red {
  background: linear-gradient(135deg, #ff4d6d 0%, #ff6a3d 100%);
}

.hb-badge-purple {
  background: linear-gradient(135deg, #d633ff 0%, #7c3aed 100%);
}

.hb-badge-blue {
  background: linear-gradient(135deg, #26c6ff 0%, #008cff 100%);
}

.hb-badge-green {
  color: #111111;
  background: linear-gradient(135deg, #d4ff2a 0%, #9bd91b 100%);
}

.hb-badge-green::after {
  color: rgba(0, 0, 0, .6);
}

@media (max-width: 768px) {
  .hb-promo-badge {
    top: 10px;
    right: 10px;
    min-width: 72px;
    height: 38px;
    padding: 0 14px;
    font-size: 18px;
    border-radius: 12px 12px 4px 12px;
  }

  .hb-promo-badge::after {
    top: 4px;
    left: 8px;
    font-size: 7px;
  }
}

@media (max-width: 575px) {
  .hb-promo-badge {
    top: 8px;
    right: 8px;
    min-width: 62px;
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 10px 10px 4px 10px;
  }

  .hb-promo-badge::after {
    top: 3px;
    left: 7px;
    font-size: 6px;
  }
}

.ix-feature-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

.ix-feature-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  filter: none;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
}

.ix-feature-grid {
  position: relative;
  z-index: 1;
}

.ix-feature-card {
  --ix-card-bg: rgba(12, 14, 22, .72);
  --ix-card-bg-2: rgba(8, 10, 16, .92);
  --ix-card-border: rgba(255, 255, 255, .10);
  --ix-card-hover-border: rgba(255, 204, 0, .45);
  --ix-card-line: rgba(255, 255, 255, .12);
  --ix-card-tile: rgba(255, 204, 0, .09);
  --ix-accent: #ffcc00;
  --ix-accent-2: #ff5a3c;
  --ix-accent-soft: rgba(255, 204, 0, .12);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--ix-card-border);
  background:
    linear-gradient(180deg, var(--ix-card-bg) 0%, var(--ix-card-bg-2) 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, .24),
    0 18px 42px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translate3d(0, 0, 0);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
  will-change: transform;
}

.ix-feature-card:nth-child(2) {
  --ix-accent: #22d3ee;
  --ix-accent-2: #8b5cf6;
  --ix-accent-soft: rgba(34, 211, 238, .12);
  --ix-card-hover-border: rgba(34, 211, 238, .42);
  --ix-card-tile: rgba(34, 211, 238, .08);
}

.ix-feature-card:nth-child(3) {
  --ix-accent: #a78bfa;
  --ix-accent-2: #ff5a3c;
  --ix-accent-soft: rgba(167, 139, 250, .12);
  --ix-card-hover-border: rgba(167, 139, 250, .42);
  --ix-card-tile: rgba(167, 139, 250, .08);
}

.ix-feature-card:nth-child(4) {
  --ix-accent: #10b981;
  --ix-accent-2: #ffcc00;
  --ix-accent-soft: rgba(16, 185, 129, .12);
  --ix-card-hover-border: rgba(16, 185, 129, .42);
  --ix-card-tile: rgba(16, 185, 129, .08);
}

.ix-feature-card::before {
  content: '';
  position: absolute;
  inset: -45%;
  z-index: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from 225deg at 50% 50%,
      rgba(255, 255, 255, 0) 0deg,
      color-mix(in srgb, var(--ix-accent) 95%, transparent) 28deg,
      rgba(255, 255, 255, .52) 68deg,
      color-mix(in srgb, var(--ix-accent-2) 75%, transparent) 118deg,
      rgba(255, 255, 255, 0) 260deg,
      rgba(255, 255, 255, .35) 315deg,
      rgba(255, 255, 255, 0) 360deg
    );
  filter: blur(42px);
  opacity: 0;
  transform: translate3d(-12%, 14%, 0) rotate(-18deg) scale(.9);
  transition: opacity .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  mix-blend-mode: screen;
}

.ix-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--ix-card-line), transparent) 0 10% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ix-card-line), transparent) 0 33% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ix-card-line), transparent) 0 56% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, var(--ix-card-line), transparent) 23% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, var(--ix-card-line), transparent) 50% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, var(--ix-card-line), transparent) 77% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--ix-card-tile) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(180deg, var(--ix-card-tile) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(circle at 66% 7%, #000 0%, #000 16%, transparent 62%);
  mask-image: radial-gradient(circle at 66% 7%, #000 0%, #000 16%, transparent 62%);
  transition: opacity .35s ease;
}

.ix-feature-card > * {
  position: relative;
  z-index: 3;
}

.ix-feature-card:hover,
.ix-feature-card:focus-within {
  transform: translateY(-8px) scale(1.018);
  border-color: var(--ix-card-hover-border);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, .28),
    0 22px 52px rgba(0, 0, 0, .42),
    0 0 0 1px color-mix(in srgb, var(--ix-accent) 22%, transparent),
    0 0 44px color-mix(in srgb, var(--ix-accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ix-feature-card:hover::before,
.ix-feature-card:focus-within::before {
  opacity: .92;
  transform: translate3d(5%, -5%, 0) rotate(18deg) scale(1.06);
  animation: ixFeatureShine 5.5s linear infinite;
}

.ix-feature-card:hover::after,
.ix-feature-card:focus-within::after {
  opacity: 1;
  animation: ixFeatureTiles 7s linear infinite;
}

.ix-feature-icon {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)),
    var(--ix-accent-soft);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform .32s cubic-bezier(.22, 1, .36, 1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.ix-feature-icon::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ix-accent) 28%, transparent), transparent 72%);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .25s ease, transform .25s ease;
}

.ix-feature-icon img {
  position: relative;
  z-index: 2;
  display: block;
  transform: translateZ(0);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .34));
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}

.ix-feature-card:hover .ix-feature-icon,
.ix-feature-card:focus-within .ix-feature-icon {
  transform: translateY(-3px) scale(1.05);
  border-color: color-mix(in srgb, var(--ix-accent) 45%, rgba(255, 255, 255, .15));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .34),
    0 0 28px color-mix(in srgb, var(--ix-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ix-feature-card:hover .ix-feature-icon::after,
.ix-feature-card:focus-within .ix-feature-icon::after {
  opacity: 1;
  transform: scale(1);
}

.ix-feature-card:hover .ix-feature-icon img,
.ix-feature-card:focus-within .ix-feature-icon img {
  transform: scale(1.08) rotate(-4deg);
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--ix-accent) 26%, rgba(0, 0, 0, .28)));
}

.ix-feature-card h3 {
  transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
}

.ix-feature-card p {
  transition: color .25s ease, transform .25s ease;
}

.ix-feature-card:hover h3,
.ix-feature-card:focus-within h3 {
  color: #ffffff;
  transform: translateY(-1px);
  text-shadow: 0 0 18px color-mix(in srgb, var(--ix-accent) 28%, transparent);
}

.ix-feature-card:hover p,
.ix-feature-card:focus-within p {
  color: rgba(255, 255, 255, .76);
  transform: translateY(-1px);
}

@keyframes ixFeatureShine {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes ixFeatureTiles {
  0%, 12%, 100% {
    background-position:
      0 10%, 0 33%, 0 56%,
      23% 0, 50% 0, 77% 0,
      0 0, 0 0;
  }
  45% {
    background-position:
      0 10%, 0 33%, 0 56%,
      23% 0, 50% 0, 77% 0,
      44px 0, 0 44px;
  }
  82% {
    background-position:
      0 10%, 0 33%, 0 56%,
      23% 0, 50% 0, 77% 0,
      88px 0, 0 88px;
  }
}

@media (max-width: 575px) {
  .ix-feature-card {
    border-radius: 15px;
  }

  .ix-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .ix-feature-card:hover,
  .ix-feature-card:focus-within {
    transform: translateY(-5px) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ix-feature-card,
  .ix-feature-card::before,
  .ix-feature-card::after,
  .ix-feature-icon,
  .ix-feature-icon::after,
  .ix-feature-icon img,
  .ix-feature-card h3,
  .ix-feature-card p {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 767.98px) {
  .ix-feature-section {
    background: #000 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ix-feature-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ix-feature-grid {
    display: grid !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .ix-feature-card {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 232px !important;
    padding: 18px 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
    border-radius: 16px !important;
  }

  .ix-feature-icon {
    width: 42px !important;
    height: 42px !important;
    margin: 0 0 14px 0 !important;
    border-radius: 14px !important;
    flex: 0 0 42px !important;
  }

  .ix-feature-icon img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
  }

  .ix-feature-card h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: clamp(15px, 3.9vw, 18px) !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.015em !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  .ix-feature-card p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.56 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    overflow: visible !important;
    max-height: none !important;
    display: block !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  .ix-feature-card:hover,
  .ix-feature-card:focus-within {
    transform: translateY(-4px) scale(1.006) !important;
  }

  .ix-feature-card:hover::before,
  .ix-feature-card:focus-within::before {
    opacity: .48 !important;
    filter: blur(38px) !important;
  }

  .ix-feature-card:hover::after,
  .ix-feature-card:focus-within::after {
    opacity: .42 !important;
  }
}

@media (max-width: 480px) {
  .ix-feature-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 420px) {
  .ix-feature-grid {
    gap: 12px !important;
  }

  .ix-feature-card {
    min-height: auto !important;
    padding: 18px 16px 17px !important;
  }

  .ix-feature-card h3 {
    font-size: 18px !important;
    line-height: 1.28 !important;
  }

  .ix-feature-card p {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .ix-feature-card:hover,
  .ix-feature-card:focus-within {
    transform: none !important;
  }

  .ix-feature-card:hover::before,
  .ix-feature-card:focus-within::before,
  .ix-feature-card:hover::after,
  .ix-feature-card:focus-within::after {
    animation: none !important;
  }
}

.vch-hero-section {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.vch-hero-section.vch-suggesting {
  overflow: visible;
  z-index: 60;
}

.vch-hero-section.vch-suggesting::before,
.vch-hero-section.vch-suggesting::after {
  display: none;
}

.vch-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

.vch-hero-section::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 204, 0, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.vch-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max, 1180px);
  margin: 0 auto;
  padding: 56px 36px 48px;
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: center;
  gap: 40px;
}

.vch-hero-content {
  min-width: 0;
}

.vch-hero-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25em;
  font-family: 'Plus Jakarta Sans', var(--font-heading);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 900;
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.vch-hero-title-label {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -.02em;
}

.vch-hero-title .vch-rotate-item {
  background: linear-gradient(90deg, #ffcc00, #ff5a3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vch-rotate {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  height: 1.12em;
  width: var(--vch-rw0, 11ch);
  overflow: hidden;
  vertical-align: bottom;
  animation: vch-rotate-width 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.vch-rotate-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: vch-rotate-cycle 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.vch-rotate-item {
  height: 1.12em;
  line-height: 1.12em;
  background: linear-gradient(90deg, #ffcc00, #ff5a3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

@keyframes vch-rotate-cycle {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-1.12em); }
  50%, 70% { transform: translateY(-2.24em); }
  75%, 95% { transform: translateY(-3.36em); }
  100% { transform: translateY(-4.48em); }
}

@keyframes vch-rotate-width {
  0%, 20% { width: var(--vch-rw0, 11ch); }
  25%, 45% { width: var(--vch-rw1, 6ch); }
  50%, 70% { width: var(--vch-rw2, 7.5ch); }
  75%, 95% { width: var(--vch-rw3, 9ch); }
  100% { width: var(--vch-rw0, 11ch); }
}

@media (prefers-reduced-motion: reduce) {
  .vch-rotate-list,
  .vch-rotate {
    animation: none;
  }
}

.vch-hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 26px;
  max-width: 520px;
}

.vch-hero-search {
  display: flex;
  align-items: center;
  max-width: 520px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}

.vch-hero-search:focus-within {
  border-color: rgba(255, 204, 0, .55);
  box-shadow: 0 0 0 4px rgba(255, 204, 0, .10);
}

.vch-hero-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 15px;
  outline: none;
  min-width: 0;
}

.vch-hero-search input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.vch-hero-search-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffcc00, #ff5a3c);
  color: #1a0a00;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .15s, filter .15s;
}

.vch-hero-search-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.08);
}

.vch-hero-search-btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -80%;
  width: 60%;
  height: 360%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(24deg) translateX(-150%);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.vch-hero-search-btn:hover::after {
  opacity: 1;
  animation: vchBtnShine .6s ease forwards;
}

@keyframes vchBtnShine {
  to { transform: rotate(24deg) translateX(350%); }
}

.vch-hero-search-wrap {
  position: relative;
  max-width: 520px;
  z-index: 40;
}

.vch-hero-search-wrap .vch-hero-search {
  max-width: none;
  position: relative;
  z-index: 2;
}

.vch-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 80;
  text-align: left;
  background: rgba(12, 14, 20, .96);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.vch-suggest.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.vch-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  min-height: 44px;
  transition: background .14s ease;
}

.vch-suggest-item:hover,
.vch-suggest-item.is-active {
  background: rgba(255, 255, 255, .07);
}

.vch-suggest-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}

.vch-suggest-thumb-fallback {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 204, 0, .12);
  color: #ffcc00;
  border: 1px solid rgba(255, 204, 0, .18);
  font-size: 15px;
}

.vch-suggest-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.vch-suggest-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vch-suggest-title mark {
  padding: 0;
  margin: 0;
  background: transparent;
  background-color: transparent;
  color: #ffcc00;
  font-weight: 800;
  border-radius: 0;
}

.vch-suggest-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.vch-suggest-sub i {
  font-size: 10px;
  color: rgba(255, 204, 0, .7);
  flex: 0 0 auto;
}

.vch-suggest-seller-logo {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.vch-suggest-sub-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vch-suggest-type {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
}

.vch-suggest-state {
  padding: 18px 14px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
}

.vch-suggest-state i {
  display: block;
  font-size: 22px;
  color: rgba(255, 204, 0, .65);
  margin-bottom: 8px;
}

.vch-suggest-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0 0 12px 12px;
  color: #ffcc00;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
}

.vch-suggest-foot:hover {
  background: rgba(255, 204, 0, .06);
}

.vch-suggest-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.vch-suggest-skeleton span {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: vchSkeleton 1.1s ease infinite;
}

.vch-suggest-skeleton .sk-thumb { width: 40px; height: 40px; flex: 0 0 40px; }
.vch-suggest-skeleton .sk-line { height: 11px; flex: 1; }

@keyframes vchSkeleton {
  to { background-position: -200% 0; }
}

.vch-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.vch-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vch-hero-badge i {
  color: #ffcc00;
  font-size: 13px;
}

.vch-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #ffcc00;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .18s, transform .18s, border-color .18s;
}

.vch-hero-cta:hover {
  background: rgba(255, 204, 0, .12);
  border-color: rgba(255, 204, 0, .32);
  transform: translateY(-1px);
  color: #ffcc00;
  text-decoration: none;
}

.vch-hero-cta i {
  font-size: 12px;
  transition: transform .18s;
}

.vch-hero-cta:hover i {
  transform: translateX(3px);
}

.vch-hero-disclaimer {
  margin-top: 22px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, .38);
  max-width: 520px;
  line-height: 1.5;
}

.vch-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vch-hero-mascot {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45));
  animation: vchHeroFloat 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes vchHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.vch-hero-visual::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 45, .25), rgba(217, 0, 102, .15), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

@media (max-width: 1024px) {
  .vch-hero-inner {
    grid-template-columns: 1fr 280px;
    padding: 44px 28px 40px;
    gap: 28px;
  }

  .vch-hero-mascot {
    max-width: 260px;
  }

  .vch-hero-visual::before {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 768px) {
  .vch-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 50px 20px 32px;
    gap: 20px;
  }

  .vch-hero-content {
    order: 1;
  }

  .vch-hero-title {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .25em;
  }

  .vch-hero-title .vch-rotate,
  .vch-hero-title .vch-rotate-list {
    align-items: flex-start;
  }

  .vch-hero-visual {
    order: 0;
  }

  .vch-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .vch-hero-search-wrap {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .vch-hero-search {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .vch-hero-badges {
    justify-content: center;
  }

  .vch-hero-cta {
    margin-left: auto;
    margin-right: auto;
  }

  .vch-hero-disclaimer {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .vch-hero-mascot {
    max-width: 180px;
  }

  .vch-hero-visual::before {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 480px) {
  .vch-hero-inner {
    padding: 28px 10px 24px;
    gap: 16px;
  }

  .vch-hero-title {
    font-size: 24px;
  }

  .vch-hero-sub {
    font-size: 14px;
  }

  .vch-hero-search input {
    font-size: 14px;
  }

  .vch-hero-search-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .vch-hero-badge {
    font-size: 12px;
    padding: 5px 10px;
  }

  .vch-hero-mascot {
    max-width: 140px;
  }

  .vch-hero-visual::before {
    width: 120px;
    height: 120px;
  }
}

    .vcab-section {
      max-width: var(--max, 1180px);
      margin: 0 auto 32px;
      padding-left: 36px;
      padding-right: 36px;
      position: relative;
      isolation: isolate;
    }
    .vcab-section::before{content:"";position:absolute;inset:0 36px;border-radius:24px;padding:2px;background:conic-gradient(from var(--angle,0deg),#a3e635,#6366f1,#ec4899,#f59e0b,#a3e635);-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;animation:hjsBorderRotate 4s linear infinite;z-index:2}
    .vcab-section::after{content:'';position:absolute;inset:0 36px;border-radius:24px;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(163,230,53,.06) 0%,transparent 40%),radial-gradient(circle at 20% 80%,rgba(99,102,241,.08) 0%,transparent 40%);z-index:0}
    .vcab-section:hover::before{animation-duration:2s;padding:3px}
    .vcab-inner {
      display: flex;
      align-items: stretch;
      background: #111111;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      min-height: 270px;
      z-index: 1;
    }
    .vcab-inner::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 10%,rgba(163,230,53,.05) 0%,transparent 35%),radial-gradient(circle at 10% 90%,rgba(99,102,241,.07) 0%,transparent 35%);z-index:0}
    .vcab-left {
      flex: 1;
      padding: 52px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .vcab-title {
      font-size: clamp(26px, 3.2vw, 42px);
      font-weight: 900;
      color: #fff;
      margin: 0 0 22px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .vcab-desc {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,.72);
      margin: 0 0 10px;
      line-height: 1.65;
      max-width: 520px;
    }
    .vcab-desc:last-child { margin: 0; }

    .vcab-right {
      flex: 0 0 420px;
      position: relative;
      overflow: hidden;
    }
    .vcab-right::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #111111 0%, transparent 38%);
      z-index: 4;
      pointer-events: none;
    }
    .vcab-tri-1 {
      position: absolute;
      inset: 0;
      background: #4c1d95;
      clip-path: polygon(38% 0%, 100% 0%, 100% 100%, 0% 100%);
      z-index: 1;
    }
    .vcab-img {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 110%;
      width: auto;
      object-fit: cover;
      z-index: 3;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
    }

    @media (max-width: 992px) {
      .vcab-section { padding-left: 28px; padding-right: 28px; }
      .vcab-section::before,
      .vcab-section::after { inset: 0 28px; }
      .vcab-right { flex: 0 0 320px; }
      .vcab-left { padding: 40px 40px; }
    }
    @media (max-width: 768px) {
      .vcab-section { padding-left: 20px; padding-right: 20px; }
      .vcab-section::before,
      .vcab-section::after { inset: 0 20px; border-radius: 30px; }
      .vcab-inner {
        flex-direction: column;
        background: #2b1d63;
        border-radius: 30px;
        min-height: 0;
        padding: 16px 16px 24px;
      }
    .vcab-left {
        padding: 20px 0 0;
      }
      .vcab-title {
        font-size: 22px;
        line-height: 1.08;
        letter-spacing: 0;
        margin-bottom: 18px;
      }
      .vcab-desc {
        max-width: none;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.28;
        margin-bottom: 14px;
      }
      .vcab-right {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        height: 230px;
        border-radius: 24px;
        background:
          linear-gradient(135deg, rgba(124,58,237,.35), rgba(17,17,17,.25)),
          #17122a;
      }
      .vcab-right::before {
        background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.38) 100%);
        z-index: 2;
      }
      .vcab-tri-1 {
        display: none;
      }
      .vcab-img {
        inset: 0;
        right: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
        z-index: 1;
      }
    }
    @media (max-width: 480px) {
      .vcab-section {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
        padding-left: 10px;
        padding-right: 10px;
      }
      .vcab-section::before,
      .vcab-section::after { inset: 0 10px; border-radius: 28px; }
      .vcab-inner {
        border-radius: 28px;
        padding: 14px 14px 22px;
      }
    .vcab-left { padding: 16px 2px 0; }
      .vcab-title {
        font-size: 23px;
        margin-bottom: 18px;
      }
      .vcab-desc {
        font-size: 12.5px;
        line-height: 1.25;
        margin-bottom: 14px;
      }
      .vcab-right {
        height: 213px;
        border-radius: 22px;
      }
    }
    

      /* Join Seller Banner (hjs-) */
      .hjs-container{position:relative;max-width:var(--max,1180px);margin:0 auto 24px;padding:52px 60px;border-radius:24px;background:linear-gradient(145deg,#0f111a 0%,#12141f 50%,#0a0c14 100%);transition:border-color .35s ease,box-shadow .35s ease;overflow:hidden;border:none;box-shadow:0 4px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
      .hjs-container::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--angle,0deg),#a3e635,#6366f1,#ec4899,#f59e0b,#a3e635);-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;animation:hjsBorderRotate 4s linear infinite;z-index:2}
      @keyframes hjsBorderRotate{to{--angle:360deg}}
      @property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}

      .hjs-container::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(163,230,53,.06) 0%,transparent 40%),radial-gradient(circle at 20% 80%,rgba(99,102,241,.08) 0%,transparent 40%);z-index:0}
      .hjs-content{position:relative;z-index:1;min-width:0;max-width:720px}
      .hjs-headline{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(34px,4.5vw,52px);font-weight:700;line-height:1.05;color:#a3e635;margin:0 0 16px;letter-spacing:-0.03em;-webkit-text-stroke:.6px currentColor;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.18em}
      .hjs-logo{height:1.4em;width:auto;display:inline-block;vertical-align:middle;-webkit-text-stroke:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
      .hjs-subtitle{font-family:"Space Grotesk",system-ui,sans-serif;font-size:clamp(15px,1.8vw,20px);font-weight:800;color:#e2e8f0;margin:0 0 18px;line-height:1.35;letter-spacing:.3px}
      .hjs-tagline{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;color:#a3e635;letter-spacing:1.8px;text-transform:uppercase;padding:10px 18px;border-radius:999px;background:rgba(163,230,53,.08);border:1px solid rgba(163,230,53,.2);margin-bottom:22px}
      .hjs-tagline i{font-size:10px;color:#a3e635}
      .hjs-desc{font-family:"Space Grotesk",system-ui,sans-serif;font-size:14px;color:#94a3b8;margin:0 0 8px;line-height:1.65}
      .hjs-desc strong{color:#f1f5f9;font-weight:700}
      .hjs-actions{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
      .hjs-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,#a3e635 0%,#84cc16 100%);color:#0a0c14;font-size:14px;font-weight:800;text-decoration:none;border:0;transition:all .3s cubic-bezier(0.16,1,0.3,1)}
      .hjs-btn:hover,.hjs-btn:focus{background:linear-gradient(135deg,#bef264 0%,#a3e635 100%);color:#0a0c14;text-decoration:none;transform:translateY(-2px)}
      .hjs-btn i{font-size:11px;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
      .hjs-btn:hover i{transform:translateX(4px)}
      .hjs-btn-secondary{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#94a3b8;text-decoration:none;padding:12px 20px;border-radius:10px;border:1px solid rgba(148,163,184,.2);transition:all .25s ease}
      .hjs-btn-secondary:hover{color:#a3e635;border-color:rgba(163,230,53,.3);background:rgba(163,230,53,.05);text-decoration:none}
      .hjs-glow-line{position:absolute;top:0;left:0;right:0;height:1px;transition:height .35s ease,background .35s ease;background:linear-gradient(90deg,transparent,rgba(163,230,53,.4),rgba(99,102,241,.3),transparent)}
      .hjs-container:hover{border-color:rgba(163,230,53,.25);box-shadow:0 8px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
      .hjs-container:hover .hjs-glow-line{height:2px;background:linear-gradient(90deg,transparent,rgba(163,230,53,.6),rgba(99,102,241,.4),transparent)}
      .hjs-container:hover::before{animation-duration:2s;padding:3px}

      @media(max-width:1024px){
        .hjs-container{padding:44px 40px}
      }
      @media(max-width:768px){
        .hjs-container{padding:36px 28px;text-align:left;border-radius:20px}
      }
      @media(max-width:480px){
        .hjs-container{padding:28px 20px;border-radius:16px;margin-left:12px;margin-right:12px}
        .hjs-headline{font-size:30px}
        .hjs-subtitle{font-size:15px}
        .hjs-tagline{font-size:10px;padding:8px 14px;letter-spacing:1.4px}
        .hjs-desc{font-size:13px}
        .hjs-btn{padding:12px 22px;font-size:13px}
      }
    

      .hsp-container{position:relative;max-width:var(--max,1180px);margin:0 auto 48px;padding:40px 36px 36px;border-radius:20px;background:radial-gradient(ellipse 55% 90% at 100% 50%,rgba(255,90,60,.32) 0%,transparent 70%),linear-gradient(135deg,#1a0e1f 0%,#1b1827 40%,#0f1420 100%);overflow-x:clip;overflow-y:visible}
      .hsp-container::before{content:'';position:absolute;top:50%;right:-60px;transform:translateY(-50%);width:340px;height:340px;background:radial-gradient(circle,rgba(255,140,0,.28) 0%,transparent 70%);border-radius:50%;pointer-events:none;filter:blur(40px);z-index:0}
      .hsp-header,.hsp-grid{position:relative;z-index:1}
      .hsp-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:16px;flex-wrap:wrap}
      .hsp-header-left{display:flex;flex-direction:column;gap:4px}
      .hsp-title{font-size:26px;font-weight:800;color:#fff;margin:0;letter-spacing:-0.4px;line-height:1.2;display:flex;align-items:center;gap:10px}
      .hsp-title .hsp-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#ffcc00,#ff5a3c);color:#000;letter-spacing:.4px;text-transform:uppercase}
      .hsp-subtitle{font-size:13px;color:rgba(200,200,230,.6);margin:0;font-weight:400}
      .hsp-view-all{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:600;letter-spacing:.2px;color:#ffd84a;background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.35);text-decoration:none;white-space:nowrap;transition:all .25s ease}
      .hsp-view-all i{font-size:.75rem;transition:transform .25s ease}
      .hsp-view-all:hover,.hsp-view-all:focus{color:#0c0c0c;background:linear-gradient(135deg,#ffd84a,#ffb703);border-color:rgba(255,216,74,.9);text-decoration:none;transform:translateY(-1px)}
      .hsp-view-all:hover i{transform:translateX(3px)}
      .hsp-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 4px;margin:-6px -4px;scrollbar-width:none;cursor:grab}
      .hsp-grid:active{cursor:grabbing}
      .hsp-grid::-webkit-scrollbar{display:none}
      .hsp-card{flex:0 0 200px;min-width:200px;background:#0f1219;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;scroll-snap-align:start;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s ease,box-shadow .25s ease;position:relative}
      .hsp-card:hover{transform:translateY(-5px);border-color:rgba(255,140,0,.4);color:inherit;text-decoration:none}
      .hsp-img{aspect-ratio:1/1;overflow:hidden;background:#000;position:relative}
      .hsp-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
      .hsp-card:hover .hsp-img img{transform:scale(1.06)}
      .hsp-type{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);padding:3px 8px;border-radius:999px;letter-spacing:.3px;text-transform:uppercase;border:1px solid rgba(255,255,255,.10)}
      .hsp-info{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
      .hsp-name{font-size:13px;font-weight:700;color:#f0f2ff;margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
      .hsp-seller{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(231,234,240,.6);min-width:0}
      .hsp-seller-logo{width:18px;height:18px;flex:0 0 18px;border-radius:50%;overflow:hidden;background:#000;border:1px solid rgba(255,183,3,.3)}
      .hsp-seller-logo img{width:100%;height:100%;object-fit:cover;display:block}
      .hsp-seller-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
      .hsp-seller i{color:#1d9bf0;font-size:10px;flex:0 0 auto}
      .hsp-price{font-size:14px;font-weight:800;color:#ff8c00;margin-top:auto}
      .hsp-old{font-size:10.5px;color:rgba(231,234,240,.4);text-decoration:line-through;margin-left:4px;font-weight:500}
      .hsp-disc{position:absolute;top:8px;right:8px;z-index:3;font-size:9.5px;font-weight:900;color:#fff;background:linear-gradient(135deg,#ef4444,#f97316);padding:3px 9px;border-radius:999px;letter-spacing:.3px;text-transform:uppercase;border:1px solid rgba(249,115,22,.55);box-shadow:0 4px 12px rgba(239,68,68,.4),inset 0 1px 0 rgba(255,255,255,.3)}
      @media(max-width:1024px){
        .hsp-container{padding:32px 28px 28px;border-radius:20px}
        .hsp-card{flex:0 0 185px;min-width:185px}
      }
      @media(max-width:768px){
        .hsp-container{padding:26px 20px 22px;border-radius:20px;margin-bottom:32px}
        .hsp-title{font-size:20px}
        .hsp-card{flex:0 0 165px;min-width:165px}
      }
      .hsp-tabs{position:relative;z-index:1;display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
      .hsp-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(231,234,240,.72);font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;white-space:nowrap}
      .hsp-tab i{font-size:12px}
      .hsp-tab .hsp-tab-count{font-size:11px;font-weight:700;opacity:.6}
      .hsp-tab:hover{border-color:rgba(255,140,0,.4);color:#fff}
      .hsp-tab.is-active{background:linear-gradient(135deg,#ffcc00,#ff5a3c);border-color:transparent;color:#1a1205}
      .hsp-tab.is-active .hsp-tab-count{opacity:.8}
      .hsp-panel{display:none}
      .hsp-panel.is-active{display:block;animation:hspPanelIn .32s cubic-bezier(.16,1,.3,1) both}
      @keyframes hspPanelIn{from{opacity:0}to{opacity:1}}
      .hsp-panel.is-active .hsp-card{animation:hspCardIn .42s cubic-bezier(.16,1,.3,1) both;opacity:0}
      .hsp-panel.is-active .hsp-card:nth-child(1){animation-delay:.02s}
      .hsp-panel.is-active .hsp-card:nth-child(2){animation-delay:.06s}
      .hsp-panel.is-active .hsp-card:nth-child(3){animation-delay:.10s}
      .hsp-panel.is-active .hsp-card:nth-child(4){animation-delay:.14s}
      .hsp-panel.is-active .hsp-card:nth-child(5){animation-delay:.18s}
      .hsp-panel.is-active .hsp-card:nth-child(6){animation-delay:.22s}
      .hsp-panel.is-active .hsp-card:nth-child(n+7){animation-delay:.26s}
      @keyframes hspCardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
      @media(prefers-reduced-motion:reduce){
        .hsp-panel.is-active,.hsp-panel.is-active .hsp-card{animation:none}
        .hsp-panel.is-active .hsp-card{opacity:1}
      }
      .hsp-empty{padding:30px 10px;color:rgba(231,234,240,.5);font-size:13px;font-weight:600;text-align:center}
      @media(max-width:480px){
        .hsp-container{padding:20px 14px 18px;border-radius:20px;margin-left:10px;margin-right:10px}
        .hsp-header{margin-bottom:18px}
        .hsp-title{font-size:18px}
        .hsp-subtitle{font-size:12px}
        .hsp-tabs{margin-bottom:16px;gap:6px}
        .hsp-tab{padding:8px 13px;font-size:12px}
        .hsp-card{flex:0 0 142px;min-width:142px}
        .hsp-name{font-size:12px;min-width:0;min-height:32px}
        .hsp-info{padding:9px 10px 10px}
        .hsp-price{font-size:13px}
      }
    

    .vchs-section {
      width: calc(100% - 72px);
      max-width: var(--max, 1180px);
      margin: 0 auto 52px;
    }
    .vchs-inner {
      background: #181818;
      border-radius: 28px;
      padding: 44px 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      overflow: hidden;
      position: relative;
    }
    .vchs-inner::before {
      content: '';
      position: absolute;
      top: -80px;
      left: -80px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(139,92,246,.18) 0%, transparent 70%);
      pointer-events: none;
      filter: blur(30px);
    }
    .vchs-inner::after {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(34,211,238,.14) 0%, transparent 70%);
      pointer-events: none;
      filter: blur(30px);
    }
    .vchs-left {
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 640px;
    }
    .vchs-title {
      font-size: 30px;
      font-weight: 900;
      color: #fff;
      margin: 0 0 8px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    .vchs-sub {
      font-size: 13px;
      color: rgba(255,255,255,.48);
      margin: 0;
      font-weight: 500;
    }
    .vchs-btns {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .vchs-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 10px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.13);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: background .2s, border-color .2s, transform .18s;
      cursor: pointer;
      white-space: nowrap;
    }
    .vchs-btn:hover {
      background: rgba(255,255,255,.13);
      border-color: rgba(255,255,255,.22);
      color: #fff;
      text-decoration: none;
      transform: translateY(-2px);
    }
    .vchs-btn svg { flex-shrink: 0; }

    @media (max-width: 1024px) {
      .vchs-section {
        width: calc(100% - 56px);
      }
      .vchs-inner {
        padding: 36px 36px;
        border-radius: 30px;
        gap: 28px;
      }
      .vchs-title {
        font-size: 26px;
        line-height: 1.15;
        margin-bottom: 8px;
        letter-spacing: 0;
      }
      .vchs-btns {
        gap: 10px;
      }
    }
    @media (max-width: 768px) {
      .vchs-section { width: calc(100% - 28px); }
      .vchs-inner {
        padding: 28px 24px;
        border-radius: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
      .vchs-left {
        max-width: 100%;
        width: 100%;
      }
      .vchs-title {
        font-size: 22px;
      }
      .vchs-sub {
        font-size: 13px;
      }
      .vchs-btns {
        width: 100%;
        justify-content: flex-start;
      }
      .vchs-btn {
        padding: 10px 16px;
        font-size: 13px;
      }
    }
    @media (max-width: 480px) {
      .vchs-section {
        width: calc(100% - 28px);
        margin-bottom: 36px;
      }
      .vchs-inner {
        padding: 24px 20px;
        border-radius: 22px;
        gap: 18px;
      }
      .vchs-title {
        font-size: 20px;
        line-height: 1.18;
      }
      .vchs-btns {
        gap: 10px;
      }
      .vchs-btn {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
      }
    }
    @media (min-width: 601px) and (max-width: 1024px) {
      .vchg2-sec,
      .vchs-section,
      .hjs-container,
      .hsp-container,
      .hstg-container {
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
      }
    }