/* ==========================================
   ULTRAKIT VISUAL TABS — scroll-driven showcase
   ========================================== */
.ultrakit-vtb-wrapper { --vtb-ts: 44px; --vtb-r: 26px; --vtb-on: #0b0b1e; --vtb-off: #c9c9da; --vtb-acc: #6c5ce7; --vtb-txt: #5a5a75; --vtb-lw: 38%; --vtb-ratio: 1.35; --vtb-time: 4s; --vtb-steps: 9; --vtb-per: 70vh; --vtb-top: 96px; --vtb-fill: 0; width: 100%; box-sizing: border-box; font-family: inherit; }
.ultrakit-vtb-wrapper *, .ultrakit-vtb-wrapper *::before, .ultrakit-vtb-wrapper *::after { box-sizing: border-box; }
.ultrakit-vtb-wrapper em { font-style: normal; font-weight: inherit; background: linear-gradient(90deg, var(--vtb-acc), #00cec9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* scroll mode: tall track + sticky viewport */
.vtb-mode-scroll:not(.is-editor) .vtb-track { height: calc(var(--vtb-steps) * var(--vtb-per) + 100vh - var(--vtb-top)); }
.vtb-mode-scroll:not(.is-editor) .vtb-sticky { position: sticky; top: var(--vtb-top); height: calc(100vh - var(--vtb-top)); display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 3.5vh, 40px) 0 24px; }

.vtb-head { margin-bottom: clamp(30px, 5.5vh, 56px); }
.vtb-eyebrow { display: inline-block; margin-bottom: 8px; padding: 6px 14px; border-radius: 30px; background: color-mix(in srgb, var(--vtb-acc) 12%, transparent); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vtb-acc); }
.vtb-head-center .vtb-head { text-align: center; }
.vtb-heading { margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--vtb-on); }

.vtb-layout { display: grid; grid-template-columns: var(--vtb-lw) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; min-height: 0; }
.vtb-side-right .vtb-layout { grid-template-columns: 1fr var(--vtb-lw); }
.vtb-side-right .vtb-left { order: 2; }

