/**
 * 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;
	/* Tokens scoped to the widget root, never :root. */
	--stkic-accent: #4f46e5;
	--stkic-accent-08: color-mix(in srgb, var(--stkic-accent) 8%,  transparent);
	--stkic-accent-12: color-mix(in srgb, var(--stkic-accent) 12%, transparent);
	--stkic-accent-24: color-mix(in srgb, var(--stkic-accent) 24%, transparent);
	--stkic-accent-ink: color-mix(in srgb, var(--stkic-accent) 78%, #000);
	--stkic-ink:     #111827;
	--stkic-ink-2:   #5b6472;   /* subtitle on light surfaces */
	--stkic-ink-dark:   #f3f4f6;
	--stkic-ink-2-dark: #c3c9d4; /* subtitle on dark surfaces */
	--stkic-border:  #e4e7ec;
	--stkic-surface: #ffffff;
	--stkic-shadow:  0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	--stkic-shadow-lg: 0 2px 4px rgba(16,24,40,.06), 0 18px 40px -12px rgba(16,24,40,.22);
}
.stkic-box *,
.stkic-box *::before,
.stkic-box *::after {
	box-sizing: border-box;
}
/* The icon container has a real default treatment: a tinted rounded square.
   Variants override it; without this the icon reads as a naked glyph. */
.stkic-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	min-width: 56px;
	flex-shrink: 0;
	border-radius: 14px;
	background: var(--stkic-accent-12);
	border: 1px solid var(--stkic-accent-24);
	color: var(--stkic-accent);
	transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.stkic-icon-wrap i   { color: var(--stkic-accent); }
.stkic-icon-wrap svg { fill:  var(--stkic-accent); }

/* Any variant that paints a decorative ::before/::after over the box must keep
   its own content above it. Four shipped variants were broken by omitting this. */
.stkic-spotlight > *,
.stkic-blob-shape > *,
.stkic-diagonal-cut > *,
.stkic-shine-sweep > * {
	position: relative;
	z-index: 1;
}
.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;
	color: var(--stkic-ink);
}
/* Explicit colour per surface — opacity is not a colour. */
.stkic-subtitle {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--stkic-ink-2);
}
/* Dark-surface variants opt in to the dark ink pair. */
.stkic-neon-pulse,
.stkic-spotlight,
.stkic-aurora-glow {
	--stkic-ink:   var(--stkic-ink-dark);
	--stkic-ink-2: var(--stkic-ink-2-dark);
}
.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;
	border: 0;
	border-radius: 0;
	justify-content: flex-start;
}
.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: 190px;
	width: 100%;
	cursor: pointer;
}
.stkic-flip-card .stkic-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 24px;
	border-radius: 16px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}
/* Front carries the icon AND the title, so it is never an empty slab. */
.stkic-flip-card .stkic-face-front {
	z-index: 2;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	box-shadow: var(--stkic-shadow);
	transform: rotateY(0deg);
}
.stkic-flip-card .stkic-face-back {
	background: var(--stkic-accent);
	border: 1px solid var(--stkic-accent);
	transform: rotateY(180deg);
	gap: 8px;
}
.stkic-flip-card .stkic-face-back .stkic-title,
.stkic-flip-card .stkic-face-back .stkic-subtitle { color: #fff; }
.stkic-flip-card:hover .stkic-face-front { transform: rotateY(-180deg); }
.stkic-flip-card:hover .stkic-face-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 · Rule Header ───────────────────────────────────────── */
/* Title owns a full-width header row under a hairline; the icon and the
   supporting line share the body row beneath it. */
.stkic-glass-card {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	padding: 18px 20px 20px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 12px;
	box-shadow: var(--stkic-shadow);
	backdrop-filter: none;
}
.stkic-glass-card::before { content: none; }
.stkic-glass-card .stkic-text { display: contents; }
.stkic-glass-card .stkic-title {
	grid-column: 1 / -1;
	grid-row: 1;
	font-size: 1.05rem;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--stkic-border);
}
.stkic-glass-card .stkic-icon-wrap {
	grid-column: 1;
	grid-row: 2;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 10px;
}
.stkic-glass-card .stkic-subtitle { grid-column: 2; grid-row: 2; }
.stkic-glass-card .stkic-icon i { color: var(--stkic-accent); }
.stkic-glass-card .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 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 ────────────────────────────────────────── */
/* The skewed band sits behind a padded header so the icon and title never
   collide; content is explicitly stacked above the decoration. */
