/**
 * Stack Icon Box — Frontend Styles
 * 10 designs: pill, circle-stack, flat-minimal, hexagon, split-colour,
 *             flip-card, neon-pulse, corner-frame, badge-pop, gradient-ring
 */

/* ── Reset & Base ───────────────────────────────────────────── */
.stkic-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	--stkic-accent: #4f46e5;
}
.stkic-box *,
.stkic-box *::before,
.stkic-box *::after {
	box-sizing: border-box;
}
.stkic-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	min-width: 72px;
	flex-shrink: 0;
}
.stkic-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.stkic-icon i { font-size: 28px; }
.stkic-icon svg { width: 28px; height: 28px; }
.stkic-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.stkic-title {
	display: block;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}
.stkic-subtitle {
	display: block;
	font-size: 0.875rem;
	opacity: 0.7;
	line-height: 1.4;
}
.stkic-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 2;
}

/* ── 01 · Pill Chip ─────────────────────────────────────────── */
.stkic-pill {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	background: #f8f8f8;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.08);
	transition: box-shadow .25s, transform .25s;
	width: fit-content;
}
.stkic-pill:hover {
	box-shadow: 0 4px 18px rgba(0,0,0,.12);
	transform: translateY(-2px);
}
.stkic-pill .stkic-icon-wrap {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 50%;
	background: var(--stkic-accent);
}
.stkic-pill .stkic-icon i,
.stkic-pill .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-pill .stkic-text { text-align: left; }
.stkic-pill .stkic-badge {
	top: -8px;
	right: 12px;
}

/* ── 02 · Circle Stack ──────────────────────────────────────── */
.stkic-circle-stack {
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 36px 24px 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(0,0,0,.08);
	transition: box-shadow .25s, transform .25s;
}
.stkic-circle-stack:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.14);
	transform: translateY(-4px);
}
.stkic-circle-stack .stkic-icon-wrap {
	border-radius: 50%;
	background: var(--stkic-accent);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--stkic-accent) 40%, transparent);
}
.stkic-circle-stack .stkic-icon i,
.stkic-circle-stack .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-circle-stack .stkic-text { text-align: center; }

/* ── 03 · Flat Minimal ──────────────────────────────────────── */
.stkic-flat-minimal {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
	background: transparent;
}
.stkic-flat-minimal .stkic-icon-wrap {
	width: 56px;
	height: 56px;
	min-width: 56px;
	background: transparent;
}
.stkic-flat-minimal .stkic-icon i { color: var(--stkic-accent); font-size: 36px; }
.stkic-flat-minimal .stkic-icon svg { fill: var(--stkic-accent); width: 36px; height: 36px; }
.stkic-flat-minimal .stkic-title {
	padding-top: 8px;
	border-top: 2px solid var(--stkic-accent);
}
.stkic-flat-minimal:hover .stkic-icon i { opacity: 0.75; }
.stkic-flat-minimal:hover .stkic-icon svg { opacity: 0.75; }

/* ── 04 · Hexagon ───────────────────────────────────────────── */
.stkic-hexagon {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 32px 24px 28px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	transition: box-shadow .25s;
}
.stkic-hexagon:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.stkic-hexagon .stkic-icon-wrap {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	border-radius: 0;
	background: var(--stkic-accent);
}
.stkic-hexagon .stkic-icon i,
.stkic-hexagon .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-hexagon .stkic-text { text-align: center; }
.stkic-hexagon:hover .stkic-icon-wrap {
	background: color-mix(in srgb, var(--stkic-accent) 80%, #000);
}

/* ── 05 · Split Colour ──────────────────────────────────────── */
.stkic-split-colour {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0,0,0,.09);
	transition: box-shadow .25s, transform .25s;
}
.stkic-split-colour:hover {
	box-shadow: 0 6px 28px rgba(0,0,0,.15);
	transform: translateY(-3px);
}
.stkic-split-colour .stkic-icon-wrap {
	background: var(--stkic-accent);
	border-radius: 0;
	padding: 24px;
	width: auto;
	height: auto;
	min-width: 80px;
	align-self: stretch;
}
.stkic-split-colour .stkic-icon i,
.stkic-split-colour .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-split-colour .stkic-text {
	padding: 20px 22px;
	justify-content: center;
	text-align: left;
}

