/* Blender Bridge marketing uses — five proofs, one shared world. */

#uses-game .marketing-inner,
#uses-site .marketing-inner,
#uses-freelance .marketing-inner,
#uses-more .marketing-inner {
  width: min(97vw, 1580px);
  max-width: none;
}

/* Текст стоит над окном, а не поверх него: раньше заголовок ложился прямо на
   левую колонку приложения и перекрывал его органы управления. */
#uses-game .proof-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.2vh, 38px);
  align-items: start;
}

#uses-game .marketing-copy {
  position: relative;
  z-index: 12;
  min-width: 0;
  width: 100%;
  max-width: none;
  text-align: center;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, var(--uses-game-copy-y, 0), 0);
}

#marketing-v5 #uses-game .marketing-copy h2 {
  max-width: none;
  margin-inline: auto;
  color: var(--bb-white);
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: var(--bb-tracking-display);
}

#marketing-v5 #uses-game .marketing-copy > p {
  display: grid;
  max-width: 60ch;
  margin-inline: auto;
  gap: .18em;
  color: var(--bb-white);
  text-wrap: balance;
}

#uses-game .marketing-copy > p span { display: block; }

/* The section selects a scene; CSS finishes each entrance on its own. */
#uses-game[data-uses-heading-state] .marketing-copy h2,
#uses-game[data-uses-heading-state] .marketing-copy > p span,
#uses-game[data-uses-heading-state] [data-proof-slot="desktop-game"] {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 12px, 0) scale(.992);
  transition:
    opacity .36s ease,
    filter .5s ease,
    transform .56s cubic-bezier(.16, .78, .18, 1);
}

#uses-game[data-uses-heading-state="visible"] .marketing-copy h2,
#uses-game[data-uses-heading-state="visible"] .marketing-copy > p span,
#uses-game[data-uses-heading-state="visible"] [data-proof-slot="desktop-game"] {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

#uses-game[data-uses-heading-state="visible"] .marketing-copy > p span:first-child { transition-delay: .12s; }
#uses-game[data-uses-heading-state="visible"] .marketing-copy > p span:last-child { transition-delay: .22s; }
#uses-game[data-uses-heading-state="visible"] [data-proof-slot="desktop-game"] { transition-delay: .48s; }

#uses-game [data-proof-slot="desktop-game"].uses-proof {
  width: 100%;
}

.uses-proof,
.uses-video-frame {
  position: relative;
  min-width: 0;
  color: var(--bb-text-primary);
}

.uses-proof figcaption,
.uses-video-frame figcaption {
  margin-top: 12px;
  color: var(--bb-text-secondary);
  font: var(--bb-weight-medium) clamp(11px, 0.78vw, 13px) / 1.45 var(--bb-font-family);
}

[data-proof-fallback] {
  min-height: 18rem;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-hint));
  border-radius: var(--bb-radius-card);
  background: var(--bb-surface-veil);
  color: var(--bb-text-primary);
}

.uses-desktop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--bb-deep-space-rgb), 0.58);
  isolation: isolate;
}

.uses-desktop__artboard {
  position: absolute;
  inset: 0 auto auto 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--uses-desktop-gap);
  width: var(--uses-desktop-artboard-width);
  height: var(--uses-desktop-artboard-height);
  padding: var(--uses-desktop-pad-top) var(--uses-desktop-pad-right) var(--uses-desktop-pad-bottom) var(--uses-desktop-pad-left);
  overflow: hidden;
  background: rgba(var(--bb-deep-space-rgb), 0.58);
  font-family: var(--bb-font-family);
  transform: translate3d(var(--uses-desktop-artboard-offset-x), var(--uses-desktop-artboard-offset-y), 0) scale(var(--uses-desktop-artboard-scale));
  transform-origin: 0 0;
}

/* Окно приложения — непрозрачное. Сквозь прозрачный фон просвечивала сетка
   сайта и накладывалась на сетку туннеля: два разных мира в одном кадре. */
