/* ── CAHOPE IconBox ───────────────────────────────────────────────────── */

:root {
	--cib-float:       -8px;
	--cib-shadow-color: rgba(0,0,0,0.15);
	--cib-line-color:  #e8446f;
	--cib-line-width:  3px;
	--cib-line-speed:  0.35s;
}


/* ── Container ───────────────────────────────────────────────────────── */

.cib-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 36px 32px;
	border-radius: 30px;
	background-color: #ffffff;
	overflow: hidden;
	transition:
		transform      0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow     0.32s ease,
		background-color 0.3s ease;
}

/* ── Float + Shadow on hover ─────────────────────────────────────────── */

.cib-box:hover {
	transform: translateY( var(--cib-float, -8px) );
	box-shadow: 0 20px 48px var(--cib-shadow-color, rgba(0,0,0,0.15));
}

/* ── Bottom line — left to right on hover ────────────────────────────── */

.cib-box::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: var(--cib-line-width, 3px);
	background: var(--cib-line-color, #e8446f);
	border-radius: 0 0 var(--cib-br, 30px) var(--cib-br, 30px);
	transition: width var(--cib-line-speed, 0.35s) ease;
}

.cib-box:hover::after {
	width: 100%;
}

/* ── Icon ────────────────────────────────────────────────────────────── */

.cib-icon-wrap {
	display: inline-flex;
	margin-bottom: 20px;
}

.cib-icon {
	width: 52px;
	height: 52px;
	object-fit: contain;
	display: block;
	transition: transform 0.3s ease;
}

.cib-box:hover .cib-icon {
	transform: translateY(-4px);
}

/* ── Title ───────────────────────────────────────────────────────────── */

.cib-title {
	margin: 0 0 6px;
	color: #1a1a2e;
	line-height: 1.3;
}

/* ── Subtitle ────────────────────────────────────────────────────────── */

.cib-subtitle {
	margin: 0 0 12px;
	color: #e8446f;
	font-weight: 600;
}

/* ── Description ─────────────────────────────────────────────────────── */

.cib-desc {
	margin: 0;
	color: #555;
	line-height: 1.7;
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cib-box,
	.cib-box::after,
	.cib-icon { transition: none !important; }
}