:root {
  --ofx-z-bg: 0;
  --ofx-z-content: 20;
  --ofx-z-hero: 60;
  --ofx-z-header: 40;
}

/* Header */
header.fixed.w-full.z-40 {
  z-index: var(--ofx-z-header) !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
  backdrop-filter: blur(6px);
}
header.header--light {
  background-color: rgba(12, 12, 12, 0.55) !important;
  color: #F7F7F7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
header.header--dark {
  background-color: rgba(255, 255, 255, 0.90) !important;
  color: #111111 !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08);
}
header.header--light a, header.header--light .rw-eyebrow, header.header--light svg, header.header--light .fill-current {
  color: #F7F7F7 !important; fill: currentColor !important;
}
header.header--dark a, header.header--dark .rw-eyebrow, header.header--dark svg, header.header--dark .fill-current {
  color: #111111 !important; fill: currentColor !important;
}
header.header--light a[href*="/signup"][role="link"] { background: #f5f5f5 !important; color: #111 !important; }
header.header--dark a[href*="/signup"][role="link"] { background: #1f1f1f !important; color: #fff !important; }

/* hide desktop nav items (layout preserved) */
/* @media (min-width: 1024px) {
  header nav ul.hidden.lg\:flex.items-center.justify-center.relative.z-20.cursor-pointer > li {
    visibility: hidden !important;
    pointer-events: none !important;
  }
} */

/* Layer fix */
.rounded-lg.overflow-hidden.text-white.relative,
.rounded-lg.overflow-hidden.relative,
.aspect-video.w-full.lg\:w-1\/2.rounded-lg.overflow-hidden.relative,
.aspect-square.w-full.rounded-lg.overflow-hidden.mb-5.relative {
  position: relative !important;
  isolation: isolate !important;
}

.rounded-lg.overflow-hidden.text-white.relative > .absolute.inset-0,
.rounded-lg.overflow-hidden.relative > .absolute.inset-0,
.aspect-video.w-full.lg\:w-1\/2.rounded-lg.overflow-hidden.relative > .absolute.inset-0,
.aspect-square.w-full.rounded-lg.overflow-hidden.mb-5.relative > .absolute.inset-0 {
  z-index: var(--ofx-z-bg) !important;
}

.rounded-lg.overflow-hidden.text-white.relative > .relative,
.rounded-lg.overflow-hidden.relative > .relative,
.rounded-lg.overflow-hidden.text-white.relative .w-11\/12,
.rounded-lg.overflow-hidden.text-white.relative .md\:w-14\/16,
.rounded-lg.overflow-hidden.text-white.relative .flex.flex-col.md\:flex-row.justify-between.gap-10 {
  position: relative !important;
  z-index: var(--ofx-z-content) !important;
}

.rounded-lg.overflow-hidden.text-white.relative .flex.flex-col.md\:flex-row.justify-between.gap-10,
.rounded-lg.overflow-hidden.text-white.relative .flex.flex-col.md\:flex-row.justify-between.gap-10 * {
  opacity: 1 !important;
  visibility: visible !important;
}

.rounded-lg.overflow-hidden.text-white.relative a,
.rounded-lg.overflow-hidden.text-white.relative button {
  position: relative;
  z-index: calc(var(--ofx-z-content) + 5);
  pointer-events: auto !important;
}

.next-video-bg-video,
.next-video-container video {
  pointer-events: none !important;
}

/* Hero */
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 {
  position: relative !important;
  z-index: var(--ofx-z-hero) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 * {
  visibility: visible !important;
}
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 h1,
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 [role="tablist"],
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 a,
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16.mx-auto.relative.mt-auto.mb-16 button {
  position: relative !important;
  z-index: calc(var(--ofx-z-hero) + 1) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Показываем CTA в hero, даже если родитель "залип" на opacity:0 после анимации */
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16 .flex.gap-2\.5.items-center.flex-wrap > div {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* На всякий: текстовые блоки hero */
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16 h1,
.px-4.lg\:px-0.w-11\/12.md\:w-full.lg\:w-14\/16 [role="tablist"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}