/* Заливка принадлежит окну приложения, а не раме. Рама тянется во всю ширину
   блока, и её фон закрывал сетку сайта слева и справа от окна. */
[data-proof-enhanced="uses"] .uses-desktop-frame {
  background: transparent;
}

[data-proof-enhanced="uses"] .uses-desktop__artboard,
[data-proof-enhanced="uses"] .uses-tunnel { background: transparent; }

.uses-desktop__windowbar {
  position: relative;
  z-index: 8;
  display: flex;
  flex: 0 0 var(--uses-desktop-sysbar-height);
  align-items: center;
  justify-content: flex-end;
  height: var(--uses-desktop-sysbar-height);
  margin-top: calc(var(--uses-desktop-pad-top) * -1);
  padding: var(--uses-desktop-pad-top) 2px 0;
  background: transparent;
}

.uses-desktop__window-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Кнопки окна нарисованы теми же иконками, что в renderer/index.html:
   линия, два скруглённых прямоугольника и крест. Псевдоэлементами их рисовать
   больше не нужно — иконки настоящие. */
/*
 * Точные значения из Blender_Bridge/renderer/styles.css:
 * .bb-icon-btn — 32×32, обводка rgba(cyan,.72), прозрачный фон, белая иконка,
 * svg 16×16; .bb-icon-btn--close — обводка rgba(255,255,255,.35), цвет
 * rgba(255,255,255,.66), svg 12×12. Никаких «похожих» подмен.
 */
.uses-desktop__winbtn {
  display: inline-flex;
  width: var(--uses-desktop-window-button);
  height: var(--uses-desktop-window-button);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--bb-cyan-rgb), 0.72);
  border-radius: var(--bb-radius-pill);
  background: transparent;
  color: var(--bb-white);
}

.uses-desktop__winbtn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.uses-desktop__winbtn svg [stroke] {
  vector-effect: non-scaling-stroke;
}

.uses-desktop__winbtn--close {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.66);
}

.uses-desktop__winbtn--close svg {
  width: 12px;
  height: 12px;
}

.uses-desktop__header {
  position: relative;
  z-index: 7;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  min-height: var(--uses-desktop-header-height);
  padding: 0 2px 2px;
}

.uses-desktop__brand,
.uses-desktop__last-operation {
  display: flex;
  align-items: center;
}

.uses-desktop__brand {
  gap: 6px;
  min-width: 300px;
  font-size: 30px;
  font-weight: var(--bb-weight-display);
  line-height: 1;
  letter-spacing: -0.02em;
}

.uses-desktop__brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.uses-desktop__last-operation {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  margin-right: 14px;
}

.uses-desktop__last-operation small {
  color: var(--bb-text-tertiary);
  font-size: 12px;
  font-weight: var(--bb-weight-medium);
}

.uses-desktop__last-operation strong {
  color: var(--bb-text-secondary);
  font-size: 14px;
  font-weight: var(--bb-weight-bold);
}

.uses-desktop__settings {
  display: inline-flex;
  width: var(--uses-desktop-window-button);
  height: var(--uses-desktop-window-button);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--bb-cyan-rgb), 0.72);
  border-radius: var(--bb-radius-pill);
  background: transparent;
  color: var(--bb-white);
}

.uses-desktop__settings svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

.uses-desktop__workspace {
  position: relative;
  z-index: 4;
  display: grid;
  flex: 1;
  grid-template-columns: var(--uses-desktop-content-columns);
  gap: var(--uses-desktop-gap);
  min-height: 0;
  overflow: hidden;
}

.uses-tunnel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(var(--bb-deep-space-rgb), 0.58);
}