.stkic-skew-panel {
	position: relative;
	align-items: center;
	gap: 16px;
	padding: 116px 24px 24px;
	background: var(--stkic-surface);
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--stkic-border);
}
.stkic-skew-panel::before {
	content: '';
	position: absolute;
	inset: -50px -10% auto -10%;
	height: 140px;
	background: var(--stkic-accent);
	transform: skewY(-7deg);
	z-index: 0;
}
.stkic-skew-panel .stkic-icon-wrap {
	position: absolute;
	top: 34px; left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.5);
}
.stkic-skew-panel .stkic-icon i, .stkic-skew-panel .stkic-icon svg { color: #fff; fill: #fff; }
.stkic-skew-panel .stkic-text { position: relative; z-index: 1; }

/* ── 15 · Ribbon Top ────────────────────────────────────────── */
/* Real card with a ribbon tab hanging off its top edge. */
.stkic-ribbon-top {
	position: relative;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	padding: 34px 24px 24px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 12px;
	box-shadow: var(--stkic-shadow);
}
/* The tab hangs above the card's top edge and paints in front of the card's
   own background — a z-index:-1 layer would disappear behind it. */
.stkic-ribbon-top::before {
	content: '';
	position: absolute;
	top: -12px; left: 24px;
	width: 92px; height: 44px;
	background: var(--stkic-accent);
	border-radius: 6px 6px 0 0;
}
.stkic-ribbon-top::after {
	content: '';
	position: absolute;
	top: 32px; left: 24px;
	width: 92px; height: 0;
	border-left: 46px solid var(--stkic-accent);
	border-right: 46px solid var(--stkic-accent);
	border-bottom: 12px solid transparent;
	box-sizing: content-box;
	width: 0;
}
.stkic-ribbon-top .stkic-icon-wrap,
.stkic-ribbon-top .stkic-text { position: relative; z-index: 1; }

/* ── 16 · Icon Right ────────────────────────────────────────── */
.stkic-icon-right {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 20px 22px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
}
.stkic-icon-right .stkic-text { flex: 1; text-align: right; }

/* ── 17 · Inline (icon beside title) ────────────────────────── */
/* The icon sits on the title line; the subtitle spans the full width below. */
.stkic-inline {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 12px;
	row-gap: 6px;
	align-items: center;
	padding: 20px 22px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	text-align: left;
}
.stkic-inline .stkic-icon-wrap {
	width: 40px; height: 40px; min-width: 40px;
	border-radius: 10px;
	grid-column: 1; grid-row: 1;
}
.stkic-inline .stkic-icon i   { font-size: 18px; }
.stkic-inline .stkic-icon svg { width: 18px; height: 18px; }
.stkic-inline .stkic-text { display: contents; }
.stkic-inline .stkic-title    { grid-column: 2; grid-row: 1; }
.stkic-inline .stkic-subtitle { grid-column: 1 / -1; grid-row: 2; }

/* ── 18 · Stack Layers ──────────────────────────────────────── */
/* z-index:-1 layers would sit behind the box's own background, so the box has
   no background of its own — the inner surface carries it instead. */
.stkic-stack-layers {
	position: relative;
	align-items: center;
	gap: 14px;
	padding: 24px;
	/* The surface is an inset shadow rather than a background, so the
	   z-index:-1 layers behind it are not hidden by the box's own paint. */
	background: transparent;
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	margin: 0 12px 12px 0;
	box-shadow: inset 0 0 0 999px var(--stkic-surface), var(--stkic-shadow);
}
.stkic-stack-layers::before,
.stkic-stack-layers::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: color-mix(in srgb, var(--stkic-accent) 10%, #fff);
	border: 1px solid var(--stkic-accent-24);
	z-index: -1;
	transition: transform .25s ease;
}
.stkic-stack-layers::before { transform: translate(6px, 6px); }
.stkic-stack-layers::after  { transform: translate(12px, 12px); opacity: .7; }
.stkic-stack-layers:hover::before { transform: translate(9px, 9px); }
.stkic-stack-layers:hover::after  { transform: translate(18px, 18px); }

/* ── 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 · Stat Block ────────────────────────────────────────── */
/* Number-led layout: the figure is the hero, icon reduced to a small chip. */
.stkic-stat-block {
	align-items: flex-start;
	gap: 10px;
	padding: 24px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	text-align: left;
}
.stkic-stat-block .stkic-icon-wrap {
	width: 36px; height: 36px; min-width: 36px;
	border-radius: 9px;
}
.stkic-stat-block .stkic-icon i   { font-size: 16px; }
.stkic-stat-block .stkic-icon svg { width: 16px; height: 16px; }
.stkic-stat-block .stkic-stat {
	display: block;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--stkic-accent-ink);
	margin-bottom: 2px;
}
.stkic-stat-block .stkic-title { font-size: .95rem; }

