/* ==========================================
   ULTRAKIT FLIP BOX — 10 effects
   ========================================== */
.ultrakit-flx { --a: #6c5ce7; --b: #00cec9; --dd1: #14142b; --dd2: #2b1f6b; --cols: 3; --cols-t: 2; --cols-m: 1; --h: 400px; --gap: 28px; --r: 26px; --pad: 32px; --dur: 800ms; --persp: 1400px; --ts: 26px; width: 100%; box-sizing: border-box; font-family: inherit; overflow-x: clip; }
.ultrakit-flx *, .ultrakit-flx *::before, .ultrakit-flx *::after { box-sizing: border-box; }
.flx-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.flx-item { position: relative; height: var(--h); perspective: var(--persp); outline: none; cursor: pointer; --dw: 360px; --dh: 400px; --rx: 0deg; --ry: 0deg; }
.flx-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--dur) cubic-bezier(.45,.15,.2,1); }
.flx-face { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; color: #fff; box-shadow: 0 2px 4px rgba(20,20,43,.05), 0 26px 50px -22px rgba(20,20,43,.4); transition: opacity var(--dur) ease, transform var(--dur) cubic-bezier(.45,.15,.2,1), filter var(--dur) ease; }
.flx-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #14142b; }
.flx-shade { position: absolute; inset: 0; pointer-events: none; }
.flx-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: var(--pad); }
.flx-title { margin: 0 0 10px; font-size: var(--ts); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: inherit; }
.flx-text { margin: 0; font-size: 15.5px; line-height: 1.7; opacity: .88; }
.flx-al-center .flx-in { text-align: center; align-items: center; }
.flx-al-center .flx-list { align-items: flex-start; text-align: left; }