.uses-tunnel__geometry {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.uses-tunnel__geometry [data-tunnel-rings],
.uses-tunnel__geometry [data-tunnel-longitudinal] {
  fill: none;
  stroke: var(--bb-text-primary);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Затухание по глубине лежит на маске из прямоугольных поясов, а сила линии —
   на самой обводке. Раньше и то и другое давал радиальный градиент, и дальний
   край туннеля читался круглым. */
.uses-tunnel__geometry [data-tunnel-lines] {
  stroke-opacity: var(--uses-tunnel-line-opacity);
}


.uses-tunnel__geometry [data-tunnel-end-void] {
  fill: rgba(var(--bb-deep-space-rgb), 0.9);
  stroke: none;
}

[data-proof-enhanced="uses"] .uses-tunnel__geometry [data-tunnel-end-void] {
  opacity: 0;
}

.uses-world-target {
  position: absolute;
  z-index: 2;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.uses-world-target--cube {
  left: 50%;
  top: 51%;
}

.uses-world-target--cyan {
  left: 34%;
  top: 43%;
}

.uses-world-target--orange {
  left: 67%;
  top: 57%;
}

.uses-desktop__left,
.uses-desktop__history {
  position: relative;
  z-index: 5;
  min-height: 0;
}

.uses-desktop__left {
  display: flex;
  flex-direction: column;
  gap: var(--uses-desktop-gap);
}

.uses-desktop__status,
.uses-desktop__controls,
.uses-desktop__history {
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-quiet));
  border-radius: var(--bb-radius-section);
  background: rgba(var(--bb-deep-space-rgb), 0.58);
  box-shadow: var(--bb-shadow-soft);
}

.uses-desktop__status {
  display: grid;
  padding: 18px 18px 14px;
}

.uses-desktop__status > strong,
.uses-desktop__history header > strong {
  font-size: 13px;
  font-weight: var(--bb-weight-bold);
  letter-spacing: 0.02em;
}

.uses-desktop__status > strong {
  margin-bottom: 10px;
}

.uses-desktop__status > span {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.uses-desktop__status > span + span {
  margin-top: 4px;
  padding-top: 10px;
}

.uses-desktop__status > span > i {
  width: 10px;
  aspect-ratio: 1;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-success);
}

.uses-desktop__status b,
.uses-desktop__status em {
  font-size: 13px;
  font-style: normal;
  font-weight: var(--bb-weight-strong);
}

.uses-desktop__status em {
  color: var(--bb-success);
  font-size: 12px;
  font-weight: var(--bb-weight-medium);
}

.uses-desktop__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.uses-desktop__action {
  --uses-control-outline: rgba(var(--bb-orange-rgb), var(--bb-line-strong));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--uses-desktop-control-height);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--bb-radius-pill);
  background: transparent;
  color: var(--bb-text-primary);
  font-size: 13px;
  font-weight: var(--bb-weight-bold);
}

/* A continuous SVG stroke avoids independently snapped CSS border edges at
   fractional artboard scales. Compensate the enclosing HTML transform once. */
.uses-desktop__action-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--uses-control-outline);
  stroke-width: max(1px, calc(1px / var(--uses-desktop-artboard-scale, 1)));
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

.uses-desktop__action--stop {
  --uses-control-outline: rgba(var(--bb-error-rgb), var(--bb-line-strong));
}

.uses-desktop__action--share {
  --uses-control-outline: rgba(var(--bb-white-rgb), var(--bb-line-neutral-hover));
}

/* Reading direction changes the sentence, not its physical column/marker. */
:root:lang(ar) .freelance-commission__script li { text-align: left; }

.uses-desktop__history {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.uses-desktop__history header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-quiet));
}

.uses-desktop__history header > span {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.uses-desktop__history header i {
  padding: 5px 14px;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-neutral));
  border-radius: var(--bb-radius-pill);
  color: var(--bb-text-secondary);
  font-size: 11px;
  font-weight: 650;
  font-style: normal;
}

.uses-desktop__history-field {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: hidden;
}

.uses-desktop__footer {
  position: relative;
  z-index: 7;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 10px 0 14px;
  color: var(--bb-text-tertiary);
  font-size: 12px;
}

#uses-site .proof-layout {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.3fr);
  align-items: center;
}

[data-proof-slot="site-self"].uses-proof {
  min-height: 100vh; min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: visible;
}

[data-proof-slot="site-self"][data-site-flip-ready="true"] > [data-site-static-fallback] {
  display: none;
}

