/* /products/vibe-studio only (linked from its page body through partials/vibev-assets.hbs, after css/mcp-visuals.css):
   extra parts for its schematic images (partials/vibev-*.hbs, same stage and animation classes as the MCP page),
   the playable games grid (#play) and the carousel of real screens (#gallery). */

/* ------------------------------------------------ schematic parts (inside .mcpv-stage, in stage pixels) */
.vB-frame { position: absolute; background: #1c2135; border: 1px solid #2f3755; border-radius: 12px; overflow: hidden; }
.vB-bar { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 12px; background: #141826; border-bottom: 1px solid #2f3755; }
.vB-bar i { width: 8px; height: 8px; border-radius: 50%; background: #39405f; display: block; }
.vB-bar span { margin-left: 8px; font-size: 12px; color: #8d93b0; }
.vB-col { padding: 12px; display: grid; gap: 10px; align-content: start; }
.vB-dot { width: 9px; height: 9px; border-radius: 50%; background: #11ced7; display: inline-block; }
.vB-ask { background: #f15851; }
.vB-input { font-size: 12px; color: #6a7190; border: 1px solid #39405f; border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.vB-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-bottom: 1px solid #2f3755; }
.vB-small { font-size: 12px; padding: 5px 9px; }
.vB-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c9cee3; background: #232943; border: 1px solid #2f3755; border-radius: 8px; padding: 6px 10px; min-height: 32px; }
.vB-row b { min-width: 22px; color: #aab1cc; font-weight: 600; }
.vB-row em { margin-left: auto; font-style: normal; color: #fff; font-weight: 600; }
.vB-row.me { border-color: #11ced7; background: rgba(17, 206, 215, .14); color: #fff; }
.vB-row.sm { font-size: 12px; padding: 5px 8px; min-height: 28px; gap: 6px; }
.vB-row.sm b { min-width: 14px; }
.vB-prog { height: 8px; border-radius: 6px; background: #252c47; overflow: hidden; }
.vB-prog > i { display: block; height: 100%; background: #11ced7; border-radius: 6px; }
.vB-prog.gold { height: 12px; }
.vB-prog.gold > i { background: #f9c440; }
.vB-card { display: grid; gap: 8px; background: #232943; border: 1px solid #2f3755; border-radius: 10px; padding: 10px; }
.vB-pts { font-size: 12px; font-weight: 600; color: #f9c440; }
.vB-phone { width: 168px; height: 318px; border: 2px solid #39405f; border-radius: 24px; background: #141826; padding: 18px 10px; display: grid; gap: 8px; align-content: start; }
.vB-banner { border-radius: 10px; padding: 12px 14px; background: linear-gradient(135deg, #f15851, #f9a440); color: #fff; display: grid; gap: 3px; }
.vB-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.vB-big2 { font-size: 20px; font-weight: 700; line-height: 1.15; }
.vB-cta { justify-self: start; background: #f9c440; color: #171b2a; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 7px 12px; }
.vB-mini { border: 1px solid #39405f; border-radius: 8px; overflow: hidden; background: #141826; }
.vB-mini .vB-bar { height: 18px; padding: 0 8px; gap: 4px; }
.vB-mini .vB-bar i { width: 6px; height: 6px; }
.vB-slot { border: 1.5px dashed #11ced7; border-radius: 8px; padding: 6px; display: grid; gap: 6px; align-content: start; background: rgba(17, 206, 215, .06); }
.vB-tiny { font-size: 11px; color: #fff; font-weight: 600; }
.vB-tile { height: 74px; border-radius: 8px; background: linear-gradient(160deg, #2a3150, #232943); border: 1px solid #2f3755; }
.vB-mission { display: grid; gap: 6px; font-size: 12px; color: #e3e6f2; background: #232943; border: 1px solid #2f3755; border-radius: 8px; padding: 8px; }
.vB-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
.vB-badges i { width: 34px; height: 34px; border-radius: 50%; background: #252c47; border: 2px dashed #39405f; display: block; }
.vB-badges i.won { background: radial-gradient(circle at 35% 35%, #ffe08a, #f9c440 55%, #c9952a); border: 2px solid #ffe08a; box-shadow: 0 0 10px rgba(249, 196, 64, .45); }
.vB-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.55; color: #b9f5cf; background: #141826; border: 1px solid #2f3755; border-radius: 8px; padding: 10px; white-space: pre; overflow: hidden; }
.vB-stagegame { display: grid; gap: 22px; justify-items: center; align-content: center; height: 100%; }

/* ------------------------------------------------ game art (used in the schematics) */
.vB-shells { display: flex; gap: 18px; align-items: flex-end; height: 110px; }
.vB-shells.small { gap: 12px; height: 80px; transform: scale(.8); transform-origin: left bottom; }
.vB-shell { display: block; width: 66px; height: 52px; border-radius: 50% 50% 10px 10px / 88% 88% 10px 10px; background: linear-gradient(180deg, #f6716a, #b8352f); box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .25); }
.vB-lift { display: grid; justify-items: center; gap: 6px; }
.vB-lift .vB-shell { transform: translateY(-24px) rotate(-8deg); }
.vB-ball { display: block; width: 16px; height: 16px; border-radius: 50%; background: #f9c440; box-shadow: 0 0 12px rgba(249, 196, 64, .7); }
.vB-balloons { display: grid; grid-template-columns: repeat(3, 44px); gap: 30px 26px; }
.vB-balloons i { position: relative; display: block; width: 44px; height: 54px; border-radius: 50% 50% 48% 48%; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .15); }
.vB-balloons i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 24px; background: #6a7190; }
.vB-board { display: block; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, #f9c440 0 6%, #f15851 6% 12%, #1c2135 12% 30%, #11ced7 30% 35%, #232943 35% 62%, #11ced7 62% 67%, #1c2135 67%); box-shadow: 0 0 0 8px #2f3755; }
.vB-wheel { display: block; border-radius: 50%; background: conic-gradient(#f15851 0 60deg, #11ced7 60deg 120deg, #f9c440 120deg 180deg, #8e6cf5 180deg 240deg, #2ecc71 240deg 300deg, #f9a440 300deg 360deg); box-shadow: 0 0 0 5px #2f3755; }

/* ------------------------------------------------ the side-by-side section titles are h2 on this page (for the heading
   outline); keep the size they had as Webflow h3 */
h2.side_content_heading { font-size: 2rem; line-height: 1.2; font-weight: 600; }
@media screen and (max-width: 991px) { h2.side_content_heading { font-size: 1.5rem; } }

/* ------------------------------------------------ page sections added for this page (#play, #gallery) */
.vibe-sec { position: relative; z-index: 2; }
.vibe-sec_head { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; display: grid; gap: 1rem; }
.vibe-sec_head .title_sub { margin: 0; }

/* #play: cards with a Play button; js/vibe-page.js opens the game with the Smartico SDK already on this site */
.vibe-play_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.vibe-play_card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .5rem; padding: 1rem; border-radius: 1rem; background: #fff; border: 1px solid rgba(12, 10, 9, .1); }
.vibe-play_card h3 { margin: .5rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.vibe-play_mech { margin: 0; font-size: .8125rem; color: #6a7190; }
.vibe-play_desc { margin: 0; font-size: .9375rem; opacity: .8; }
.vibe-play_btn { justify-self: start; margin-top: .5rem; cursor: pointer; }
.vibe-play_btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.vibe-play_msg { margin: 0; font-size: .8125rem; color: #b8352f; }
.vibe-play_msg:empty { display: none; }
/* the banner after the games: more live examples on smartico.dev */
.vibe-more { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 1rem; color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, #2a1b3d 0%, #171b2a 60%); border: 1px solid rgba(17, 206, 215, .35); }
.vibe-more_text { flex: 1 1 22rem; min-width: 0; display: grid; gap: .25rem; }
.vibe-more_title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.vibe-more_sub { margin: 0; font-size: .9375rem; color: #c9cee3; }
.vibe-more_btn { flex: none; }
.vibe-play_note { margin: 1.5rem auto 0; max-width: 48rem; text-align: center; font-size: .875rem; opacity: .7; }
.vibe-play_art { position: relative; aspect-ratio: 16 / 10; border-radius: .75rem; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #20263d 0%, #171b2a 60%); }
.vibe-play_img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vibe-play_badge { position: absolute; left: .5rem; bottom: .5rem; z-index: 1; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgba(241, 88, 81, .92); border-radius: 999px; padding: .15rem .55rem; }

/* #gallery: a full-width dark band with a carousel of real screens (partials/vibev-gallery.hbs). The active slide sits in
   the middle with its neighbours dimmed at the sides; js/vibe-page.js moves it and opens the full-size overlay. */
.vibe-sec.is-dark { background: #0d1019; color: #fff; padding-block: 6rem; overflow: hidden; }
.vibe-sec.is-dark .section_title { color: #fff; }
.vibe-sec.is-dark .title_sub { color: #c9cee3; opacity: 1; }
.vibe-car { position: relative; }
.vibe-car_track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 25vw 1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.vibe-car_track::-webkit-scrollbar { display: none; }
.vibe-car_track:focus-visible { outline: 2px solid #11ced7; outline-offset: -2px; }
/* the slides are a preview (half the window wide); a click opens the full size */
.vibe-car_slide { flex: 0 0 50vw; margin: 0; scroll-snap-align: center; display: grid; gap: 1rem; opacity: .4; transform: scale(.94); transition: opacity .35s ease, transform .35s ease; }
.vibe-car_slide.is-active { opacity: 1; transform: none; }
.vibe-car_link { display: block; border-radius: 1rem; overflow: hidden; background: #171b2a; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.vibe-car_slide.is-active .vibe-car_link { cursor: zoom-in; }
.vibe-car_img { display: block; width: 100%; height: auto; aspect-ratio: 2400 / 1318; object-fit: cover; }
.vibe-car_cap { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; justify-content: center; font-size: 1.0625rem; color: #e3e6f2; }
.vibe-car_tag { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #11ced7; border: 1px solid rgba(17, 206, 215, .45); border-radius: 999px; padding: .2rem .65rem; }
.vibe-car_btn { position: absolute; top: calc(25vw * 1318 / 2400 + .5rem); transform: translate(-50%, -50%); z-index: 2; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(13, 16, 25, .75); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.vibe-car_btn:hover, .vibe-car_btn:focus-visible { background: #f15851; border-color: #f15851; outline: none; }
.vibe-car_btn.is-prev { left: calc(25vw - 1.75rem); }
.vibe-car_btn.is-next { left: calc(75vw + 1.75rem); }
.vibe-car_dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; padding-inline: 1rem; }
.vibe-car_dot { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s, background .25s; }
.vibe-car_dot[aria-current="true"] { width: 1.75rem; background: #f15851; }
.vibe-car_dot:focus-visible { outline: 2px solid #11ced7; outline-offset: 2px; }

/* full-size overlay: the screen as large as the window allows; a click on it shows the actual pixels (scrollable) */
.vibe-zoom { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 8, 13, .96); color: #fff; overflow: hidden; }
.vibe-zoom[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.vibe-zoom::backdrop { background: rgba(0, 0, 0, .6); }
.vibe-zoom_stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 4rem 5.5rem 1rem; overflow: hidden; }
.vibe-zoom_img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; border-radius: .75rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); cursor: zoom-in; }
.vibe-zoom.is-actual .vibe-zoom_stage { overflow: auto; place-items: start; }
.vibe-zoom.is-actual .vibe-zoom_img { max-width: none; max-height: none; cursor: zoom-out; border-radius: 0; }
.vibe-zoom_nav, .vibe-zoom_close { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(13, 16, 25, .75); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.vibe-zoom_nav { top: 50%; transform: translateY(-50%); width: 3.5rem; height: 3.5rem; }
.vibe-zoom_nav.is-prev { left: 1.25rem; }
.vibe-zoom_nav.is-next { right: 1.25rem; }
.vibe-zoom_close { top: 1rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; }
.vibe-zoom_nav:hover, .vibe-zoom_close:hover, .vibe-zoom_nav:focus-visible, .vibe-zoom_close:focus-visible { background: #f15851; border-color: #f15851; outline: none; }
.vibe-zoom_bar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: center; padding: .75rem 1rem 1.25rem; font-size: .9375rem; }
.vibe-zoom_count { color: #aab1cc; font-variant-numeric: tabular-nums; }
.vibe-zoom_cap { color: #e3e6f2; }
.vibe-zoom_open { color: #11ced7; font-weight: 600; }

@media (max-width: 991px) {
  .vibe-car_track { padding-inline: 18vw; }
  .vibe-car_slide { flex-basis: 64vw; }
  .vibe-car_btn { top: calc(32vw * 1318 / 2400 + .5rem); }
  .vibe-car_btn.is-prev { left: calc(18vw - 1.75rem); }
  .vibe-car_btn.is-next { left: calc(82vw + 1.75rem); }
  .vibe-play_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vibe-sec.is-dark { padding-block: 4rem; }
  .vibe-car_track { gap: .75rem; padding-inline: 6vw; }
  .vibe-car_slide { flex-basis: 88vw; }
  .vibe-car_btn { display: none; }
  .vibe-zoom_stage { padding: 3.75rem .5rem 1rem; }
  .vibe-zoom_nav { width: 2.5rem; height: 2.5rem; }
  .vibe-zoom_nav.is-prev { left: .5rem; }
  .vibe-zoom_nav.is-next { right: .5rem; }
}
@media (max-width: 479px) {
  .vibe-play_grid { grid-template-columns: minmax(0, 1fr); }
}