:root {
  /* Карточки Services — как у исходных картинок 857×575 */
  --service-card-aspect: 857 / 575;
  --bg-dark: #0f1110;
  --bg-panel: #1a1d1c;
  --teal: #3d8f7a;
  --teal-deep: #2d6b5c;
  --lime: #b8e632;
  --lime-hot: #d4ff4d;
  --orange-accent: #e8945c;
  --text: #f0f2f1;
  --text-muted: #9aa6a2;
  --line: rgba(255, 255, 255, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

/* —— Header + hero: видео снизу, весь текст и меню — слой сверху —— */
.site-header.site-header--hero {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Фон: видео + лёгкое затемнение (не перекрывает клики по ссылкам — слой ниже) */
.site-header__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  min-height: 100%;
  background: #0a0c0b;
}

.site-header__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header__fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

.site-header__media .site-header__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* полупрозрачный слой: видео заметно, текст читается за счёт теней у .hero-copy */
  background: linear-gradient(
    105deg,
    rgba(8, 10, 9, 0.45) 0%,
    rgba(12, 16, 14, 0.28) 50%,
    rgba(8, 10, 9, 0.4) 100%
  );
  pointer-events: none;
}

/* Контент поверх видео */
.site-header__foreground {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.25rem 0 4rem;
  isolation: isolate;
}

/* Sliding diagonals — только внутренние страницы (body.page-section); на главной нет разметки */
body.page-section .site-header.site-header--hero .site-header__sliding-diagonals {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body.page-section .site-header.site-header--hero .site-header__sliding-diagonals-bg {
  position: absolute;
  top: 0;
  right: -50%;
  bottom: 0;
  left: -50%;
  z-index: 0;
  opacity: 0.5;
  animation: site-header-sliding-diagonals 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #052a79 50%, #09f 50%);
}

body.page-section .site-header.site-header--hero .site-header__sliding-diagonals-bg--2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

body.page-section .site-header.site-header--hero .site-header__sliding-diagonals-bg--3 {
  animation-duration: 5s;
}

@media (prefers-reduced-motion: reduce) {
  body.page-section .site-header.site-header--hero .site-header__sliding-diagonals-bg {
    animation: none;
    transform: translateX(0);
  }
}

@keyframes site-header-sliding-diagonals {
  0% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(25%);
  }
}

/* Чтобы мобильное меню (fixed) не уезжало под hero и не обрезалось overflow шапки */
.site-header__foreground > .wrap.header-inner {
  position: relative;
  z-index: 6;
}

.site-header__foreground > .wrap.hero-inner {
  position: relative;
  z-index: 1;
}

body.site-nav-is-open .site-header.site-header--hero {
  overflow: visible;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-inner .nav {
  margin-left: auto;
}

/* Кнопка «гамбургер» — только мобильная ширина (см. max-width ниже) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(240, 242, 241, 0.95);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.55);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.nav-toggle__bar {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
}

body.site-nav-is-open .nav-toggle .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.site-nav-is-open .nav-toggle .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.site-nav-is-open .nav-toggle .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.52);
  cursor: pointer;
  appearance: none;
}

body.site-nav-is-open .nav-scrim:not([hidden]) {
  display: block;
}

.site-header__foreground .nav {
  color: rgba(240, 242, 241, 0.92);
}

.site-header__foreground .nav a:hover {
  color: #fff;
}

.site-header__foreground .hero-copy {
  text-align: center;
}

.site-header__foreground .hero-tag {
  color: rgba(240, 242, 241, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  line-height: 0;
}

.brand-mark {
  display: block;
  height: clamp(40px, 7vw, 48px);
  width: auto;
  max-height: 44px;
  object-fit: contain;
  object-position: center center;
  align-self: center;
  flex-shrink: 0;
  margin: 0;
  background: transparent;
  opacity: 0.92;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  opacity: 1;
}

.brand__wordmark {
  display: block;
  height: clamp(28px, 5.2vw, 42px);
  width: auto;
  max-height: 44px;
  background: transparent;
  object-fit: contain;
  object-position: center center;
  align-self: center;
  flex-shrink: 0;
  margin: 0;
  opacity: 0.92;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.brand:hover .brand__wordmark,
.brand:focus-visible .brand__wordmark {
  opacity: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: calc(0.82rem * 1.3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.nav a:hover {
  color: var(--text);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--lime);
  color: #0f1110;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-cta:hover {
  background: var(--lime-hot);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(184, 230, 50, 0.28);
  }
}

.site-header--hero .hero-inner {
  flex: 1;
  display: grid;
  /* Центр шапки: средняя колонка под контент; боковые 1fr дают симметрию. Левая — под .social-rail */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: 2rem 0 0;
}

.site-header--hero .social-rail {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  padding-top: 2rem;
}

.site-header--hero .hero-copy {
  grid-column: 2;
  grid-row: 1;
}

/* Когда .social-rail скрыт (display:none), в гриде только текст — на всю ширину по центру */
.site-header--hero .hero-inner > .hero-copy:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: min(1200px, 100%);
}

.social-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
}

.social-rail a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
}

.social-rail a:hover {
  color: var(--lime);
  border-color: var(--lime);
}

/* Соц-кнопки в шапке (.social-rail): временно скрыты. Разметка в index.html / section.html
   не удалена — чтобы вернуть кнопки, удалите весь этот блок до следующего комментария. */
.social-rail {
  display: none !important;
}

/* Канонический H1 (шрифт и размер как hero line1). На других страницах: <h1 class="wellore-h1">…</h1>
   или с градиентной строкой: <span class="wellore-h1__line">…</span>; на тёмном фоне без span:
   <h1 class="wellore-h1 wellore-h1--on-dark">…</h1> */
.wellore-h1,
.hero-headline {
  margin: 0 0 1.25rem;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 7.35rem);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.02;
  letter-spacing: 0.06em;
  /* лаймовый сдвиг 2–3px — лёгкий «стикер», без тяжёлой тени */
  filter: drop-shadow(3px 3px 0 #adff2f);
}