.uses-site-flip-shell {
  display: grid;
  width: 100%;
  place-items: center;
}

.uses-site-flip-host {
  position: relative;
  width: 100vw;
  height: 100vh; height: 100svh;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  isolation: isolate;
}

.uses-site-flip-miniature-target {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Было min(72vw, 960px) — почти во весь кадр, и разворот не читался как
     проваливание. Маленькое окно делает эффект. */
  width: min(34vw, 440px);
  aspect-ratio: 16 / 9;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.uses-site-flip-placeholder {
  display: block;
  flex: none;
  visibility: hidden;
  pointer-events: none;
}

.uses-site-flip-viewport-portal {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 12;
  width: var(--uses-site-viewport-width, 100vw);
  height: var(--uses-site-viewport-height, 100vh); height: var(--uses-site-viewport-height, 100svh);
  overflow: clip;
  pointer-events: none;
  isolation: isolate;
  contain: layout paint;
  transform: translate3d(var(--uses-site-flip-x), var(--uses-site-flip-y), 0)
    scale(var(--uses-site-flip-scale-x), var(--uses-site-flip-scale-y));
  transform-origin: 0 0;
  will-change: transform;
}

.uses-site-flip-caption {
  width: min(92vw, 72rem);
}

[data-site-flip-ready="true"] .uses-site-flip-caption {
  visibility: hidden;
}

#uses-site .proof-layout:has([data-site-flip-ready="true"]) > .marketing-copy {
  visibility: hidden;
}

.uses-site-flip-viewport-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--bb-white-rgb), 0.2);
  border-radius: var(--bb-radius-shell);
  box-shadow: var(--bb-shadow-card);
  opacity: calc(1 - var(--uses-site-flip-progress, 0));
  pointer-events: none;
}

.uses-site-flip-viewport-portal::after {
  content: "blenderbridge.com";
  position: absolute;
  top: 16px;
  left: 20px;
  color: var(--bb-text-tertiary);
  font-family: var(--bb-font-mono);
  font-size: 12px;
  font-weight: var(--bb-weight-strong);
  letter-spacing: 0.04em;
  opacity: calc(1 - var(--uses-site-flip-progress, 0));
  pointer-events: none;
}

#uses-video .marketing-inner {
  width: min(92vw, 1420px);
}

#uses-video .video-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(52px, 7vw, 112px);
  margin-top: clamp(28px, 5vw, 72px);
}

.uses-video-frame {
  aspect-ratio: 16 / 9;
  overflow: visible;
}

.uses-video-frame__media,
.uses-video-frame__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-hint));
  border-radius: var(--bb-radius-card);
  background: rgba(var(--bb-deep-space-rgb), 0.58);
  box-shadow: var(--bb-shadow-card);
}

.uses-video-frame__media {
  object-fit: cover;
  background: var(--bb-deep-space);
}

.uses-video-frame__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: clamp(18px, 3vw, 42px);
  text-align: center;
}

.uses-video-frame__placeholder strong {
  font-size: clamp(18px, 2vw, 30px);
  font-weight: var(--bb-weight-bold);
}

.uses-video-frame__placeholder > span:last-child {
  max-width: 30ch;
  color: var(--bb-text-secondary);
  font-size: clamp(12px, 1vw, 15px);
}

.uses-video-frame__signal {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  color: var(--bb-cyan);
}

.uses-video-frame__signal i {
  display: block;
  width: 1px;
  height: 45%;
  background: currentColor;
  box-shadow: var(--bb-glow-rest-cyan);
}

.uses-video-frame__signal i:nth-child(2) { height: 100%; }
.uses-video-frame__signal i:nth-child(3) { height: 72%; }

.uses-video-frame__failure {
  display: none;
}

.uses-video-frame[data-media-state="failed"] .uses-video-frame__media {
  visibility: hidden;
  pointer-events: none;
}

.uses-video-frame[data-media-state="failed"] .uses-video-frame__failure {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 2rem;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-hint));
  border-radius: var(--bb-radius-card);
  background: var(--bb-surface-veil);
  color: var(--bb-text-secondary);
  text-align: center;
}