/* ── 06 · Flip Card ─────────────────────────────────────────── */
.stkic-flip-card {
	perspective: 900px;
	min-height: 180px;
	width: 100%;
	cursor: pointer;
}
.stkic-flip-card .stkic-icon-wrap,
.stkic-flip-card .stkic-text,
.stkic-flip-card .stkic-back {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.stkic-flip-card .stkic-icon-wrap {
	z-index: 2;
	background: var(--stkic-accent);
	border-radius: 16px;
	transform: rotateY(0deg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stkic-flip-card .stkic-icon i,
.stkic-flip-card .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-flip-card .stkic-text {
	display: none; /* hidden — back face is .stkic-back */
}
.stkic-flip-card .stkic-back {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 24px;
	background: #fff;
	border-radius: 16px;
	border: 2px solid var(--stkic-accent);
	transform: rotateY(180deg);
}
.stkic-flip-card:hover .stkic-icon-wrap {
	transform: rotateY(-180deg);
}
.stkic-flip-card:hover .stkic-back {
	transform: rotateY(0deg);
}
.stkic-flip-card .stkic-badge { z-index: 3; }

/* ── 07 · Neon Pulse ────────────────────────────────────────── */
@keyframes stkic-pulse {
	0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--stkic-accent) 60%, transparent); }
	70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--stkic-accent) 0%,  transparent); }
	100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--stkic-accent) 0%,  transparent); }
}
.stkic-neon-pulse {
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 36px 24px 28px;
	background: #0f0f1a;
	border-radius: 16px;
	color: #fff;
}
.stkic-neon-pulse .stkic-subtitle { opacity: 0.55; }
.stkic-neon-pulse .stkic-icon-wrap {
	border-radius: 50%;
	background: color-mix(in srgb, var(--stkic-accent) 20%, #0f0f1a);
	border: 2px solid var(--stkic-accent);
	animation: stkic-pulse 2s infinite;
}
.stkic-neon-pulse .stkic-icon i { color: var(--stkic-accent); }
.stkic-neon-pulse .stkic-icon svg { fill: var(--stkic-accent); }
.stkic-neon-pulse .stkic-text { text-align: center; }
.stkic-neon-pulse:hover .stkic-icon-wrap {
	background: color-mix(in srgb, var(--stkic-accent) 35%, #0f0f1a);
	filter: drop-shadow(0 0 8px var(--stkic-accent));
}

/* ── 08 · Corner Frame ──────────────────────────────────────── */
.stkic-corner-frame {
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 32px 28px 28px;
	background: #fff;
	position: relative;
}
.stkic-corner-frame::before,
.stkic-corner-frame::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: var(--stkic-accent);
	border-style: solid;
	transition: width .25s, height .25s;
}
.stkic-corner-frame::before {
	top: 8px;
	left: 8px;
	border-width: 3px 0 0 3px;
}
.stkic-corner-frame::after {
	bottom: 8px;
	right: 8px;
	border-width: 0 3px 3px 0;
}
.stkic-corner-frame .stkic-inner-corners::before,
.stkic-corner-frame .stkic-inner-corners::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: var(--stkic-accent);
	border-style: solid;
	transition: width .25s, height .25s;
}
.stkic-corner-frame:hover::before,
.stkic-corner-frame:hover::after {
	width: 30px;
	height: 30px;
}
/* Use box shadow as substitute for the other two corners */
.stkic-corner-frame {
	box-shadow:
		inset -3px -3px 0 -0.5px transparent,
		inset  3px  3px 0 -0.5px transparent;
}
/* Extra corners via outline trick on icon-wrap */
.stkic-corner-frame .stkic-icon-wrap {
	border-radius: 8px;
	background: color-mix(in srgb, var(--stkic-accent) 10%, transparent);
}
.stkic-corner-frame .stkic-icon i { color: var(--stkic-accent); }
.stkic-corner-frame .stkic-icon svg { fill: var(--stkic-accent); }
.stkic-corner-frame .stkic-text { text-align: center; }
/* Remaining 2 corners via pseudo on text */
.stkic-corner-frame .stkic-text::before {
	content: '';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-top: 3px solid var(--stkic-accent);
	border-right: 3px solid var(--stkic-accent);
	transition: width .25s, height .25s;
	pointer-events: none;
}
.stkic-corner-frame .stkic-text::after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 8px;
	width: 20px;
	height: 20px;
	border-bottom: 3px solid var(--stkic-accent);
	border-left: 3px solid var(--stkic-accent);
	transition: width .25s, height .25s;
	pointer-events: none;
}
.stkic-corner-frame:hover .stkic-text::before,
.stkic-corner-frame:hover .stkic-text::after {
	width: 30px;
	height: 30px;
}

