:root {
  /* Макет «Сайт смета-н»: artboard 1440×931 */
  --v11f-studio-canvas-w: 1440px;
  --v11f-studio-canvas-h: 931px;
  /* Картинка/скрин: «Утверждённый концепт» 1090×580,42 */
  --v11f-mockup-img-w: 1090;
  --v11f-mockup-img-h: 580.42;
  /* Смещение и ширина блока на artboard 1440×931 — везде одни и те же % (масштаб только вместе с холстом) */
  --v11f-artboard-w: 1440;
  --v11f-artboard-h: 931;
  --v11f-blk-l: 175;
  --v11f-blk-t: 175;
  --v11f-blk-w: 1090;
  --v11f-bg-tint: rgba(186, 190, 163, 0);
  --v11f-card-border: #cfd3bb;
  --v11f-card-surface: rgba(255, 255, 255, 0.4);
  --v11f-shadow-green: rgba(100, 107, 65, 0.6);
  /* 12/1090 от ширины колонки: на мобилке 12px фикс. давали грубую «толстую» кайму; см. .v11f-studio-card */
}

.v11f-page {
  width: 100%;
  background: #fff;
}

/* Секция и контейнер — как .v8a-about-screen / .v8a-about-container */
.v11f-studio-screen {
  padding: 20px 20px 40px;
  background: #fff;
  box-sizing: border-box;
}

/* Холст 1440×931: единая система; положение блока — фиксиров. в % от макета, тянется только масштаб */
.v11f-studio-container.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.v11f-studio-container {
  position: relative;
  width: 100%;
  max-width: var(--v11f-studio-canvas-w);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 1440 / 931;
}

.v11f-studio-container > .row {
  /* left/top/width от макета: 175, 175, 1090 на 1440×931 */
  position: absolute;
  z-index: 0;
  left: calc(var(--v11f-blk-l) * 100% / var(--v11f-artboard-w));
  top: calc(var(--v11f-blk-t) * 100% / var(--v11f-artboard-h));
  width: calc(var(--v11f-blk-w) * 100% / var(--v11f-artboard-w));
  max-width: 1090px;
  margin: 0;
  display: block;
  box-sizing: border-box;
}

.v11f-studio-container > .row > [class*="col-"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Фон — копия .v8a-about-bg */
.v11f-studio-bg {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 14px;
  background: url("../img/Rectangle 135_8.svg") center / cover no-repeat, var(--v11f-bg-tint);
  box-shadow: inset 0 0 10px 15px #e3e5da;
  overflow: hidden;
  z-index: -2;
}

/* Эллипсы — копия .v8a-about-bg__ellipse */
.v11f-studio-bg__ellipse {
  position: absolute;
  width: 698px;
  height: 636px;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(
    92% 86% at 39.23% 41.72%,
    rgba(227, 229, 218, 0.72) 0%,
    rgba(227, 229, 218, 0.38) 46%,
    rgba(227, 229, 218, 0.16) 70%,
    rgba(227, 229, 218, 0) 100%
  );
  opacity: 0.82;
  pointer-events: none;
}

.v11f-studio-bg__ellipse--left {
  left: 297px;
}

.v11f-studio-bg__ellipse--right {
  left: 556px;
}

/* «Стеклянный» борт: 12px в макете 1090 — min(12px, 12/1090×ширина колонки) → на узких бордюр не «толстеет» */
.v11f-studio-card {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  --v11f-cpad: max(2px, min(12px, calc(12 * 100% / 1090)));
  width: 100%;
  max-width: 100%;
  padding: var(--v11f-cpad);
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--v11f-card-border);
  background: var(--v11f-card-surface);
  /* Симметрия: без сдвига по X (4px 6px делало правую сторону визуально тяжелее) */
  box-shadow: 0 4px 14px var(--v11f-shadow-green);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
  backdrop-filter: blur(2px) saturate(1.1);
  /* Чёткий стеклотип для десктопа (размытие + слой) */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* flexboxgrid: .row + .col-* дают отрицательные margin / padding — внутри карточки сдвигают картинку */
.v11f-studio-card .row {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}

.v11f-studio-card [class*="col-"] {
  display: block;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.v11f-studio-card__frame {
  /* Пропорции 1090×580,42; высота в колонке считается от ширины */
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* Внутр. угол согласован с фактич. padding карточки (наследуется var и от род. article) */
  border-radius: max(0px, calc(16px - var(--v11f-cpad, 12px)));
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: var(--v11f-mockup-img-w) / var(--v11f-mockup-img-h);
}

.v11f-studio-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Адаптивы фона и контейнера — как в index-v8.css */
@media (max-width: 1199px) {
  .v11f-studio-screen {
    padding: 16px;
  }

  .v11f-studio-bg__ellipse--left {
    left: 16%;
  }

  .v11f-studio-bg__ellipse--right {
    left: 42%;
  }
}

@media (max-width: 992px) {
  .v11f-studio-bg__ellipse {
    display: none;
  }
}

@media (max-width: 767px) {
  .v11f-studio-screen {
    padding: 12px;
  }

  .v11f-studio-container {
    border-radius: 0;
  }

  .v11f-studio-bg {
    border-radius: 0;
    box-shadow: none;
  }
}