/*
  Omnia media safety layer.
  The underlying Webflow geometry and interaction classes remain untouched. This
  layer only prevents editorial posts with built-in text from being cropped into
  decorative source-template frames.
*/

:root {
  --omnia-lime: #c8ff16;
  --omnia-black: #050505;
}

video[poster] {
  background: var(--omnia-black);
  object-fit: contain !important;
}

/* Route transitions are also used when leaving the preserved Webflow homepage.
   The overlay is purely presentational and disables itself for reduced motion. */
body.omnia-route-leaving::after {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  background: var(--omnia-lime);
  content: "";
  pointer-events: none;
  transform: scaleY(1);
  transform-origin: bottom;
  animation: omnia-home-route-reveal .4s cubic-bezier(.72, 0, .24, 1) both;
}

@keyframes omnia-home-route-reveal {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

img[alt^="Omnia Agency"] {
  object-fit: cover;
}

/* Never turn a one-off profile asset into a repeated background motif. */
img[data-omnia-decorative="true"] {
  display: none !important;
}

/* The seven carousel visuals are unique public posts/artwork. Contain makes
   every word in a real post readable instead of slicing it at the card edge. */
#feedback .w-background-video,
#feedback .feedback-screenshot-div {
  background: var(--omnia-black) !important;
}

#feedback .w-background-video video {
  object-fit: contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* The source places this image as an intentionally protruding sticker. A post
   in this position created the overlap in the second screenshot, so the section
   now relies on its full-width background art and original card layout. */
#why-we .image-9 {
  display: none !important;
}

/* These source-template illustrations sit above the content cards. Hide them
   instead of letting logo/poster fragments cover the stage descriptions. */
#steps .image-11,
#steps .image-12,
#uslugi .image-31 {
  display: none !important;
}

/* The source uses an interactive before/after mask; it cuts editorial text in
   half. Case posts now live whole in the result carousel below, while this
   summary panel uses an original, text-free Omnia visual. */
#cases1 .bas-image-before,
#cases1 .bas-image-after-h {
  display: none !important;
}

/* The founder cards are deliberately shown whole; no text edge can escape. */
#o-nas .max-img,
#o-nas .kris-img {
  background: #f4f1ea;
  object-fit: contain !important;
  object-position: center !important;
}

/* The reference page uses these containers for layered scenes and gradients.
   Every background below is a different Omnia source or generated artwork with
   no embedded typography, preserving the composition without duplicate posts. */
._1block-div {
  background-image:
    linear-gradient(315deg, #000 2%, transparent 61%),
    url("/omnia-media/generated/omnia-abstract-portrait-v1.png") !important;
}

._9block-div {
  background-image:
    linear-gradient(0deg, #000, transparent 82%),
    linear-gradient(#000, transparent),
    url("/omnia-media/instagram/instagram-01.jpg") !important;
}

._3block-div {
  background-image:
    linear-gradient(0deg, rgba(222, 229, 229, .96), rgba(222, 229, 229, .14)),
    url("/omnia-media/generated/omnia-abstract-wide-v1.png") !important;
}

._6block-div {
  background-image:
    linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .58)),
    url("/omnia-media/instagram/instagram-06.jpg") !important;
}

._8block-div {
  background-image:
    radial-gradient(circle at 82% 15%, rgba(200, 255, 22, .19), transparent 30%),
    linear-gradient(135deg, #070707 0%, #181818 100%) !important;
}

.div-block-10 {
  background-image:
    radial-gradient(circle at 82% 22%, rgba(200, 255, 22, .20), transparent 28%),
    linear-gradient(0deg, #000, #0d0d0d 66%, #070707) !important;
}

/* The original hero was tuned for very short English metric labels. Russian
   copy needs real line-height: the source's 80px display type had a 30px line
   box, which is why letters were visibly written over each other. */
[id="1block"] .heading-38 {
  line-height: .9 !important;
}

[id="1block"] .paragraph-4 {
  line-height: 1.05 !important;
  align-items: center !important;
}

[id="1block"] .container-7,
[id="1block"] .container-8 {
  column-gap: 12px !important;
  align-items: center !important;
}

[id="1block"] .container-3 {
  min-height: 122px !important;
  height: auto !important;
  column-gap: 30px !important;
  align-items: center !important;
}

[id="1block"] .container-4 {
  flex: 0 0 min(30vw, 360px) !important;
  row-gap: 7px !important;
}

[id="1block"] .paragraph,
[id="1block"] .paragraph-2 {
  margin: 0 !important;
  line-height: .98 !important;
}

/* Keep the source three-stage composition, but give each stage a real text
   column. The old image overlays were masking that the original fixed widths
   left no room for the Russian headings at this viewport. */
#steps .div-block-8 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: min(88vw, 1200px) !important;
  margin: 0 auto !important;
}

#steps .container-31,
#steps .container-34,
#steps .container-33 {
  box-sizing: border-box !important;
  width: auto !important;
  min-height: 330px !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#steps .container-32,
#steps .container-35 {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 330px !important;
  padding: 26px !important;
}

#steps .heading-18,
#steps .heading-19 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(44px, 3.25vw, 68px) !important;
  line-height: .88 !important;
  overflow-wrap: anywhere;
}

#steps .paragraph-12,
#steps .paragraph-13 {
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

/* Replace the before/after mask with one complete visual panel. */
#cases1 .bas-wrapper {
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  width: min(42vw, 640px) !important;
  height: 600px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(200, 255, 22, .42) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .18)),
    url("/omnia-media/generated/omnia-cases-square-v1.png") center / cover no-repeat !important;
}

#cases1 .bas-image-before,
#cases1 .bas-image-after-h {
  clip-path: none !important;
  transform: none !important;
}

#cases1 .bas-handle-h,
#cases1 .bas-line-h {
  display: none !important;
}

@media (max-width: 767px) {
  /* The source section has a fixed short height while its final card grows
     after Russian copy wraps. Reserve that space so the next headline cannot
     appear over the CTA card. */
  #why-we {
    min-height: 1580px !important;
    height: auto !important;
  }

  #steps .div-block-8 {
    grid-template-columns: 1fr !important;
    width: min(90vw, 460px) !important;
  }

  #steps .container-31,
  #steps .container-34,
  #steps .container-33,
  #steps .container-32,
  #steps .container-35 {
    min-height: 250px !important;
  }

  #cases1 .bas-wrapper {
    width: min(90vw, 640px) !important;
    height: 420px !important;
  }

  #feedback .w-background-video video,
  #cases1 .bas-image-before,
  #cases1 .bas-image-after-h,
  #o-nas .max-img,
  #o-nas .kris-img {
    object-fit: contain !important;
  }
}