/* counter */
.vtb-counter { display: flex; align-items: baseline; gap: 10px; margin-bottom: clamp(12px, 2.4vh, 26px); font-variant-numeric: tabular-nums; }
.vtb-counter b { font-size: clamp(38px, 5vw, 66px); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(135deg, var(--vtb-acc), color-mix(in srgb, var(--vtb-acc) 40%, #00cec9)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vtb-counter span { font-size: 15px; font-weight: 700; color: var(--vtb-off); letter-spacing: .06em; }

/* list with progress rail */
.vtb-list { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 30px; }
.vtb-rail { position: absolute; left: 6px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--vtb-off) 55%, transparent); overflow: hidden; }
.vtb-rail i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--vtb-acc), #00cec9); transform: scaleY(var(--vtb-fill)); transform-origin: top; transition: transform .25s linear; }
.vtb-tab { position: relative; display: block; width: 100%; text-align: left; padding: 9px 0 11px !important; margin: 0; border: 0; border-radius: 0; background: none !important; cursor: pointer; font: inherit; color: var(--vtb-off) !important; box-shadow: none; transition: color .35s ease, transform .4s cubic-bezier(.22,.9,.3,1); }
.vtb-tab::before { content: ""; position: absolute; left: -30px; top: 22px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--vtb-off); transition: border-color .3s, background .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.vtb-tab:hover { color: color-mix(in srgb, var(--vtb-on) 55%, var(--vtb-off)) !important; }
.vtb-tab.is-active { color: var(--vtb-on) !important; }
.vtb-tab.is-active::before { border-color: var(--vtb-acc); background: var(--vtb-acc); transform: scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vtb-acc) 18%, transparent); }
.vtb-tab.is-done::before { border-color: var(--vtb-acc); background: color-mix(in srgb, var(--vtb-acc) 25%, #fff); }
.vtb-name { display: block; font-size: var(--vtb-ts); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; transition: font-size .3s; }
.vtb-num { display: none; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--vtb-acc); }
.vtb-nums .vtb-num { display: block; }
.vtb-desc { display: block; max-width: 440px; max-height: 0; overflow: hidden; opacity: 0; font-size: 15.5px; line-height: 1.6; font-weight: 500; color: var(--vtb-txt); transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
.vtb-tab.is-active .vtb-desc { max-height: 110px; opacity: 1; margin-top: 8px; }
.vtb-prog { position: absolute; left: 0; bottom: 3px; width: 100%; max-width: 240px; height: 3px; border-radius: 3px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.vtb-prog i { display: block; height: 100%; width: 100%; background: var(--vtb-acc); transform: scaleX(0); transform-origin: left; }
.vtb-has-prog .vtb-tab.is-active .vtb-prog { opacity: 1; background: color-mix(in srgb, var(--vtb-acc) 16%, transparent); }
.vtb-has-prog .vtb-tab.is-active .vtb-prog i { animation: vtbProg var(--vtb-time) linear forwards; }
.ultrakit-vtb-wrapper.is-paused .vtb-tab.is-active .vtb-prog i { animation-play-state: paused; }
@keyframes vtbProg { to { transform: scaleX(1); } }

/* scroll mode: keep the whole pinned block inside the viewport on short screens */
.vtb-mode-scroll:not(.is-editor) .vtb-name { font-size: max(16px, min(var(--vtb-ts), calc((100vh - var(--vtb-top) - 500px) / var(--vtb-steps) / 1.25))); }
.vtb-mode-scroll:not(.is-editor) .vtb-tab { padding-top: 6px !important; padding-bottom: 8px !important; }
.vtb-mode-scroll:not(.is-editor) .vtb-tab::before { top: calc(50% - 9px); }
.vtb-mode-scroll:not(.is-editor) .vtb-tab.is-active .vtb-desc { max-height: 104px; }

/* stage + transitions */
.vtb-stage { position: relative; aspect-ratio: var(--vtb-ratio); max-height: calc(100vh - var(--vtb-top) - 150px); width: 100%; margin-left: auto; border-radius: var(--vtb-r); overflow: hidden; box-shadow: 0 40px 70px -34px rgba(20,20,43,.5); background: #14142b; }
.vtb-mode-scroll .vtb-stage { max-height: calc(100vh - var(--vtb-top) - 170px); }
.vtb-pane { position: absolute; inset: 0; visibility: hidden; }
.vtb-pane.is-prev { visibility: visible; z-index: 1; }
.vtb-pane.is-active { visibility: visible; z-index: 2; }
.vtb-pane .uks { height: 100%; aspect-ratio: auto; border-radius: 0; }
.vtb-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtb-hit { position: absolute; inset: 0; z-index: 8; }
/* wipe (default): new slide reveals from the bottom going forward, from the top going back */
.vtb-t-wipe .vtb-pane.is-active { animation: vtbWipe .85s cubic-bezier(.7,0,.2,1) both; }
.vtb-t-wipe .vtb-pane.is-active img, .vtb-t-wipe .vtb-pane.is-active .uks { animation: vtbZoom 1.1s cubic-bezier(.2,.8,.2,1) both; }
.vtb-t-wipe.is-back .vtb-pane.is-active { animation-name: vtbWipeBack; }
@keyframes vtbWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vtbWipeBack { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vtbZoom { from { transform: scale(1.18); } to { transform: scale(1); } }
.vtb-t-slide .vtb-pane.is-active { animation: vtbSlide .8s cubic-bezier(.7,0,.2,1) both; }
.vtb-t-slide.is-back .vtb-pane.is-active { animation-name: vtbSlideBack; }
@keyframes vtbSlide { from { transform: translateY(100%); } to { transform: none; } }
@keyframes vtbSlideBack { from { transform: translateY(-100%); } to { transform: none; } }
.vtb-t-fade .vtb-pane.is-active { animation: vtbFade .7s ease both; }
@keyframes vtbFade { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
	.vtb-name { font-size: calc(var(--vtb-ts) * .8); }
}
@media (max-width: 767px) {
	.vtb-layout, .vtb-side-right .vtb-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.vtb-layout > * { min-width: 0; }
	.vtb-side-right .vtb-left { order: 0; }
	.vtb-left { display: flex; align-items: center; gap: 14px; max-width: 100%; }
	.vtb-counter { margin: 0; flex: 0 0 auto; } .vtb-counter b { font-size: 34px; } .vtb-counter span { font-size: 12px; }
	.vtb-list { flex: 1; min-width: 0; flex-direction: row; overflow-x: auto; gap: 8px; padding: 0 0 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
	.vtb-list::-webkit-scrollbar { display: none; }
	.vtb-rail { display: none; }
	.vtb-tab { flex: 0 0 auto; width: auto; padding: 10px 18px !important; border-radius: 40px; background: #f1f1f7 !important; color: var(--vtb-txt) !important; scroll-snap-align: start; }
	.vtb-tab::before { display: none; }
	.vtb-tab.is-active { background: var(--vtb-on) !important; color: #fff !important; }
	.vtb-name { font-size: 14px; letter-spacing: 0; font-weight: 700; white-space: nowrap; }
	.vtb-desc, .vtb-num, .vtb-prog { display: none !important; }
	.vtb-stage { aspect-ratio: 1.25; max-height: 46vh; }
	.vtb-mode-scroll .vtb-stage { max-height: 42vh; }
}
@media (prefers-reduced-motion: reduce) { .vtb-pane.is-active, .vtb-pane.is-active img, .vtb-pane.is-active .uks { animation: none !important; } .vtb-has-prog .vtb-tab.is-active .vtb-prog i { animation: none; transform: scaleX(1); } .vtb-rail i { transition: none; } }