/* ── 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 · Top Bar Panel ─────────────────────────────────────── */
.stkic-top-bar {
	align-items: flex-start;
	gap: 14px;
	padding: 26px 22px 22px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	text-align: left;
	position: relative;
}
.stkic-top-bar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--stkic-accent), color-mix(in srgb, var(--stkic-accent) 50%, #06b6d4));
}

/* ── 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 · Split Header ──────────────────────────────────────── */
/* Accent header band holds the icon; the copy sits on a white body below. */
.stkic-split-header {
	gap: 0;
	padding: 0;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	overflow: hidden;
	align-items: stretch;
}
.stkic-split-header .stkic-icon-wrap {
	width: 100%;
	min-width: 0;
	height: 84px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(135deg, var(--stkic-accent), color-mix(in srgb, var(--stkic-accent) 60%, #0ea5e9));
}
.stkic-split-header .stkic-icon i,
.stkic-split-header .stkic-icon svg { color: #fff; fill: #fff; font-size: 30px; }
.stkic-split-header .stkic-text { padding: 18px 22px 22px; }

/* ── 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 · Timeline Node ─────────────────────────────────────── */
/* The icon is a node on a rule that runs down past the copy, so a column of
   these boxes reads as a sequence rather than a stack of cards. */
.stkic-dashed-border {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	padding: 2px 0 22px;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.stkic-dashed-border::before {
	content: '';
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, var(--stkic-accent-24), transparent);
}
.stkic-dashed-border .stkic-text { display: contents; }
.stkic-dashed-border .stkic-icon-wrap {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1;
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 999px;
	background: var(--stkic-surface);
	border: 2px solid var(--stkic-accent-24);
}
.stkic-dashed-border .stkic-title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 1.05rem;
}
.stkic-dashed-border .stkic-subtitle {
	grid-column: 2;
	grid-row: 2;
	margin-top: 10px;
}

/* ── 32 · Two-Tone Panel ────────────────────────────────────── */
/* Tinted upper half, white lower half, icon straddling the boundary. */
.stkic-two-tone {
	position: relative;
	align-items: center;
	gap: 14px;
	padding: 104px 22px 24px;
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(
		to bottom,
		var(--stkic-accent-12) 0,
		var(--stkic-accent-12) 76px,
		var(--stkic-surface) 76px,
		var(--stkic-surface) 100%
	);
}
.stkic-two-tone .stkic-icon-wrap {
	position: absolute;
	top: 48px; left: 50%;
	transform: translateX(-50%);
	background: var(--stkic-surface);
	border-color: var(--stkic-accent-24);
	box-shadow: var(--stkic-shadow);
}

/* ── 33 · Embossed ──────────────────────────────────────────── */
.stkic-embossed { background: #f7f7f7; padding: 22px; gap: 14px; 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 · Watermark Icon ────────────────────────────────────── */
/* Oversized tinted glyph behind the copy; content is explicitly above it. */
.stkic-watermark {
	position: relative;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
}
.stkic-watermark .stkic-icon-wrap {
	position: absolute;
	top: -18px; right: -18px;
	width: 132px; height: 132px; min-width: 132px;
	border: 0;
	border-radius: 0;
	background: transparent;
	pointer-events: none;
}
.stkic-watermark .stkic-icon     { font-size: 104px; line-height: 1; }
.stkic-watermark .stkic-icon i   { font-size: 104px; color: var(--stkic-accent-12); }
.stkic-watermark .stkic-icon svg { width: 104px; height: 104px; fill: var(--stkic-accent-12); }
.stkic-watermark .stkic-text { position: relative; z-index: 1; }
.stkic-watermark .stkic-title { font-size: 1.15rem; }

/* ── 35 · Left Rail Callout ─────────────────────────────────── */
.stkic-left-rail {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px;
	background: var(--stkic-accent-08);
	border-left: 4px solid var(--stkic-accent);
	border-radius: 0 12px 12px 0;
	text-align: left;
}
.stkic-left-rail .stkic-icon-wrap {
	width: 40px; height: 40px; min-width: 40px;
	border-radius: 10px;
	background: var(--stkic-surface);
}
.stkic-left-rail .stkic-icon i   { font-size: 18px; }
.stkic-left-rail .stkic-icon svg { width: 18px; height: 18px; }

/* ── 36 · Aurora Glow ───────────────────────────────────────── */
/* The glow is dimmed and the copy sits above it, so text stays legible. */
.stkic-aurora-glow { position: relative; align-items: center; gap: 14px; 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(30px); opacity: .35; }
.stkic-aurora-glow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,.35), rgba(11,18,32,.75)); }
.stkic-aurora-glow .stkic-icon-wrap,
.stkic-aurora-glow .stkic-text { position: relative; z-index: 1; }
.stkic-aurora-glow .stkic-icon-wrap { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
.stkic-aurora-glow .stkic-icon i   { color: #fff; }
.stkic-aurora-glow .stkic-icon svg { fill: #fff; }

/* ── 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 · Grid Lines ────────────────────────────────────────── */
/* A checkerboard reads as a missing-image placeholder; a faint grid rule does
   not, and still gives a patterned surface. */
.stkic-grid-lines {
	align-items: center;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--stkic-border);
	border-radius: 12px;
	background:
		linear-gradient(var(--stkic-accent-08) 1px, transparent 1px) 0 0 / 100% 24px,
		linear-gradient(90deg, var(--stkic-accent-08) 1px, transparent 1px) 0 0 / 24px 100%,
		var(--stkic-surface);
}

/* ── 39 · Ledger Row ────────────────────────────────────────── */
/* Not a card: a borderless list row on one baseline, title left, supporting
   line pushed to the right edge, hairline underneath. */
.stkic-mesh-gradient {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 18px;
	padding: 16px 2px;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid var(--stkic-border);
	overflow: visible;
	color: var(--stkic-ink);
}
.stkic-mesh-gradient::before { content: none; }
.stkic-mesh-gradient .stkic-text { display: contents; }
.stkic-mesh-gradient .stkic-icon-wrap {
	grid-column: 1;
	grid-row: 1;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 999px;
}
.stkic-mesh-gradient .stkic-title { grid-column: 2; grid-row: 1; }
.stkic-mesh-gradient .stkic-subtitle {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
}
.stkic-mesh-gradient .stkic-badge {
	position: static;
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	margin-top: 6px;
}
.stkic-mesh-gradient .stkic-icon i { color: var(--stkic-accent); }
.stkic-mesh-gradient .stkic-icon svg { fill: var(--stkic-accent); }

/* ── 40 · Corner Icon Panel ─────────────────────────────────── */
/* Icon parked in the top-right corner, copy left-aligned with room to breathe. */
.stkic-corner-icon {
	position: relative;
	align-items: flex-start;
	padding: 24px 84px 24px 24px;
	background: var(--stkic-surface);
	border: 1px solid var(--stkic-border);
	border-radius: 16px;
	text-align: left;
	min-height: 104px;
	justify-content: center;
}
.stkic-corner-icon .stkic-icon-wrap {
	position: absolute;
	top: 18px; right: 18px;
	width: 48px; height: 48px; min-width: 48px;
	border-radius: 50%;
}
.stkic-corner-icon .stkic-icon i   { font-size: 20px; }
.stkic-corner-icon .stkic-icon svg { width: 20px; height: 20px; }

/* =============================================================
   HOVER EFFECTS — selectable from the Hover Effect control, so a
   single layout covers what used to be nine near-identical presets.
   ============================================================= */
.stkic-box[class*="stkic-hv-"] { transition: transform .25s ease, box-shadow .25s ease; }

.stkic-hv-lift:hover  { transform: translateY(-3px); box-shadow: var(--stkic-shadow-lg); }
.stkic-hv-raise:hover { transform: translateY(-8px); box-shadow: var(--stkic-shadow-lg); }
.stkic-hv-tilt        { transform: perspective(800px) rotateX(0) rotateY(0); }
.stkic-hv-tilt:hover  { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-2px); box-shadow: var(--stkic-shadow-lg); }
.stkic-hv-glow:hover  { box-shadow: 0 0 0 3px var(--stkic-accent-24), var(--stkic-shadow-lg); }

.stkic-hv-underline .stkic-title {
	background: linear-gradient(90deg, var(--stkic-accent), var(--stkic-accent)) left bottom / 0 3px no-repeat;
	transition: background-size .25s ease;
	padding-bottom: 4px;
}
.stkic-hv-underline:hover .stkic-title { background-size: 100% 3px; }

.stkic-hv-icon-pop:hover .stkic-icon-wrap {
	transform: translateY(-3px) scale(1.06);
	background: var(--stkic-accent);
	border-color: var(--stkic-accent);
}
.stkic-hv-icon-pop:hover .stkic-icon i   { color: #fff; }
.stkic-hv-icon-pop:hover .stkic-icon svg { fill: #fff; }

.stkic-hv-shine { position: relative; overflow: hidden; }
.stkic-hv-shine::after {
	content: '';
	position: absolute;
	top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}
.stkic-hv-shine:hover::after { left: 130%; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.stkic-split-colour .stkic-icon-wrap { min-width: 68px; padding: 20px; }
	.stkic-corner-icon { padding-right: 76px; }
}

@media (max-width: 767px) {
	/* Every layout gets a phone treatment, not just three of them. */
	.stkic-box { --stkic-pad: 18px; }
	.stkic-icon-wrap { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; }
	.stkic-icon i    { font-size: 22px; }
	.stkic-icon svg  { width: 22px; height: 22px; }

	.stkic-pill { padding: 10px 14px; gap: 10px; }
	.stkic-pill .stkic-icon-wrap { width: 40px; height: 40px; min-width: 40px; }

	.stkic-circle-stack,
	.stkic-hexagon,
	.stkic-badge-pop,
	.stkic-gradient-ring,
	.stkic-neon-pulse { padding: 26px 18px 22px; gap: 14px; }

	.stkic-flat-minimal .stkic-icon-wrap { width: 48px; height: 48px; min-width: 48px; }
	.stkic-flat-minimal .stkic-icon i    { font-size: 30px; }

	/* Split colour becomes a stacked header on phones. */
	.stkic-split-colour { flex-direction: column; align-items: stretch; }
	.stkic-split-colour .stkic-icon-wrap { width: 100%; min-width: 0; height: 72px; padding: 0; }
	.stkic-split-colour .stkic-text { padding: 16px 18px 18px; }

	.stkic-flip-card { min-height: 170px; }
	.stkic-flip-card .stkic-face { padding: 18px; gap: 10px; }

	.stkic-corner-frame { padding: 26px 22px 22px; }
	.stkic-soft-shadow,
	.stkic-outline,
	.stkic-left-rail,
	.stkic-icon-right { padding: 16px 18px; gap: 12px; }

	.stkic-spotlight,
	.stkic-aurora-glow,
	.stkic-corner-icon,
	.stkic-watermark,
	.stkic-stat-block,
	.stkic-grid-lines,
	.stkic-plaid-panel,
	.stkic-striped,
	.stkic-embossed,
	.stkic-inset-shadow,
	.stkic-double-border,
	.stkic-diagonal-cut,
	.stkic-notched,
	.stkic-ticket,
	.stkic-sticker,
	.stkic-blob-shape,
	.stkic-stack-layers,
	.stkic-top-bar,
	.stkic-two-tone { padding: 18px; }

	.stkic-corner-icon { padding-right: 68px; }
	.stkic-corner-icon .stkic-icon-wrap { width: 40px; height: 40px; min-width: 40px; top: 14px; right: 14px; }
	.stkic-watermark .stkic-icon-wrap { width: 100px; height: 100px; min-width: 100px; }
	.stkic-watermark .stkic-icon i    { font-size: 80px; }

	.stkic-skew-panel { padding: 78px 18px 20px; }
	.stkic-skew-panel .stkic-icon-wrap { top: 26px; }
	.stkic-two-tone { padding-top: 50px; }
	.stkic-two-tone .stkic-icon-wrap { top: 42px; }
	.stkic-split-header .stkic-icon-wrap { height: 68px; }
	.stkic-split-header .stkic-text { padding: 14px 18px 18px; }
	.stkic-stat-block .stkic-stat { font-size: 2.1rem; }
	.stkic-inline { grid-template-columns: 36px 1fr; }
	.stkic-inline .stkic-icon-wrap { width: 36px; height: 36px; min-width: 36px; }
	.stkic-stack-layers { margin: 0 8px 8px 0; }
	.stkic-ribbon-top { padding: 30px 18px 20px; }

	/* Touch devices cannot hover: keep the flip readable by stacking. */
	.stkic-flip-card { perspective: none; min-height: 0; }
	.stkic-flip-card .stkic-face {
		position: relative;
		inset: auto;
		transform: none !important;
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
	}
	.stkic-flip-card .stkic-face-back { margin-top: 10px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.stkic-box,
	.stkic-box *,
	.stkic-box *::before,
	.stkic-box *::after {
		animation: none !important;
		transition: none !important;
	}
	.stkic-box:hover { transform: none !important; }
}