.bpm-widget {
	--bpm-blue: #008798;
	--bpm-dark: #12141d;
	position: relative;
	display: grid;
	grid-template-columns: 300px 1fr 320px;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.bpm-widget * { box-sizing: border-box; }

/* ---------- sidebar ---------- */
.bpm-col-sidebar { display: flex; flex-direction: column; }
.bpm-eyebrow { color: var(--bpm-blue); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.bpm-heading { font-size: 30px; line-height: 1.25; margin: 0 0 24px; color: var(--bpm-dark); font-weight: 700; }
.bpm-heading span { color: var(--bpm-blue); }

.bpm-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bpm-cat-item {
	display: flex; align-items: center; gap: 12px;
	background: #f4f6fb;
	border-radius: 14px;
	padding: 14px 16px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .12s ease;
	color: #1c1f2b !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
}
.bpm-cat-item:hover { transform: translateX(2px); }
.bpm-cat-item.is-active { background: var(--bpm-blue); color: #fff !important; box-shadow: 0 10px 20px rgba(0,135,152,.28); }
.bpm-cat-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.bpm-cat-item.is-active .bpm-cat-icon { background: rgba(255,255,255,.18); }
.bpm-cat-icon img { width: 20px; height: 20px; object-fit: contain; }
.bpm-cat-icon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bpm-blue); }
.bpm-cat-item.is-active .bpm-cat-icon-dot { background: #fff; }
.bpm-cat-name { flex: 1; }
.bpm-cat-arrow { opacity: .6; }

/* ---------- stage / image ---------- */
.bpm-col-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.bpm-stage-bg {
	position: absolute; inset: 0; margin: auto; width: 70%; height: 70%;
	background: radial-gradient(circle, #e6f4f5 0%, rgba(230,244,245,0) 70%);
	border-radius: 50%;
	z-index: 0;
}
.bpm-image-wrap { position: relative; z-index: 1; display: inline-block; max-width: 100%; }
.bpm-body-image { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.bpm-point {
	position: absolute;
	width: 34px; height: 34px;
	margin-left: -17px; margin-top: -17px;
	border-radius: 50%;
	background: #fff;
	border: none;
	color: var(--bpm-blue);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(20,30,60,.25);
	cursor: pointer;
	padding: 0;
	transition: transform .15s ease, background .15s ease, color .15s ease;
	z-index: 3;
}
.bpm-point:hover { transform: scale(1.08); }
.bpm-point.is-active { background: var(--bpm-blue); color: #fff; }
.bpm-point-plus { font-size: 18px; font-weight: 300; line-height: 1; margin-top: -1px; }
.bpm-point::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(0,135,152,.35);
	opacity: 0;
	transition: opacity .15s ease;
}
.bpm-point.is-active::before { opacity: 1; }

/* ---------- product card ---------- */
.bpm-col-card { position: relative; }
.bpm-connector { position: absolute; top: -400px; left: -400px; width: 800px; height: 800px; pointer-events: none; overflow: visible; z-index: 0; }
.bpm-connector path { fill: none; stroke: #9fd3d8; stroke-width: 1.5; stroke-dasharray: 4 5; }

.bpm-card {
	position: relative; z-index: 1;
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px 28px;
	box-shadow: 0 24px 50px rgba(20,30,60,.14);
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.bpm-card.is-visible { opacity: 1; transform: translateY(0); }

.bpm-card-image {
	width: 130px; height: 130px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 18px;
	background: #eef1f8;
	display: flex; align-items: center; justify-content: center;
}
.bpm-card-image img { width: 100%; height: 100%; object-fit: cover; display: none; }
.bpm-card-image img[src]:not([src=""]) { display: block; }

.bpm-card h3 { margin: 0 0 10px; font-size: 20px; color: var(--bpm-dark); }
.bpm-card p { margin: 0 0 20px; color: #5c6270; font-size: 14px; line-height: 1.55; }

.bpm-card-btn {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--bpm-blue);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	padding: 13px 16px;
	border-radius: 10px;
	margin-bottom: 12px;
	transition: background .15s ease;
}
.bpm-card-btn:hover { background: #00697a; }
.bpm-btn-arrow { font-size: 16px; }

.bpm-card-learn { display: inline-block; color: var(--bpm-blue) !important; text-decoration: none !important; font-weight: 600; font-size: 14px; }
.bpm-card-learn:hover { text-decoration: underline !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.bpm-widget { grid-template-columns: 1fr; }
	.bpm-col-card { justify-self: center; width: 100%; max-width: 380px; }
	.bpm-connector { display: none; }
	.bpm-cat-list { flex-direction: row; flex-wrap: wrap; }
	.bpm-cat-item { flex: 1 1 45%; }
}
@media (max-width: 560px) {
	.bpm-cat-item { flex: 1 1 100%; }
	.bpm-heading { font-size: 24px; }
}


/* =========================================================
   MOBILE RESPONSIVE FIX
   Keeps body hotspots aligned and makes product card readable
   ========================================================= */

@media (max-width: 768px) {

	.bpm-widget {
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 30px 16px;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	/* Hide/stack the category sidebar cleanly on smaller screens */
	.bpm-col-sidebar {
		width: 100%;
	}

	.bpm-heading {
		font-size: 25px;
		line-height: 1.25;
		margin-bottom: 18px;
	}

	.bpm-cat-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.bpm-cat-item {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
		padding: 10px 12px;
		font-size: 14px;
	}

	/* Body image / hotspot area */
	.bpm-col-stage {
		width: 100%;
		min-height: 0;
		padding: 0;
		overflow: visible;
	}

	.bpm-stage-bg {
		width: 78%;
		height: 78%;
	}

	.bpm-image-wrap {
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}

	.bpm-body-image {
		width: 100%;
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Smaller hotspot circles on mobile */
	.bpm-point {
		width: 28px;
		height: 28px;
		margin-left: -14px;
		margin-top: -14px;
		box-shadow: 0 3px 10px rgba(20,30,60,.22);
	}

	.bpm-point-plus {
		font-size: 16px;
	}

	/* Product card */
	.bpm-col-card {
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
	}

	.bpm-card {
		width: 100%;
		padding: 22px 18px 22px;
		border-radius: 16px;
	}

	.bpm-card-image {
		width: 110px;
		height: 110px;
		margin-bottom: 14px;
	}

	.bpm-card h3 {
		font-size: 18px;
		line-height: 1.25;
		margin: 0 auto 10px;
		max-width: 290px;
		word-break: normal;
		overflow-wrap: break-word;
	}

	.bpm-card p {
		font-size: 13px;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	.bpm-card-btn {
		font-size: 14px;
		padding: 12px 14px;
	}

	.bpm-card-learn {
		font-size: 13px;
	}
}

@media (max-width: 480px) {

	.bpm-widget {
		padding: 24px 12px;
		gap: 14px;
	}

	.bpm-heading {
		font-size: 22px;
	}

	.bpm-cat-item {
		flex: 1 1 100%;
	}

	.bpm-image-wrap {
		width: 92%;
		max-width: 340px;
	}

	.bpm-point {
		width: 20px;
		height: 20px;
		margin-left: -12px;
		margin-top: -12px;
	}

	.bpm-point-plus {
		font-size: 14px;
	}

	.bpm-col-card {
		max-width: 100%;
	}

	.bpm-card {
		padding: 20px 16px 20px;
	}

	.bpm-card-image {
		width: 95px;
		height: 95px;
	}
	
	

	.bpm-card h3 {
		font-size: 17px !important;
		line-height: 1.25;
		max-width: 270px;
	}

	.bpm-card-btn {
		padding: 11px 12px;
	}
}