#uses-freelance .proof-layout {
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
}

.uses-freelance {
  position: relative;
  min-height: clamp(310px, 42vw, 560px);
  display: grid;
  align-items: center;
}

.uses-freelance__path {
  position: absolute;
  inset: 50% 0 auto;
  width: 100%;
  height: 34%;
  overflow: visible;
  transform: translateY(-50%);
}

.uses-freelance__path path {
  fill: none;
  stroke: var(--bb-text-tertiary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--uses-freelance-line, 0));
}

.uses-freelance__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(12px, 2.6vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uses-freelance__steps li {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--bb-text-tertiary);
  text-align: center;
  opacity: 0.36;
}

[data-uses-reached="1"] [data-freelance-step="marketplace"],
[data-uses-reached="2"] [data-freelance-step="marketplace"],
[data-uses-reached="2"] [data-freelance-step="selected"],
[data-uses-reached="3"] [data-freelance-step="marketplace"],
[data-uses-reached="3"] [data-freelance-step="selected"],
[data-uses-reached="3"] [data-freelance-step="bridge"],
[data-uses-reached="4"] .uses-freelance__steps li {
  color: var(--bb-text-primary);
  opacity: 1;
}

[data-uses-reached="1"] [data-freelance-step="marketplace"],
[data-uses-reached="2"] [data-freelance-step="selected"],
[data-uses-reached="3"] [data-freelance-step="bridge"],
[data-uses-reached="4"] [data-freelance-step="payout"] {
  color: var(--bb-orange);
}

.uses-freelance__mark {
  display: grid;
  width: clamp(52px, 6vw, 86px);
  aspect-ratio: 1;
  place-items: center;
  color: currentColor;
}

.uses-freelance__mark--bridge {
  color: currentColor;
}

.uses-freelance__mark svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uses-freelance__steps strong {
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: var(--bb-weight-bold);
}

.uses-freelance__steps small {
  max-width: 18ch;
  color: var(--bb-text-secondary);
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1.45;
}

#uses-more .proof-layout {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.28fr);
}

.uses-capabilities {
  width: 100%;
}

.uses-capabilities svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.uses-capabilities svg * {
  vector-effect: non-scaling-stroke;
}

.uses-capabilities__spine,
.uses-capabilities [data-capability-zone] path,
.uses-capabilities [data-capability-zone] rect,
.uses-capabilities [data-capability-zone] circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uses-capabilities__spine {
  color: rgba(var(--bb-white-rgb), 0.14);
}

.uses-capabilities [data-capability-zone] {
  color: var(--bb-text-secondary);
}

.uses-capabilities [data-capability-zone="rigging"] { opacity: var(--uses-rigging, 1); }
.uses-capabilities [data-capability-zone="animation"] { opacity: var(--uses-animation, 1); }
.uses-capabilities [data-capability-zone="physics"] { opacity: var(--uses-physics, 1); }
.uses-capabilities [data-capability-zone="simulations"] { opacity: var(--uses-simulations, 1); }

.uses-proof[data-uses-active="rigging"] [data-capability-zone="rigging"],
.uses-proof[data-uses-active="animation"] [data-capability-zone="animation"],
.uses-proof[data-uses-active="physics"] [data-capability-zone="physics"],
.uses-proof[data-uses-active="simulations"] [data-capability-zone="simulations"],
.uses-proof[data-uses-active="rigging"] [data-capability-mobile="rigging"],
.uses-proof[data-uses-active="animation"] [data-capability-mobile="animation"],
.uses-proof[data-uses-active="physics"] [data-capability-mobile="physics"],
.uses-proof[data-uses-active="simulations"] [data-capability-mobile="simulations"] {
  color: var(--bb-orange);
  opacity: 1;
}

.uses-capabilities text {
  fill: currentColor;
  font: var(--bb-weight-bold) 24px / 1 var(--bb-font-family);
  letter-spacing: var(--bb-tracking-label);
}

