/* Маркетингові сторінки без бандла Framer: те, що раніше рухав його JS. */

/* Бігуча галерея (Ticker). Вміст продубльований у розмітці, тому зсув на
   половину дає безшовний цикл. */
.uib-ticker {
  animation: uib-ticker 48s linear infinite;
  will-change: auto;                    /* шар не тримаємо: GPU дорожче за користь */
}
.uib-ticker-rev { animation-direction: reverse }
@keyframes uib-ticker {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}
.uib-ticker:hover { animation-play-state: paused }

@media (prefers-reduced-motion: reduce) {
  .uib-ticker { animation: none }
}

/* Наведення на кнопки. Тон беремо з інлайнового фону, який лишив Framer:
   чорна кнопка лишається чорною й лише світлішає на пару тонів (текст
   білий), світла — темнішає до #ebebeb. Стрілка зсувається праворуч.
   Жодного підйому чи тіні тут немає — на живому сайті їх теж немає. */
[data-framer-name="Primary"],
[data-framer-name="Secondary"],
[data-framer-name="button"],
[data-framer-name="btn"] {
  transition: background-color 0.16s ease, color 0.16s ease;
}
/* чорні */
[data-framer-name="Primary"][style*="background-color:rgb(0, 0, 0)"]:hover,
[data-framer-name="Primary"][style*="background-color: rgb(0, 0, 0)"]:hover,
[data-framer-name="Secondary"][style*="background-color:rgb(0, 0, 0)"]:hover,
[data-framer-name="Secondary"][style*="background-color: rgb(0, 0, 0)"]:hover,
[data-framer-name="button"][style*="background-color:rgb(0, 0, 0)"]:hover,
[data-framer-name="btn"][style*="background-color:rgb(0, 0, 0)"]:hover {
  background-color: #26262b !important;
}
/* фіолетові */
[data-framer-name="Primary"][style*="rgb(132, 87, 244)"]:hover,
[data-framer-name="Secondary"][style*="rgb(132, 87, 244)"]:hover {
  background-color: #9a75f7 !important;
}
/* світлі */
[data-framer-name="Primary"]:not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover,
[data-framer-name="Secondary"]:not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover,
[data-framer-name="button"]:not([style*="background-color:rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover,
[data-framer-name="btn"]:not([style*="background-color:rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover {
  background-color: #ebebeb !important;
}
/* `[textcolor="transparent"]` — кнопки, у яких свій підпис накладений
   зверху окремим блоком (так зроблена «Play a game»). Їхній <p> має
   лишатись прозорим, інакше на ховері з'являвся другий, зсунутий текст. */
[data-framer-name="Primary"]:not([textcolor="transparent"]):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p,
[data-framer-name="Secondary"]:not([textcolor="transparent"]):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="background-color: rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p,
[data-framer-name="button"]:not([textcolor="transparent"]):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p,
[data-framer-name="btn"]:not([textcolor="transparent"]):not([style*="background-color:rgb(0, 0, 0)"]):not([style*="rgb(132, 87, 244)"]):hover p {
  color: #0b0b0c !important;
}
/* стрілка в кнопці їде праворуч */
[data-framer-name="container-btn"] > svg:last-child { transition: transform 0.16s ease }
a:hover > [data-framer-name="container-btn"] > svg:last-child,
button:hover > [data-framer-name="container-btn"] > svg:last-child { transform: translateX(4px) }

/* Пункти FAQ — як в оригіналі: плоскі плашки #f7f7f7 без рамки й тіні
   (біла картка з кільцем `0 0 0 1px` читалась як подвійна обводка). */
[data-framer-name="FAQ grid"] [data-framer-name="Closed"],
[data-framer-name="FAQ grid"] [data-framer-name="Open"] {
  background-color: #f7f7f7 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background-color 0.18s ease;
}
[data-framer-name="FAQ grid"] [data-framer-name="Closed"]:hover {
  background-color: #f2f2f3 !important;
}

/* Посилання в шапці й підвалі — темнішають (крім кнопок із накладеним
   підписом: там <p> прозорий навмисне). */
header a:not([textcolor="transparent"]):hover p,
footer a:not([textcolor="transparent"]):hover p { color: #0b0b0c !important }

/* Фокус на кнопках Framer: своє кільце замість системного синього, і
   нічого після кліку мишею. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[data-framer-name="Secondary"]:focus:not(:focus-visible) { outline: none }
a:focus-visible,
button:focus-visible {
  outline: 2px solid #cbdffd;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Плитки «Tech stack»: свій ховер — підйом і тінь */
.uib-techstack [data-framer-name="icon"],
.uib-techstack img {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.uib-techstack [data-framer-name="icon"]:hover,
.uib-techstack img:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(11, 11, 12, 0.12);
}

/* Підпис до плитки: чорна плашка з білим текстом над іконкою. Це один
   вузол на сторінку з position: fixed — плитки й сам ряд обрізають вміст
   (overflow: hidden), тому підказку в них тримати не можна. */
.uib-tip {
  position: fixed; z-index: 1000; pointer-events: none;
  padding: 4px 8px; border-radius: 8px;
  background: #0b0b0c; color: #fff;
  font: 500 12px/16px Geist, Inter, sans-serif; white-space: nowrap;
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity 0.16s ease;
}
.uib-tip[data-show="1"] { opacity: 1 }
.uib-tip[hidden] { display: none }
.uib-techstack [data-uib-tip] { cursor: default }