/* icon */
.flx-ico { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 18px; border-radius: 22px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.flx-sh-circle .flx-ico { border-radius: 50%; }
.flx-sh-hex .flx-ico { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.flx-sh-none .flx-ico { background: none; box-shadow: none; width: auto; height: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
.flx-ico .uk-ico { width: 30px; height: 30px; }
.flx-badge { position: absolute; right: 18px; top: 18px; z-index: 3; 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; }
.flx-copy { margin-top: auto; }
.flx-hint { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px; padding: 8px 14px; border-radius: 30px; background: rgba(255,255,255,.16); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.flx-hint svg { animation: flxSpinIco 4s linear infinite; }
@keyframes flxSpinIco { to { transform: rotate(360deg); } }

/* ---------- front skins ---------- */
.flx-f-gradient .flx-front { background: linear-gradient(150deg, var(--a), var(--b)); }
.flx-f-gradient .flx-front .flx-bg, .flx-f-dark .flx-front .flx-bg { display: none; }
.flx-f-gradient .flx-front::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); }
.flx-f-gradient .flx-front::after { content: ""; position: absolute; left: -40px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0,0,0,.1); }
.flx-f-image .flx-front .flx-shade, .flx-f-glass .flx-front .flx-shade { background: linear-gradient(180deg, rgba(10,10,30,.05) 20%, rgba(10,10,30,.86)); }
.flx-f-image .flx-front .flx-bg, .flx-f-glass .flx-front .flx-bg { background-image: linear-gradient(150deg, var(--a), var(--b)); }
.flx-f-image .flx-front .flx-bg[style], .flx-f-glass .flx-front .flx-bg[style] { background-color: transparent; }
.flx-f-glass .flx-front .flx-copy { padding: 20px 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); }
.flx-f-light .flx-front { background: #fff; color: #14142b; box-shadow: 0 2px 4px rgba(20,20,43,.05), 0 26px 50px -22px rgba(20,20,43,.3), inset 0 0 0 1px rgba(20,20,43,.06); }
.flx-f-light .flx-front .flx-bg { display: none; }
.flx-f-light .flx-front .flx-ico { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--a) 60%, transparent); }
.flx-f-light .flx-front .flx-text { opacity: .7; }
.flx-f-light .flx-front .flx-hint { background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--a); }
.flx-f-dark .flx-front { background: linear-gradient(160deg, #1c1c3b, #101026); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 26px 50px -22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.flx-f-dark .flx-front .flx-ico { color: var(--b); background: color-mix(in srgb, var(--a) 20%, transparent); box-shadow: 0 0 40px -4px color-mix(in srgb, var(--a) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,.1); }

/* ---------- back skins ---------- */
.flx-back .flx-bg { display: none; }
.flx-b-dark .flx-back { background: linear-gradient(160deg, var(--dd1), var(--dd2)); }
.flx-b-dark .flx-back::before { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 55%, transparent), transparent 70%); }
.flx-b-gradient .flx-back { background: linear-gradient(150deg, var(--b), var(--a)); }
.flx-b-light .flx-back { background: #fff; color: #14142b; box-shadow: 0 2px 4px rgba(20,20,43,.05), 0 26px 50px -22px rgba(20,20,43,.3), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 40%, transparent); }
.flx-b-light .flx-back .flx-list li { color: #3d3d57; }
.flx-b-light .flx-back .flx-list svg { color: var(--a); }
.flx-b-accent .flx-back { background: var(--a); }
.flx-b-blur .flx-back { background: #14142b; }
.flx-b-blur .flx-back .flx-bg { display: block; inset: -20px; filter: blur(14px) brightness(.55) saturate(1.3); background-image: linear-gradient(150deg, var(--a), var(--b)); }
.flx-b-blur .flx-back .flx-bg[style] { background-color: transparent; }
.flx-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flx-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; opacity: .95; }
.flx-list svg { flex: 0 0 auto; }
.flx-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 13px 24px; border-radius: 30px; background: #fff; color: #14142b !important; font-weight: 800; font-size: 14.5px; text-decoration: none !important; box-shadow: 0 14px 28px -12px rgba(0,0,0,.4); transition: gap .3s, transform .3s, box-shadow .3s; }
.flx-btn:hover { gap: 12px; transform: translateY(-2px); }
.flx-b-light .flx-btn { background: linear-gradient(120deg, var(--a), var(--b)); color: #fff !important; }
.flx-al-center .flx-btn { align-self: center; }
.flx-back .flx-text { margin-bottom: 4px; }

/* ---------- effects ---------- */
.flx-e-flip-y .flx-back { transform: rotateY(180deg); }
.flx-e-flip-y :is(.flx-item.is-on, .flx-item:focus-visible) .flx-card, .flx-e-flip-y.flx-t-hover .flx-item:hover .flx-card { transform: rotateY(180deg); }

.flx-e-flip-x .flx-back { transform: rotateX(180deg); }
.flx-e-flip-x :is(.flx-item.is-on, .flx-item:focus-visible) .flx-card, .flx-e-flip-x.flx-t-hover .flx-item:hover .flx-card { transform: rotateX(180deg); }

.flx-e-flip-diag .flx-back { transform: rotate3d(1, 1, 0, 180deg); }
.flx-e-flip-diag :is(.flx-item.is-on, .flx-item:focus-visible) .flx-card, .flx-e-flip-diag.flx-t-hover .flx-item:hover .flx-card { transform: rotate3d(1, 1, 0, 180deg); }

.flx-e-cube-y .flx-card { transform: translateZ(calc(var(--dw) * -.5)); }
.flx-e-cube-y .flx-front { transform: translateZ(calc(var(--dw) * .5)); }
.flx-e-cube-y .flx-back { transform: rotateY(90deg) translateZ(calc(var(--dw) * .5)); }
.flx-e-cube-y :is(.flx-item.is-on, .flx-item:focus-visible) .flx-card, .flx-e-cube-y.flx-t-hover .flx-item:hover .flx-card { transform: translateZ(calc(var(--dw) * -.5)) rotateY(-90deg); }

.flx-e-cube-x .flx-card { transform: translateZ(calc(var(--dh) * -.5)); }
.flx-e-cube-x .flx-front { transform: translateZ(calc(var(--dh) * .5)); }
.flx-e-cube-x .flx-back { transform: rotateX(-90deg) translateZ(calc(var(--dh) * .5)); }
.flx-e-cube-x :is(.flx-item.is-on, .flx-item:focus-visible) .flx-card, .flx-e-cube-x.flx-t-hover .flx-item:hover .flx-card { transform: translateZ(calc(var(--dh) * -.5)) rotateX(90deg); }

/* flat effects share: back sits on top, hidden until active */
.flx-e-slide-up .flx-card, .flx-e-slide-left .flx-card, .flx-e-zoom .flx-card, .flx-e-spin .flx-card, .flx-e-tilt .flx-card { transform-style: flat; }
.flx-e-slide-up .flx-face, .flx-e-slide-left .flx-face, .flx-e-zoom .flx-face, .flx-e-spin .flx-face, .flx-e-tilt .flx-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
.flx-e-slide-up .flx-back, .flx-e-slide-left .flx-back, .flx-e-zoom .flx-back, .flx-e-spin .flx-back, .flx-e-tilt .flx-back { pointer-events: none; }

.flx-e-slide-up .flx-back { transform: translateY(102%); }
.flx-e-slide-up :is(.flx-item.is-on, .flx-item:focus-visible) .flx-back, .flx-e-slide-up.flx-t-hover .flx-item:hover .flx-back { transform: none; pointer-events: auto; }
.flx-e-slide-up :is(.flx-item.is-on, .flx-item:focus-visible) .flx-front, .flx-e-slide-up.flx-t-hover .flx-item:hover .flx-front { transform: translateY(-14%) scale(.94); filter: brightness(.7); }

.flx-e-slide-left .flx-back { transform: translateX(102%); }
.flx-e-slide-left :is(.flx-item.is-on, .flx-item:focus-visible) .flx-back, .flx-e-slide-left.flx-t-hover .flx-item:hover .flx-back { transform: none; pointer-events: auto; }
.flx-e-slide-left :is(.flx-item.is-on, .flx-item:focus-visible) .flx-front, .flx-e-slide-left.flx-t-hover .flx-item:hover .flx-front { transform: translateX(-14%) scale(.94); filter: brightness(.7); }

.flx-e-zoom .flx-back { opacity: 0; transform: scale(.82); }
.flx-e-zoom :is(.flx-item.is-on, .flx-item:focus-visible) .flx-back, .flx-e-zoom.flx-t-hover .flx-item:hover .flx-back { opacity: 1; transform: none; pointer-events: auto; }
.flx-e-zoom :is(.flx-item.is-on, .flx-item:focus-visible) .flx-front, .flx-e-zoom.flx-t-hover .flx-item:hover .flx-front { opacity: 0; transform: scale(1.18); }

.flx-e-spin .flx-back { opacity: 0; transform: rotate(-24deg) scale(.6); }
.flx-e-spin :is(.flx-item.is-on, .flx-item:focus-visible) .flx-back, .flx-e-spin.flx-t-hover .flx-item:hover .flx-back { opacity: 1; transform: none; pointer-events: auto; }
.flx-e-spin :is(.flx-item.is-on, .flx-item:focus-visible) .flx-front, .flx-e-spin.flx-t-hover .flx-item:hover .flx-front { opacity: 0; transform: rotate(24deg) scale(.6); }

.flx-e-tilt .flx-card { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.flx-e-tilt .flx-back { opacity: 0; filter: blur(10px); transform: scale(1.06); }
.flx-e-tilt :is(.flx-item.is-on, .flx-item:focus-visible) .flx-back, .flx-e-tilt.flx-t-hover .flx-item:hover .flx-back { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.flx-e-tilt :is(.flx-item.is-on, .flx-item:focus-visible) .flx-front, .flx-e-tilt.flx-t-hover .flx-item:hover .flx-front { opacity: 0; filter: blur(8px); transform: scale(.94); }

/* reveal */
.flx-reveal .flx-item:not(.is-in) { opacity: 0; }
.flx-reveal .flx-item.is-in { animation: flxIn .9s cubic-bezier(.22,.9,.3,1) backwards; animation-delay: calc(var(--i, 0) * 100ms); }
@keyframes flxIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }

@media (max-width: 1024px) { .flx-grid { grid-template-columns: repeat(var(--cols-t), minmax(0, 1fr)); } }
@media (max-width: 767px) { .flx-grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); } .flx-item { height: max(var(--h), 380px); } .flx-in { padding: calc(var(--pad) * .85); } }
@media (prefers-reduced-motion: reduce) { .flx-card, .flx-face { transition-duration: .01ms !important; } .flx-reveal .flx-item:not(.is-in) { opacity: 1; } .flx-reveal .flx-item.is-in { animation: none; } .flx-hint svg { animation: none; } }