.uses-capabilities .uses-capabilities__note {
  fill: var(--bb-text-secondary);
  font-size: 18px;
  font-weight: var(--bb-weight-medium);
  letter-spacing: 0;
}

.uses-capabilities__weight,
.uses-capabilities [data-motion-path],
.uses-capabilities [data-rebound-arc] {
  stroke-dasharray: 5 8;
}

.uses-capabilities [data-keyframe],
.uses-capabilities [data-flow-particle],
.uses-capabilities [data-joint] {
  fill: currentColor;
}

.uses-capabilities__mobile {
  display: none;
}

.uses-capabilities__mobile > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding-block: 18px;
  border-bottom: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-quiet));
  color: var(--bb-text-secondary);
  opacity: 0.54;
}

.uses-capabilities__mobile [data-capability-mobile="rigging"] { opacity: var(--uses-rigging, 1); }
.uses-capabilities__mobile [data-capability-mobile="animation"] { opacity: var(--uses-animation, 1); }
.uses-capabilities__mobile [data-capability-mobile="physics"] { opacity: var(--uses-physics, 1); }
.uses-capabilities__mobile [data-capability-mobile="simulations"] { opacity: var(--uses-simulations, 1); }

.uses-proof[data-uses-resolved="true"] .uses-capabilities__mobile [data-capability-mobile] {
  opacity: 1;
}

.uses-capabilities__mobile > div:last-child {
  border-bottom: 0;
}

.uses-capabilities__mobile strong,
.uses-capabilities__mobile span {
  grid-column: 2;
}

.uses-capabilities__mobile strong {
  color: currentColor;
  font-size: 18px;
  font-weight: var(--bb-weight-bold);
}

.uses-capabilities__mobile span {
  margin-top: 4px;
  color: var(--bb-text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.uses-capabilities__mobile svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  width: 42px;
  height: 48px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uses-capabilities__mobile svg circle[data-mobile-rig-joint],
.uses-capabilities__mobile svg circle[data-mobile-keyframe],
.uses-capabilities__mobile svg circle[data-mobile-flow-particle] {
  fill: currentColor;
}

@media (max-width: 720px) {
  #uses-game .proof-layout,
  #uses-site .proof-layout,
  #uses-freelance .proof-layout,
  #uses-more .proof-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #uses-game .marketing-inner,
  #uses-site .marketing-inner,
  #uses-freelance .marketing-inner,
  #uses-more .marketing-inner,
  #uses-video .marketing-inner {
    width: min(92vw, 680px);
  }

  [data-proof-slot="desktop-game"].uses-proof {
    height: min(72vh, 620px); height: min(72svh, 620px);
    overflow: hidden;
    border-radius: var(--bb-radius-shell);
  }

  .uses-desktop-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Keep the exact 1600x900 product at a readable .82 scale. Existing local
     section progress pans reversibly from the measured controls centre
     (source x=198) to the measured tunnel centre (source x=800). */
  .uses-desktop__artboard {
    inset: 0 auto auto 50%;
    transform: translate3d(calc(var(--uses-mobile-controls-anchor) + var(--uses-mobile-pan-offset, 0px)), 0, 0)
      scale(var(--uses-mobile-detail-scale));
  }

  [data-uses-motion="reduced"] .uses-desktop-frame {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(var(--bb-cyan-rgb), var(--bb-line-strong)) transparent;
    touch-action: pan-x;
  }

  [data-uses-motion="reduced"] .uses-desktop__artboard {
    position: relative;
    inset: auto;
    flex: none;
    transform: scale(var(--uses-mobile-detail-scale));
  }

  #uses-game .marketing-copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    padding: 0;
    background: transparent;
    opacity: 1;
    transform: none;
  }

  [data-proof-slot="site-self"].uses-proof {
    min-height: 100vh; min-height: 100svh;
  }

  .uses-site-flip-miniature-target {
    width: 86vw;
  }

  #uses-video .video-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .uses-freelance {
    min-height: 680px;
    padding-block: 34px;
  }

  .uses-freelance__path {
    inset: 34px auto 34px 50%;
    width: 1px;
    height: auto;
    background: var(--bb-text-tertiary);
    transform: none;
    transform-origin: top;
    scale: 1 var(--uses-freelance-line, 0);
  }

  .uses-freelance__path path {
    display: none;
  }

  .uses-freelance__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .uses-freelance__steps li {
    grid-template-columns: 74px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .uses-freelance__steps small {
    grid-column: 2;
  }

  .uses-freelance__mark {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 420px) {
  .uses-capabilities > svg {
    display: none;
  }

  .uses-capabilities__mobile {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uses-freelance__path path {
    stroke-dashoffset: 0;
  }

  .uses-freelance__steps li,
  .uses-capabilities [data-capability-zone],
  .uses-capabilities__mobile > div {
    opacity: 1;
  }
}


/* ── Заголовки блоков ──────────────────────────────────────────────────────
   Мера заголовка тут шире общей: в колонке 15ch фраза разваливалась на четыре
   строки и читалась как текст «сбоку». Появление ведёт прогресс секции. */
#uses-game .marketing-copy h2,
#uses-site .marketing-copy h2,
#uses-video .marketing-copy h2,
#uses-freelance .marketing-copy h2,
#uses-more .marketing-copy h2 {
  max-width: 22ch;
  opacity: var(--uses-heading-presence, 1);
  transform: translate3d(0, var(--uses-heading-y, 0px), 0);
  will-change: opacity, transform;
}

#uses-game .marketing-copy > p,
#uses-site .marketing-copy > p,
#uses-video .marketing-copy > p,
#uses-freelance .marketing-copy > p,
#uses-more .marketing-copy > p {
  max-width: 52ch;
  opacity: var(--uses-heading-presence, 1);
  transform: translate3d(0, calc(var(--uses-heading-y, 0px) * 0.6), 0);
}

