/* ==========================================
   ULTRAKIT INFO BOX — 12 skins
   ========================================== */
@property --ifxang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ultrakit-ifx { --a: #6c5ce7; --b: #00cec9; --card: #fff; --cols: 3; --cols-t: 2; --cols-m: 1; --gap: 28px; --r: 24px; --pad: 28px; --ts: 22px; --ratio: 1.6; width: 100%; box-sizing: border-box; font-family: inherit; }
.ultrakit-ifx *, .ultrakit-ifx *::before, .ultrakit-ifx *::after { box-sizing: border-box; }
.ifx-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }

.ifx-item { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r); overflow: hidden; text-decoration: none !important; color: inherit; isolation: isolate; box-shadow: 0 1px 2px rgba(20,20,43,.04), 0 18px 40px -18px rgba(20,20,43,.18); transition: transform .5s cubic-bezier(.22,.9,.3,1), box-shadow .5s ease; }
.ifx-h-lift .ifx-item:hover { transform: translateY(-9px); box-shadow: 0 2px 4px rgba(20,20,43,.05), 0 38px 66px -24px color-mix(in srgb, var(--a) 42%, rgba(20,20,43,.32)); }
.ifx-h-tilt .ifx-item { transform-style: preserve-3d; will-change: transform; }

.ifx-media { position: relative; display: block; aspect-ratio: var(--ratio); overflow: hidden; background: #14142b; }
.ifx-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.9,.3,1); }
.ifx-media .uks { height: 100%; aspect-ratio: auto; border-radius: 0; }
.ifx-item:hover .ifx-media img { transform: scale(1.07); }
.ifx-badge { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; padding: 6px 14px; border-radius: 30px; background: rgba(255,255,255,.92); color: #14142b; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.ifx-badge.is-inline { position: static; align-self: flex-start; margin-bottom: 12px; background: linear-gradient(120deg, var(--a), var(--b)); color: #fff; box-shadow: none; }

.ifx-ico { display: none; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; color: var(--a); background: color-mix(in srgb, var(--a) 12%, transparent); flex: 0 0 auto; }
.ifx-ico .uk-ico { width: 26px; height: 26px; }
.ifx-show-icon .ifx-ico { display: inline-flex; margin: calc(var(--pad) * .8) 0 0 var(--pad); }
.ifx-show-icon .ifx-ico + .ifx-body { padding-top: 16px; }

.ifx-body { display: flex; flex-direction: column; flex: 1; padding: var(--pad); min-width: 0; }
.ifx-kicker { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.ifx-title { margin: 0 0 10px; font-size: var(--ts); font-weight: 800; line-height: 1.22; letter-spacing: -.025em; color: var(--ink, var(--skin-ink, #14142b)); transition: color .3s; }
.ifx-text { margin: 0; font-size: 15.5px; line-height: 1.72; color: var(--mut, var(--skin-mut, #5f5f7a)); }
.ifx-list { list-style: none; margin: 18px 0 0; padding: 0; display: none; flex-direction: column; gap: 10px; }
.ifx-s-list .ifx-list, .ifx-s-reveal .ifx-list, .ifx-s-horizontal .ifx-list { display: flex; }
.ifx-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--mut, var(--skin-mut, #3d3d57)); }
.ifx-list svg { flex: 0 0 auto; color: var(--a); }
.ifx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.ifx-meta { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, var(--skin-ink, #14142b)); }
.ifx-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14.5px; font-weight: 700; color: var(--a); transition: gap .3s; }
.ifx-item:hover .ifx-more { gap: 11px; }
.ifx-al-center .ifx-body { text-align: center; align-items: center; }
.ifx-al-center .ifx-list { align-items: flex-start; }
.ifx-al-center .ifx-foot { width: 100%; }

/* reveal (shared class with Icon Box) */
.ifx-item.is-in { animation: ibxIn .8s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--i, 0) * 85ms); }
.ibx-reveal .ifx-item:not(.is-in) { opacity: 0; }

/* ---------- 2 · overlay ---------- */
.ifx-s-overlay, .ifx-s-reveal, .ifx-s-tilt, .ifx-s-gradient { --skin-ink: #fff; --skin-mut: rgba(255,255,255,.86); }
.ifx-s-overlay .ifx-item, .ifx-s-reveal .ifx-item { aspect-ratio: 1; justify-content: flex-end; color: #fff; }
.ifx-s-overlay .ifx-media, .ifx-s-reveal .ifx-media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; }
.ifx-s-overlay .ifx-item::after, .ifx-s-reveal .ifx-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,30,0) 30%, rgba(10,10,30,.9) 100%); transition: opacity .5s; }
.ifx-s-overlay .ifx-body { flex: 0 0 auto; transition: transform .6s cubic-bezier(.22,.9,.3,1); }
.ifx-s-overlay .ifx-item:hover .ifx-body { transform: translateY(-8px); }
.ifx-s-overlay .ifx-badge, .ifx-s-reveal .ifx-badge { z-index: 4; }
.ifx-s-overlay .ifx-more, .ifx-s-reveal .ifx-more { color: #fff; }
.ifx-s-overlay .ifx-list li { color: rgba(255,255,255,.9); }

/* ---------- 3 · hover reveal ---------- */
.ifx-s-reveal .ifx-body { flex: 0 0 auto; }
.ifx-s-reveal .ifx-text, .ifx-s-reveal .ifx-list, .ifx-s-reveal .ifx-foot { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; padding-top: 0; transition: max-height .7s cubic-bezier(.22,.9,.3,1), opacity .5s ease .1s, margin .5s; }
.ifx-s-reveal .ifx-item:hover .ifx-text { max-height: 140px; opacity: 1; }
.ifx-s-reveal .ifx-item:hover .ifx-list { max-height: 130px; opacity: 1; margin-top: 14px; }
.ifx-s-reveal .ifx-item:hover .ifx-foot { max-height: 60px; opacity: 1; padding-top: 16px; }
.ifx-s-reveal .ifx-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 40%, transparent), color-mix(in srgb, #0b0b1e 90%, var(--a))); opacity: 0; transition: opacity .6s ease; }
.ifx-s-reveal .ifx-item:hover::before { opacity: 1; }
.ifx-s-reveal .ifx-list li { color: rgba(255,255,255,.92); }
.ifx-s-reveal .ifx-list svg { color: #fff; }

/* ---------- 4 · horizontal ---------- */
.ifx-s-horizontal .ifx-item { flex-direction: row; }
.ifx-s-horizontal .ifx-media { flex: 0 0 42%; aspect-ratio: auto; min-height: 260px; }
.ifx-s-horizontal .ifx-body { justify-content: center; }
.ifx-s-horizontal .ifx-foot { margin-top: 0; }

/* ---------- 5 · floating icon ---------- */
.ifx-s-float .ifx-ico { display: inline-flex; position: relative; z-index: 3; align-self: center; width: 66px; height: 66px; margin: -33px auto 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 0 6px var(--card), 0 18px 34px -10px color-mix(in srgb, var(--a) 65%, transparent); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.ifx-s-float .ifx-item:hover .ifx-ico { transform: translateY(-6px) scale(1.06); }
.ifx-s-float .ifx-body { text-align: center; align-items: center; padding-top: 18px; }
.ifx-s-float .ifx-list { align-items: flex-start; }

/* ---------- 6 · gradient card ---------- */
.ifx-s-gradient .ifx-item { background: linear-gradient(160deg, var(--a), var(--b)); padding: 12px; box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--a) 70%, transparent); }
.ifx-s-gradient .ifx-media { border-radius: calc(var(--r) - 10px); }
.ifx-s-gradient .ifx-badge.is-inline { background: rgba(255,255,255,.22); }
.ifx-s-gradient .ifx-kicker { color: rgba(255,255,255,.85); }
.ifx-s-gradient .ifx-more, .ifx-s-gradient .ifx-list svg { color: #fff; }
.ifx-s-gradient .ifx-list li { color: rgba(255,255,255,.92); }
.ifx-s-gradient .ifx-badge { background: #fff; }

/* ---------- 7 · feature list + price ---------- */
.ifx-s-list .ifx-media { aspect-ratio: 2.3; }
.ifx-s-list .ifx-title { font-size: calc(var(--ts) + 2px); }
.ifx-s-list .ifx-meta { font-size: 22px; background: linear-gradient(120deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ifx-s-list .ifx-foot { border-top: 1px dashed rgba(20,20,43,.14); margin-top: auto; padding-top: 20px; }
.ifx-s-list .ifx-list { margin-bottom: 22px; }
.ifx-s-list .ifx-more { padding: 11px 20px; border-radius: 24px; background: linear-gradient(120deg, var(--a), var(--b)); color: #fff; box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--a) 60%, transparent); }
.ifx-s-list .ifx-list { margin-top: 20px; }

/* ---------- 8 · process step ---------- */
.ifx-s-step .ifx-item { background: none; box-shadow: none; border-radius: 0; overflow: visible; padding: 0; }
.ifx-s-step .ifx-num { display: block; font-size: 72px; line-height: 1; font-weight: 900; letter-spacing: -.06em; background: linear-gradient(135deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.ifx-s-step .ifx-ico { display: inline-flex; position: absolute; right: 0; top: 4px; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--a); box-shadow: 0 16px 30px -14px rgba(20,20,43,.3); }
.ifx-s-step .ifx-body { padding: 0; }
.ifx-s-step .ifx-item:not(:last-child)::after { content: ""; position: absolute; top: 34px; left: 110px; right: calc(var(--gap) * -1 + 76px); height: 2px; z-index: -1; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--a) 55%, transparent) 0 8px, transparent 8px 16px); }
.ifx-s-step.ifx-h-lift .ifx-item:hover { transform: translateY(-6px); box-shadow: none; }

/* ---------- 9 · gradient border ---------- */
.ifx-s-border .ifx-item { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--ifxang), var(--a), var(--b), #ff7eb3, var(--a)) border-box; }
.ifx-s-border .ifx-item:hover { animation: ifxSpin 3.5s linear infinite; }
@keyframes ifxSpin { to { --ifxang: 360deg; } }
.ifx-s-border .ifx-media { margin: 10px; border-radius: calc(var(--r) - 8px); }

/* ---------- 10 · offset frame ---------- */
.ifx-s-offset .ifx-item { background: none; box-shadow: none; overflow: visible; }
.ifx-s-offset .ifx-media { overflow: visible; background: none; margin: 0 16px 16px 0; z-index: 0; }
.ifx-s-offset .ifx-media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border-radius: var(--r); background: linear-gradient(135deg, var(--a), var(--b)); z-index: -1; transition: inset .5s cubic-bezier(.22,.9,.3,1); }
.ifx-s-offset .ifx-item:hover .ifx-media::before { inset: 8px -8px -8px 8px; }
.ifx-s-offset .ifx-media img, .ifx-s-offset .ifx-media .uks { border-radius: var(--r); }
.ifx-s-offset .ifx-item:hover .ifx-media img { transform: none; }
.ifx-s-offset .ifx-body { padding: 26px 4px 0; }
.ifx-s-offset.ifx-h-lift .ifx-item:hover { box-shadow: none; transform: translateY(-6px); }

/* ---------- 11 · minimal row ---------- */
.ifx-s-minimal .ifx-item { flex-direction: row; align-items: flex-start; gap: 22px; background: none; box-shadow: none; border-radius: 0; overflow: visible; padding: 28px 0; border-bottom: 1px solid rgba(20,20,43,.1); }
.ifx-s-minimal .ifx-ico { display: inline-flex; width: 60px; height: 60px; border-radius: 50%; transition: background .3s, color .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.ifx-s-minimal .ifx-item:hover .ifx-ico { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; transform: scale(1.08); }
.ifx-s-minimal .ifx-body { padding: 0; }
.ifx-s-minimal .ifx-item:hover .ifx-title { color: var(--a); }
.ifx-s-minimal.ifx-h-lift .ifx-item:hover { transform: translateX(8px); box-shadow: none; }
.ifx-s-minimal .ifx-foot { padding-top: 14px; }
.ifx-s-minimal .ifx-more { margin-left: 0; }

/* ---------- 12 · 3D tilt ---------- */
.ifx-s-tilt .ifx-item { aspect-ratio: .96; justify-content: flex-end; color: #fff; }
.ifx-s-tilt .ifx-media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
.ifx-s-tilt .ifx-body { flex: 0 0 auto; margin: 14px; padding: 22px; border-radius: calc(var(--r) - 8px); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); transform: translateZ(50px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.ifx-s-tilt .ifx-ico { display: inline-flex; position: absolute; left: 18px; top: 18px; z-index: 3; background: rgba(255,255,255,.9); }
.ifx-s-tilt .ifx-badge { left: auto; right: 16px; }
.ifx-s-tilt .ifx-more { color: #fff; }
.ifx-s-tilt .ifx-list li { color: rgba(255,255,255,.92); }

@media (max-width: 1024px) {
	.ifx-grid { grid-template-columns: repeat(var(--cols-t), minmax(0, 1fr)); }
	.ifx-s-step .ifx-item::after { display: none; }
	.ifx-s-horizontal .ifx-media { flex-basis: 38%; min-height: 220px; }
}
@media (max-width: 767px) {
	.ifx-grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); }
	.ifx-s-horizontal .ifx-item { flex-direction: column; }
	.ifx-s-horizontal .ifx-media { flex-basis: auto; min-height: 0; aspect-ratio: var(--ratio); }
	.ifx-s-overlay .ifx-item, .ifx-s-reveal .ifx-item, .ifx-s-tilt .ifx-item { aspect-ratio: .95; }
	.ifx-s-reveal .ifx-text, .ifx-s-reveal .ifx-list, .ifx-s-reveal .ifx-foot { max-height: none; opacity: 1; margin-top: 8px; }
	.ifx-s-reveal .ifx-item::before { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .ifx-item.is-in { animation: none; } .ibx-reveal .ifx-item:not(.is-in) { opacity: 1; } .ifx-item, .ifx-media img { transition: none !important; animation: none !important; } }