.mbptc-section {
	--mbptc-primary: #7f4dfc;
	--mbptc-secondary: #ea5af8;
	--mbptc-ink: #171426;
	--mbptc-muted: #625c73;
	--mbptc-card: #ffffff;
	--mbptc-line: rgba(34, 24, 61, 0.12);
	--mbptc-gap: 20px;
	--mbptc-gap-half: 10px;
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 76px 0;
	color: var(--mbptc-ink);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 255, 0.98)),
		linear-gradient(135deg, rgba(127, 77, 252, 0.08), rgba(234, 90, 248, 0.1));
}

.mbptc-section[data-theme="dark"] {
	--mbptc-ink: #ffffff;
	--mbptc-muted: rgba(255, 255, 255, 0.68);
	--mbptc-card: #151124;
	--mbptc-line: rgba(255, 255, 255, 0.13);
	background:
		linear-gradient(180deg, #0d0a16, #171124),
		linear-gradient(135deg, rgba(127, 77, 252, 0.18), rgba(234, 90, 248, 0.16));
}

.mbptc-section *,
.mbptc-section *::before,
.mbptc-section *::after {
	box-sizing: border-box;
}

.mbptc-shell {
	width: min(100%, 1440px);
	margin: 0 auto;
}

.mbptc-header {
	width: min(820px, calc(100% - 40px));
	margin: 0 auto 42px;
	text-align: center;
}

.mbptc-eyebrow {
	margin: 0 0 12px;
	color: var(--mbptc-primary);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mbptc-section[data-theme="dark"] .mbptc-eyebrow {
	color: #ff91ff;
}

.mbptc-header h2 {
	margin: 0;
	color: var(--mbptc-ink);
	font-size: 44px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.05;
}

.mbptc-subtitle {
	width: min(650px, 100%);
	margin: 16px auto 0;
	color: var(--mbptc-muted);
	font-size: 17px;
	line-height: 1.65;
}

.mbptc-marquee-stack {
	display: grid;
	gap: 20px;
}

.mbptc-marquee {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.mbptc-marquee.is-dragging {
	cursor: grabbing;
}

.mbptc-track {
	display: flex;
	align-items: stretch;
	gap: var(--mbptc-gap);
	width: max-content;
	will-change: transform;
}

.mbptc-js .mbptc-track {
	animation: none !important;
}

.mbptc-marquee--left .mbptc-track {
	animation: mbptc-scroll-left var(--mbptc-speed, 46s) linear infinite;
}

.mbptc-marquee--right .mbptc-track {
	animation: mbptc-scroll-right var(--mbptc-speed-alt, 54s) linear infinite;
}

.mbptc-section:hover .mbptc-track {
	animation-play-state: paused;
}

.mbptc-card {
	position: relative;
	flex: 0 0 clamp(280px, 32vw, 390px);
	min-height: 238px;
	overflow: hidden;
	padding: 22px;
	border: 1px solid var(--mbptc-line);
	border-radius: 8px;
	background:
		linear-gradient(var(--mbptc-card), var(--mbptc-card)) padding-box,
		linear-gradient(135deg, rgba(127, 77, 252, 0.6), rgba(234, 90, 248, 0.46)) border-box;
	box-shadow: 0 18px 42px rgba(40, 25, 72, 0.1);
}

.mbptc-section[data-theme="dark"] .mbptc-card {
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.mbptc-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mbptc-primary), var(--mbptc-secondary));
}

.mbptc-card__top {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

.mbptc-avatar {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	overflow: hidden;
	border-radius: 999px;
	background:
		linear-gradient(135deg, rgba(127, 77, 252, 0.16), rgba(234, 90, 248, 0.18)),
		#f7f2ff;
	color: var(--mbptc-primary);
	font-weight: 900;
}

.mbptc-section[data-theme="dark"] .mbptc-avatar {
	background:
		linear-gradient(135deg, rgba(127, 77, 252, 0.32), rgba(234, 90, 248, 0.28)),
		#211737;
	color: #ffffff;
}

.mbptc-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

.mbptc-person {
	min-width: 0;
}

.mbptc-person h3 {
	margin: 0 0 7px;
	overflow-wrap: anywhere;
	color: var(--mbptc-ink);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.2;
}

.mbptc-country {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	gap: 7px;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid rgba(127, 77, 252, 0.17);
	border-radius: 999px;
	background: rgba(127, 77, 252, 0.08);
	color: var(--mbptc-muted);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
}

.mbptc-section[data-theme="dark"] .mbptc-country {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
}

.mbptc-country span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mbptc-country__flag {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
}

.mbptc-quote {
	position: relative;
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	color: var(--mbptc-muted);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.65;
}

.mbptc-quote::before {
	content: "\201C";
	display: block;
	height: 24px;
	margin-bottom: 4px;
	color: var(--mbptc-secondary);
	font-size: 52px;
	font-weight: 900;
	line-height: 0.8;
}

.mbptc-empty-admin {
	padding: 20px;
	border: 1px dashed rgba(127, 77, 252, 0.35);
	border-radius: 8px;
	background: #fbf8ff;
	color: #2a2043;
}

@keyframes mbptc-scroll-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-50% - var(--mbptc-gap-half)), 0, 0);
	}
}

@keyframes mbptc-scroll-right {
	from {
		transform: translate3d(calc(-50% - var(--mbptc-gap-half)), 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 760px) {
	.mbptc-section {
		--mbptc-gap: 14px;
		--mbptc-gap-half: 7px;
		padding: 56px 0;
	}

	.mbptc-header {
		width: min(100% - 30px, 680px);
		margin-bottom: 30px;
	}

	.mbptc-header h2 {
		font-size: 32px;
		line-height: 1.1;
	}

	.mbptc-subtitle {
		font-size: 15px;
	}

	.mbptc-marquee {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	}

	.mbptc-card {
		flex-basis: min(82vw, 330px);
		min-height: 220px;
		padding: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbptc-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mbptc-track {
		animation: none !important;
		padding: 0 20px 8px;
	}
}