/* ── Раскладка трёх последних блоков ───────────────────────────────────────
   Копия и схема больше не делят строку в пропорции 0.28fr: от неё заголовок
   вытягивался в узкий столбец, а схема вылезала за кадр. */
#uses-video .marketing-inner,
#uses-freelance .marketing-inner,
#uses-more .marketing-inner {
  width: min(1360px, calc(100vw - 64px));
  margin-inline: auto;
}

#uses-freelance .proof-layout,
#uses-more .proof-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vh, 56px);
  align-items: start;
}

#uses-more .proof-layout .marketing-copy {
  order: -1;
}

#uses-freelance .uses-freelance,
#uses-more .uses-capabilities {
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

#uses-freelance .uses-freelance svg,
#uses-more .uses-capabilities svg {
  width: 100%;
  height: auto;
  max-height: 46vh; max-height: 46svh;
}

@media (prefers-reduced-motion: reduce) {
  #uses-game .marketing-copy h2,
  #uses-site .marketing-copy h2,
  #uses-video .marketing-copy h2,
  #uses-freelance .marketing-copy h2,
  #uses-more .marketing-copy h2,
  #uses-game .marketing-copy > p,
  #uses-site .marketing-copy > p,
  #uses-video .marketing-copy > p,
  #uses-freelance .marketing-copy > p,
  #uses-more .marketing-copy > p {
    opacity: 1;
    transform: none;
  }
}


/* Схемы блоков стоят по центру своей меры, а не смещёнными вправо. */
#uses-freelance .uses-freelance,
#uses-more .uses-capabilities {
  margin-inline: auto;
}


/* ── Заголовок блока «сайт внутри сайта» ───────────────────────────────────
   Слой лежит поверх сцены и вне маршрута, потому что маршрут на этом блоке
   целиком уезжает в портал. Гаснет ровно тогда, когда окно разворачивается
   на весь экран и подпись становится лишней. */
.uses-site-overlay {
  position: fixed;
  z-index: 8;
  top: clamp(48px, 12vh, 132px); top: clamp(48px, 12svh, 132px);
  left: 50%;
  width: min(1360px, calc(100vw - 64px));
  pointer-events: none;
  transform: translate3d(-50%, calc((1 - var(--uses-site-overlay-presence, 0)) * 26px), 0);
  opacity: var(--uses-site-overlay-presence, 0);
  visibility: hidden;
}