.wellore-h1__line,
.hero-headline__line {
  display: inline-block;
  font-size: inherit;
  background: linear-gradient(90deg, #d670ad 0%, #9482e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.wellore-h1__slash,
.hero-headline__slash {
  display: inline-block;
  font-size: clamp(2.35rem, 8.5vw, 5.75rem);
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, #d670ad 0%, #9482e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.wellore-h1--on-dark {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #fff;
  -webkit-text-fill-color: #fff;
  filter:
    drop-shadow(3px 3px 0 #c5f040)
    drop-shadow(2px 2px 0 rgba(184, 230, 50, 0.9));
}

@media (prefers-reduced-motion: reduce) {
  .wellore-h1,
  .hero-headline {
    filter: drop-shadow(2px 2px 0 #adff2f);
  }

  .wellore-h1--on-dark {
    filter: drop-shadow(3px 3px 0 #b8e632);
  }
}

.hero-tag {
  margin: 0 auto 2rem;
  max-width: 36rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Внутренние разделы (section.html): точный скос шапки + выступающая линия под скосом */
body.page-section .site-header.site-header--hero {
  /* Высота низа чёрной шапки: слева 545px, справа 600px */
  --header-left-height: 545px;
  --header-right-height: 600px;
  --slant-rise: calc(var(--header-right-height) - var(--header-left-height)); /* 55px */

  /* Выступающая линия */
  --slant-line-color: #1b5459;
  --slant-line-thickness: 30px;
  --slant-line-out-left: 20px;
  --slant-line-out-right: 60px;
  --header-slice-stack: calc(var(--slant-rise) + var(--slant-line-thickness));
}

body.page-section .site-header__page-shell {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--header-right-height);
  /* Срез: слева 600px, справа 545px (правый край выше) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-rise)), 0 100%);
}

body.page-section .site-header__hero-white-wedge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--header-slice-stack);
  z-index: 0;
  background: #fff;
  pointer-events: none;
}

body.page-section .site-header__slant-teal-band {
  position: absolute;
  left: calc(-1 * var(--slant-line-out-left));
  width: calc(100% + var(--slant-line-out-left) + var(--slant-line-out-right));
  right: auto;
  bottom: 0;
  height: var(--header-slice-stack);
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  background: var(--slant-line-color);
  /* Полоса под скосом: разворот относительно текущей шапки по запросу */
  clip-path: polygon(
    0 calc(100% * (var(--slant-rise) / var(--header-slice-stack))),
    100% 0,
    100% calc(100% * (var(--slant-line-thickness) / var(--header-slice-stack))),
    0 100%
  );
}

body.page-section .wellore-h1__line,
body.page-section .wellore-h1__slash,
body.page-section .hero-headline__line,
body.page-section .hero-headline__slash {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.page-section .wellore-h1,
body.page-section .hero-headline {
  filter:
    drop-shadow(3px 3px 0 #c5f040)
    drop-shadow(2px 2px 0 rgba(184, 230, 50, 0.9));
}

body.page-section .site-header__foreground .hero-tag,
body.page-section .hero-tag {
  color: #fff;
  font-size: clamp(1.12rem, 2.5vw, 1.5rem);
  max-width: 42rem;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.wellore-h2 {
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body.page-section .site-header__foreground .hero-tag.wellore-h2,
body.page-section .hero-tag.wellore-h2,
.site-header--hero .hero-tag.wellore-h2 {
  font-size: clamp(2.24rem, 5vw, 3rem);
  line-height: 1.08;
  max-width: min(52rem, 92vw);
  margin: 0 auto 2rem;
}

@media (prefers-reduced-motion: reduce) {
  body.page-section .wellore-h1,
  body.page-section .hero-headline {
    filter: drop-shadow(3px 3px 0 #b8e632);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  background: var(--lime);
  color: #0f1110;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  border: none;
  cursor: pointer;
  transition:
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.btn-primary:hover {
  background: var(--lime-hot);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(184, 230, 50, 0.35);
  }

  .btn-primary:active {
    transform: translateY(0);
  }
}

.btn-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #0f1110;
  display: grid;
  place-items: center;
  padding-left: 3px;
}

.section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.section-title {
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--orange-accent);
  margin: 0 0 0.5rem;
}

.section-title.teal {
  color: var(--teal);
}

.section-title.right {
  text-align: right;
}

.section-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.lead {
  max-width: 36rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* —— Services: «Разработка игр» (светлая полоса как в макете) —— */
.section-services-wrap {
  scroll-margin-top: 1rem;
}

/* simple_text: блок под шапкой; ширина колонки — .wrap (1180 / 92vw) */
.simple-text {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #4d5351;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(0.5rem, 1.5vw, 1rem);
}

.simple-text .wrap > p {
  margin: 0 0 1.05rem;
  font-size: clamp(1rem, 3.8vw, 2.0rem);
  line-height: 1.05;
  text-align: left;
  color: #4d5351;
}

.simple-text .wrap > p:last-child {
  margin-bottom: 0;
}

/* AI Solutions: два зелёных блока — цвет/шрифт как .what-we-do-strip, на всю ширину */
.ai-zigzag {
  /* Геометрия по референсу (жёлтые размеры на схеме) */
  --zigzag-wrap-width: min(1180px, 92vw);
  /* Правый «ух» (::after) и панель --2 по высоте контента; верхний (::before) — по панели --1 */
  --zigzag-top-gap-right-top: 66px;
  --zigzag-top-gap-right-bottom: 80px;
  --zigzag-bottom-gap-left-top: 194px;
  --zigzag-bottom-gap-left-bottom: 158px;
  --zigzag-fill-color: #4da07b;
  /* Половина «поля» слева/справа от центральной колонки; левая полоса шире на 30% — см. ::before */
  --zigzag-side-fill: max(0px, calc((100vw - var(--zigzag-wrap-width)) / 2));
  --zigzag-side-fill-left: calc(var(--zigzag-side-fill) * 1.3);

  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 0;
}

.ai-zigzag__wrap {
  width: var(--zigzag-wrap-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: visible;
}

.ai-zigzag__wrap::before,
.ai-zigzag__wrap::after {
  content: "";
  position: absolute;
  width: var(--zigzag-side-fill);
  background: var(--zigzag-fill-color);
  pointer-events: none;
}

.ai-zigzag__wrap::before {
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--zigzag-side-fill-left));
  width: var(--zigzag-side-fill-left);
  height: auto;
}

.ai-zigzag__wrap::after {
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--zigzag-side-fill));
  height: auto;
}

/* Один модуль на секцию: только верхний / нижний зелёный «ушной» край */
.ai-zigzag--block-left .ai-zigzag__wrap::after {
  display: none;
}

.ai-zigzag--block-right .ai-zigzag__wrap::before {
  display: none;
}

.ai-zigzag__panel {
  background: var(--zigzag-fill-color);
  color: #fff;
  padding: clamp(1.35rem, 3.2vw, 2rem) clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  display: flex;
  align-items: center;
}

.ai-zigzag__content {
  width: min(983px, 100%);
}

.ai-zigzag__panel--1 {
  width: 100%;
  align-self: stretch;
  min-height: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--zigzag-top-gap-right-top)) 0,
    calc(100% - var(--zigzag-top-gap-right-bottom)) 100%,
    0 100%
  );
}

.ai-zigzag__panel--1 .ai-zigzag__content {
  max-width: calc(100% - var(--zigzag-top-gap-right-bottom) - 24px);
  margin-right: auto;
}

.ai-zigzag__panel--2 {
  width: 100%;
  align-self: stretch;
  min-height: 0;
  margin-top: 0;
  clip-path: polygon(
    var(--zigzag-bottom-gap-left-top) 0,
    100% 0,
    100% 100%,
    var(--zigzag-bottom-gap-left-bottom) 100%
  );
}

.ai-zigzag__panel--2 .ai-zigzag__content {
  max-width: calc(100% - var(--zigzag-bottom-gap-left-top) - 24px);
  margin-left: auto;
}

.ai-zigzag__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-zigzag__item {
  display: flex;
  gap: 0.45em;
  align-items: flex-start;
  margin: 0;
  padding: clamp(0.4rem, 0.95vw, 0.6rem) 0;
  text-align: left;
  font-size: clamp(1.45rem, 3.8vw, 2.65rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 0.9;
  white-space: normal;
  overflow-wrap: break-word;
  color: #ffffff;
  border-bottom: none;
}

.ai-zigzag__item:last-child {
  border-bottom: none;
}

.ai-zigzag__item::before {
  content: "-";
  flex-shrink: 0;
  font-weight: 300;
}

@media (max-width: 720px) {
  .ai-zigzag__panel--1,
  .ai-zigzag__panel--2 {
    min-height: 0;
    /* При full-width контенте clip-path обрезает текст (особенно panel--2 слева) */
    clip-path: none;
  }

  .ai-zigzag__panel--1 .ai-zigzag__content,
  .ai-zigzag__panel--2 .ai-zigzag__content {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* —— color_block_2: бирюзовый блок, скос сверху, заголовок + текст —— */
.color-block-2 {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 0;
}

.color-block-2__surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  background: #2d6f5c;
  color: #fff;
  clip-path: polygon(0 clamp(0.65rem, 2vw, 1.1rem), 100% 0, 100% 100%, 0 100%);
  padding: clamp(2rem, 4.5vw, 3.25rem) 0 clamp(2rem, 4vw, 2.75rem);
  box-sizing: border-box;
}

.color-block-2__inner {
  position: relative;
  z-index: 2;
}

.color-block-2__parallax-media {
  display: none;
}

.color-block-2--parallax .color-block-2__surface {
  background-color: inherit;
}

.color-block-2--parallax .color-block-2__parallax-media {
  display: block;
  position: absolute;
  inset: -36% -10%;
  z-index: 0;
  transform: translate3d(
      var(--cb2-parallax-offset-x, 0px),
      var(--cb2-parallax-y, 0px),
      0
    )
    scale(var(--cb2-parallax-scale, 1.2));
  will-change: transform;
}

.color-block-2--parallax .color-block-2__parallax-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--cb2-parallax-fit, cover);
  object-position: center;
  opacity: var(--cb2-parallax-overlay-opacity, 0.35);
}

.color-block-2--parallax[data-parallax-fit="contain"] .color-block-2__parallax-media {
  inset: 0;
  transform: translate3d(var(--cb2-parallax-offset-x, 0px), 0, 0)
    scale(var(--cb2-parallax-scale, 1.2));
}

.color-block-2--parallax[data-parallax-fit="contain"] .color-block-2__parallax-img {
  object-position: center calc(50% + var(--cb2-parallax-y, 0px));
}

.color-block-2__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.35em;
  margin: 0 0 clamp(0.35rem, 1vw, 0.7rem);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.7rem, 6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
}

.color-block-2__title-gradient {
  display: inline;
  background: linear-gradient(92deg, #ff8ec8 0%, #e879f9 28%, #a78bfa 55%, #7ee8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.color-block-2__body {
  margin: 0 0 1.05rem;
  max-width: none;
  width: 100%;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1rem, 3.8vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: normal;
  color: #fff;
}

.color-block-2__body:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .color-block-2__surface {
    clip-path: none;
    padding-top: clamp(1.5rem, 5vw, 2rem);
  }
}

/* —— letstalk_anim_block: наклонная бегущая строка (после zigzag) —— */
.letstalk-anim {
  --lt-mid: #2d6b5c;
  --lt-stripe: #6bc9a4;
  --lt-tan: #e5ddd4;
  --lt-top-bg: #e5ddd4;
  --lt-bottom-bg: #0a0a0a;
  /* Бегущая строка: больше секунд = медленнее. normal | reverse — направление. */
  --lt-marquee-duration: 85s;
  --lt-marquee-direction: reverse;

  position: relative;
  overflow: hidden;
  /* Фон модуля ровно 50/50: верх и низ настраиваются через top_bg / bottom_bg */
  background: linear-gradient(
    to bottom,
    var(--lt-top-bg) 0%,
    var(--lt-top-bg) 50%,
    var(--lt-bottom-bg) 50%,
    var(--lt-bottom-bg) 100%
  );
}

.letstalk-anim__tilt-outer {
  overflow: hidden;
  width: 100%;
}

.letstalk-anim__tilt {
  display: flex;
  justify-content: center;
  width: 122%;
  max-width: none;
  margin-left: -11%;
  margin-right: -11%;
  margin-top: clamp(0.15rem, 0.6vw, 0.35rem);
  margin-bottom: clamp(0.35rem, 1.2vw, 0.85rem);
  transform: rotate(-2.5deg);
  transform-origin: 50% 50%;
}

.letstalk-anim__band {
  width: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.letstalk-anim__stripe {
  height: clamp(12px, 1.5vw, 22px);
  background: var(--lt-stripe);
}

.letstalk-anim__marquee {
  background: var(--lt-mid);
  overflow: hidden;
  padding: clamp(0.45rem, 1.2vw, 0.7rem) 0;
}

.letstalk-anim__marquee-track {
  display: flex;
  width: max-content;
  animation: letstalk-marquee-ltr var(--lt-marquee-duration) linear infinite;
  animation-direction: var(--lt-marquee-direction);
}

.letstalk-anim__marquee-chunk {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
}

.letstalk-anim__unit {
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(5.4rem, 12.8vw, 8.6rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.78;
  color: #fff;
  white-space: nowrap;
}

@keyframes letstalk-marquee-ltr {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.letstalk-anim__black {
  position: relative;
  min-height: clamp(52px, 9vw, 96px);
  background: var(--lt-bottom-bg);
  margin-top: clamp(-0.35rem, -0.8vw, -0.1rem);
}

.letstalk-anim__triangle {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: min(38vw, 360px);
  height: clamp(40px, 8vw, 88px);
  background: var(--lt-bottom-bg);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .letstalk-anim__marquee-track {
    animation: none;
  }
}

.dev-games-intro {
  background: #fff;
  color: #111;
  padding: var(0, clamp(2.25rem, 5.5vw, 4rem)) 0
    var(--dev-games-intro-padding-bottom, clamp(2.25rem, 5.5vw, 4rem));
  margin-bottom: 0;
}

.dev-games-intro--no-cta .dev-games-intro__inner {
  justify-content: flex-start;
}

.dev-games-intro--no-cta .dev-games-intro__text {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
}

.dev-games-intro--no-cta .dev-games-lead {
  max-width: 100%;
  width: 100%;
  /* в 2 раза крупнее базового .dev-games-lead; на всю ширину .wrap (1180 / 92vw) */
  font-size: clamp(1.9rem, 3.3vw, 2.24rem);
  line-height: 1.12;
}

/* inner_header: плотнее расстояние между h2 и lead */
.inner-header .dev-games-title {
  margin-bottom: clamp(0.15rem, 0.45vw, 0.35rem);
}

/* Вкладки AI Solutions: слева вертикальный список, справа контент (как в макете) */
.solution-tabs {
  --solution-tabs-teal: #4da68a;
  --solution-tabs-bg-content: #f7f7f5;
  background: #fff;
  color: #111;
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(15, 17, 16, 0.08);
}

.solution-tabs__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}

.solution-tabs__sidebar {
  /* Как раньше по левому краю; колонка на 50px шире базового clamp(220px, 32%, 300px) */
  flex: 0 0 calc(clamp(220px, 32%, 300px) + 50px);
  background: #fff;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.5rem, 1.5vw, 1rem) clamp(1.25rem, 3vw, 2rem) 0;
  border-right: 1px solid rgba(15, 17, 16, 0.08);
}

.solution-tabs__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}

.solution-tabs__tab {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1.41rem, 3.04vw, 1.63rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
  color: #0a0a0a;
  border-radius: 6px;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.solution-tabs__tab-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem 0.75rem 0.65rem;
  min-height: 4.4rem;
}

.solution-tabs__tab-mark {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.solution-tabs__tab-mark__bar {
  display: block;
  width: 5px;
  height: 1.15em;
  background: #c8c8c8;
  border-radius: 1px;
  transform: skewX(-14deg);
}

.solution-tabs__tab-arrow {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--solution-tabs-teal);
}

.solution-tabs__tab-label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.solution-tabs__tab:hover .solution-tabs__tab-inner {
  background: rgba(0, 0, 0, 0.03);
}

.solution-tabs__tab:focus-visible {
  outline: 2px solid var(--solution-tabs-teal);
  outline-offset: 2px;
}

.solution-tabs__tab[aria-selected="true"] .solution-tabs__tab-inner {
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
  border-radius: 8px;
}

.solution-tabs__tab[aria-selected="true"] .solution-tabs__tab-mark {
  display: flex;
}

.solution-tabs__tab[aria-selected="true"] .solution-tabs__tab-arrow {
  display: block;
}

.solution-tabs__tab[aria-selected="true"] .solution-tabs__tab-label,
.solution-tabs__tab[aria-selected="true"] .solution-tabs__tab-arrow {
  color: var(--solution-tabs-teal);
}

.solution-tabs__panels {
  flex: 1 1 0;
  min-width: min(100%, 22rem);
  background: var(--solution-tabs-bg-content);
  padding: clamp(1.35rem, 3.5vw, 2.75rem) clamp(1.1rem, 3.5vw, 2.75rem);
}

.solution-tabs__heading {
  margin: 0 0 clamp(0.85rem, 2vw, 1.25rem);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1.84rem, 3.84vw, 2.32rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--solution-tabs-teal);
}

.solution-tabs__body {
  max-width: 42rem;
  font-size: clamp(1.47rem, 2.48vw, 0.68rem);
  line-height: 1.5;
  color: #3a3d3c;
}

.solution-tabs__placeholder {
  margin: 0;
  color: rgba(15, 17, 16, 0.45);
  font-style: italic;
}

@media (max-width: 720px) {
  .solution-tabs__sidebar {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid rgba(15, 17, 16, 0.08);
    padding: 0.75rem 0 1rem;
  }

  .solution-tabs__panels {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Нижний внутренний заголовок секции (перед simple_text / карточками) */
.inner-header-low {
  background: #fff;
  color: #0a0a0a;
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(0.35rem, 1vw, 0.75rem);
  border-top: 1px solid rgba(15, 17, 16, 0.08);
}

.inner-header-low .hover-product-cards__title {
  margin-bottom: 0;
}

.inner-header-low + .simple-text {
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
}

/* —— Модуль: две карточки с hover (AI Products и т.п.) —— */
.hover-product-cards {
  background: #fff;
  color: #0a0a0a;
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(15, 17, 16, 0.08);
}

.hover-product-cards__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  max-width: 52rem;
}

.hover-product-cards__title {
  margin: 0 0 0.65rem;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(2.7rem, 6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  line-height: 0.1;
}

.hover-product-cards__lead {
  margin: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(2rem, 3.8vw, 2.24rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: #4d5351;
}

.hover-product-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.hover-product-card {
  min-width: 0;
}

.hover-product-card__surface {
  position: relative;
  display: block;
  min-height: clamp(200px, 28vw, 260px);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  padding-top: clamp(4.25rem, 11vw, 5.25rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  outline: none;
  isolation: isolate;
  transition: box-shadow 0.25s ease;
}

.hover-product-card__surface:focus-visible {
  box-shadow: 0 0 0 3px rgba(90, 157, 130, 0.55);
}

.hover-product-card__bg {
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  transition: background 0.35s ease;
  z-index: 0;
}

.hover-product-card__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.hover-product-card__surface--has-image .hover-product-card__bg {
  background: transparent;
}

.hover-product-card__surface--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(12, 14, 13, 0);
  transition: background 0.35s ease;
  pointer-events: none;
}

.hover-product-card__slashes {
  position: absolute;
  left: clamp(0.85rem, 2vw, 1.2rem);
  bottom: clamp(0.75rem, 2vw, 1.1rem);
  display: flex;
  gap: 5px;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hover-product-card__slash {
  display: block;
  width: 7px;
  height: clamp(2.5rem, 8vw, 3.5rem);
  background: #b8b8b8;
  border-radius: 1px;
  transform: skewX(-12deg);
}

.hover-product-card__title {
  position: absolute;
  left: clamp(1.1rem, 2.5vw, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  top: clamp(1.1rem, 2.5vw, 1.5rem);
  z-index: 2;
  display: block;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 90%;
  transition:
    color 0.3s ease,
    opacity 0.3s ease,
    transform 0.35s ease;
}

.hover-product-card__title--default {
  font-size: clamp(2.1rem, 4.8vw, 2.7rem);
  line-height: 1.18;
  color: #0a0a0a;
  opacity: 1;
}

.hover-product-card__title--hover {
  font-size: clamp(2.1rem, 4.8vw, 2.7rem);
  color: #fff;
  opacity: 0;
  transform: translateY(-6px);
}

/* Вынесли translate на обёртку: иначе clip-path + transform на одном слое даёт сбой угла после смены hover между карточками (Chrome/Safari). */
.hover-product-card__overlay-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 3;
  transform: translate3d(0, 102%, 0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hover-product-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--hp-slant, #1a1e1f);
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%);
  transform: translateZ(0);
}

.hover-product-card__overlay-text {
  margin: 0;
  position: absolute;
  right: clamp(0.85rem, 2vw, 1.25rem);
  bottom: clamp(0.85rem, 2.5vw, 1.35rem);
  left: 28%;
  text-align: right;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1.24rem, 2.3vw, 1.44rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
}

.hover-product-card__surface:hover .hover-product-card__bg,
.hover-product-card__surface:focus-within .hover-product-card__bg {
  background: var(--hp-accent, #5a9d82);
}

.hover-product-card__surface--has-image:hover .hover-product-card__image,
.hover-product-card__surface--has-image:focus-within .hover-product-card__image {
  opacity: 1;
  transform: scale(1.08);
  filter: blur(3px);
}

.hover-product-card__surface--has-image:hover::before,
.hover-product-card__surface--has-image:focus-within::before {
  background: rgba(10, 12, 11, 0.36);
}

.hover-product-card__surface:hover .hover-product-card__slashes,
.hover-product-card__surface:focus-within .hover-product-card__slashes {
  opacity: 0.25;
}

.hover-product-card__surface:hover .hover-product-card__title--default,
.hover-product-card__surface:focus-within .hover-product-card__title--default {
  opacity: 0;
}

.hover-product-card__surface:hover .hover-product-card__title--hover,
.hover-product-card__surface:focus-within .hover-product-card__title--hover {
  opacity: 1;
  transform: translateY(0);
}

.hover-product-card__surface:hover .hover-product-card__overlay-wrap,
.hover-product-card__surface:focus-within .hover-product-card__overlay-wrap {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .hover-product-card__bg,
  .hover-product-card__slashes,
  .hover-product-card__title,
  .hover-product-card__overlay-wrap {
    transition-duration: 0.05s;
  }
}

@media (max-width: 720px) {
  .hover-product-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* hover_product_cards_n — tmp/hover (1).html */
.hover-product-cards-n {
  background: #fff;
  padding: clamp(0.2rem, 0.7vw, 0.5rem) 0 clamp(1.3rem, 3vw, 2rem);
}

.btn-block-n {
  /* tmp: жёсткий лимит ширины 1180px по кнопкам, по центру */
  display: grid;
  grid-template-columns: repeat(var(--btn-cols, 2), 1fr);
  gap: var(--btn-gap, 24px);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.btn-card-n.is-hidden {
  display: none;
}

.btn-card-n {
  position: relative;
  aspect-ratio: var(--btn-aspect, 5/2);
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--btn-radius, 0px);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.btn-card-n:hover {
  transform: translateY(var(--btn-hover-lift, -4px));
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
}

.btn-card-n:active {
  transform: translateY(var(--btn-active-lift, -1px));
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
  transition: transform 0.08s ease, filter 0.08s ease;
}

.btn-card-n__idle {
  position: absolute;
  inset: 0;
  background: var(--btn-idle-bg, #e5e5e5);
  color: var(--btn-idle-color, #1a1a1a);
  padding: var(--btn-pad-y, 32px) var(--btn-pad-x, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.btn-card-n__idle-title {
  margin: 0;
  font-family: var(--btn-title-font, "Archivo Black"), system-ui, sans-serif;
  font-weight: var(--btn-title-weight, 900);
  font-size: var(--btn-idle-title-size, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--btn-title-spacing, 0.5px);
  text-align: left;
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* tmp: «Каждое слово на своей строке» — класс word-stack на idle/hover */
.btn-card-n__idle.word-stack .btn-card-n__idle-title,
.btn-card-n__hover.word-stack .btn-card-n__hover-title {
  word-spacing: 9999px;
}

.btn-card-n__idle-mark {
  position: absolute;
  margin: 0;
  font-family: var(--btn-mark-font, "Archivo Black"), system-ui, sans-serif;
  font-weight: var(--btn-mark-weight, 900);
  font-size: var(--btn-mark-size, 28px);
  color: var(--btn-mark-color, #b5b5b5);
  line-height: 1;
  left: var(--mark-left, var(--btn-pad-x, 36px));
  right: var(--mark-right, auto);
  top: var(--mark-top, auto);
  bottom: var(--mark-bottom, var(--btn-pad-y, 32px));
  transform: translate(var(--mark-x, 0px), var(--mark-y, 0px));
  z-index: 1;
  pointer-events: none;
}

.btn-card-n__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  transition: clip-path var(--btn-hover-speed, 0.45s) cubic-bezier(0.6, 0.05, 0.3, 1);
}

.btn-card-n:hover .btn-card-n__hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: auto;
}

.btn-card-n__hover-top {
  position: absolute;
  inset: 0;
  background: var(--btn-hover-top-bg, #3e8e78);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(var(--hover-diag-y, 55%) + var(--hover-diag-tilt, 0px)),
    0 var(--hover-diag-y, 55%)
  );
}

.btn-card-n__hover-bottom {
  position: absolute;
  inset: 0;
  background: var(--btn-hover-bottom-bg, #1f4738);
  clip-path: polygon(
    0 var(--hover-diag-y, 55%),
    100% calc(var(--hover-diag-y, 55%) + var(--hover-diag-tilt, 0px)),
    100% 100%,
    0 100%
  );
}

.btn-card-n__hover-title {
  position: absolute;
  top: var(--btn-pad-y, 32px);
  left: var(--btn-pad-x, 36px);
  right: var(--btn-pad-x, 36px);
  margin: 0;
  font-family: var(--btn-title-font, "Archivo Black"), system-ui, sans-serif;
  font-weight: var(--btn-title-weight, 900);
  font-size: var(--btn-hover-title-size, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--btn-title-spacing, 0.5px);
  color: var(--btn-hover-title-color, #fff);
  text-align: left;
  overflow-wrap: break-word;
  z-index: 2;
}

.btn-card-n__hover-desc {
  position: absolute;
  bottom: var(--btn-pad-y, 32px);
  left: var(--btn-pad-x, 36px);
  right: var(--btn-pad-x, 36px);
  margin: 0;
  font-family: var(--btn-desc-font, "Inter"), system-ui, sans-serif;
  font-weight: var(--btn-desc-weight, 700);
  font-size: var(--btn-desc-size, 14px);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: var(--btn-desc-spacing, 0.5px);
  color: var(--btn-hover-desc-color, #fff);
  text-align: var(--btn-desc-align, center);
  z-index: 2;
}

.btn-card-n__hover-image {
  position: absolute;
  right: 0;
  top: 50%;
  height: calc(var(--btn-img-h, 110%) * var(--btn-img-scale, 1));
  width: auto;
  transform: translate(calc(var(--btn-img-x, 0px)), calc(-50% + var(--btn-img-y, 0px)));
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
  z-index: 1;
}

@media (max-width: 980px) {
  .btn-block-n {
    grid-template-columns: repeat(min(var(--btn-cols, 2), 2), 1fr);
  }
}

@media (max-width: 600px) {
  .btn-block-n {
    grid-template-columns: 1fr;
  }
}

.dev-games-intro__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* portfolio_tags_block — макет из tmp/preview (1) (2).html (без панели настроек) */
.portfolio-tags-block {
  background: #fff;
  background-color: #fff;
  padding: clamp(0.2rem, 0.7vw, 0.5rem) 0 clamp(1.3rem, 3vw, 2rem);
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
  box-sizing: border-box;
}

.portfolio-tags-block > .wrap {
  width: 100%;
  max-width: min(var(--block-max-width, 1180px), 1180px);
  margin-left: var(--block-margin-left, auto);
  margin-right: var(--block-margin-right, auto);
  padding-left: var(--block-padding-x, 0px);
  padding-right: var(--block-padding-x, 0px);
  box-sizing: border-box;
}

.portfolio-tags-block__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: var(--row-height, 280px);
  row-gap: var(--grid-gap-y, var(--grid-gap, 24px));
  column-gap: var(--grid-gap-x, var(--grid-gap, 24px));
  overflow: visible;
}

.portfolio-tag-card {
  position: relative;
  overflow: visible;
  background: transparent;
  height: 100%;
  min-width: 0;
  transition: transform 0.4s ease, filter 0.4s ease;
  transform: translate(var(--card-shift-x, 0px), var(--card-shift-y, 0px));
}

.portfolio-tag-card:hover {
  transform: translate(var(--card-shift-x, 0px), calc(var(--card-shift-y, 0px) + var(--hover-lift, -6px)))
    scale(var(--hover-scale, 1.01));
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.3));
}

.portfolio-tag-card--top {
  grid-column: span 2;
}

.portfolio-tag-card--bottom {
  grid-column: span 3;
}

.portfolio-tag-card__surface {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: visible;
}

.portfolio-tag-card__plate {
  position: absolute;
  left: 50%;
  bottom: var(--plate-y, 0px);
  width: var(--plate-w, 100%);
  height: var(--plate-h, var(--plate-height, 65%));
  transform: translateX(calc(-50% + var(--plate-x, 0px)));
  background: var(--pt-bg, #355ddf);
  border-radius: var(--card-radius, 8px);
  z-index: 0;
}

.portfolio-tag-card__image-clip {
  position: absolute;
  top: calc(-1 * var(--ci-overflow-top, 0px));
  left: 0;
  right: 0;
  bottom: calc(var(--label-block-height, 50px) - var(--label-skew-abs, 0px));
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  z-index: 1;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--label-skew-abs, 0px) + var(--label-skew-top-right, 0px)),
    0 calc(100% - var(--label-skew-abs, 0px) + var(--label-skew-top-left, 0px))
  );
}

.portfolio-tag-card__image {
  display: block;
  position: absolute;
  left: var(--ci-offset-x, 0px);
  width: 100%;
  height: var(--ci-height, 100%);
  top: var(--ci-offset-y, 0px);
  background-size: var(--ci-size, contain);
  background-repeat: no-repeat;
  background-position: var(--ci-position, center center);
  transform: scale(var(--ci-scale, 1));
  transform-origin: center center;
  transition: transform 0.5s ease;
  z-index: 1;
}

.portfolio-tag-card:hover .portfolio-tag-card__image {
  transform: scale(calc(var(--ci-scale, 1) * var(--img-hover-scale, 1.04)));
}

.portfolio-tag-card__title {
  position: absolute;
  left: 50%;
  bottom: var(--label-y, 0px);
  width: var(--label-w, 100%);
  height: var(--label-block-height, 50px);
  transform: translateX(calc(-50% + var(--label-x, 0px)));
  background: var(--pt-label-bg, #2d4cc2);
  color: #fff;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-weight: var(--label-weight, 900);
  font-size: var(--label-font-size, 24px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing, 1px);
  padding: var(--label-padding-y, 14px) var(--label-padding-x, 16px);
  z-index: 2;
  border-radius: 0 0 var(--card-radius, 8px) var(--card-radius, 8px);
  white-space: pre-line;
  clip-path: polygon(
    0 var(--label-skew-top-left, 0px),
    100% var(--label-skew-top-right, 0px),
    100% 100%,
    0 100%
  );
  display: flex;
  justify-content: var(--label-justify, center);
  align-items: var(--label-align-items, flex-end);
}

@media (max-width: 980px) {
  .portfolio-tags-block__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-tag-card--top,
  .portfolio-tag-card--bottom {
    grid-column: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-tag-card,
  .portfolio-tag-card__image {
    transition: none;
  }

  .portfolio-tag-card:hover {
    transform: translate(var(--card-shift-x, 0px), var(--card-shift-y, 0px));
    filter: none;
  }

  .portfolio-tag-card:hover .portfolio-tag-card__image {
    transform: scale(var(--ci-scale, 1));
  }
}

.dev-games-intro__text {
  flex: 1 1 18rem;
  min-width: 0;
}

.dev-games-title {
  margin: 0 0 clamp(0.35rem, 1vw, 0.7rem);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  /* Как .hover-product-cards__title у inner_header_low */
  font-size: clamp(2.7rem, 6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: 0.06rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.dev-games-title__slash {
  color: #9b72cb;
  font-weight: 800;
  margin-right: 0.1em;
  vertical-align: baseline;
}

.dev-games-title__main {
  font-weight: 800;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: linear-gradient(92deg, #9b72cb 0%, #c97840 46%, #ff9500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Как абзацы в .simple-text .wrap > p; |linebreaks даёт <p> при пустой строке в тексте */
.dev-games-lead {
  max-width: 44rem;
}

.dev-games-lead > p {
  margin: 0 0 1.05rem;
  font-size: clamp(1rem, 3.8vw, 2rem);
  line-height: 1.05;
  text-align: left;
  color: #4d5351;
}

.dev-games-lead > p:last-child {
  margin-bottom: 0;
}

.dev-games-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: auto;
  color: #0a0a0a;
}

.dev-games-discuss {
  position: relative;
  width: max(280px, calc(var(--dev-discuss-circle-radius, 130px) * 2));
  height: max(280px, calc(var(--dev-discuss-circle-radius, 130px) * 2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
}

.dev-games-discuss__circle {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate(
    var(--dev-discuss-circle-offset-x, 0px),
    var(--dev-discuss-circle-offset-y, 0px)
  );
  animation: dev-games-discuss-rotate var(--dev-discuss-rotate-duration, 12s) linear infinite;
  pointer-events: none;
}

.dev-games-discuss__circle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dev-games-discuss__circle text {
  font-size: var(--dev-discuss-circle-text-size, 20px);
  font-weight: 700;
  letter-spacing: var(--dev-discuss-circle-letter-spacing, 3px);
  fill: var(--dev-discuss-circle-text-color, #000);
  text-transform: uppercase;
}

.dev-games-discuss__img {
  position: absolute;
  z-index: 2;
  width: var(--dev-discuss-btn-width, 240px);
  height: var(--dev-discuss-btn-height, 80px);
  object-fit: contain;
  transform: translate(
    var(--dev-discuss-btn-offset-x, 0px),
    var(--dev-discuss-btn-offset-y, 0px)
  );
  transition: transform 0.3s ease;
  pointer-events: none;
}

.dev-games-discuss__label {
  position: absolute;
  z-index: 3;
  color: var(--dev-discuss-btn-text-color, #000);
  font-size: var(--dev-discuss-btn-text-size, 28px);
  font-weight: 900;
  letter-spacing: var(--dev-discuss-btn-letter-spacing, 2px);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(
    calc(var(--dev-discuss-btn-offset-x, 0px) + var(--dev-discuss-btn-text-offset-x, 0px)),
    calc(var(--dev-discuss-btn-offset-y, 0px) + var(--dev-discuss-btn-text-offset-y, 0px))
  );
  transition: transform 0.3s ease;
}

.dev-games-discuss:focus-visible {
  outline: 3px solid var(--lime, #adff2f);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .dev-games-discuss:hover .dev-games-discuss__img {
    transform: translate(
      var(--dev-discuss-btn-offset-x, 0px),
      var(--dev-discuss-btn-offset-y, 0px)
    ) scale(var(--dev-discuss-hover-scale, 1.12));
  }

  .dev-games-discuss:hover .dev-games-discuss__label {
    transform: translate(
      calc(var(--dev-discuss-btn-offset-x, 0px) + var(--dev-discuss-btn-text-offset-x, 0px)),
      calc(var(--dev-discuss-btn-offset-y, 0px) + var(--dev-discuss-btn-text-offset-y, 0px))
    ) scale(var(--dev-discuss-hover-scale, 1.12));
  }

  .dev-games-discuss:active .dev-games-discuss__img {
    transform: translate(
      var(--dev-discuss-btn-offset-x, 0px),
      var(--dev-discuss-btn-offset-y, 0px)
    ) scale(var(--dev-discuss-active-scale, 0.94));
    transition-duration: 0.1s;
  }

  .dev-games-discuss:active .dev-games-discuss__label {
    transform: translate(
      calc(var(--dev-discuss-btn-offset-x, 0px) + var(--dev-discuss-btn-text-offset-x, 0px)),
      calc(var(--dev-discuss-btn-offset-y, 0px) + var(--dev-discuss-btn-text-offset-y, 0px))
    ) scale(var(--dev-discuss-active-scale, 0.94));
    transition-duration: 0.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-games-discuss__circle {
    animation: none;
  }

  .dev-games-discuss:hover .dev-games-discuss__img {
    transform: translate(
      var(--dev-discuss-btn-offset-x, 0px),
      var(--dev-discuss-btn-offset-y, 0px)
    );
  }
}

@keyframes dev-games-discuss-rotate {
  from {
    transform: translate(
      var(--dev-discuss-circle-offset-x, 0px),
      var(--dev-discuss-circle-offset-y, 0px)
    ) rotate(0deg);
  }

  to {
    transform: translate(
      var(--dev-discuss-circle-offset-x, 0px),
      var(--dev-discuss-circle-offset-y, 0px)
    ) rotate(360deg);
  }
}

@media (max-width: 720px) {
  .dev-games-cta {
    margin-left: 0;
    align-self: center;
    justify-content: center;
  }

  .dev-games-intro__inner {
    flex-direction: column;
    align-items: stretch;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.grid-2.services-cards {
  max-width: min(calc(857px * 2 + 2rem), 100%);
  margin-inline: auto;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Сетка карточек: белый фон, мало отступа сверху — ближе к «Разработка игр» */
.section-services-wrap .section-services-grid {
  background: #fff;
  padding: clamp(0.35rem, 1.2vw, 0.85rem) 0 clamp(2.25rem, 5vw, 3.5rem);
}

@media (max-width: 720px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: inline-flex;
    z-index: 60;
    position: relative;
  }

  .header-inner .nav-toggle {
    margin-left: auto;
  }

  .header-inner .nav {
    display: none;
    margin-left: 0;
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    row-gap: 0.15rem;
    padding: 5.25rem 1.35rem 2rem;
    margin: 0;
    overflow-y: auto;
    background: rgba(10, 12, 11, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: calc(0.88rem * 1.3);
    letter-spacing: 0.12em;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }

  .header-inner .nav a {
    padding: 0.85rem 0.5rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header-inner .nav a:last-child {
    border-bottom: none;
  }

  .header-inner .nav .nav-cta {
    margin-top: 0.75rem;
    padding: 0.65rem 1.25rem;
    justify-content: center;
    align-self: center;
    border: none;
  }

  body.site-nav-is-open {
    overflow: hidden;
  }

  body.site-nav-is-open .header-inner .nav {
    display: flex;
  }

  .site-header__foreground .nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
  }

  .site-header--hero .hero-inner {
    grid-template-columns: 1fr;
  }

  .site-header--hero .hero-copy {
    grid-column: 1;
  }

  .site-header--hero .social-rail {
    grid-column: 1;
    justify-self: center;
  }

  .social-rail {
    flex-direction: row;
    padding-top: 0;
  }
}

.card-service {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  aspect-ratio: var(--service-card-aspect);
  min-height: 0;
  width: 100%;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease,
    border-color 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .card-service:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .section-services-wrap .card-service:hover .card-service__img {
    transform: scale(1.04);
  }
}

.section-services-wrap .card-service {
  background: #fff;
  border-color: rgba(15, 17, 16, 0.1);
}

/* absolute: заполнение блока при заданном aspect-ratio */
.card-service__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0.98;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-label {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85);
}

/* —— Slanted teal —— */
.slant-teal {
  position: relative;
  background: linear-gradient(
    160deg,
    var(--teal-deep) 0%,
    var(--teal) 50%,
    #347566 100%
  );
  padding: clamp(4rem, 10vw, 7rem) 0;
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  margin: 2rem 0;
}

/* —— What we do: наклонная зелёная плашка (skew), по краям — белый фон и белые «полосы» —— */
.what-we-do-strip {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  /* белые полосы сверху/снизу; наклон зелёного слоя открывает тот же белый фон по углам */
  padding: clamp(1rem, 2.8vw, 1.85rem) 0;
}

.what-we-do-strip__plane {
  background: #4da07b;
  transform: skewY(-3.5deg);
  padding: clamp(3.25rem, 7.5vw, 5.5rem) 0;
}

.what-we-do-strip__inner {
  transform: skewY(3.5deg);
}

.what-we-do-strip__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 360px);
  gap: clamp(1rem, 2.6vw, 2rem);
  align-items: stretch;
}

.what-we-do-strip__main {
  min-width: 0;
}

.what-we-do-strip__head {
  text-align: right;
  padding-bottom: clamp(1rem, 2.2vw, 1.35rem);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
}

.what-we-do-strip__title {
  margin: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
}

.what-we-do-reel {
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  text-align: center;
}

.what-we-do-reel__inner {
  position: relative;
  width: 100%;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  perspective: var(--wwd-perspective, 1400px);
}

.what-we-do-reel__mask {
  position: relative;
  width: 100%;
  height: var(--wwd-mask-height, min(420px, 48vh));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 22%,
    black 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 22%,
    black 78%,
    transparent 100%
  );
}

.what-we-do-reel__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.what-we-do-reel__item {
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #ffffff;
}

.what-we-do-strip__media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.what-we-do-strip__media img {
  width: 100%;
  /* Размер картинки. Переопределяется через style="--wwd-image-size: ..." на родителе. */
  max-width: var(--wwd-image-size, clamp(240px, 28vw, 360px));
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}

@media (max-width: 900px) {
  .what-we-do-strip__content {
    grid-template-columns: 1fr;
  }

  .what-we-do-strip__media {
    display: none;
  }
}

/* —— Projects (светлая полоса, без тёмного фона страницы) —— */
#projects.section {
  background: #ffffff;
  color: #141816;
}

#projects .lead {
  color: rgba(20, 24, 22, 0.62);
}

#projects .ph {
  background: linear-gradient(135deg, #eceeed, #f5f6f5);
  border: 1px solid rgba(15, 17, 16, 0.1);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.ph {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a2e2d, #1a1d1c);
  border: 1px solid var(--line);
}

#why-us.section {
  background: #fff;
  color: #141816;
}

#why-us .lead {
  color: rgba(20, 24, 22, 0.62);
}

/* —— Why us (tmp/whyus.html) —— */
.why-block {
  padding-top: var(--why-top-space, 90px);
}

.why-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--why-gap, 24px);
}

@media (max-width: 980px) {
  .why-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .why-block__grid {
    grid-template-columns: 1fr;
  }
}

.why-card {
  position: relative;
  background: var(--why-bg, #e6e6e6);
  border-radius: var(--why-radius, 6px);
  padding: var(--why-padding, 24px);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #1a1a1a;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
}

.why-card__image-wrap {
  position: relative;
  width: 100%;
  height: var(--why-img-height, 200px);
  margin-top: calc(-1 * var(--why-img-rise, 70px));
  margin-bottom: var(--why-img-bottom, 12px);
  overflow: visible;
  pointer-events: none;
}

.why-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  transform: scale(var(--why-img-scale, 1));
  transform-origin: center bottom;
}

/* Как tmp/whyus.html: маска через --shine-mask; JS дублирует в inline для капризных движков. */
.why-card__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: var(--shine-mask, none);
  mask-image: var(--shine-mask, none);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(
    var(--shine-angle, 110deg),
    transparent 0%,
    transparent calc(50% - var(--shine-width, 60px) / 2),
    rgba(255, 255, 255, var(--shine-strength, 0.55)) 50%,
    transparent calc(50% + var(--shine-width, 60px) / 2),
    transparent 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  transform: scale(var(--why-img-scale, 1));
  transform-origin: center bottom;
  animation: shine-sweep var(--shine-duration, 2.4s) var(--shine-easing, ease-in-out)
    var(--shine-delay, 3s) infinite;
}

/* Если mask-image с file/http URL не рисуется (часто при file://) — хотя бы видимая полоса. */
.why-card__shine.why-card__shine--no-mask-fallback {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

@keyframes shine-sweep {
  0% {
    background-position: -75% 0;
  }

  35% {
    background-position: 175% 0;
  }

  100% {
    background-position: 175% 0;
  }
}

.why-card__title {
  margin: 0 0 12px;
  font-family: var(--why-title-font, var(--site-font-family)), system-ui, sans-serif;
  font-weight: var(--why-title-weight, 800);
  font-size: var(--why-title-size, 22px);
  line-height: 1.2;
  color: #1c1c1c;
}

.why-card__divider {
  display: block;
  width: var(--why-divider-width, 56px);
  height: var(--why-divider-height, 4px);
  background: var(--accent, #555);
  border-radius: 2px;
  align-self: flex-start;
  margin-left: calc((100% - var(--why-divider-width, 56px)) * var(--why-divider-x, 0.5));
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 16px;
}

.why-card__text {
  margin: 0;
  font-family: var(--why-text-font, var(--site-font-family)), system-ui, sans-serif;
  font-weight: var(--why-text-weight, 400);
  font-size: var(--why-text-size, 15px);
  line-height: 1.5;
  color: #2d2d2d;
}

/* —— Testimonials —— */
.testimonial-inner {
  max-width: min(920px, 94vw);
  margin: 0 auto;
  text-align: center;
}

.quote {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 2rem 0 1.5rem;
}

.quote-author {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.quote-role {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.client-logo {
  margin-top: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  font-size: 1.1rem;
  color: #fff;
}

/* Testimonials: макет — сплошной бирюза, крупная центральная цитата, заголовок справа */
.testimonials-block.slant-teal {
  background: #4c9f7f;
  background-image: none;
}

.testimonials-block__head {
  text-align: right;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.testimonials-block__title {
  margin: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
}

.testimonials-block__quote {
  position: relative;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  padding: 0 clamp(2rem, 5vw, 3.5rem);
  max-width: 52rem;
  quotes: none;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(1.45rem, 3.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #ffffff;
  border: none;
}

.testimonials-block__quote::before,
.testimonials-block__quote::after {
  content: '"';
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  opacity: 0.95;
  pointer-events: none;
}

.testimonials-block__quote::before {
  left: 0;
  top: -0.15em;
  font-size: clamp(3rem, 8vw, 5rem);
}

.testimonials-block__quote::after {
  right: 0;
  bottom: -0.35em;
  font-size: clamp(3rem, 8vw, 5rem);
}

.testimonials-block__logo {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.22em;
  color: #ffffff;
}

.testimonials-block__attribution {
  margin: 0;
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}

.testimonials-block__attribution .quote-role {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.testimonials-block__attribution .quote-author {
  letter-spacing: inherit;
}

.clients-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* —— Footer / contact (сплошной чёрный фон; без картинки и затемняющего слоя) —— */
.footer-hero {
  position: relative;
  padding: clamp(4rem, 10vw, 6rem) 0;
  background: #000;
  color: var(--text);
}

.footer-inner {
  position: relative;
  max-width: 520px;
}

.django-messages {
  position: relative;
  z-index: 50;
  max-width: min(720px, 92vw);
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
}

.django-messages__item {
  margin: 0 0 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.django-messages__item--success {
  background: rgba(125, 255, 80, 0.14);
  border: 1px solid rgba(125, 255, 80, 0.45);
  color: #e8ffe8;
}

.django-messages__item--error {
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 120, 120, 0.45);
  color: #ffe4e4;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text);
  font: inherit;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted);
}

/* Контакт: обводка #2d4a46, фон #0d1110, без скругления */
.footer-hero .contact-form input,
.footer-hero .contact-form textarea {
  border-radius: 0;
  border: 1px solid #2d4a46;
  background-color: #0d1110;
  color: #eeeeee;
}

.footer-hero .contact-form input::placeholder,
.footer-hero .contact-form textarea::placeholder {
  color: rgba(238, 238, 238, 0.72);
}

.footer-hero .contact-form input:focus,
.footer-hero .contact-form textarea:focus {
  outline: none;
  border-color: #3a5c56;
}

.contact-form__cta {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-form__cta .lets-talk-cta {
  max-width: 100%;
}

/* Контакт: надёжная ширина без циклического min(..., 100%) и без 3D в узкой колонке */
.footer-hero .contact-form__cta .lets-talk-cta {
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  max-width: 361px;
  margin-inline: auto;
  --lets-talk-cta-wrapper-perspective: none;
}

.footer-hero .contact-form__cta .lets-talk-cta__wrap {
  padding: 0;
}

.footer-hero .contact-form__cta .lets-talk-cta__box {
  margin-inline: auto;
  transform: none;
}

.footer-hero .contact-form__cta .lets-talk-cta__box:hover {
  transform: translateY(var(--lets-talk-cta-hover-lift, -4px));
}

.footer-hero .contact-form__cta .lets-talk-cta__link {
  transform: none;
}

/* Нижний футер: две колонки + copyright (макет Follow us / Navigation) */
.site-footer-block {
  background: #000;
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), system-ui, sans-serif;
}

.site-footer-block__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-footer-block__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.site-footer-block__heading {
  margin: 0;
  padding-bottom: 0.65rem;
  flex: 1;
  font-size: clamp(0.82rem, 1.45vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}

.site-footer-block__heading--nav {
  text-align: right;
}

.site-footer-block__rule {
  width: 100%;
  height: 1px;
  margin: 0 0 clamp(0.85rem, 2vw, 1.15rem);
  background: rgba(160, 160, 160, 0.55);
}

.site-footer-block__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.site-footer-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.site-footer-block__list a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: clamp(2.74rem, 1.35vw, 3.9rem);
  text-transform: uppercase;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer-block__list a:hover {
  opacity: 0.75;
}

.site-footer-block__col--follow {
  text-align: left;
}

.site-footer-block__col--nav {
  text-align: right;
}

.site-footer-block__col--nav .site-footer-block__list {
  align-items: flex-end;
}

.site-footer-block__copyright {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: min(1180px, 92vw);
  padding: 0 1.25rem;
  text-align: center;
  font-size: clamp(1.62rem, 2.15vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 560px) {
  .site-footer-block__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-block__heading--nav {
    text-align: left;
  }

  .site-footer-block__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer-block__col--nav {
    text-align: left;
  }

  .site-footer-block__col--nav .site-footer-block__list {
    align-items: flex-start;
  }
}

/* —— Анимации (уважение prefers-reduced-motion) —— */
@keyframes site-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes site-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__media .site-header__video,
  .site-header__media .site-header__fallback {
    animation: site-fade-in 1.1s ease-out both;
  }

  /*
   Не вешать site-fade-up на весь .header-inner: у keyframes есть transform,
   из‑за него position:fixed у мобильного .nav привязывается к полоске шапки и меню обрезается.
   Анимируем только детей: бренд, на десктопе — nav, на мобиле — кнопка меню.
  */
  .header-inner > .brand {
    animation: site-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @media (min-width: 721px) {
    .header-inner > .nav {
      animation: site-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  @media (max-width: 720px) {
    .header-inner > .nav-toggle {
      animation: site-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  .social-rail {
    animation: site-fade-up 0.78s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero-copy {
    animation: site-fade-up 0.82s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .dev-games-intro__inner {
    animation: site-fade-up 0.68s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .section-services-wrap .card-service:nth-child(1) {
    animation: site-fade-up 0.62s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .section-services-wrap .card-service:nth-child(2) {
    animation: site-fade-up 0.62s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .section-services-wrap .card-service:nth-child(3) {
    animation: site-fade-up 0.62s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .section-services-wrap .card-service:nth-child(4) {
    animation: site-fade-up 0.62s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .what-we-do-strip__title {
    animation: site-fade-up 0.68s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .what-we-do-reel {
    animation: site-fade-up 0.52s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #projects .wrap,
    #clients .wrap {
      animation: site-fade-up linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 30%;
    }

    .slant-teal#testimonials .testimonial-inner {
      animation: site-fade-up linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 32%;
    }
  }
}

/* —— Let's Talk CTA (tmp/next_button.html) —— */
.lets-talk-cta__wrap {
  perspective: var(--lets-talk-cta-wrapper-perspective, 1000px);
  padding: var(--lets-talk-cta-wrapper-padding, 80px);
}

.lets-talk-cta__box {
  position: relative;
  width: var(--lets-talk-cta-btn-width, 361px);
  height: var(--lets-talk-cta-btn-height, 103px);
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) translateY(0);
  transition: var(--lets-talk-cta-box-transition, transform 0.4s ease);
}

.lets-talk-cta__box:hover {
  transform: rotateX(calc(var(--lets-talk-cta-tilt-amount, 8deg) * 0.6))
    rotateY(calc(var(--lets-talk-cta-tilt-amount, 8deg) * -1))
    translateY(var(--lets-talk-cta-hover-lift, -4px));
}

.lets-talk-cta__shadow {
  position: absolute;
  inset: 0;
  background: var(--lets-talk-cta-shadow-color, rgb(0, 0, 0));
  clip-path: var(
    --lets-talk-cta-shape,
    polygon(1.86% 16.36%, 100% 0%, 97.37% 93.60%, 0% 100%)
  );
  transform: translate3d(0, 0, -1px);
  filter: blur(0);
  opacity: 0;
  transition: var(
    --lets-talk-cta-shadow-transition,
    transform 0.4s ease,
    filter 0.4s ease,
    opacity 0.4s ease
  );
  pointer-events: none;
}

.lets-talk-cta__box:hover .lets-talk-cta__shadow {
  opacity: var(--lets-talk-cta-shadow-opacity-on, 0.5);
  filter: blur(var(--lets-talk-cta-shadow-blur, 30px));
  transform: translate3d(
    var(--lets-talk-cta-shadow-x, 12px),
    var(--lets-talk-cta-shadow-y, 18px),
    -1px
  );
}

.lets-talk-cta__link {
  position: absolute;
  inset: 0;
  background: var(--lets-talk-cta-btn-bg, #00a19a);
  clip-path: var(
    --lets-talk-cta-shape,
    polygon(1.86% 16.36%, 100% 0%, 97.37% 93.60%, 0% 100%)
  );
  cursor: pointer;
  text-decoration: none;
  display: block;
  transform: translateZ(0);
}

button.lets-talk-cta__link {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
}

.lets-talk-cta__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    var(--lets-talk-cta-btn-grad-1, #fbc638),
    var(--lets-talk-cta-btn-grad-2, #ff5edf),
    var(--lets-talk-cta-btn-grad-3, #04c8de),
    var(--lets-talk-cta-btn-grad-1, #fbc638)
  );
  background-size: 300% 300%;
  clip-path: var(
    --lets-talk-cta-shape,
    polygon(1.86% 16.36%, 100% 0%, 97.37% 93.60%, 0% 100%)
  );
  opacity: 0;
  transition: var(--lets-talk-cta-before-transition, opacity 0.4s ease);
  z-index: 1;
  pointer-events: none;
}

.lets-talk-cta__box:hover .lets-talk-cta__link::before {
  opacity: 1;
  animation: lets-talk-cta-gradient-move
    var(--lets-talk-cta-btn-grad-speed, 2s) linear infinite;
}

@keyframes lets-talk-cta-gradient-move {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.lets-talk-cta__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lets-talk-cta-btn-text-color, #fff);
  font-family: var(--lets-talk-cta-font-family, "Poppins", sans-serif);
  font-size: var(--lets-talk-cta-btn-font-size, 48px);
  font-weight: var(--lets-talk-cta-btn-font-weight, 900);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lets-talk-cta__box,
  .lets-talk-cta__shadow,
  .lets-talk-cta__link::before {
    transition: none;
  }

  .lets-talk-cta__box:hover {
    transform: none;
  }

  .lets-talk-cta__box:hover .lets-talk-cta__shadow {
    opacity: 0;
    filter: none;
    transform: translate3d(0, 0, -1px);
  }

  .lets-talk-cta__box:hover .lets-talk-cta__link::before {
    animation: none;
    opacity: 0.85;
  }
}

/* ============================================================
   Latest Projects block (portfolio_block) — tmp/latest-projects (1).html
   Все настройки приходят как CSS-переменные --lp-* со стиля .lp-section.
   ============================================================ */
.lp-section {
  font-family: var(--site-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  /* Фон секции — на всю ширину окна, чтобы по краям не просвечивал --bg-dark у body. */
  padding: var(--lp-padding, 40px 24px);
  background: var(--lp-bg, #ffffff);
  box-sizing: border-box;
}
.lp-section__inner {
  max-width: var(--lp-max-width, 1280px);
  margin: 0 auto;
}
.lp-section *, .lp-section *::before, .lp-section *::after { box-sizing: border-box; }

.lp-heading {
  font-family: var(--lp-heading-font, "Arial Black", "Helvetica Neue", sans-serif);
  font-size: var(--lp-heading-size, clamp(28px, 4vw, 44px));
  font-weight: var(--lp-heading-weight, 900);
  color: var(--lp-heading-color, #0f2437);
  margin: 0 0 var(--lp-heading-mb, 28px) 0;
  letter-spacing: var(--lp-heading-letter, -1px);
  line-height: 1;
}

.lp-grid {
  display: grid;
  grid-template-columns: repeat(var(--lp-cols, 3), 1fr);
  gap: var(--lp-gap, 16px);
}
@media (max-width: 900px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-grid { grid-template-columns: 1fr; } }

.lp-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--lp-aspect, 16 / 10);
  overflow: hidden;
  border-radius: var(--lp-radius, 4px);
  background-color: var(--lp-card-bg, #0a0a0a);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lp-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  transition: box-shadow 0.3s ease;
}
.lp-card:hover { box-shadow: var(--lp-shadow-hover, 0 12px 40px rgba(0, 0, 0, 0.4)); }

.lp-media { position: absolute; inset: 0; }
.lp-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition:
    opacity var(--lp-fade-ms, 500ms) ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-slide--active { opacity: 1; }
video.lp-slide { object-fit: cover; }

.lp-card[data-multi="false"]:hover .lp-slide--active {
  transform: scale(var(--lp-hover-zoom, 1.08));
}

.lp-overlay {
  position: absolute; inset: 0;
  background: var(--lp-overlay, linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 70%));
  pointer-events: none;
}

.lp-badge {
  position: absolute;
  padding: 4px 12px;
  border-radius: 4px;
  color: #ffeb3b;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.lp-badge--top-left     { top: 12px; left: 12px; }
.lp-badge--top-right    { top: 12px; right: 12px; }
.lp-badge--bottom-left  { bottom: 12px; left: 12px; }
.lp-badge--bottom-right { bottom: 12px; right: 12px; }

.lp-text-wrap {
  position: absolute; inset: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 1;
}

.lp-title {
  margin: 0;
  line-height: 0.92;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
  max-width: 95%;
}

/* ============================================================
   What We Do tags block (карточки-плашки) — tmp/whatwedo (4).html
   Все настройки приходят из inline style="--ww-* / --plate-* / --label-* / --img-*"
   на <section class="ww-block"> и <a class="ww-card">.
   ============================================================ */
.ww-block {
  /* Фон секции — на всю ширину окна (фон задаётся через style="background: ..."). */
  padding: var(--ww-block-padding-y, 24px) var(--ww-block-padding-x, 0px);
}
.ww-block__inner {
  /* Сайтовая колонка: тот же приём, что в .wrap (1180 / 92vw). Override через --ww-max-width. */
  max-width: var(--ww-max-width, min(1180px, 92vw));
  margin: 0 auto;
}

.ww-grid {
  display: grid;
  grid-template-columns: repeat(var(--ww-cols, 4), 1fr);
  gap: var(--ww-gap, 18px);
  /* запас сверху, чтобы вылезающие наверх картинки не уходили за блок */
  padding-top: var(--ww-grid-top-space, 80px);
}
@media (max-width: 980px) {
  .ww-grid { grid-template-columns: repeat(min(var(--ww-cols, 4), 2), 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .ww-grid { grid-template-columns: 1fr; }
}

.ww-card.is-hidden { display: none; }

.ww-card {
  position: relative;
  aspect-ratio: var(--ww-card-aspect, 3/4);
  overflow: visible;
  cursor: pointer;
  text-decoration: none;
  /* Плавная анимация на transform и filter (тень) */
  transition: transform 0.35s ease, filter 0.35s ease;
}
.ww-card:hover {
  transform: translateY(var(--ww-hover-lift, -8px)) scale(var(--ww-hover-scale, 1.015));
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.28));
}
.ww-card:active {
  transform: translateY(var(--ww-active-lift, -2px)) scale(var(--ww-active-scale, 1.0));
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.22));
  transition: transform 0.08s ease, filter 0.08s ease;
}
.ww-card:hover .ww-card__image {
  transform: translate(
    calc(-50% + var(--img-x, 0px)),
    var(--img-y, 0px)
  ) scale(var(--ww-img-hover-scale, 1.04));
}

.ww-card__plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--plate-w, 100%);
  height: var(--plate-h, 100%);
  transform: translate(
    calc(-50% + var(--plate-x, 0px)),
    calc(-50% + var(--plate-y, 0px))
  );
  background: var(--plate-bg, #3F73D9);
  border-radius: var(--ww-card-radius, 0px);
  z-index: 0;
}

.ww-card__image {
  position: absolute;
  left: 50%;
  bottom: var(--label-h, 60px);
  height: calc(var(--img-base-h, 75%) * var(--img-scale, 1));
  width: auto;
  transform: translate(
    calc(-50% + var(--img-x, 0px)),
    var(--img-y, 0px)
  );
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  transition: transform 0.4s ease;
}

.ww-card__label {
  position: absolute;
  left: 50%;
  bottom: var(--label-y, 0px);
  width: var(--label-w, 100%);
  height: var(--label-h, 60px);
  transform: translateX(calc(-50% + var(--label-x, 0px)));
  background: var(--label-bg, #2D4CA8);
  color: var(--label-color, #ffffff);
  font-family: var(--label-font, "Archivo Black"), system-ui, sans-serif;
  font-weight: var(--label-weight, 900);
  font-size: var(--label-size, clamp(20px, 2.2vw, 30px));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--label-spacing, 1px);
  padding: var(--label-pad-y, 14px) var(--label-pad-x, 16px);
  z-index: 2;
  border-radius: 0 0 var(--ww-card-radius, 0px) var(--ww-card-radius, 0px);
  display: flex;
  align-items: var(--label-valign, flex-end);
  justify-content: var(--label-halign, center);
  text-align: center;
  /* Скос верхнего края лейбла (см. tmp/whatwedo (4).html). */
  clip-path: polygon(
    0 var(--label-skew-top-left, 0px),
    100% var(--label-skew-top-right, 0px),
    100% 100%,
    0 100%
  );
}

/* ============================================================
   Contact form (#contact) — параметры tmp/contact-form (2).html + hover-слои из (1).
   Настройки приходят из inline style="--cf-*" на <section.cf-section>.
   ============================================================ */
.cf-section {
  position: relative;
  width: 100%;
  max-width: var(--cf-section-max-width, 1240px);
  min-height: var(--cf-section-min-height, 720px);
  background: var(--cf-section-bg, #000000);
  overflow: hidden;
  isolation: isolate;
  margin: 0 auto;
  color: var(--cf-color-text, #ffffff);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), "Rajdhani", "Oswald", system-ui, sans-serif;
}
.cf-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(15, 30, 25, 0.6) 0%, transparent 100%);
  z-index: 25;
  pointer-events: none;
}

/* z-индексы слоёв (как в превью) */
.cf-form-wrapper { z-index: 1; }
.cf-bg-overlay   { z-index: 2; }
.cf-character    { z-index: 5; }
.cf-headings     { z-index: 15; }
.cf-bubble       { z-index: 20; }

/* ---- Форма (всегда видна, всегда кликабельна) ---- */
.cf-form-wrapper {
  position: relative;
  padding: 130px 50px 40px 50px;
  max-width: var(--cf-form-max-width, 720px);
  opacity: var(--cf-form-alpha-default, 0.4);
  transition: opacity var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1));
}
.cf-form { display: block; }

/* Ответ AJAX после отправки (аналог мгновенного ответа Elementor без полной перезагрузки) */
.cf-form-status {
  margin-top: 12px;
  font-size: 16px;
  min-height: 1.25em;
  line-height: 1.35;
}
.cf-form-status--ok {
  color: var(--cf-color-accent, #b6ff3c);
}
.cf-form-status--err {
  color: var(--cf-color-error, #e63946);
}
.cf-field {
  width: 100%;
  margin-bottom: 18px;
  padding: 0 var(--cf-field-padding-x, 22px);
  height: var(--cf-field-height, 64px);
  background: var(--cf-color-input-bg, rgba(20, 22, 22, 0.85));
  border: 1px solid var(--cf-color-input-border, #2a3a35);
  border-radius: 2px;
  color: var(--cf-color-text, #ffffff);
  font-size: var(--cf-field-font-size, 18px);
  font-family: inherit;
  outline: none;
  transition: border-color 200ms ease;
}
.cf-field::placeholder { color: rgba(255, 255, 255, 0.7); }
.cf-field:focus { border-color: var(--cf-color-accent, #b6ff3c); }
.cf-field--textarea {
  height: 180px;
  padding: 18px var(--cf-field-padding-x, 22px);
  resize: vertical;
  line-height: 1.4;
}
.cf-field.is-error,
.cf-field:invalid:not(:placeholder-shown) {
  border-color: var(--cf-color-error, #e63946);
}
.cf-field.is-error::placeholder { color: var(--cf-color-error, #e63946); }

.cf-cta {
  margin-top: 8px;
}
.cf-cta .lets-talk-cta {
  width: 100%;
  --lets-talk-cta-wrapper-perspective: none;
}
.cf-cta .lets-talk-cta__wrap {
  padding: 0;
}
.cf-cta .lets-talk-cta__box {
  margin-inline: auto;
}

/* visually-hidden подписи у полей */
.cf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Подложка-затемнитель ---- */
.cf-bg-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--cf-overlay-color, #000000);
  opacity: var(--cf-overlay-alpha-default, 0);
  pointer-events: none;
  transition: opacity var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1));
}

/* ---- Персонаж ---- */
.cf-character {
  position: absolute;
  right: var(--cf-character-right, -60px);
  bottom: var(--cf-character-bottom, -40px);
  width: var(--cf-character-width, 720px);
  opacity: var(--cf-character-alpha, 1);
  height: auto;
  pointer-events: none;          /* не блокирует клики по форме */
  user-select: none;
  transition:
    width var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1)),
    right var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1)),
    bottom var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1)),
    opacity var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1));
}
.cf-character img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}

/* ---- Заголовки (всегда видны) ---- */
.cf-headings {
  position: absolute;
  top: 30px;
  left: 50px;
  right: 40px;
  pointer-events: none;
}
.cf-title {
  margin: 0 0 8px 0;
  font-size: var(--cf-title-size, 38px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: inherit;
}
.cf-subtitle {
  margin: 0;
  font-size: var(--cf-subtitle-size, 20px);
  color: var(--cf-color-muted, #cfd2d3);
  font-weight: 400;
}

/* ---- Речевой пузырь (только в default-состоянии) ---- */
.cf-bubble {
  position: absolute;
  top: var(--cf-bubble-top, 30px);
  left: var(--cf-bubble-left, 220px);
  max-width: var(--cf-bubble-max-width, 560px);
  padding: 28px 36px;
  background: var(--cf-bubble-bg, #ffffff);
  color: var(--cf-bubble-color, #0a0a0a);
  font-weight: 900;
  font-size: var(--cf-bubble-font-size, 60px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50% / 45%;
  pointer-events: none;
  text-align: center;
  transition: opacity var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1)),
              transform var(--cf-transition, 450ms cubic-bezier(.22, .61, .36, 1));
}
.cf-bubble::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 30px;
  width: 60px;
  height: 30px;
  background: var(--cf-bubble-bg, #ffffff);
  border-radius: 50%;
  transform: rotate(15deg);
  z-index: -1;
}
.cf-bubble::before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  background: var(--cf-bubble-bg, #ffffff);
  border-radius: 50%;
  z-index: -1;
}

/* ---- Hover-логика (один-в-один как в tmp/contact-form (1).html) ----
   Состояние «hover» включается ТРЕМЯ путями параллельно:
     1) :hover               — навели курсор на секцию;
     2) :focus-within        — фокус внутри секции (например, в одном из полей формы);
     3) .cf-section--force-hover — фиксатор-чекбокс «Force hover» (см. cf.force_hover в contact_form.py).
   В превью tmp эти три селектора объединены и дают одно и то же конечное состояние. */
.cf-section:hover .cf-bubble,
.cf-section:focus-within .cf-bubble,
.cf-section--force-hover .cf-bubble {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}
.cf-section:hover .cf-form-wrapper,
.cf-section:focus-within .cf-form-wrapper,
.cf-section--force-hover .cf-form-wrapper {
  opacity: var(--cf-form-alpha-hover, 1);
}
.cf-section:hover .cf-bg-overlay,
.cf-section:focus-within .cf-bg-overlay,
.cf-section--force-hover .cf-bg-overlay {
  opacity: var(--cf-overlay-alpha-hover, 0.55);
}
.cf-section:hover .cf-character,
.cf-section:focus-within .cf-character,
.cf-section--force-hover .cf-character {
  width: var(--cf-character-width-hover, 620px);
  right: var(--cf-character-right-hover, -40px);
  bottom: var(--cf-character-bottom-hover, -40px);
  opacity: var(--cf-character-alpha-hover, 0.85);
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .cf-section {
    --cf-character-width: 480px;
    --cf-character-width-hover: 420px;
    --cf-bubble-font-size: 38px;
    --cf-bubble-left: 120px;
    --cf-title-size: 28px;
    --cf-subtitle-size: 16px;
  }
  .cf-form-wrapper { padding: 100px 24px 30px 24px; max-width: 100%; }
  .cf-headings { left: 24px; right: 24px; }
}

/* ============================================================
   What We Do — Services Wheel (tmp/services_wheel (3).html).
   Архитектура:
     .wwd-section  — секция страницы;
     .wwd-stage    — full-width контейнер (на всю ширину окна);
     .wwd-scene    — full-width слой: фон сцены + зелёная фигура;
     .wwd-scene-inner — центрированный контейнер фикс. ширины
                        (--wwd-content-width), внутри лежат
                        заголовок, колесо услуг и персонаж.
   ============================================================ */
.wwd-section {
  background: transparent;
  padding: 0;
}
.wwd-stage {
  width: 100%;
}
.wwd-scene {
  position: relative;
  width: 100%;
  height: var(--wwd-scene-height, 1025px);
  background: var(--wwd-outer-bg, #FFFFFF);
  border-radius: var(--wwd-scene-radius, 0);
  overflow: hidden;
  /* По умолчанию тени НЕТ. Переопределяется ключом scene_shadow в what_we_do.py:
     например, "scene_shadow": "0 30px 80px rgba(0, 0, 0, 0.5)" — как в tmp. */
  box-shadow: var(--wwd-scene-shadow, none);
  font-family: var(--site-font-family, "Sofia Sans Condensed"), sans-serif;
}

/* ===== Зелёная фигура — рисуется на ВСЮ ширину сцены ===== */
.wwd-shape {
  position: absolute;
  inset: 0;
  background: var(--wwd-shape-color, #479D80);
  /* clip-path задаётся из JS (services-wheel.js → updateShape) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

/* ===== Центрированный контейнер контента (фикс. ширина) ===== */
.wwd-scene-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--wwd-content-width, 1180px);
  max-width: 100%;
  z-index: 2;
}

/* ===== Заголовок «// WHAT WE DO» ===== */
.wwd-scene-title {
  position: absolute;
  top: 8%;
  right: 6%;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: var(--wwd-title-gap, 12px);
  user-select: none;
  pointer-events: none;
}
.wwd-scene-title .wwd-slash {
  font-family: inherit;
  font-size: var(--wwd-slash-size, 44px);
  font-weight: var(--wwd-slash-weight, 600);
  color: var(--wwd-slash-color, #FFFFFF);
  letter-spacing: 0.5px;
  line-height: 1;
}
.wwd-scene-title .wwd-title {
  font-family: inherit;
  font-size: var(--wwd-title-size, 44px);
  font-weight: var(--wwd-title-weight, 600);
  color: var(--wwd-title-color, #FFFFFF);
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}

/* ===== Колесо услуг ===== */
.wwd-wheel-wrapper {
  position: absolute;
  top: 24%;
  left: 6%;
  right: calc(var(--wwd-char-zone, 38%) - 4%);
  z-index: 4;
  overflow: hidden;
  transform: skewY(var(--wwd-row-skew, -8deg));
  transform-origin: left center;
  /* высота — выставляется JS-ом: visibleRows * rowHeight */
}
.wwd-wheel { position: relative; width: 100%; height: 100%; }
.wwd-wheel-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.wwd-row {
  flex: 0 0 var(--wwd-row-height, 110px);
  height: var(--wwd-row-height, 110px);
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding: 0 12px;
}
.wwd-row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.wwd-row-text {
  transform: skewY(calc(var(--wwd-row-skew, -8deg) * -1));
  transform-origin: left center;
  font-family: inherit;
  font-weight: var(--wwd-font-weight, 400);
  font-size: var(--wwd-font-size, 42px);
  color: var(--wwd-text-color, #FFFFFF);
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: opacity 0.25s ease;
}
.wwd-wheel-wrapper::before,
.wwd-wheel-wrapper::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 14%;
  pointer-events: none;
  z-index: 3;
}
.wwd-wheel-wrapper::before {
  top: -1%;
  background: linear-gradient(to bottom, var(--wwd-shape-color, #479D80) 0%, transparent 100%);
}
.wwd-wheel-wrapper::after {
  bottom: -1%;
  background: linear-gradient(to top, var(--wwd-shape-color, #479D80) 0%, transparent 100%);
}

/* ===== Персонаж (картинка справа) ===== */
.wwd-character {
  position: absolute;
  right: 4%;
  bottom: 0;
  height: 78%;
  width: auto;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}