/* Free tool call-to-action box inside blog posts. */
.zt-cta { --zt-cat: #2563eb; display: flex; align-items: center; gap: 16px; margin: 32px 0; padding: 18px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--zt-cat) 30%, transparent); background: color-mix(in srgb, var(--zt-cat) 7%, #fff); }
.zt-cta-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--zt-cat); }
.zt-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 15px; line-height: 1.45; color: #2A2A26; }
.zt-cta-text strong { font-size: 17px; color: #0E0E0C; }
.zt-cta-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--zt-cat); }
.zt-cta-btn, .zt-cta-btn:visited { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: #0E0E0C; color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none !important; }
.zt-cta-btn:hover { background: #2A2A26; color: #C5F04A !important; }
@media (max-width: 600px) {
	.zt-cta { flex-wrap: wrap; }
	.zt-cta-btn { width: 100%; justify-content: center; }
}

/* ---------- Glossy 3D icon tiles (pure CSS) ---------- */
.zt-3d { --zt-3d-s: 56px; --zt-3d-c: #2563eb; --zt-3d-dark: color-mix(in srgb, var(--zt-3d-c) 62%, #000); --zt-3d-light: color-mix(in srgb, var(--zt-3d-c) 55%, #fff); position: relative; display: inline-block; flex: none; width: var(--zt-3d-s); height: var(--zt-3d-s); perspective: calc(var(--zt-3d-s) * 8); vertical-align: middle; }
.zt-3d-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.zt-3d-tile { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 28%; color: #fff; transform-style: preserve-3d; transform: rotateX(var(--zt-rx, 14deg)) rotateY(var(--zt-ry, -16deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
	background: linear-gradient(150deg, var(--zt-3d-light) 0%, var(--zt-3d-c) 52%, color-mix(in srgb, var(--zt-3d-c) 80%, #000) 100%);
	box-shadow: inset 0 calc(var(--zt-3d-s) * .04) calc(var(--zt-3d-s) * .03) rgba(255, 255, 255, .5), inset 0 calc(var(--zt-3d-s) * -.06) calc(var(--zt-3d-s) * .12) rgba(0, 0, 0, .22),
		0 1px 0 var(--zt-3d-dark), 0 2px 0 var(--zt-3d-dark), 0 3px 0 var(--zt-3d-dark), 0 4px 0 var(--zt-3d-dark), 0 5px 0 var(--zt-3d-dark), 0 6px 0 var(--zt-3d-dark),
		0 calc(var(--zt-3d-s) * .3) calc(var(--zt-3d-s) * .35) calc(var(--zt-3d-s) * -.12) color-mix(in srgb, var(--zt-3d-c) 70%, transparent); }
.zt-3d-tile svg { width: 52%; height: 52%; transform: translateZ(calc(var(--zt-3d-s) * .22)); filter: drop-shadow(0 1px 0 var(--zt-3d-dark)) drop-shadow(0 2px 0 var(--zt-3d-dark)) drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.zt-3d-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 70% 45% at 30% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
.zt-3d-shine::after { content: ""; position: absolute; top: -60%; left: -80%; width: 50%; height: 220%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: rotate(25deg); opacity: 0; }
.zt-3d-floor { position: absolute; left: 12%; right: 12%; bottom: calc(var(--zt-3d-s) * -.2); height: calc(var(--zt-3d-s) * .16); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--zt-3d-c) 45%, rgba(0, 0, 0, .35)), transparent); filter: blur(2px); }
.zt-3d.is-float .zt-3d-float { animation: zt-3d-float 5.5s ease-in-out infinite; animation-delay: var(--zt-delay, 0s); }
.zt-3d.is-float .zt-3d-floor { animation: zt-3d-floor 5.5s ease-in-out infinite; animation-delay: var(--zt-delay, 0s); }
.zt-3d.is-float .zt-3d-shine::after { animation: zt-3d-sheen 5.5s ease-in-out infinite; animation-delay: calc(var(--zt-delay, 0s) + 1.2s); }
@keyframes zt-3d-float { 0%, 100% { transform: translateY(0) rotateZ(0); } 50% { transform: translateY(calc(var(--zt-3d-s) * -.12)) rotateZ(-3deg); } }
@keyframes zt-3d-floor { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.78); opacity: .55; } }
@keyframes zt-3d-sheen { 0%, 70% { opacity: 0; left: -80%; } 75% { opacity: 1; } 100% { opacity: 0; left: 140%; } }
@media (prefers-reduced-motion: reduce) {
	.zt-3d .zt-3d-float, .zt-3d .zt-3d-floor, .zt-3d .zt-3d-shine::after { animation: none !important; }
	.zt-3d-tile { transition: none; }
}
.zt-cta .zt-3d { margin: 0 6px 8px 4px; }
@media (max-width: 600px) { .zt-cta .zt-3d { --zt-3d-s: 48px !important; } }