.uses-site-overlay[data-visible="true"] {
  visibility: visible;
}

.uses-site-overlay h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: var(--bb-weight-display);
  line-height: 0.98;
  letter-spacing: var(--bb-tracking-display);
}

.uses-site-overlay p {
  max-width: 52ch;
  margin-top: clamp(18px, 3vh, 34px);
  color: var(--bb-text-secondary);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.58;
}

@media (prefers-reduced-motion: reduce) {
  .uses-site-overlay {
    transform: translate3d(-50%, 0, 0);
  }
}

/* The real Desktop panels float transparently over the shared tunnel. */
@media (max-width: 720px) {
  /* Fit the actual source artboard as one object. The old mobile detail crop
     enlarged it to 1312px and put the tunnel/cube outside the screen. Scope
     this to the real Game section, leaving Site highlight composition alone. */
  #marketing-v5 #uses-game [data-proof-slot="desktop-game"].uses-proof {
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: center;
    overflow: visible;
    border-radius: 0;
  }
  #marketing-v5 #uses-game .uses-desktop-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    touch-action: auto;
  }
  #marketing-v5 #uses-game .uses-desktop__artboard {
    position: absolute;
    inset: 0 auto auto 0;
    transform: translate3d(var(--uses-desktop-artboard-offset-x), var(--uses-desktop-artboard-offset-y), 0) scale(var(--uses-desktop-artboard-scale));
  }
}

[data-proof-enhanced="uses"] .uses-desktop__status,
[data-proof-enhanced="uses"] .uses-desktop__controls,
[data-proof-enhanced="uses"] .uses-desktop__history { background: transparent; }

[data-proof-enhanced="uses"] .uses-desktop__history > header {
  border-radius: var(--bb-radius-section) var(--bb-radius-section) 0 0;
  background: transparent;
}

/* The director owns these three complete titles and their product entrance.
   The same rules apply to the real section and the highlight DOM copy. */
#marketing-v5 #uses-game[data-game-sequence] > .marketing-inner,
.uses-highlights-portal .uses-highlight-game[data-game-sequence] {
  gap: clamp(30px, 4vh, 48px); gap: clamp(30px, 4svh, 48px);
}
:is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .marketing-copy {
  width: 100%;
  max-width: none;
  transform: none;
  text-align: center;
}
:is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .marketing-copy > p {
  display: none;
}
:is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .marketing-copy h2 {
  display: grid;
  align-content: center;
  min-block-size: 2.08em;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  color: var(--bb-white);
  font-size: clamp(34px, 4.1vw, 66px);
  font-weight: var(--bb-weight-display);
  line-height: 1.04;
  letter-spacing: var(--bb-tracking-display);
  text-wrap: balance;
  opacity: var(--game-sequence-heading, 1);
  filter: blur(var(--game-sequence-heading-softness, 0px));
  transform: scale(var(--game-sequence-heading-scale, 1));
  transform-origin: center;
  transition: none;
}
:is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) [data-proof-slot="desktop-game"] {
  opacity: var(--game-sequence-tunnel, 0);
  filter: none;
  transform: none;
  transition: none;
}
:is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .uses-desktop__artboard > :not(.uses-tunnel) {
  opacity: var(--game-sequence-ui, 0);
  filter: blur(calc((1 - var(--game-sequence-ui, 0)) * 3px));
  transition: none;
}
@media (max-width: 720px) {
  :is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .marketing-copy h2 {
    min-block-size: 3.12em;
    font-size: clamp(29px, 7.4vw, 42px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .marketing-copy h2,
  :is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) [data-proof-slot="desktop-game"],
  :is(#marketing-v5 #uses-game[data-game-sequence], .uses-highlight-game[data-game-sequence]) .uses-desktop__artboard > :not(.uses-tunnel) {
    opacity: 1;
    filter: none;
    transform: none;
  }
}