/* Bandicam AI Studio promo banner
 * Shell (copy, CTA, tabs, progress) is HTML; each scene is a short muted video clip.
 * All selectors are prefixed with .aisb to avoid collisions with the host page.
 */
.aisb {
  --aisb-ink: #141a26;
  --aisb-muted: #5d6675;
  --aisb-line: #e3e7ee;
  --aisb-accent: #3a63d8;
  --aisb-accent-soft: #eef2fd;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid #dbe3f7;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8faff 0%, #eef2fd 100%);
  color: var(--aisb-ink);
  font-family: inherit;
}
.aisb *, .aisb *::before, .aisb *::after { box-sizing: border-box; }

/* Header */
/* Brand spans the top row; copy on the left, CTA centred beside it, whatever the text length */
.aisb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; margin-bottom: 16px; }
.aisb-head > div { display: contents; }
.aisb-brand { grid-column: 1 / -1; margin-bottom: 10px; }
.aisb-title { grid-column: 1; }
.aisb-sub { grid-column: 1; }
.aisb-cta { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.aisb-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--aisb-accent); font-size: 14px; font-weight: 700; }
.aisb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #fff4e5; color: #9a5b00; font-size: 11px; font-weight: 700; }
.aisb-title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.aisb-sub { margin: 0; color: var(--aisb-muted); font-size: 14px; line-height: 1.5; }
.aisb-cta {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 14px 22px; border-radius: 12px; color: #fff;
  background: linear-gradient(100deg, #3a63d8, #7a4de0);
  box-shadow: 0 8px 20px -8px rgba(90, 80, 220, .75);
  font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: filter .15s, transform .15s;
}
.aisb-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.aisb-cta:focus-visible, .aisb-tab:focus-visible { outline: 3px solid rgba(58, 99, 216, .45); outline-offset: 2px; }

/* Stage */
.aisb-stage { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 12px 12px 0 0; background: #0d1220; isolation: isolate; }
.aisb-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.aisb-scene.is-active { opacity: 1; }
.aisb-scene video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The whole stage is a link to AI Studio */
.aisb-stage-link { position: absolute; inset: 0; z-index: 2; color: #fff; text-decoration: none; cursor: pointer; }
.aisb-stage-link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 10px; }
.aisb-pill {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; background: linear-gradient(100deg, #3a63d8, #7a4de0);
  font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
  transition: transform .15s, filter .15s;
}
.aisb-stage-link:hover .aisb-pill { transform: translateX(3px); filter: brightness(1.12); }
.aisb.is-endcard .aisb-pill { display: none; }

/* End card: brand moment after the last clip */
.aisb-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 16px; background: #0b0e1a; text-align: center; color: #fff; }
.aisb-end-bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: .55; }
.aisb-end-bg i { background-size: cover; background-position: center; }
.aisb-end::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11, 14, 26, .55) 0%, rgba(11, 14, 26, .9) 75%); }
.aisb-end > div:not(.aisb-end-bg) { position: relative; z-index: 1; }
.aisb-end-logo img { display: block; width: 400px; max-width: 70%; height: auto; margin: 0 auto; }
.aisb-end-logo { width: 100%; }
.aisb-end-tag { color: #d6dcf0; font-size: 16px; font-weight: 600; }
.aisb-end-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 12px; background: #fff; color: #141a26; font-size: 17px; font-weight: 800; transition: transform .15s; }
.aisb-stage:hover .aisb-end-btn { transform: scale(1.05); }
.aisb-scene.is-active .aisb-end-logo { animation: aisb-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.aisb-scene.is-active .aisb-end-tag { animation: aisb-rise .45s .2s ease-out both; }
.aisb-scene.is-active .aisb-end-cta { animation: aisb-rise .45s .35s ease-out both; }
@keyframes aisb-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes aisb-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .aisb-scene.is-active .aisb-end-logo, .aisb-scene.is-active .aisb-end-tag, .aisb-scene.is-active .aisb-end-cta { animation: none; } }

/* Tap-for-sound, shown only on scenes with data-sound */
.aisb-sound {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 0; border-radius: 999px; background: #fff; color: var(--aisb-ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  animation: aisb-pulse 1.8s ease-out infinite;
}
.aisb-sound[hidden] { display: none; }
.aisb-sound[aria-pressed="true"] { background: rgba(255, 255, 255, .22); color: #fff; animation: none; }
.aisb-sound:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@keyframes aisb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .aisb-sound { animation: none; } }

/* Tabs: a dark control bar joined to the bottom of the video */
.aisb-tabs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: 0 0 12px 12px; background: #0f1322; }
.aisb-tab {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 15px 14px; border: 0; background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .25s;
}
.aisb-tab + .aisb-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(255, 255, 255, .08); }
.aisb-tab:hover { background: rgba(255, 255, 255, .045); }
.aisb-tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(122, 77, 224, .26) 0%, rgba(58, 99, 216, 0) 100%); }
.aisb-tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.aisb-ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); color: #aab4d0;
  transition: background .25s, color .25s, box-shadow .25s;
}
.aisb-tab:hover .aisb-ic { color: #fff; }
.aisb-tab[aria-selected="true"] .aisb-ic {
  background: linear-gradient(135deg, #4f7bff, #9a5cf0); color: #fff;
  box-shadow: 0 6px 16px -5px rgba(122, 90, 245, .85);
}
.aisb-tab b { display: block; margin-bottom: 2px; color: #cfd5e6; font-size: 14px; font-weight: 700; letter-spacing: -.005em; transition: color .25s; }
.aisb-tab:hover b, .aisb-tab[aria-selected="true"] b { color: #fff; }
.aisb-tab span.aisb-desc { display: block; color: #8690aa; font-size: 12px; line-height: 1.35; }
.aisb-tab[aria-selected="true"] span.aisb-desc { color: #b4bdd6; }
.aisb-prog { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: linear-gradient(90deg, #4f7bff, #b57cf6); box-shadow: 0 0 10px rgba(150, 110, 255, .9); }
.aisb.is-still .aisb-prog { display: none; }

@media (max-width: 820px) {
  .aisb-tab span.aisb-desc { display: none; }
}

@media (max-width: 360px) {
  .aisb-title { font-size: 18px; }
  .aisb-end-tag { display: none; }
}

@media (max-width: 640px) {
  .aisb { padding: 16px; }
  .aisb-head { grid-template-columns: minmax(0, 1fr); }
  .aisb-cta { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .aisb-stage { aspect-ratio: 16 / 9; }
  .aisb-sound { right: 8px; bottom: 8px; padding: 8px; }
  .aisb-sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aisb-cta { justify-content: center; width: 100%; }
  /* Narrow stages crop to 16:9, where the bottom-left corner would cover the Voice clip portraits */
  .aisb-pill { left: auto; right: 8px; top: 8px; bottom: auto; padding: 6px 10px; font-size: 11px; }
  .aisb-end { gap: 7px; }
  .aisb-end-logo img { width: 210px; }
  .aisb-end-tag { font-size: 12px; }
  .aisb-end-btn { padding: 8px 18px; font-size: 13px; }
  .aisb-tab { flex-direction: column; gap: 6px; padding: 11px 4px; text-align: center; }
  .aisb-ic { width: 32px; height: 32px; border-radius: 10px; }
  .aisb-tab b { font-size: 12px; }
  .aisb-tab span.aisb-desc { display: none; }
}