/**
 * Stack Info Box — Elementor Widget Styles
 * Prefix: stkib-
 * 10 distinct layout designs
 */

/* ═══════════════════════════════════════════
   BASE RESETS
═══════════════════════════════════════════ */

.stkib-box {
	position: relative;
	box-sizing: border-box;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stkib-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	min-width: 60px;
	font-size: 28px;
	flex-shrink: 0;
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.stkib-icon i,
.stkib-icon svg {
	display: block;
	transition: color 0.25s ease, filter 0.25s ease;
}

.stkib-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
}

.stkib-desc {
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0 0 20px;
}

.stkib-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.stkib-number {
	font-size: 0.7rem;
	font-weight: 900;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   STYLE 01 — Classic Card
   Centered icon in circle, shadow card, solid btn
═══════════════════════════════════════════ */

.stkib-classic {
	background: #fff;
	border-radius: 12px;
	padding: 40px 32px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.stkib-classic:hover {
	box-shadow: 0 10px 36px rgba(0,0,0,0.13);
	transform: translateY(-4px);
}
.stkib-classic .stkib-icon {
	background: #ede9fe;
	border-radius: 50%;
	color: #4f46e5;
	margin: 0 auto 20px;
}
.stkib-classic .stkib-icon i,
.stkib-classic .stkib-icon svg { color: #4f46e5; }
.stkib-classic:hover .stkib-icon {
	background: #4f46e5;
}
.stkib-classic:hover .stkib-icon i,
.stkib-classic:hover .stkib-icon svg { color: #fff; }
.stkib-classic .stkib-title { color: #111; }
.stkib-classic .stkib-desc  { color: #666; }
.stkib-classic .stkib-body  { display: flex; flex-direction: column; align-items: center; }
.stkib-classic .stkib-btn {
	background: #4f46e5;
	color: #fff;
	padding: 9px 22px;
	border-radius: 6px;
}
.stkib-classic .stkib-btn:hover { background: #3730a3; }
.stkib-classic .stkib-number {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #f0f0f0;
	color: #aaa;
	padding: 2px 8px;
	border-radius: 10px;
}

/* ═══════════════════════════════════════════
   STYLE 02 — Horizontal
   Icon left, text and button right; no card bg by default
═══════════════════════════════════════════ */

.stkib-horizontal {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stkib-horizontal:hover {
	border-color: #4f46e5;
	box-shadow: 0 4px 16px rgba(79,70,229,0.1);
}
.stkib-horizontal .stkib-icon {
	background: #ede9fe;
	border-radius: 10px;
	flex-shrink: 0;
	color: #4f46e5;
	transition: background 0.25s ease;
}
.stkib-horizontal .stkib-icon i,
.stkib-horizontal .stkib-icon svg { color: #4f46e5; }
.stkib-horizontal:hover .stkib-icon { background: #4f46e5; }
.stkib-horizontal:hover .stkib-icon i,
.stkib-horizontal:hover .stkib-icon svg { color: #fff; }
.stkib-horizontal .stkib-body { flex: 1; text-align: left; }
.stkib-horizontal .stkib-title { color: #111; margin-bottom: 6px; }
.stkib-horizontal .stkib-desc  { color: #666; margin-bottom: 14px; font-size: 0.88rem; }
.stkib-horizontal .stkib-btn {
	color: #4f46e5;
	font-size: 0.82rem;
	padding: 0;
	background: transparent;
}
.stkib-horizontal .stkib-btn::after {
	content: " →";
	transition: margin-left 0.2s ease;
}
.stkib-horizontal .stkib-btn:hover::after { margin-left: 4px; }
.stkib-horizontal .stkib-number {
	position: absolute;
	top: 12px;
	right: 14px;
	color: #ccc;
	font-size: 0.68rem;
}

/* ═══════════════════════════════════════════
   STYLE 03 — Colored Header
   Accent-colour top area with icon, white body below
═══════════════════════════════════════════ */

.stkib-colored-header {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	text-align: center;
	transition: box-shadow 0.25s ease;
}
.stkib-colored-header:hover {
	box-shadow: 0 10px 36px rgba(0,0,0,0.14);
}
.stkib-colored-header .stkib-icon {
	background: #4f46e5;
	border-radius: 0;
	width: 100%;
	height: 90px;
	font-size: 34px;
	margin: 0;
	display: flex;
}
.stkib-colored-header .stkib-icon i,
.stkib-colored-header .stkib-icon svg { color: #fff; }
.stkib-colored-header .stkib-body {
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.stkib-colored-header .stkib-title { color: #111; }
.stkib-colored-header .stkib-desc  { color: #666; font-size: 0.88rem; }
.stkib-colored-header .stkib-btn {
	background: #4f46e5;
	color: #fff;
	padding: 8px 20px;
	border-radius: 6px;
	font-size: 0.82rem;
}
.stkib-colored-header .stkib-btn:hover { background: #3730a3; }
.stkib-colored-header .stkib-number {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.2);
	color: rgba(255,255,255,0.8);
	padding: 4px 10px;
	font-size: 0.65rem;
	border-radius: 0 0 8px 0;
}

/* ═══════════════════════════════════════════
   STYLE 04 — Minimal Left Line
   Left border accent, no background, icon inline
═══════════════════════════════════════════ */

.stkib-minimal-line {
	border-left: 3px solid #4f46e5;
	padding: 6px 0 6px 24px;
	background: transparent;
	text-align: left;
	transition: border-color 0.2s ease;
}
.stkib-minimal-line:hover {
	border-left-color: #3730a3;
}
.stkib-minimal-line .stkib-icon {
	background: transparent;
	border-radius: 0;
	width: auto;
	height: auto;
	min-width: auto;
	margin-bottom: 12px;
	font-size: 28px;
}
.stkib-minimal-line .stkib-icon i,
.stkib-minimal-line .stkib-icon svg { color: #4f46e5; }
.stkib-minimal-line .stkib-body { text-align: left; }
.stkib-minimal-line .stkib-title { color: #111; font-size: 1.05rem; }
.stkib-minimal-line .stkib-desc  { color: #777; font-size: 0.88rem; }
.stkib-minimal-line .stkib-btn {
	color: #4f46e5;
	background: transparent;
	padding: 0;
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.stkib-minimal-line .stkib-btn:hover { color: #3730a3; }
.stkib-minimal-line .stkib-number {
	display: inline-block;
	color: #4f46e5;
	font-size: 0.65rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

/* ═══════════════════════════════════════════
   STYLE 05 — Floating Icon
   Icon sits above the card, overlapping the top edge
═══════════════════════════════════════════ */

.stkib-floating-icon {
	background: #fff;
	border-radius: 12px;
	padding: 52px 32px 32px;
	text-align: center;
	margin-top: 36px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #f0f0f0;
	transition: box-shadow 0.25s ease;
}
.stkib-floating-icon:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.13);
}
.stkib-floating-icon .stkib-icon {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(79,70,229,0.25);
	border: 3px solid #ede9fe;
	color: #4f46e5;
	transition: box-shadow 0.25s ease, background 0.25s ease;
}
.stkib-floating-icon .stkib-icon i,
.stkib-floating-icon .stkib-icon svg { color: #4f46e5; }
.stkib-floating-icon:hover .stkib-icon {
	background: #4f46e5;
	box-shadow: 0 8px 28px rgba(79,70,229,0.45);
	border-color: #4f46e5;
}
.stkib-floating-icon:hover .stkib-icon i,
.stkib-floating-icon:hover .stkib-icon svg { color: #fff; }
.stkib-floating-icon .stkib-body { display: flex; flex-direction: column; align-items: center; }
.stkib-floating-icon .stkib-title { color: #111; }
.stkib-floating-icon .stkib-desc  { color: #666; font-size: 0.88rem; }
.stkib-floating-icon .stkib-btn {
	background: transparent;
	color: #4f46e5;
	border: 1.5px solid #4f46e5;
	padding: 7px 20px;
	border-radius: 6px;
	font-size: 0.82rem;
}
.stkib-floating-icon .stkib-btn:hover { background: #4f46e5; color: #fff; }
.stkib-floating-icon .stkib-number {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #ccc;
	font-size: 0.65rem;
}

/* ═══════════════════════════════════════════
   STYLE 06 — Dark Glassmorphism
   Dark frosted glass card on dark bg
═══════════════════════════════════════════ */

.stkib-glass-dark {
	background: rgba(255,255,255,0.06);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 16px;
	padding: 36px 32px;
	text-align: center;
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.stkib-glass-dark:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(108,99,255,0.5);
	box-shadow: 0 0 28px rgba(108,99,255,0.15);
}
.stkib-glass-dark .stkib-icon {
	background: rgba(108,99,255,0.2);
	border-radius: 12px;
	margin: 0 auto 20px;
	border: 1px solid rgba(108,99,255,0.35);
	transition: background 0.25s ease;
}
.stkib-glass-dark .stkib-icon i,
.stkib-glass-dark .stkib-icon svg { color: #a5b4fc; }
.stkib-glass-dark:hover .stkib-icon { background: rgba(108,99,255,0.35); }
.stkib-glass-dark .stkib-body { display: flex; flex-direction: column; align-items: center; }
.stkib-glass-dark .stkib-title { color: #f0f0f0; }
.stkib-glass-dark .stkib-desc  { color: rgba(255,255,255,0.6); font-size: 0.88rem; }
.stkib-glass-dark .stkib-btn {
	background: rgba(108,99,255,0.25);
	color: #c4b5fd;
	border: 1px solid rgba(108,99,255,0.4);
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 0.82rem;
	backdrop-filter: blur(4px);
}
.stkib-glass-dark .stkib-btn:hover { background: rgba(108,99,255,0.45); color: #fff; }
.stkib-glass-dark .stkib-number {
	position: absolute;
	top: 12px;
	right: 14px;
	color: rgba(255,255,255,0.25);
	font-size: 0.65rem;
}

/* ═══════════════════════════════════════════
   STYLE 07 — Gradient Fill
   Full gradient bg, white text throughout
═══════════════════════════════════════════ */

.stkib-gradient {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	border-radius: 12px;
	padding: 40px 32px;
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.stkib-gradient:hover {
	box-shadow: 0 12px 36px rgba(79,70,229,0.45);
	transform: translateY(-4px);
}
.stkib-gradient .stkib-icon {
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	margin: 0 auto 20px;
	border: 2px solid rgba(255,255,255,0.25);
	transition: background 0.25s ease;
}
.stkib-gradient .stkib-icon i,
.stkib-gradient .stkib-icon svg { color: #fff; }
.stkib-gradient:hover .stkib-icon { background: rgba(255,255,255,0.25); }
.stkib-gradient .stkib-body { display: flex; flex-direction: column; align-items: center; }
.stkib-gradient .stkib-title { color: #fff; }
.stkib-gradient .stkib-desc  { color: rgba(255,255,255,0.8); font-size: 0.88rem; }
.stkib-gradient .stkib-btn {
	background: #fff;
	color: #4f46e5;
	padding: 8px 22px;
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 800;
}
.stkib-gradient .stkib-btn:hover { background: rgba(255,255,255,0.9); transform: scale(1.03); }
.stkib-gradient .stkib-number {
	position: absolute;
	top: 12px;
	right: 14px;
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.7);
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.65rem;
}

/* ═══════════════════════════════════════════
   STYLE 08 — Outlined Hover
   Transparent by default, fills on hover
═══════════════════════════════════════════ */

.stkib-outlined-hover {
	background: transparent;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	padding: 36px 32px;
	text-align: center;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stkib-outlined-hover:hover {
	background: #4f46e5;
	border-color: #4f46e5;
	box-shadow: 0 10px 32px rgba(79,70,229,0.35);
}
.stkib-outlined-hover .stkib-icon {
	background: #f5f5f5;
	border-radius: 50%;
	margin: 0 auto 20px;
	transition: background 0.3s ease;
}
.stkib-outlined-hover .stkib-icon i,
.stkib-outlined-hover .stkib-icon svg { color: #4f46e5; transition: color 0.3s ease; }
.stkib-outlined-hover:hover .stkib-icon { background: rgba(255,255,255,0.15); }
.stkib-outlined-hover:hover .stkib-icon i,
.stkib-outlined-hover:hover .stkib-icon svg { color: #fff; }
.stkib-outlined-hover .stkib-body { display: flex; flex-direction: column; align-items: center; }
.stkib-outlined-hover .stkib-title { color: #111; transition: color 0.3s ease; }
.stkib-outlined-hover .stkib-desc  { color: #777; font-size: 0.88rem; transition: color 0.3s ease; }
.stkib-outlined-hover:hover .stkib-title { color: #fff; }
.stkib-outlined-hover:hover .stkib-desc  { color: rgba(255,255,255,0.82); }
.stkib-outlined-hover .stkib-btn {
	background: transparent;
	color: #4f46e5;
	border: 1.5px solid #4f46e5;
	padding: 7px 20px;
	border-radius: 6px;
	font-size: 0.82rem;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.stkib-outlined-hover:hover .stkib-btn {
	background: #fff;
	color: #4f46e5;
	border-color: #fff;
}
.stkib-outlined-hover .stkib-number {
	position: absolute;
	top: 12px;
	right: 14px;
	color: #ccc;
	transition: color 0.3s ease;
	font-size: 0.65rem;
}
.stkib-outlined-hover:hover .stkib-number { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════
   STYLE 09 — Number / Step
   Massive number dominates, icon secondary
═══════════════════════════════════════════ */

.stkib-number-step {
	background: #fff;
	border-radius: 0;
	padding: 32px 32px 32px 0;
	text-align: left;
	border-bottom: 1px solid #e8e8e8;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.stkib-number-step .stkib-number {
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 1;
	color: #ede9fe;
	letter-spacing: -0.04em;
	flex-shrink: 0;
	min-width: 80px;
	text-align: right;
	transition: color 0.25s ease;
}
.stkib-number-step:hover .stkib-number { color: #c4b5fd; }
.stkib-number-step .stkib-icon {
	display: none; /* number replaces icon in this style */
}
.stkib-number-step .stkib-body {
	flex: 1;
	padding-top: 8px;
	text-align: left;
}
.stkib-number-step .stkib-title {
	color: #111;
	font-size: 1.1rem;
	margin-bottom: 8px;
}
.stkib-number-step .stkib-desc  { color: #666; font-size: 0.88rem; margin-bottom: 14px; }
.stkib-number-step .stkib-btn {
	color: #4f46e5;
	background: transparent;
	padding: 0;
	font-size: 0.82rem;
	font-weight: 700;
}
.stkib-number-step .stkib-btn::after { content: " →"; }
.stkib-number-step .stkib-btn:hover { color: #3730a3; }

/* ═══════════════════════════════════════════
   STYLE 10 — Neon Glow
   Dark bg, neon accent icon and title
═══════════════════════════════════════════ */

.stkib-neon {
	background: #090912;
	border: 1px solid rgba(108,99,255,0.2);
	border-radius: 12px;
	padding: 36px 32px;
	text-align: center;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stkib-neon:hover {
	border-color: rgba(108,99,255,0.7);
	box-shadow: 0 0 24px rgba(108,99,255,0.25), inset 0 0 24px rgba(108,99,255,0.05);
}
.stkib-neon .stkib-icon {
	background: rgba(108,99,255,0.1);
	border-radius: 12px;
	margin: 0 auto 20px;
	border: 1px solid rgba(108,99,255,0.3);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.stkib-neon .stkib-icon i,
.stkib-neon .stkib-icon svg {
	color: #a5b4fc;
	filter: drop-shadow(0 0 4px rgba(108,99,255,0.7));
}
.stkib-neon:hover .stkib-icon {
	background: rgba(108,99,255,0.2);
	box-shadow: 0 0 16px rgba(108,99,255,0.5);
}
.stkib-neon:hover .stkib-icon i,
.stkib-neon:hover .stkib-icon svg {
	filter: drop-shadow(0 0 8px rgba(108,99,255,1));
}
.stkib-neon .stkib-body { display: flex; flex-direction: column; align-items: center; }
.stkib-neon .stkib-title {
	color: #e0e0ff;
	text-shadow: 0 0 20px rgba(108,99,255,0.4);
}
.stkib-neon .stkib-desc  { color: rgba(255,255,255,0.5); font-size: 0.88rem; }
.stkib-neon .stkib-btn {
	background: transparent;
	color: #a5b4fc;
	border: 1px solid rgba(108,99,255,0.45);
	padding: 7px 20px;
	border-radius: 6px;
	font-size: 0.82rem;
}
.stkib-neon .stkib-btn:hover {
	background: rgba(108,99,255,0.2);
	border-color: #6c63ff;
	color: #c4b5fd;
	box-shadow: 0 0 12px rgba(108,99,255,0.4);
}
.stkib-neon .stkib-number {
	position: absolute;
	top: 12px;
	right: 14px;
	color: rgba(108,99,255,0.35);
	font-size: 0.65rem;
}

/* ═══════════════════════════════════════════
   STYLES 11–40 — Additional Variations
   Each style tweaks layout, borders, gradients, and interactions to be distinct.
═══════════════════════════════════════════ */

/* 11 — Left Accent Border */
.stkib-accent-left { background:#fff; border-left:6px solid #4f46e5; border-radius:8px; padding:28px 28px; }
.stkib-accent-left:hover { box-shadow:0 10px 30px rgba(0,0,0,0.10); transform: translateY(-3px); }
.stkib-accent-left .stkib-title{color:#111}
.stkib-accent-left .stkib-desc{color:#666}

/* 12 — Right Accent Border */
.stkib-accent-right { background:#fff; border-right:6px solid #06b6d4; border-radius:8px; padding:28px 28px; }
.stkib-accent-right:hover { box-shadow:0 10px 30px rgba(0,0,0,0.10); transform: translateY(-3px); }

/* 13 — Top Accent Border */
.stkib-accent-top { background:#fff; border-top:6px solid #22c55e; border-radius:10px; padding:28px 28px; }

/* 14 — Bottom Accent */
.stkib-accent-bottom { background:#fff; border-bottom:6px solid #f59e0b; border-radius:10px; padding:28px 28px; }

/* 15 — Dotted Outline */
.stkib-outline-dotted { background:#fff; border:2px dotted #cbd5e1; border-radius:14px; padding:26px 26px; }
.stkib-outline-dotted:hover { border-color:#94a3b8; }

/* 16 — Dashed Outline */
.stkib-outline-dashed { background:#fff; border:2px dashed #cbd5e1; border-radius:14px; padding:26px 26px; }
.stkib-outline-dashed:hover { border-color:#94a3b8; }

/* 17 — Lifted Shadow */
.stkib-lifted { background:#fff; border-radius:14px; padding:34px 30px; box-shadow:0 6px 0 #e5e7eb, 0 10px 24px rgba(0,0,0,0.08); }
.stkib-lifted:hover { transform: translateY(-4px); box-shadow:0 10px 0 #e5e7eb, 0 20px 36px rgba(0,0,0,0.12); }

/* 18 — Inset Shadow */
.stkib-inset { background:#fff; border-radius:12px; padding:30px; box-shadow: inset 0 1px 0 #f1f5f9, inset 0 16px 40px rgba(0,0,0,0.05); }

/* 19 — Soft Gradient */
.stkib-soft-gradient { background: linear-gradient(180deg,#fafafa, #ffffff); border:1px solid #eee; border-radius:14px; padding:32px; }

/* 20 — Diagonal Gradient */
.stkib-diagonal-gradient { background: linear-gradient(135deg, #eef2ff 0%, #ecfeff 100%); border-radius:16px; padding:34px; }

/* 21 — Invert Outline */
.stkib-invert-outline { background: transparent; border:2px solid #111827; color:#111827; border-radius:10px; padding:26px; }
.stkib-invert-outline .stkib-title{color:#111827}
.stkib-invert-outline .stkib-desc{color:#374151}
.stkib-invert-outline .stkib-icon i, .stkib-invert-outline .stkib-icon svg{color:#111827}
.stkib-invert-outline:hover { background:#111827; color:#fff; }
.stkib-invert-outline:hover .stkib-title, .stkib-invert-outline:hover .stkib-desc{color:#fff}
.stkib-invert-outline:hover .stkib-icon i, .stkib-invert-outline:hover .stkib-icon svg{color:#fff}

/* 22 — Underlined Title */
.stkib-underline-title .stkib-title{ position:relative; padding-bottom:10px; }
.stkib-underline-title .stkib-title::after{ content:""; position:absolute; left:0; right:0; margin:0 auto; bottom:0; width:60px; height:3px; background:#4f46e5; border-radius:999px; }

/* 23 — Corner Ribbon */
.stkib-corner-ribbon { position:relative; background:#fff; border-radius:12px; padding:30px; overflow:hidden; }
.stkib-corner-ribbon::before{ content:""; position:absolute; top:0; right:0; border-left:40px solid transparent; border-bottom:40px solid transparent; border-top:40px solid #ef4444; }
.stkib-corner-ribbon .stkib-number{ top:10px; right:12px; color:rgba(239,68,68,0.7)}

/* 24 — Corner Cut */
.stkib-corner-cut { position:relative; background:#fff; border-radius:12px; padding:30px; overflow:hidden; }
.stkib-corner-cut::before{ content:""; position:absolute; top:0; right:0; width:0; height:0; border-top:32px solid #e5e7eb; border-left:32px solid transparent; }

/* 25 — Skew Hover */
.stkib-skew-hover { background:#fff; border-radius:14px; padding:30px; transition: transform .25s ease; }
.stkib-skew-hover:hover { transform: skewY(-1.2deg) translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,0.12); }

/* 26 — Split Background */
.stkib-split-bg { background: linear-gradient(90deg, #ffffff 0 50%, #f8fafc 50% 100%); border-radius:12px; padding:30px; }

/* 27 — Layered Card */
.stkib-layered { background:#fff; border-radius:14px; padding:30px; box-shadow:0 8px 0 #f3f4f6, 0 14px 30px rgba(0,0,0,0.08); }
.stkib-layered::after{ content:""; position:absolute; inset:12px; border-radius:10px; border:1px dashed #e5e7eb; pointer-events:none; }

/* 28 — Frosted Light */
.stkib-frosted-light { background: rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius:16px; padding:28px; }

/* 29 — Glass Light */
.stkib-glass-light { background: rgba(255,255,255,0.75); border:1px solid rgba(0,0,0,0.05); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius:16px; padding:30px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

/* 30 — Pill Emphasis */
.stkib-pill { background:#fff; border-radius:999px; padding:28px 34px; display:flex; align-items:center; gap:18px; }
.stkib-pill .stkib-body{ flex:1; }

/* 31 — Large Circle Icon */
.stkib-icon-circle-lg .stkib-icon{ width:84px; height:84px; min-width:84px; border-radius:50%; background:#eef2ff; }

/* 32 — Square Icon */
.stkib-icon-square .stkib-icon{ width:64px; height:64px; min-width:64px; border-radius:8px; background:#f1f5f9; }

/* 33 — Icon Ring */
.stkib-icon-ring .stkib-icon{ border-radius:50%; box-shadow: inset 0 0 0 3px #e5e7eb; }
.stkib-icon-ring:hover .stkib-icon{ box-shadow: inset 0 0 0 3px #4f46e5; }

/* 34 — Minimal Textual */
.stkib-minimal-text{ background:transparent; border:none; padding:0; }
.stkib-minimal-text .stkib-icon{ display:none; }
.stkib-minimal-text .stkib-title{ margin-bottom:6px; }
.stkib-minimal-text .stkib-desc{ margin-bottom:10px; }

/* 35 — Subtle Pattern */
.stkib-pattern-subtle{ background: linear-gradient(0deg, rgba(0,0,0,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.015) 1px, transparent 1px); background-size: 14px 14px; background-color:#fff; border-radius:12px; padding:30px; }

/* 36 — Thick Left Gradient */
.stkib-left-gradient-thick{ position:relative; background:#fff; border-radius:12px; padding:30px 30px 30px 40px; }
.stkib-left-gradient-thick::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background: linear-gradient(180deg,#22c55e,#06b6d4); }

/* 37 — Gradient Border */
.stkib-gradient-border{ position:relative; border-radius:14px; padding:28px; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, #4f46e5, #06b6d4) border-box; border:2px solid transparent; }

/* 38 — Slide Hover */
.stkib-slide-hover{ position:relative; background: linear-gradient(90deg, #eef2ff, #ecfeff) left / 0% 100% no-repeat, #ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:30px; transition: background-size .3s ease; }
.stkib-slide-hover:hover{ background-size: 100% 100%; }

/* 39 — Icon Rotate */
.stkib-icon-rotate .stkib-icon{ transition: transform .25s ease; }
.stkib-icon-rotate:hover .stkib-icon{ transform: rotate(12deg); }

/* 40 — Pulse Shadow */
@keyframes stkib-pulse { 0%,100%{ box-shadow:0 0 0 rgba(79,70,229,0);} 50%{ box-shadow:0 0 24px rgba(79,70,229,0.35);} }
.stkib-pulse-shadow{ background:#fff; border-radius:14px; padding:30px; }
.stkib-pulse-shadow:hover{ animation: stkib-pulse 1.3s ease-in-out infinite; }