/* ==========================================
   ULTRAKIT HORIZONTAL SCROLL SHOWCASE
   ========================================== */
.ultrakit-hsc-wrapper { --hsc-a: #a29bfe; --hsc-w: 46vw; --hsc-h: 100vh; --hsc-r: 28px; --hsc-top: 0px; --hsc-bg: #0f0f23; --hsc-tx: #ffffff; --hsc-mu: rgba(255,255,255,0.72); position: relative; width: 100%; box-sizing: border-box; font-family: inherit; color: var(--hsc-tx); background: var(--hsc-bg); }
.ultrakit-hsc-wrapper *, .ultrakit-hsc-wrapper *::before, .ultrakit-hsc-wrapper *::after { box-sizing: border-box; }
.hsc-skin-light { --hsc-bg: #f5f4fc; --hsc-tx: #1a1a2e; --hsc-mu: #5f5f7a; }
.hsc-skin-gradient { --hsc-bg: linear-gradient(135deg, #2b1f6b, #0f3c73 60%, #0b6b6b); }
.ultrakit-hsc-sticky { position: sticky; top: var(--hsc-top); height: var(--hsc-h); overflow: hidden; display: flex; align-items: center; }
.ultrakit-hsc-track { display: flex; align-items: center; gap: 4vw; padding: 0 8vw; will-change: transform; }
.ultrakit-hsc-panel { flex: 0 0 var(--hsc-w); min-width: 280px; }
.ultrakit-hsc-panel.is-intro { flex-basis: 38vw; }
.ultrakit-hsc-introin h2 { margin: 0 0 16px; font-size: clamp(38px, 6vw, 84px); font-weight: 900; line-height: 1; letter-spacing: -2px; color: var(--hsc-tx); }
.ultrakit-hsc-introin p { margin: 0 0 26px; font-size: 18px; line-height: 1.6; color: var(--hsc-mu); max-width: 420px; }
.ultrakit-hsc-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hsc-a); }
.ultrakit-hsc-hint svg { flex-shrink: 0; width: 18px; height: 18px; animation: ukHscNudge 1.4s ease-in-out infinite; }
@keyframes ukHscNudge { 50% { transform: translateX(6px); } }

.ultrakit-hsc-card { display: flex; flex-direction: column; border-radius: var(--hsc-r); overflow: hidden; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.hsc-skin-light .ultrakit-hsc-card { background: #ffffff; border-color: #e8e8f2; box-shadow: 0 20px 50px rgba(20,20,50,0.08); }
.ultrakit-hsc-media { position: relative; height: calc(var(--hsc-h) * 0.5); min-height: 200px; background-size: cover; background-position: center; }
.ultrakit-hsc-num { position: absolute; right: 22px; bottom: 6px; font-size: 92px; font-weight: 900; line-height: 1; letter-spacing: -4px; color: rgba(255,255,255,0.32); }
.ultrakit-hsc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 30px 30px; }
.ultrakit-hsc-tag { padding: 5px 14px; border-radius: 30px; background: color-mix(in srgb, var(--hsc-a) 22%, transparent); color: var(--hsc-a); font-size: 12.5px; font-weight: 800; letter-spacing: 0.6px; }
.ultrakit-hsc-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--hsc-tx); }
.ultrakit-hsc-text { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--hsc-mu); }
.ultrakit-hsc-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 24px; background: var(--hsc-a); color: #14142b !important; border-radius: 40px; font-size: 14px; font-weight: 800; text-decoration: none !important; }
.ultrakit-hsc-btn svg { flex-shrink: 0; width: 16px; height: 16px; }

/* full-bleed */
.hsc-st-full .ultrakit-hsc-card { position: relative; height: calc(var(--hsc-h) * 0.78); background: none; border: 0; }
.hsc-st-full .ultrakit-hsc-media { position: absolute; inset: 0; height: 100%; }
.hsc-st-full .ultrakit-hsc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,28,0.05) 30%, rgba(10,10,28,0.85)); }
.hsc-st-full .ultrakit-hsc-body { position: relative; z-index: 2; margin-top: auto; }
.hsc-st-full .ultrakit-hsc-title, .hsc-st-full .ultrakit-hsc-text { color: #ffffff; }
.hsc-st-full .ultrakit-hsc-text { opacity: 0.85; }
/* minimal */
.hsc-st-minimal .ultrakit-hsc-card { background: none; border: 0; border-top: 2px solid color-mix(in srgb, var(--hsc-tx) 25%, transparent); border-radius: 0; box-shadow: none; }
.hsc-st-minimal .ultrakit-hsc-media { height: auto; min-height: 0; background: none !important; }
.hsc-st-minimal .ultrakit-hsc-num { position: static; display: block; padding: 20px 0 0; font-size: clamp(90px, 14vw, 200px); background: linear-gradient(135deg, var(--hsc-a), #00cec9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hsc-st-minimal .ultrakit-hsc-body { padding-left: 0; }

.ultrakit-hsc-progress { position: absolute; left: 8vw; right: 8vw; bottom: 34px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--hsc-tx) 18%, transparent); overflow: hidden; }
.ultrakit-hsc-pfill { display: block; height: 100%; width: 100%; background: var(--hsc-a); transform: scaleX(var(--hp, 0)); transform-origin: left; }
.ultrakit-hsc-counter { position: absolute; right: 8vw; top: 34px; font-size: 14px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--hsc-mu); }
.ultrakit-hsc-counter b { color: var(--hsc-a); font-size: 20px; }

/* editor + mobile fallbacks: plain sideways scroll */
.hsc-editor .ultrakit-hsc-sticky, .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-sticky { position: relative; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hsc-editor .ultrakit-hsc-track, .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-track { transform: none !important; }
.hsc-editor .ultrakit-hsc-panel, .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-panel { scroll-snap-align: center; }
.ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-sticky { position: relative; height: auto; overflow: visible; padding: 40px 0; }
.ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-track { flex-direction: column; align-items: stretch; padding: 0 20px; gap: 24px; transform: none !important; }
.ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-panel, .ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-panel.is-intro { flex: none; width: 100%; min-width: 0; }
.ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-progress, .ultrakit-hsc-wrapper.is-stack .ultrakit-hsc-counter, .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-progress, .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-counter, .hsc-editor .ultrakit-hsc-progress, .hsc-editor .ultrakit-hsc-counter { display: none; }
@media (max-width: 767px) { .ultrakit-hsc-wrapper.is-swipe .ultrakit-hsc-panel { flex-basis: 82vw; } .ultrakit-hsc-title { font-size: 24px; } }