/* ==========================================================
   K9 Paw – Key Benefits widget
   ========================================================== */
.k9bf {
	--k9-gold: #DCA54A;
	--k9-conn: var(--k9-gold);
	--k9-cols: 6;
	--k9-gap: 22px;
	--k9-lift: -8px;
	position: relative;
	overflow: hidden;
	padding: 70px 30px 80px;
	background-color: #0e0e0e;
	background-size: cover;
	background-position: center;
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #fff;
}
.k9bf *, .k9bf *::before, .k9bf *::after { box-sizing: border-box; }

.k9bf__overlay {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(220,165,74,.10) 0%, transparent 60%),
		linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.92) 100%);
}
.k9bf__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }

/* ---------- Heading ---------- */
.k9bf__head { text-align: center; margin-bottom: 44px; }
.k9bf__sub {
	font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--k9-gold); margin-bottom: 10px;
}
.k9bf__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 40px; font-weight: 800; line-height: 1.2;
	color: #fff; margin: 0 0 16px;
}
.k9bf__title em { font-style: normal; color: var(--k9-gold); }
.k9bf__divider {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.k9bf__divider::before, .k9bf__divider::after {
	content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--k9-gold));
}
.k9bf__divider::after { transform: scaleX(-1); }
.k9bf__divider i { width: 7px; height: 7px; background: var(--k9-gold); transform: rotate(45deg); }
.k9bf__desc { max-width: 680px; margin: 14px auto 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.75); }
.k9bf__desc p { margin: 0 0 8px; color: inherit; font: inherit; }
.k9bf__desc p:last-child { margin: 0; }

/* ---------- Grid ---------- */
.k9bf__grid {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--k9-gap);
}

/* ---------- Card ---------- */
.k9bf__card {
	position: relative;
	flex: 0 0 calc((100% - (var(--k9-cols) - 1) * var(--k9-gap)) / var(--k9-cols));
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 34px 18px 30px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid rgba(220,165,74,.35);
	border-radius: 8px;
	color: #fff; text-decoration: none !important;
	transition: transform .4s ease, border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
/* Gold glow line that grows on hover */
.k9bf__card::before {
	content: ""; position: absolute; left: 50%; bottom: -1px;
	width: 0; height: 2px; background: var(--k9-gold);
	transform: translateX(-50%); transition: width .45s ease; border-radius: 2px;
}
.k9bf__card:hover {
	transform: translateY(var(--k9-lift));
	border-color: var(--k9-gold);
	background-color: rgba(220,165,74,.06);
	box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(220,165,74,.25), 0 0 30px rgba(220,165,74,.12);
}
.k9bf__card:hover::before { width: 70%; }

/* Number */
.k9bf__num {
	position: absolute; top: 10px; right: 14px;
	font-size: 12px; font-weight: 700; letter-spacing: 1px;
	color: rgba(220,165,74,.45);
	transition: color .4s ease;
}
.k9bf__card:hover .k9bf__num { color: var(--k9-gold); }

/* Icon */
.k9bf__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; margin-bottom: 18px;
	border-radius: 50%;
	font-size: 28px; color: var(--k9-gold);
	background-color: rgba(220,165,74,.08);
	box-shadow: inset 0 0 0 1px rgba(220,165,74,.25);
	transition: transform .5s ease, background-color .4s ease, color .4s ease;
}
.k9bf__ic svg { width: 28px; height: 28px; fill: currentColor; }
.k9bf__card:hover .k9bf__ic { transform: rotateY(360deg); background-color: var(--k9-gold); color: #171717; }

.k9bf__ctitle {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 17px; font-weight: 700; line-height: 1.3;
	color: #fff; margin: 0 0 10px;
	transition: color .4s ease;
}
.k9bf__card:hover .k9bf__ctitle { color: var(--k9-gold); }
.k9bf__ctext { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); }
.k9bf__ctext p { margin: 0; color: inherit; font: inherit; }

/* ---------- Connectors (desktop, single row) ---------- */
@media (min-width: 1025px) {
	.k9bf--connect .k9bf__card:not(:last-child)::after {
		content: ""; position: absolute; top: 50%; right: calc(var(--k9-gap) * -1);
		width: var(--k9-gap); height: 2px; transform: translateY(-50%);
		background:
			radial-gradient(circle, var(--k9-conn) 3px, transparent 3.5px) center / 8px 8px no-repeat,
			linear-gradient(90deg, transparent, var(--k9-conn), transparent) center / 100% 1px no-repeat;
		height: 8px; pointer-events: none;
	}
	.k9bf--connect .k9bf__card:nth-child(6n)::after { display: none; }
}

/* ---------- Entrance animation ---------- */
.k9bf--animate.k9bf--ready .k9bf__card { opacity: 0; transform: translateY(30px); }
.k9bf--animate.k9bf--ready.is-in .k9bf__card {
	opacity: 1; transform: translateY(0);
	transition: opacity .6s ease calc(var(--i, 0) * .1s), transform .6s ease calc(var(--i, 0) * .1s),
		border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.k9bf--animate.k9bf--ready.is-in .k9bf__card:hover { transform: translateY(var(--k9-lift)); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	.k9bf__card, .k9bf__ic { transition: none !important; }
	.k9bf--animate.k9bf--ready .k9bf__card { opacity: 1; transform: none; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1366px) {
	.k9bf__card { padding: 30px 14px 26px; }
	.k9bf__ctitle { font-size: 16px; }
	.k9bf__ctext { font-size: 13.5px; }
}
@media (max-width: 1024px) {
	.k9bf { --k9-cols: 3; padding: 60px 30px 70px; }
	.k9bf__title { font-size: 34px; }
	.k9bf__card { padding: 32px 20px 28px; }
}
@media (max-width: 767px) {
	.k9bf { --k9-cols: 1; --k9-gap: 16px; padding: 50px 16px 56px; }
	.k9bf__head { margin-bottom: 32px; }
	.k9bf__sub { font-size: 12px; }
	.k9bf__title { font-size: 27px; }
	.k9bf__desc { font-size: 15px; }
	/* Mobile: compact horizontal card */
	.k9bf__card {
		display: grid; grid-template-columns: 56px 1fr; column-gap: 16px;
		text-align: left !important; align-items: center;
		padding: 20px 18px;
	}
	.k9bf__ic { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 24px; }
	.k9bf__ctitle { margin: 0 0 4px; font-size: 16px; align-self: end; }
	.k9bf__ctext { align-self: start; font-size: 14px; }
	.k9bf__card::before { left: 0; transform: none; }
	.k9bf__card:hover::before { width: 100%; }
}