/* ── 09 · Badge Pop ─────────────────────────────────────────── */
.stkic-badge-pop {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 40px 28px 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(0,0,0,.08);
	transition: box-shadow .25s, transform .25s;
}
.stkic-badge-pop:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,.14);
	transform: translateY(-4px);
}
.stkic-badge-pop .stkic-icon-wrap {
	border-radius: 18px;
	background: color-mix(in srgb, var(--stkic-accent) 12%, #fff);
	border: 2px solid color-mix(in srgb, var(--stkic-accent) 25%, transparent);
	position: relative;
}
.stkic-badge-pop .stkic-icon i { color: var(--stkic-accent); }
.stkic-badge-pop .stkic-icon svg { fill: var(--stkic-accent); }
.stkic-badge-pop .stkic-badge {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 0.65rem;
	padding: 3px 8px;
	animation: stkic-badge-bounce .4s ease forwards;
	transform-origin: center;
}
@keyframes stkic-badge-bounce {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.stkic-badge-pop .stkic-text { text-align: center; }

/* ── 10 · Gradient Ring ─────────────────────────────────────── */
@keyframes stkic-ring-spin {
	to { transform: rotate(360deg); }
}
.stkic-gradient-ring {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 36px 28px 28px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 14px rgba(0,0,0,.07);
	transition: box-shadow .25s;
}
.stkic-gradient-ring:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.13);
}
.stkic-gradient-ring .stkic-icon-wrap {
	border-radius: 50%;
	background: #fff;
	position: relative;
	padding: 4px;
}
.stkic-gradient-ring .stkic-icon-wrap::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: conic-gradient(
		var(--stkic-accent) 0%,
		color-mix(in srgb, var(--stkic-accent) 30%, #fff) 40%,
		var(--stkic-accent) 60%,
		color-mix(in srgb, var(--stkic-accent) 60%, #a78bfa) 80%,
		var(--stkic-accent) 100%
	);
	z-index: -1;
	transition: animation .3s;
}
.stkic-gradient-ring:hover .stkic-icon-wrap::before {
	animation: stkic-ring-spin 2s linear infinite;
}
.stkic-gradient-ring .stkic-icon-wrap::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #fff;
	z-index: 0;
}
.stkic-gradient-ring .stkic-icon {
	position: relative;
	z-index: 1;
}
.stkic-gradient-ring .stkic-icon i { color: var(--stkic-accent); }
.stkic-gradient-ring .stkic-icon svg { fill: var(--stkic-accent); }
.stkic-gradient-ring .stkic-text { text-align: center; }

/* ── 11 · Soft Shadow ───────────────────────────────────────── */
.stkic-soft-shadow {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
	transition: transform .25s, box-shadow .25s;
}
.stkic-soft-shadow:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.stkic-soft-shadow .stkic-icon-wrap { border-radius: 12px; background: color-mix(in srgb, var(--stkic-accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--stkic-accent) 25%, transparent); }
.stkic-soft-shadow .stkic-icon i { color: var(--stkic-accent); }
.stkic-soft-shadow .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 12 · Glass Card ────────────────────────────────────────── */
.stkic-glass-card {
	position: relative;
	padding: 24px;
	backdrop-filter: saturate(140%) blur(10px);
	background: color-mix(in srgb, #ffffff 40%, transparent);
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 16px;
}
.stkic-glass-card .stkic-icon i { color: var(--stkic-accent); }
.stkic-glass-card .stkic-icon svg { fill: var(--stkic-accent); }
.stkic-glass-card::before {
	content: '';
	position: absolute; inset: 0; border-radius: 16px;
	background: linear-gradient(120deg, color-mix(in srgb, var(--stkic-accent) 18%, transparent), transparent 40%);
	pointer-events: none;
}

/* ── 13 · Outline ───────────────────────────────────────────── */
.stkic-outline { padding: 18px 20px; border: 2px solid var(--stkic-accent); border-radius: 14px; background: #fff; gap: 12px; }
.stkic-outline .stkic-icon i { color: var(--stkic-accent); }
.stkic-outline .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 14 · Skew Panel ────────────────────────────────────────── */
.stkic-skew-panel { position: relative; padding: 28px 24px 24px; background: #fff; overflow: hidden; border-radius: 14px; }
.stkic-skew-panel::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 55%; background: var(--stkic-accent); transform: skewY(-8deg); }
.stkic-skew-panel .stkic-icon-wrap { background: transparent; }
.stkic-skew-panel .stkic-icon i, .stkic-skew-panel .stkic-icon svg { color: #fff; fill: #fff; position: relative; z-index: 1; }
.stkic-skew-panel .stkic-text { position: relative; z-index: 1; color: #111; }

/* ── 15 · Ribbon Top ────────────────────────────────────────── */
.stkic-ribbon-top { position: relative; padding: 32px 24px 24px; background: #fff; border-radius: 12px; }
.stkic-ribbon-top::before { content: ''; position: absolute; top: 0; left: 18px; width: 80px; height: 18px; background: var(--stkic-accent); border-radius: 0 0 6px 6px; }
.stkic-ribbon-top .stkic-icon i { color: var(--stkic-accent); }
.stkic-ribbon-top .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 16 · Wave Underline ────────────────────────────────────── */
.stkic-wave-underline { background: #fff; padding: 22px; border-radius: 12px; }
.stkic-wave-underline .stkic-title { position: relative; display: inline-block; }
.stkic-wave-underline .stkic-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 6px; background: repeating-linear-gradient(90deg, var(--stkic-accent), var(--stkic-accent) 8px, transparent 8px, transparent 14px); border-radius: 999px; }

/* ── 17 · Tilt Hover ────────────────────────────────────────── */
.stkic-tilt-hover { background: #fff; padding: 20px; border-radius: 14px; transform: perspective(800px) rotateX(0) rotateY(0); transition: transform .25s, box-shadow .25s; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.stkic-tilt-hover:hover { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.16); }

/* ── 18 · Stack Layers ──────────────────────────────────────── */
.stkic-stack-layers { position: relative; padding: 24px; background: #fff; border-radius: 14px; }
.stkic-stack-layers::before, .stkic-stack-layers::after { content: ''; position: absolute; inset: 8px 8px auto auto; width: 80%; height: 70%; border-radius: 14px; background: color-mix(in srgb, var(--stkic-accent) 12%, #fff); box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translate(10px, -10px); z-index: -1; }
.stkic-stack-layers::after { inset: auto auto 8px 8px; transform: translate(-10px, 10px); }

/* ── 19 · Blob Shape ────────────────────────────────────────── */
.stkic-blob-shape { position: relative; padding: 28px 24px; background: #fff; border-radius: 16px; overflow: hidden; }
.stkic-blob-shape .stkic-icon-wrap { background: var(--stkic-accent); border-radius: 50%; }
.stkic-blob-shape::before { content: ''; position: absolute; width: 180px; height: 180px; left: -40px; top: -60px; background: color-mix(in srgb, var(--stkic-accent) 45%, #a78bfa); filter: blur(30px); border-radius: 60% 40% 60% 40% / 60% 60% 40% 40%; opacity: .35; }

/* ── 20 · Underline Slide ───────────────────────────────────── */
.stkic-underline-slide { background: #fff; padding: 20px; border-radius: 12px; }
.stkic-underline-slide .stkic-title { background: linear-gradient(90deg, var(--stkic-accent), var(--stkic-accent)) left bottom/0 3px no-repeat; transition: background-size .25s; padding-bottom: 4px; }
.stkic-underline-slide:hover .stkic-title { background-size: 100% 3px; }

/* ── 21 · Double Border ─────────────────────────────────────── */
.stkic-double-border { position: relative; padding: 20px; background: #fff; border: 2px solid var(--stkic-accent); border-radius: 14px; }
.stkic-double-border::after { content: ''; position: absolute; inset: 6px; border: 2px dashed color-mix(in srgb, var(--stkic-accent) 45%, transparent); border-radius: 10px; pointer-events: none; }

/* ── 22 · Card Raise ────────────────────────────────────────── */
.stkic-card-raise { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 4px 0 0 var(--stkic-accent), 0 10px 24px rgba(0,0,0,.08); transition: transform .25s; }
.stkic-card-raise:hover { transform: translateY(-6px); }

/* ── 23 · Spotlight ─────────────────────────────────────────── */
.stkic-spotlight { position: relative; padding: 26px; background: #0b1020; color: #fff; border-radius: 16px; overflow: hidden; }
.stkic-spotlight::before { content: ''; position: absolute; width: 160px; height: 160px; background: radial-gradient(circle at center, color-mix(in srgb, var(--stkic-accent) 70%, #fff), transparent 60%); top: 40%; left: 40%; transform: translate(-50%, -50%); filter: blur(8px); opacity: .5; }
.stkic-spotlight .stkic-icon i { color: var(--stkic-accent); }
.stkic-spotlight .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 24 · Inset Shadow ──────────────────────────────────────── */
.stkic-inset-shadow { background: #fff; padding: 24px; border-radius: 16px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stkic-accent) 35%, transparent), inset 0 10px 24px rgba(0,0,0,.08); }

/* ── 25 · Lift On Hover ─────────────────────────────────────── */
.stkic-lift-hover { background: #fff; padding: 22px; border-radius: 14px; transition: transform .25s, box-shadow .25s; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.stkic-lift-hover:hover { transform: translateY(-8px); box-shadow: 0 14px 32px rgba(0,0,0,.16); }

/* ── 26 · Striped ───────────────────────────────────────────── */
.stkic-striped { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--stkic-accent) 8%, #fff), color-mix(in srgb, var(--stkic-accent) 8%, #fff) 10px, #fff 10px, #fff 20px); padding: 22px; border-radius: 14px; }

/* ── 27 · Diagonal Cut ──────────────────────────────────────── */
.stkic-diagonal-cut { position: relative; padding: 24px; background: #fff; border-radius: 14px; overflow: hidden; }
.stkic-diagonal-cut::before { content: ''; position: absolute; top: 0; right: 0; border-width: 0 0 70px 70px; border-style: solid; border-color: transparent transparent color-mix(in srgb, var(--stkic-accent) 25%, #fff) transparent; }

/* ── 28 · Notched ───────────────────────────────────────────── */
.stkic-notched { position: relative; padding: 24px; background: #fff; border-radius: 12px; }
.stkic-notched::before, .stkic-notched::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 2px var(--stkic-accent); transform: rotate(45deg); }
.stkic-notched::before { top: -9px; left: 18px; }
.stkic-notched::after { bottom: -9px; right: 18px; }

/* ── 29 · Ticket ────────────────────────────────────────────── */
.stkic-ticket { position: relative; padding: 22px; background: #fff; border: 2px solid var(--stkic-accent); border-radius: 12px; }
.stkic-ticket::before, .stkic-ticket::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border: 2px solid var(--stkic-accent); border-radius: 50%; }
.stkic-ticket::before { left: -11px; top: 50%; transform: translateY(-50%); }
.stkic-ticket::after { right: -11px; top: 50%; transform: translateY(-50%); }

/* ── 30 · Sticker ───────────────────────────────────────────── */
.stkic-sticker { position: relative; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.stkic-sticker::after { content: ''; position: absolute; width: 28px; height: 28px; right: 0; top: 0; background: linear-gradient(135deg, #fff 50%, color-mix(in srgb, var(--stkic-accent) 35%, #e5e7eb) 50%); border-bottom-left-radius: 10px; box-shadow: -1px 1px 0 0 rgba(0,0,0,.05) inset; }

/* ── 31 · Dashed Border ─────────────────────────────────────── */
.stkic-dashed-border { background: #fff; padding: 20px; border-radius: 12px; border: 2px dashed var(--stkic-accent); }

/* ── 32 · Dotted Border ─────────────────────────────────────── */
.stkic-dotted-border { background: #fff; padding: 20px; border-radius: 12px; border: 2px dotted var(--stkic-accent); }

/* ── 33 · Embossed ──────────────────────────────────────────── */
.stkic-embossed { background: #f7f7f7; padding: 22px; border-radius: 14px; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset, 0 6px 14px rgba(0,0,0,.08); }
.stkic-embossed .stkic-title { text-shadow: 0 1px 0 #fff; }

/* ── 34 · Debossed ──────────────────────────────────────────── */
.stkic-debossed { background: #f1f1f1; padding: 22px; border-radius: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.05) inset, 0 -1px 0 rgba(255,255,255,.6) inset; }

/* ── 35 · Frosted ───────────────────────────────────────────── */
.stkic-frosted { background: rgba(255,255,255,.55); backdrop-filter: blur(8px); padding: 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.6); }

/* ── 36 · Aurora Glow ───────────────────────────────────────── */
.stkic-aurora-glow { position: relative; padding: 26px; border-radius: 16px; background: #0b1220; color: #fff; overflow: hidden; }
.stkic-aurora-glow::before { content: ''; position: absolute; inset: -40% -20% auto -20%; height: 140%; background: conic-gradient(from 180deg at 50% 50%, color-mix(in srgb, var(--stkic-accent) 70%, #fff), #22d3ee, #a78bfa, #f472b6, color-mix(in srgb, var(--stkic-accent) 70%, #fff)); filter: blur(24px); opacity: .5; }

/* ── 37 · Plaid Panel ───────────────────────────────────────── */
.stkic-plaid-panel { padding: 22px; border-radius: 12px; background: repeating-linear-gradient(0deg, #fff, #fff 16px, color-mix(in srgb, var(--stkic-accent) 6%, #fff) 16px, color-mix(in srgb, var(--stkic-accent) 6%, #fff) 32px), repeating-linear-gradient(90deg, transparent, transparent 16px, color-mix(in srgb, var(--stkic-accent) 4%, #fff) 16px, color-mix(in srgb, var(--stkic-accent) 4%, #fff) 32px); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* ── 38 · Checker ───────────────────────────────────────────── */
.stkic-checker { padding: 22px; border-radius: 12px; background: conic-gradient(#fff 25%, color-mix(in srgb, var(--stkic-accent) 10%, #f4f4f5) 0 50%, #fff 0 75%, color-mix(in srgb, var(--stkic-accent) 10%, #f4f4f5) 0) 0 0/28px 28px; }

/* ── 39 · Mesh Gradient ─────────────────────────────────────── */
.stkic-mesh-gradient { position: relative; padding: 26px; border-radius: 16px; color: #111; overflow: hidden; }
.stkic-mesh-gradient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 120px at 20% 10%, color-mix(in srgb, var(--stkic-accent) 40%, #f0abfc), transparent 60%), radial-gradient(140px 140px at 80% 0%, #22d3ee, transparent 60%), radial-gradient(140px 140px at 50% 100%, #f59e0b, transparent 60%); opacity: .5; }
.stkic-mesh-gradient .stkic-icon i { color: var(--stkic-accent); }
.stkic-mesh-gradient .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 40 · Shine Sweep ───────────────────────────────────────── */
.stkic-shine-sweep { position: relative; padding: 24px; border-radius: 16px; background: #fff; overflow: hidden; }
.stkic-shine-sweep::before { content: ''; position: absolute; top: 0; left: -50%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #ffffff 60%, transparent), transparent); transform: skewX(-20deg); transition: left .6s; }
.stkic-shine-sweep:hover::before { left: 120%; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	.stkic-pill {
		padding: 12px 16px;
		gap: 10px;
	}
	.stkic-split-colour .stkic-icon-wrap {
		min-width: 64px;
		padding: 18px;
	}
	.stkic-flip-card {
		min-height: 160px;
	}
}