/* ─────────────────────────────────────────────
   EYVI TechLab — FULL CSS (v104 base + v94/v95/v105/v106/v110/v114/v115)
   + v111 CLEAN FULLSCREEN FIX na końcu.
   Kompletny arkusz do wklejenia w całości (zastępuje cały poprzedni kod).
───────────────────────────────────────────── */
#eyvi-tech,
#eyvi-tech *,
#eyvi-tech *::before,
#eyvi-tech *::after {
  box-sizing: border-box;
}
body:has(#eyvi-tech) {
  background: #121212 !important;
}
#eyvi-tech {
  --eyvi-tech-css-version: "2026-06-05-tech-v133-audit-vimeo-budget";
  --eyvi-bg: #121212;
  --eyvi-white: #FFFFFF;
  --eyvi-cream: #F5F3ED;
  --eyvi-cyan: #07E8E6;
  --eyvi-x-bg: #0BDAD8;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: visible;
  background: var(--eyvi-bg) !important;
  color: var(--eyvi-white);
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.elementor-widget-container:has(#eyvi-tech),
.elementor-element:has(#eyvi-tech),
.elementor-widget-html:has(#eyvi-tech),
.e-con:has(#eyvi-tech),
.e-con-inner:has(#eyvi-tech),
.elementor-section:has(#eyvi-tech),
.elementor-container:has(#eyvi-tech),
.elementor-column:has(#eyvi-tech),
[data-elementor-type]:has(#eyvi-tech) {
  overflow: visible !important;
  contain: none !important;
}
#eyvi-tech .et-driver {
  position: relative !important;
  height: 300vh !important;
  min-height: 300vh !important;
  overflow: visible !important;
  background: var(--eyvi-bg) !important;
}
#eyvi-tech .et-sticky {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--eyvi-bg) !important;
  z-index: 20 !important;
}
#eyvi-tech .et-sticky.et-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 5000 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
#eyvi-tech .et-sticky.et-bottom {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
}
@supports (height: 100dvh) {
  #eyvi-tech .et-sticky,
  #eyvi-tech .et-sticky.et-fixed {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}
/* ───────── Hero pill ───────── */
#eyvi-tech .et-pill {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center;
  background: var(--eyvi-bg) !important;
  will-change: width, height, border-radius, opacity;
  backface-visibility: hidden;
}
#eyvi-tech .et-pill .et-pill-vimeo,
#eyvi-tech .et-pill .et-pill-vimeo iframe {
  position: absolute;
  pointer-events: none;
  background: var(--eyvi-bg) !important;
  backface-visibility: hidden;
}
#eyvi-tech .et-pill .et-pill-vimeo {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity .6s ease;
}
#eyvi-tech .et-pill .et-pill-vimeo.ok {
  opacity: 1;
}
#eyvi-tech .et-pill .et-pill-vimeo iframe {
  border: 0;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
}
#eyvi-tech .et-pill-ov {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 39.75%, #121212 80.66%);
}
#eyvi-tech .et-title {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .22em;
  white-space: nowrap;
  pointer-events: none;
}
#eyvi-tech .et-title .w {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 4.45vw, 64px);
  line-height: 1.09;
  color: var(--eyvi-white);
  white-space: nowrap;
  text-align: center;
  will-change: opacity, transform;
}
#eyvi-tech .et-spacer {
  display: none;
}
#eyvi-tech .et-hint {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transform: translateX(-50%);
  pointer-events: none;
  will-change: opacity;
}
#eyvi-tech .et-hint span {
  font-size: .875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eyvi-white);
  opacity: .4;
  white-space: nowrap;
}
#eyvi-tech .et-hint .arr {
  width: 1px;
  height: 32px;
  background: var(--eyvi-white);
  opacity: .3;
  animation: eyvi-et-arr 1.8s ease-in-out infinite;
}
@keyframes eyvi-et-arr {
  0%, 100% { transform: scaleY(1); opacity: .3; }
  50% { transform: scaleY(.4); opacity: .65; }
}
/* ───────── Grid / cards ───────── */
#eyvi-tech .et-grid-sec {
  position: relative;
  z-index: 5;
  overflow: visible;
  background: var(--eyvi-bg) !important;
  padding: clamp(230px, 28vh, 330px) 2rem 260px;
}
#eyvi-tech .et-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 149px;
  width: min(960px, calc(100vw - 32px));
  margin: 0 auto;
  overflow: visible;
}
#eyvi-tech .et-tile {
  position: relative;
  overflow: hidden !important;
  isolation: isolate !important;
  width: min(960px, calc(100vw - 32px));
  aspect-ratio: 960 / 488;
  border-radius: 5px;
  background: var(--eyvi-bg) !important;
  cursor: pointer;
  opacity: 0;
  transform: scale(.86);
  transition: opacity .4s ease, transform .58s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  clip-path: inset(0 round 5px) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  box-shadow: inset 0 0 0 1px var(--eyvi-bg) !important;
}
#eyvi-tech .et-tile.is-visible {
  opacity: 1;
  transform: scale(1);
}
#eyvi-tech .et-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--eyvi-bg);
}
#eyvi-tech .et-tile-poster {
  position: absolute;
  inset: -2px !important;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(245, 243, 237, .045), transparent 34%),
    linear-gradient(135deg, #202020 0%, #121212 100%) !important;
  background-size: cover;
  background-position: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#eyvi-tech .et-tile-poster.has-image {
  background-color: var(--eyvi-bg) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
#eyvi-tech .et-tile-poster.has-image::after {
  content: none !important;
  display: none !important;
}
#eyvi-tech .et-tile-poster.hid {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#eyvi-tech .et-tile-vimeo {
  position: absolute;
  inset: -2px !important;
  z-index: 0;
  width: auto !important;
  height: auto !important;
  overflow: hidden;
  background: var(--eyvi-bg) !important;
}
#eyvi-tech .et-tile-vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(104% + 16px) !important;
  height: calc(116% + 16px) !important;
  min-width: calc(104% + 16px) !important;
  min-height: calc(116% + 16px) !important;
  max-width: none !important;
  max-height: none !important;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  background: var(--eyvi-bg) !important;
  transform: translate3d(-50%, -50%, 0) scale(1.026) !important;
  transform-origin: center center;
  transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
#eyvi-tech .et-tile-vimeo.ok iframe {
  opacity: 1 !important;
  visibility: visible !important;
}
#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-vimeo iframe {
  transform: translate3d(-50%, -50%, 0) scale(1.085) !important;
}
#eyvi-tech .et-tile:not(.is-fullscreen-source)::after {
  content: "";
  position: absolute;
  inset: -2px !important;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0) 38%,
    rgba(18, 18, 18, .10) 58%,
    rgba(18, 18, 18, .28) 76%,
    rgba(18, 18, 18, .54) 100%
  );
  transition: opacity .35s ease;
}
#eyvi-tech .et-tile-grad,
#eyvi-tech .et-tile-name,
#eyvi-tech .et-tile-desc {
  display: none !important;
}
#eyvi-tech .et-case-num,
#eyvi-tech .et-click-cue {
  display: block !important;
  position: absolute;
  z-index: 45 !important;
  right: 20px;
  left: 20px;
  width: auto;
  max-width: none;
  padding: 0;
  font-family: 'Lato', sans-serif;
  text-align: right;
  white-space: normal;
  color: var(--eyvi-cream) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: none !important;
  transition: color .28s ease !important;
}
#eyvi-tech .et-case-num {
  bottom: 49px;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.12;
}
#eyvi-tech .et-click-cue {
  bottom: 22px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}
#eyvi-tech .et-click-cue::before,
#eyvi-tech .et-click-cue::after {
  content: none !important;
  display: none !important;
}
#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-case-num,
#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-click-cue {
  color: var(--eyvi-cyan) !important;
}
/* ───────── Vimeo icon ───────── */
#eyvi-tech .et-vimeo-icon {
  position: absolute;
  z-index: 46 !important;
  display: block;
  object-fit: contain;
  width: 34px;
  height: 34px;
  left: clamp(1.35rem, 3vw, 2.7rem);
  bottom: clamp(1.35rem, 3vw, 2.7rem);
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 10px, 0) scale(.96) !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .38));
  transition: opacity .38s ease .12s, transform .42s cubic-bezier(.22, 1, .36, 1) .12s;
}
#eyvi-tech .et-vimeo-link,
#eyvi-tech .eyvi-tech-vimeo-control,
#eyvi-tech .eyvi-tech-vimeo-fallback {
  position: absolute !important;
  left: clamp(1.35rem, 3vw, 2.7rem) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(1.35rem, 3vw, 2.7rem) !important;
  z-index: 10150 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 10px, 8px) scale(.96) !important;
  pointer-events: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
  transition: opacity .32s ease, transform .38s cubic-bezier(.22, 1, .36, 1), visibility .32s ease !important;
}
#eyvi-tech .et-vimeo-link .et-vimeo-icon,
#eyvi-tech .eyvi-tech-vimeo-control .et-vimeo-icon {
  position: static !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  object-fit: contain !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .44)) !important;
}
#eyvi-tech .et-vimeo-link:focus-visible,
#eyvi-tech .eyvi-tech-vimeo-control:focus-visible,
#eyvi-tech .eyvi-tech-vimeo-fallback:focus-visible {
  outline: 2px solid var(--eyvi-cream) !important;
  outline-offset: 4px !important;
  border-radius: 999px !important;
}
/* ───────── Fullscreen modal ───────── */
#eyvi-tech .et-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  background: rgba(18, 18, 18, .72) !important;
}
#eyvi-tech .et-backdrop.on {
  pointer-events: auto;
}
#eyvi-tech .eyvi-tech-modal-placeholder {
  display: block;
  flex: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}
#eyvi-tech .et-tile.is-centering-source {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: none;
}
#eyvi-tech .et-tile.is-fullscreen-source,
#eyvi-tech .et-tile.is-fullscreen-source:hover,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
#eyvi-tech .et-tile.is-fullscreen-source.is-text-ready,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
  position: fixed !important;
  z-index: 9000 !important;
  top: var(--eyvi-modal-top, 0px) !important;
  left: var(--eyvi-modal-left, 0px) !important;
  width: var(--eyvi-modal-width, 100vw) !important;
  height: var(--eyvi-modal-height, 100vh) !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  cursor: default;
  pointer-events: auto !important;
  border-radius: var(--eyvi-modal-radius, 5px) !important;
  background: var(--eyvi-bg) !important;
  contain: layout paint;
  isolation: isolate !important;
  overflow: hidden !important;
  clip-path: inset(0 round 5px) !important;
}
#eyvi-tech .et-tile.is-fullscreen-source::after,
#eyvi-tech .et-tile.is-fullscreen-source:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#eyvi-tech .et-tile.is-fullscreen-source > .et-case-num,
#eyvi-tech .et-tile.is-fullscreen-source > .et-click-cue {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok {
  z-index: 0 !important;
  inset: -2px !important;
  width: auto !important;
  height: auto !important;
  background: var(--eyvi-bg) !important;
  pointer-events: none !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe {
  opacity: 1 !important;
  visibility: visible !important;
  width: calc(var(--eyvi-video-width, 104%) + 16px) !important;
  height: calc(var(--eyvi-video-height, 116%) + 16px) !important;
  min-width: calc(var(--eyvi-video-width, 104%) + 16px) !important;
  min-height: calc(var(--eyvi-video-height, 116%) + 16px) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
  transition: opacity .28s ease !important;
  pointer-events: none !important;
  background: var(--eyvi-bg) !important;
  will-change: width, height, min-width, min-height;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo:not(.ok) iframe {
  opacity: 0 !important;
  visibility: hidden !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe {
  opacity: 1 !important;
  visibility: visible !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad {
  position: absolute !important;
  left: -3px !important;
  right: -3px !important;
  top: auto !important;
  bottom: -3px !important;
  inset: auto -3px -3px -3px !important;
  z-index: 20 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(320px, 48vh, 620px) !important;
  min-height: clamp(320px, 48vh, 620px) !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0) 0%,
    rgba(18, 18, 18, .012) 10%,
    rgba(18, 18, 18, .040) 24%,
    rgba(18, 18, 18, .110) 40%,
    rgba(18, 18, 18, .260) 58%,
    rgba(18, 18, 18, .520) 78%,
    rgba(18, 18, 18, .800) 100%
  ) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::after {
  content: none !important;
  display: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt {
  position: absolute !important;
  z-index: 120 !important;
  right: 0;
  bottom: 0;
  width: min(820px, 66%) !important;
  max-width: min(820px, 66%) !important;
  padding: clamp(1.5rem, 3.6vw, 3rem);
  text-align: right;
  color: var(--eyvi-white) !important;
  -webkit-text-fill-color: var(--eyvi-white) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 22px, 2px) !important;
  pointer-events: none !important;
  will-change: opacity, transform;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    opacity .52s ease,
    transform .56s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .52s !important;
}
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .eyvi-tech-fullscreen-txt {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 2px) !important;
  transition:
    opacity .58s ease .08s,
    transform .62s cubic-bezier(.22, 1, .36, 1) .08s,
    visibility 0s linear 0s !important;
}
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .eyvi-tech-fullscreen-txt,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .eyvi-tech-fullscreen-grad {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 18px, 2px) !important;
  transition:
    opacity .22s ease,
    transform .24s ease,
    visibility 0s linear .22s !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt::before,
#eyvi-tech .eyvi-tech-fullscreen-txt::after,
#eyvi-tech .eyvi-tech-fullscreen-txt h3::before,
#eyvi-tech .eyvi-tech-fullscreen-txt h3::after,
#eyvi-tech .eyvi-tech-fullscreen-txt p::before,
#eyvi-tech .eyvi-tech-fullscreen-txt p::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt h3,
#eyvi-tech .eyvi-tech-fullscreen-txt p {
  position: relative !important;
  z-index: 121 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--eyvi-white) !important;
  -webkit-text-fill-color: var(--eyvi-white) !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt h3 {
  margin: 0 0 .7rem;
  font-family: 'Lato', sans-serif;
  font-weight: 600 !important;
  font-size: clamp(1.35rem, 1.9vw, 2.25rem);
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt p {
  margin: 0 0 0 auto;
  font-family: 'Lato', sans-serif;
  font-weight: 500 !important;
  font-size: clamp(.96rem, 1vw, 1.18rem);
  line-height: 1.6 !important;
}
#eyvi-tech .eyvi-tech-fullscreen-x {
  position: fixed !important;
  top: calc(7.5vh + 24px);
  right: calc(7.5vw + 24px) !important;
  z-index: 10160 !important;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--eyvi-x-bg) !important;
  color: var(--eyvi-bg) !important;
  -webkit-text-fill-color: var(--eyvi-bg) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: scale(1) rotate(0deg) !important;
  rotate: 0deg !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  transition: background .22s ease, opacity .26s ease .12s !important;
  -webkit-tap-highlight-color: transparent;
}
#eyvi-tech .eyvi-tech-fullscreen-x.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}
#eyvi-tech .eyvi-tech-fullscreen-x.is-hiding,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing ~ .eyvi-tech-fullscreen-x {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(.88) !important;
  pointer-events: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-x:hover,
#eyvi-tech .eyvi-tech-fullscreen-x:focus-visible {
  background: var(--eyvi-x-bg) !important;
  color: var(--eyvi-bg) !important;
  -webkit-text-fill-color: var(--eyvi-bg) !important;
  outline: none !important;
  transform: scale(1) rotate(0deg) !important;
}
#eyvi-tech .eyvi-tech-fullscreen-x::before {
  content: "×" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-size: 31px !important;
  font-weight: 300 !important;
  line-height: 21px !important;
  text-align: center !important;
  color: var(--eyvi-bg) !important;
  -webkit-text-fill-color: var(--eyvi-bg) !important;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
  transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
}
#eyvi-tech .eyvi-tech-fullscreen-x:hover::before,
#eyvi-tech .eyvi-tech-fullscreen-x:focus-visible::before {
  transform: translate3d(-50%, -50%, 0) rotate(90deg) !important;
}
html.eyvi-tech-modal-open,
body.eyvi-tech-modal-open {
  overscroll-behavior: none !important;
  scroll-behavior: auto !important;
  touch-action: none !important;
}
/* ───────── Desktop spacing ───────── */
@media (min-width: 1020px) {
  #eyvi-tech .et-grid-sec {
    padding-left: max(calc((100% - 960px) / 2), 2rem);
    padding-right: max(calc((100% - 960px) / 2), 2rem);
  }
}
/* ───────── Mobile ───────── */
@media (max-width: 850px) {
  #eyvi-tech .et-driver {
    height: 280vh !important;
    min-height: 280vh !important;
  }
  #eyvi-tech .et-title .w {
    font-size: clamp(28px, 8.6vw, 44px) !important;
  }
  #eyvi-tech .et-grid-sec {
    padding: clamp(150px, 22vh, 210px) 16px 120px;
    overflow-x: hidden;
  }
  #eyvi-tech .et-grid {
    gap: 56px;
    width: 100%;
    max-width: 960px;
  }
  #eyvi-tech .et-tile {
    width: min(300px, calc(100vw - 32px)) !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
    aspect-ratio: 300 / 488 !important;
  }
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-poster.has-image:not(.hid),
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-poster:not(.hid) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  #eyvi-tech .et-tile-vimeo:not(.ok) iframe,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo:not(.ok) iframe {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo iframe {
    width: calc(290% + 18px) !important;
    height: calc(108% + 18px) !important;
    min-width: calc(290% + 18px) !important;
    min-height: calc(108% + 18px) !important;
    transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
  }
  #eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-vimeo iframe {
    transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
  }
  #eyvi-tech .et-case-num {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #eyvi-tech .et-click-cue {
    position: absolute !important;
    z-index: 45 !important;
    left: auto !important;
    right: 24px !important;
    bottom: 22px !important;
    width: auto !important;
    max-width: calc(100% - 48px) !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--eyvi-cream) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  #eyvi-tech .et-click-cue::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='22' cy='22' r='18' stroke='%2307E8E6' stroke-width='1.5'/%3E%3Cpath d='M19 15.5L29 22L19 28.5V15.5Z' stroke='%2307E8E6' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 44px 44px !important;
  }
  #eyvi-tech .et-click-cue::after {
    content: "Case study" !important;
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 92px !important;
    height: 24px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: currentColor !important;
    text-align: right !important;
  }
  #eyvi-tech .eyvi-tech-fullscreen-txt,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .eyvi-tech-fullscreen-txt {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 18px 18px 62px !important;
    text-align: right !important;
  }
  #eyvi-tech .eyvi-tech-fullscreen-txt h3 {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
  }
  #eyvi-tech .eyvi-tech-fullscreen-txt p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: right !important;
  }
  #eyvi-tech .eyvi-tech-fullscreen-x {
    right: calc(7.5vw + 16px) !important;
  }
}
@media (max-width: 374px) {
  #eyvi-tech .eyvi-tech-fullscreen-grad {
    height: clamp(220px, 38vh, 400px) !important;
    min-height: clamp(220px, 38vh, 400px) !important;
  }
}
/* ───────── Lite / performance ───────── */
html.eyvi-lite #eyvi-tech .et-sticky.et-fixed {
  box-shadow: none !important;
  clip-path: none !important;
}
html.eyvi-lite #eyvi-tech .et-tile,
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source {
  -webkit-mask-image: none !important;
  transform-style: flat !important;
}
html.eyvi-lite #eyvi-tech .et-pill,
html.eyvi-lite #eyvi-tech .et-title .w,
html.eyvi-lite #eyvi-tech .et-hint,
html.eyvi-lite #eyvi-tech .et-tile,
html.eyvi-lite #eyvi-tech .et-tile-vimeo iframe,
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-txt,
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad,
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe {
  will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  #eyvi-tech .et-hint .arr {
    animation: none;
  }
  #eyvi-tech .et-tile,
  #eyvi-tech .et-tile-vimeo iframe,
  #eyvi-tech .eyvi-tech-fullscreen-txt,
  #eyvi-tech .eyvi-tech-fullscreen-grad,
  #eyvi-tech .eyvi-tech-fullscreen-x,
  #eyvi-tech .et-vimeo-link,
  #eyvi-tech .eyvi-tech-vimeo-control {
    transition: none !important;
  }
}
/* ───────── v95 DESKTOP STABLE VIDEO ───────── */
@media (min-width: 851px) {
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-poster,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-poster.has-image,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-poster:not(.hid) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo.ok,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo:not(.ok) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #121212 !important;
    pointer-events: none !important;
  }
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo iframe,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo:not(.ok) iframe {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(1.026) !important;
    transition: opacity .28s ease !important;
  }
  #eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-vimeo iframe,
  #eyvi-tech .et-tile:not(.is-fullscreen-source):hover .et-tile-vimeo iframe {
    transform: translate3d(-50%, -50%, 0) scale(1.026) !important;
  }
}
/* X nad wszystkim w prawym górnym rogu */
#eyvi-tech .eyvi-tech-fullscreen-x,
#eyvi-tech .eyvi-tech-fullscreen-x.is-visible {
  z-index: 2147483100 !important;
}
/* ───────── v104 SMOOTH MODAL VIDEO PRIORITY ───────── */
#eyvi-tech .et-tile:not(.is-fullscreen-source) > * {
  pointer-events: none !important;
}
#eyvi-tech .et-tile:not(.is-fullscreen-source) {
  cursor: pointer !important;
}
#eyvi-tech .et-tile:not(.is-fullscreen-source) .et-vimeo-link,
#eyvi-tech .et-tile:not(.is-fullscreen-source) .eyvi-tech-vimeo-control,
#eyvi-tech .et-tile:not(.is-fullscreen-source) .eyvi-tech-vimeo-fallback {
  pointer-events: none !important;
}
#eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo iframe,
#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-vimeo iframe {
  transform: translate3d(-50%, -50%, 0) scale(1.026) !important;
  transition: opacity .28s ease !important;
  will-change: opacity !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok {
  inset: -8px !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  will-change: auto !important;
  contain: paint !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo iframe {
  width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  min-width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  min-height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  transform-origin: center center !important;
  transition: opacity .18s ease !important;
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: paint !important;
}
#eyvi-tech .et-tile.is-fullscreen-source,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: top, left, width, height !important;
  contain: layout paint !important;
}
#eyvi-tech .et-tile.is-fullscreen-source.is-opening .eyvi-tech-fullscreen-txt,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .eyvi-tech-fullscreen-txt {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 850px) {
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok {
    inset: -6px !important;
  }
}
html.eyvi-lite #eyvi-tech .et-tile,
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source,
html.eyvi-lite #eyvi-tech .et-tile-vimeo,
html.eyvi-lite #eyvi-tech .et-tile-vimeo iframe,
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad,
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-txt {
  will-change: auto !important;
}
/* ───────── v105/v106 — embed Vimeo guard + mobile fullscreen cover ───────── */
#eyvi-tech .et-vimeo-link,
#eyvi-tech .eyvi-tech-vimeo-control,
#eyvi-tech .eyvi-tech-vimeo-fallback,
#eyvi-tech .et-vimeo-icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#eyvi-tech .et-pill-vimeo > div,
#eyvi-tech .et-tile-vimeo > div,
#eyvi-tech .et-pill-vimeo > div[style],
#eyvi-tech .et-tile-vimeo > div[style] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #121212 !important;
}
#eyvi-tech .et-pill-vimeo iframe,
#eyvi-tech .et-tile-vimeo iframe,
#eyvi-tech .et-pill-vimeo > div iframe,
#eyvi-tech .et-tile-vimeo > div iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  pointer-events: none !important;
  background: #121212 !important;
  transform: translate3d(-50%, -50%, 0) scale(1.02) !important;
}
/* ───────── v115 — mobile portret fullscreen ───────── */
@media (max-width: 850px) {
  html.eyvi-tech-modal-open,
  body.eyvi-tech-modal-open {
    width: 100vw !important;
    min-width: 100vw !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  #eyvi-tech .et-tile.is-fullscreen-source,
  #eyvi-tech .et-tile.is-fullscreen-source:hover,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
  #eyvi-tech .et-tile.is-fullscreen-source.is-text-ready,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    overflow: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    background: #121212 !important;
  }
  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source,
    #eyvi-tech .et-tile.is-fullscreen-source:hover,
    #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
    #eyvi-tech .et-tile.is-fullscreen-source.is-text-ready,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div[style] {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
  }
  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div[style] {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div iframe,
  #eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .et-tile-vimeo iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    transform-origin: center center !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div iframe,
    #eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .et-tile-vimeo iframe {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-poster,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-poster.hid {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ═════════════════════════════════════════════
   v111 CLEAN FULLSCREEN FIX — usuwa czarną nakładkę z filmu.
   Blur tylko jako wzmocnienie tekstu w dolnym gradiencie.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v116: "2026-06-04-tech-v117-gradient-mobile-open-close";
}
/* 0. KLUCZ: uwolnienie kafla ze stacking contextu sekcji podczas modala */
#eyvi-tech .et-grid-sec:has(.et-tile.is-fullscreen-source),
#eyvi-tech .et-grid:has(.et-tile.is-fullscreen-source) {
  z-index: auto !important;
  isolation: auto !important;
  overflow: visible !important;
  contain: none !important;
}
/* 1. Backdrop: tylko przyciemnienie, ZAWSZE pod fullscreenem, bez blur */
#eyvi-tech .et-backdrop,
#eyvi-tech .et-backdrop.on,
html.eyvi-lite #eyvi-tech .et-backdrop,
html.eyvi-lite #eyvi-tech .et-backdrop.on {
  position: fixed !important;
  inset: 0 !important;
  z-index: 7000 !important;
  background: rgba(18, 18, 18, .62) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
#eyvi-tech .et-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .32s ease !important;
}
#eyvi-tech .et-backdrop.on {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* 2. Fullscreen kafel: nad backdropem, bez filtra, bez vignette 100vmax */
#eyvi-tech .et-tile.is-fullscreen-source,
#eyvi-tech .et-tile.is-fullscreen-source:hover,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
#eyvi-tech .et-tile.is-fullscreen-source.is-text-ready,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
  z-index: 9000 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .035) !important;
}
/* 3. Film / Vimeo: zero filtra, pełna ostrość */
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}
/* 4. Brak pełnoekranowej pseudo-nakładki na filmie */
#eyvi-tech .et-tile.is-fullscreen-source::before,
#eyvi-tech .et-tile.is-fullscreen-source::after,
#eyvi-tech .et-tile.is-fullscreen-source:hover::before,
#eyvi-tech .et-tile.is-fullscreen-source:hover::after,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening::before,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening::after,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded::before,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded::after,
#eyvi-tech .et-tile.is-fullscreen-source.is-text-ready::before,
#eyvi-tech .et-tile.is-fullscreen-source.is-text-ready::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}
/* 5. v116: gradient i blur rozdzielone na osobne warstwy.
   Gradient zostaje pełny i nie jest maskowany; maskujemy tylko blur w ::before. */
#eyvi-tech .eyvi-tech-fullscreen-grad {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0) 0%,
    rgba(18, 18, 18, .012) 10%,
    rgba(18, 18, 18, .040) 24%,
    rgba(18, 18, 18, .120) 40%,
    rgba(18, 18, 18, .300) 58%,
    rgba(18, 18, 18, .580) 78%,
    rgba(18, 18, 18, .840) 100%
  ) !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(18, 18, 18, .001) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 56%) !important;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 56%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::after {
  content: none !important;
  display: none !important;
}
/* 6. Mobile: ta sama zasada */
@media (max-width: 850px) {
  #eyvi-tech .et-backdrop,
  #eyvi-tech .et-backdrop.on,
  html.eyvi-lite #eyvi-tech .et-backdrop,
  html.eyvi-lite #eyvi-tech .et-backdrop.on {
    z-index: 7000 !important;
    background: rgba(18, 18, 18, .62) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
  #eyvi-tech .et-tile.is-fullscreen-source,
  #eyvi-tech .et-tile.is-fullscreen-source:hover,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
  #eyvi-tech .et-tile.is-fullscreen-source.is-text-ready,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
    box-shadow:
      0 20px 64px rgba(0, 0, 0, .5),
      0 0 0 1px rgba(255, 255, 255, .03) !important;
  }
  #eyvi-tech .eyvi-tech-fullscreen-grad::before {
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }
}
/* 7. Lite / wydajność: bez blura na gradiencie */
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* 8. prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #eyvi-tech .et-backdrop {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════
   v116 FINAL INTEGRATION — mobile close + gradient stability
   Cel: domknąć konflikty między v111/v115 bez kasowania zabezpieczeń Vimeo/mobile.
   ═════════════════════════════════════════════ */
#eyvi-tech .eyvi-tech-fullscreen-grad {
  overflow: hidden !important;
}
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .eyvi-tech-fullscreen-grad::before {
  opacity: 0 !important;
  transition: opacity .22s ease !important;
}

@media (max-width: 850px) {
  /* Podczas zamykania mobile kafel wraca do grida po zmiennych GSAP,
     a nie po twardym 100vw/100dvh z v115. */
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing {
    position: fixed !important;
    top: var(--eyvi-modal-top, 0px) !important;
    left: var(--eyvi-modal-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--eyvi-modal-width, 100vw) !important;
    height: var(--eyvi-modal-height, 100vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: var(--eyvi-modal-radius, 5px) !important;
    clip-path: inset(0 round var(--eyvi-modal-radius, 5px)) !important;
    -webkit-mask-image: none !important;
    transform: translate3d(0, 0, 0) !important;
    overflow: hidden !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div[style] {
    position: absolute !important;
    inset: -8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
    height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
    min-width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
    min-height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    transform-origin: center center !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }
}

/* ═════════════════════════════════════════════
   v117 FULLSCREEN EXIT / ACTIVE CLICK / GRADIENT / MOBILE PILL
   Cel: naprawa bez przebudowy architektury.
   - .is-opening i .is-closing na mobile jadą po zmiennych GSAP, nie po hard-lock 100dvh.
   - gradient jest osobną warstwą nad blurem; blur nie może maskować gradientu.
   - zamykany/otwierany iframe nie zmienia wymiarów karty w gridzie po restore.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v117: "2026-06-05-tech-v133-audit-vimeo-budget";
}

/* Gradient: blur jest dodatkiem, czarna warstwa głębi jest zawsze osobna i nad nim. */
#eyvi-tech .eyvi-tech-fullscreen-grad {
  background: transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(18, 18, 18, .001) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 26%, rgba(0,0,0,1) 58%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 26%, rgba(0,0,0,1) 58%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0)    0%,
    rgba(18,18,18,.020) 12%,
    rgba(18,18,18,.060) 26%,
    rgba(18,18,18,.160) 42%,
    rgba(18,18,18,.360) 60%,
    rgba(18,18,18,.660) 80%,
    rgba(18,18,18,.900) 100%
  ) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}
#eyvi-tech .eyvi-tech-fullscreen-txt {
  z-index: 120 !important;
}
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::after {
  opacity: 1 !important;
}

/* Kafel fullscreen musi być klikalny; iframe dalej nie przechwytuje kliknięć. */
#eyvi-tech .et-tile.is-fullscreen-source {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe {
  pointer-events: none !important;
}

/* Desktop i mobile: podczas zamykania kontener nie może zmienić geometrii poza zmiennymi GSAP. */
#eyvi-tech .et-tile.is-fullscreen-source.is-closing {
  top: var(--eyvi-modal-top, 0px) !important;
  left: var(--eyvi-modal-left, 0px) !important;
  width: var(--eyvi-modal-width, 100vw) !important;
  height: var(--eyvi-modal-height, 100vh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: var(--eyvi-modal-radius, 5px) !important;
  clip-path: inset(0 round var(--eyvi-modal-radius, 5px)) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  overflow: hidden !important;
}

@media (max-width: 850px) {
  /* v115 blokował .is-opening/.is-closing na 100vw/100dvh. v117 uwalnia animację. */
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing {
    position: fixed !important;
    top: var(--eyvi-modal-top, 0px) !important;
    left: var(--eyvi-modal-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--eyvi-modal-width, 100vw) !important;
    height: var(--eyvi-modal-height, 100vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: var(--eyvi-modal-radius, 0px) !important;
    clip-path: inset(0 round var(--eyvi-modal-radius, 0px)) !important;
    -webkit-mask-image: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    overflow: hidden !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo > div,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo > div[style],
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div[style] {
    position: absolute !important;
    inset: -8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo > div iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo > div iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
    height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
    min-width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
    min-height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    transform-origin: center center !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* Po powrocie do grida karta wraca do oryginalnej pionowej geometrii. */
  #eyvi-tech .et-tile:not(.is-fullscreen-source) {
    width: min(300px, calc(100vw - 32px)) !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
    aspect-ratio: 300 / 488 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 5px !important;
    clip-path: inset(0 round 5px) !important;
  }
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo {
    position: absolute !important;
    inset: -2px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }
}



/* ═════════════════════════════════════════════
   v118 GLOBAL-AWARE SAFETY PATCH
   Kontekst: global.css/global.js mają eyvi-lite, sectionGate, scrollSnap i touch-action:none.
   Ten blok nie zmienia architektury TechLab — tylko uszczelnia warstwę modala
   wobec globalnych klas i odświeżeń.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v118: "2026-06-05-tech-v133-audit-vimeo-budget";
}

/* Gdy global.js trzyma sectionGate dla modala Tech, fullscreen ma pozostać najwyższą lokalną warstwą. */
html[data-eyvi-section-lock="techModal"] #eyvi-tech {
  z-index: 8990 !important;
  isolation: isolate !important;
}

html[data-eyvi-section-lock="techModal"] #eyvi-tech .et-tile.is-fullscreen-source,
html.eyvi-tech-modal-open #eyvi-tech .et-tile.is-fullscreen-source,
body.eyvi-tech-modal-open #eyvi-tech .et-tile.is-fullscreen-source {
  pointer-events: auto !important;
  will-change: top, left, width, height, border-radius !important;
}

/* Global lite może wyłączać maski; zostawiamy clip-path jako podstawowe źródło geometrii. */
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source,
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
html.eyvi-lite #eyvi-tech .et-tile.is-fullscreen-source.is-closing {
  clip-path: inset(0 round var(--eyvi-modal-radius, 0px)) !important;
  -webkit-mask-image: none !important;
}

/* Gradient musi przetrwać tryb lite: blur może zniknąć, czarna głębia nie. */
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
}
html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Podczas animacji wyjścia nie pokazujemy starych opisów kafla ani hoverów z grida. */
#eyvi-tech .et-tile.is-fullscreen-source.is-closing > .et-case-num,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing > .et-click-cue,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 850px) {
  /* Global touch-action:none nie może zabrać klikalności aktywnego kafla. */
  html.eyvi-tech-modal-open #eyvi-tech,
  body.eyvi-tech-modal-open #eyvi-tech,
  html[data-eyvi-section-lock="techModal"] #eyvi-tech {
    touch-action: manipulation !important;
  }

  html.eyvi-tech-modal-open #eyvi-tech .et-tile.is-fullscreen-source,
  html[data-eyvi-section-lock="techModal"] #eyvi-tech .et-tile.is-fullscreen-source {
    touch-action: manipulation !important;
  }

  /* Otwieranie/zamykanie nadal jedzie po zmiennych GSAP, nie po globalnym 100vh/100dvh. */
  html[data-eyvi-section-lock="techModal"] #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
  html[data-eyvi-section-lock="techModal"] #eyvi-tech .et-tile.is-fullscreen-source.is-closing {
    top: var(--eyvi-modal-top, 0px) !important;
    left: var(--eyvi-modal-left, 0px) !important;
    width: var(--eyvi-modal-width, 100vw) !important;
    height: var(--eyvi-modal-height, 100vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: var(--eyvi-modal-radius, 0px) !important;
    clip-path: inset(0 round var(--eyvi-modal-radius, 0px)) !important;
  }
}


/* ═════════════════════════════════════════════
   v119 EXIT HANDOFF / STRONGER GRADIENT / SMALLER MOBILE START PILL
   - usuwa błysk w ostatniej klatce przejścia fullscreen → normal,
   - wzmacnia czarną głębię na blurze,
   - nie przebudowuje istniejącej architektury.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v119: "2026-06-05-tech-v133-audit-vimeo-budget";
}

/* Oryginalny kafel jest chowany tylko na 2 klatki, gdy wraca z fixed do normalnego flow. */
#eyvi-tech .et-tile.is-handoff-normalizing {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Tymczasowa osłona końcowego rectu kafla — zasłania mikroprzeskok restoreTile(). */
.eyvi-tech-close-handoff {
  position: fixed !important;
  z-index: 9060 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout paint style !important;
  background-color: #121212 !important;
  box-shadow: inset 0 0 0 1px #121212 !important;
  clip-path: inset(0 round 5px) !important;
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .18s ease !important;
}

.eyvi-tech-close-handoff::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0) 0%,
    rgba(18,18,18,.10) 36%,
    rgba(18,18,18,.36) 62%,
    rgba(18,18,18,.74) 100%
  ) !important;
}

.eyvi-tech-close-handoff.is-out {
  opacity: 0 !important;
}

/* Czarny gradient ma być widoczny bardziej niż blur. Blur zostaje tylko warstwą wspierającą. */
#eyvi-tech .eyvi-tech-fullscreen-grad::before {
  background: rgba(18, 18, 18, .075) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,1) 52%) !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,1) 52%) !important;
}

#eyvi-tech .eyvi-tech-fullscreen-grad::after {
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0)    0%,
    rgba(18,18,18,.035) 10%,
    rgba(18,18,18,.105) 24%,
    rgba(18,18,18,.240) 40%,
    rgba(18,18,18,.480) 58%,
    rgba(18,18,18,.780) 78%,
    rgba(18,18,18,.960) 100%
  ) !important;
}

html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::before {
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.eyvi-lite #eyvi-tech .eyvi-tech-fullscreen-grad::after {
  opacity: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(18,18,18,0)    0%,
    rgba(18,18,18,.050) 14%,
    rgba(18,18,18,.180) 34%,
    rgba(18,18,18,.460) 58%,
    rgba(18,18,18,.820) 82%,
    rgba(18,18,18,.970) 100%
  ) !important;
}

@media (max-width: 850px) {
  /* Handoff na mobile musi mieć dokładny pionowy rect karty i nie przejmować gestów. */
  .eyvi-tech-close-handoff {
    touch-action: none !important;
    border-radius: 5px !important;
  }

  /* Po handoffie normalny kafel wraca do pionowej geometrii bez dziedziczenia fullscreenowych wymiarów. */
  #eyvi-tech .et-tile.is-handoff-normalizing:not(.is-fullscreen-source) {
    width: min(300px, calc(100vw - 32px)) !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
    aspect-ratio: 300 / 488 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
  }
}


/* ═════════════════════════════════════════════
   v120 VIDEO CONTINUITY / MOBILE FULLSCREEN PILL FIX
   - odkliknięcie nie podmienia filmu na poster i nie usuwa iframe Vimeo,
   - jeden aktywny iframe może zostać w gridzie po zamknięciu, zachowując czas filmu,
   - mobile opening nie dostaje przedwcześnie inline fixed 100vw/100dvh,
   - osłona v119 nie jest używana; gdyby klasa została po starej wersji, nie ukrywa kafla.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v120: "2026-06-05-tech-v133-audit-vimeo-budget";
}

/* v119 hide-handoff wyłączał realny iframe na 1-2 klatki. v120 trzyma film widoczny. */
#eyvi-tech .et-tile.is-handoff-normalizing,
#eyvi-tech .et-tile.is-mobile-video-continuity {
  opacity: 1 !important;
  visibility: visible !important;
}

#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-vimeo,
#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-vimeo.ok {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: #121212 !important;
}

#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-vimeo iframe,
#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-vimeo.ok iframe {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: #121212 !important;
}

#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-poster,
#eyvi-tech .et-tile.is-mobile-video-continuity .et-tile-poster.has-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 850px) {
  /* Normalny kafel po odkliknięciu wraca do tej samej geometrii, ale zachowuje ten sam iframe. */
  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source) {
    width: min(300px, calc(100vw - 32px)) !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
    aspect-ratio: 300 / 488 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 5px !important;
    clip-path: inset(0 round 5px) !important;
    transform: scale(1) !important;
    transition: opacity .22s ease, transform .22s ease !important;
  }

  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source) .et-tile-vimeo,
  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source) .et-tile-vimeo.ok {
    position: absolute !important;
    inset: -2px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source) .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source) .et-tile-vimeo.ok iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(290% + 18px) !important;
    height: calc(108% + 18px) !important;
    min-width: calc(290% + 18px) !important;
    min-height: calc(108% + 18px) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
    transform-origin: center center !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
	
	/* ═════════════════════════════════════════════
   EYVI TechLab — PILL MP4 OVERRIDE
   Zastępuje dawny pill Vimeo / iframe natywnym video MP4
═════════════════════════════════════════════ */

#eyvi-tech .et-pill {
  background: #121212 !important;
}

/* Nowe natywne video w pastylce */
#eyvi-tech .et-pill .et-pill-video,
#eyvi-tech .et-pill video#et-hv,
#eyvi-tech video.et-pill-video {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  visibility: visible !important;

  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  background: #121212 !important;
  pointer-events: none !important;

  transform: translate3d(0, 0, 0) scale(1.02) !important;
  transform-origin: center center !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Gdyby stary JS/Vimeo próbował coś wstawić do #et-hv — blokujemy tylko potomków iframe/div.
   Sam video#et-hv zostaje widoczny. */
#eyvi-tech video#et-hv iframe,
#eyvi-tech video#et-hv > div,
#eyvi-tech video#et-hv > div[style] {
  display: none !important;
}

/* Stare klasy Vimeo w pillu nie są już potrzebne */
#eyvi-tech .et-pill .et-pill-vimeo,
#eyvi-tech .et-pill .et-pill-vimeo iframe,
#eyvi-tech .et-pill .et-pill-vimeo > div,
#eyvi-tech .et-pill .et-pill-vimeo > div iframe {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Overlay zostaje nad MP4 */
#eyvi-tech .et-pill-ov {
  z-index: 3 !important;
}

/* Mobile: MP4 ma zachowywać się jak cover, bez starych wyliczeń iframe */
@media (max-width: 850px) {
  #eyvi-tech .et-pill .et-pill-video,
  #eyvi-tech .et-pill video#et-hv,
  #eyvi-tech video.et-pill-video {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: translate3d(0, 0, 0) scale(1.04) !important;
  }
}

/* Dla bardzo wąskich ekranów można minimalnie dociąć mocniej */
@media (max-width: 374px) {
  #eyvi-tech .et-pill .et-pill-video,
  #eyvi-tech .et-pill video#et-hv,
  #eyvi-tech video.et-pill-video {
    transform: translate3d(0, 0, 0) scale(1.08) !important;
  }
}

  /* Gdy modal jest w fazie otwierania, tylko zmienne GSAP sterują rozmiarem — zero hard-locka. */
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening {
    position: fixed !important;
    top: var(--eyvi-modal-top, 0px) !important;
    left: var(--eyvi-modal-left, 0px) !important;
    width: var(--eyvi-modal-width, 100vw) !important;
    height: var(--eyvi-modal-height, 100vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: var(--eyvi-modal-radius, 0px) !important;
    overflow: hidden !important;
  }

  /* Dopiero po .is-expanded stabilizujemy pełny pionowy viewport. */
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
  }

  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}


/* ═════════════════════════════════════════════
   v130 CLEAN MOBILE FULLSCREEN COVER
   Źródło prawdy:
   - mobile breakpoint: ≤850px,
   - normalny kafel/pastylka: pionowa geometria 300/488,
   - fullscreen: pionowy kontener 100vw × 100dvh,
   - Vimeo iframe: 16:9 cover, centrowany wyłącznie przez left/top 50% + translate.
   Brak korekty marginami — to powodowało efekt 1/4 ekranu.
   ═════════════════════════════════════════════ */
#eyvi-tech {
  --eyvi-tech-css-version-v130: "2026-06-05-tech-v133-audit-vimeo-budget";
}

@media (max-width: 850px) {
  #eyvi-tech .et-tile:not(.is-fullscreen-source),
  #eyvi-tech .et-tile.is-mobile-video-continuity:not(.is-fullscreen-source),
  #eyvi-tech .et-tile.is-handoff-normalizing:not(.is-fullscreen-source) {
    width: min(300px, calc(100vw - 32px)) !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
    aspect-ratio: 300 / 488 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 5px !important;
    clip-path: inset(0 round 5px) !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-opening,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing {
    position: fixed !important;
    top: var(--eyvi-modal-top, 0px) !important;
    left: var(--eyvi-modal-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--eyvi-modal-width, 100vw) !important;
    height: var(--eyvi-modal-height, 100vh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: var(--eyvi-modal-radius, 0px) !important;
    clip-path: inset(0 round var(--eyvi-modal-radius, 0px)) !important;
    -webkit-mask-image: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    overflow: hidden !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    overflow: hidden !important;
    background: #121212 !important;
  }

  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div[style] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: none !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div iframe,
  #eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .et-tile-vimeo iframe,
  #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--eyvi-video-width, 238.222vh) !important;
    height: var(--eyvi-video-height, 134vh) !important;
    min-width: var(--eyvi-video-width, 238.222vh) !important;
    min-height: var(--eyvi-video-height, 134vh) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    transform-origin: center center !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }

  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok iframe,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo > div iframe,
    #eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-expanded.is-text-ready .et-tile-vimeo iframe,
    #eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo iframe {
      width: var(--eyvi-video-width, 238.222dvh) !important;
      height: var(--eyvi-video-height, 134dvh) !important;
      min-width: var(--eyvi-video-width, 238.222dvh) !important;
      min-height: var(--eyvi-video-height, 134dvh) !important;
    }
  }

  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-poster,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-poster.hid {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════
   v132 FIX MOBILE HERO / WWA PILL
   Deterministyczny portrait-cover niezależny od load/cache/sanitizera Vimeo.
   Holder #et-hv zostaje na 100% pastylki; iframe jest zawsze większym 16:9
   i jest cropowany centralnie przez overflow:hidden pastylki.
   Regulacja kadru: --et-pill-zoom.
   ═══════════════════════════════════════════════ */
@media (max-width: 850px) {
  #eyvi-tech {
    --et-pill-zoom: 1.18;
  }

  #eyvi-tech .et-pill .et-pill-vimeo,
  #eyvi-tech #et-hv,
  #eyvi-tech .et-pill .et-pill-vimeo > div,
  #eyvi-tech #et-hv > div,
  #eyvi-tech .et-pill .et-pill-vimeo > div[style],
  #eyvi-tech #et-hv > div[style] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) !important;
    transform-origin: center center !important;
  }

  #eyvi-tech .et-pill .et-pill-vimeo iframe,
  #eyvi-tech #et-hv iframe,
  #eyvi-tech .et-pill .et-pill-vimeo > div iframe,
  #eyvi-tech #et-hv > div iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: max(100vw, 177.78vh) !important;
    height: max(100vh, 56.25vw) !important;
    min-width: max(100vw, 177.78vh) !important;
    min-height: max(100vh, 56.25vw) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
    transform: translate3d(-50%, -50%, 0) scale(var(--et-pill-zoom, 1.18)) !important;
    transform-origin: center center !important;
  }

  @supports (height: 100dvh) {
    #eyvi-tech .et-pill .et-pill-vimeo iframe,
    #eyvi-tech #et-hv iframe,
    #eyvi-tech .et-pill .et-pill-vimeo > div iframe,
    #eyvi-tech #et-hv > div iframe {
      width: max(100vw, 177.78dvh) !important;
      height: max(100dvh, 56.25vw) !important;
      min-width: max(100vw, 177.78dvh) !important;
      min-height: max(100dvh, 56.25vw) !important;
    }
  }
}


/* ─────────────────────────────────────────────
   EYVI TechLab — AUDIT PATCH v133
   Cel: lżejszy fixed sticky, spójny breakpoint 851px, mniej kosztowny blur,
   focus-visible dla kafli dostępnych z klawiatury.
───────────────────────────────────────────── */
#eyvi-tech .et-sticky.et-fixed {
  box-shadow: none !important;
  clip-path: none !important;
}
#eyvi-tech .et-sticky.et-fixed::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--eyvi-bg) !important;
  pointer-events: none;
}
#eyvi-tech .eyvi-tech-fullscreen-grad,
#eyvi-tech .eyvi-tech-fullscreen-grad::before,
#eyvi-tech .eyvi-tech-fullscreen-grad::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}
#eyvi-tech .eyvi-tech-fullscreen-grad::before {
  content: none !important;
  display: none !important;
}
#eyvi-tech .et-tile[role="button"]:focus-visible {
  outline: 2px solid var(--eyvi-cyan) !important;
  outline-offset: 8px !important;
}
#eyvi-tech .et-tile.is-fullscreen-source:focus-visible {
  outline: none !important;
}
/* Pastylka startuje ciut niżej, ale może wrócić do centrum podczas rozwijania */
#eyvi-tech .et-pill {
  --et-pill-y: 22px;
  transform: translate3d(-50%, calc(-50% + var(--et-pill-y, 0px)), 0) !important;
}

/* ─────────────────────────────────────────────
   EYVI TechLab — PATCH v134
   Self-hosted <video> + bezpieczna pastylka startowa.
   Ważne: nie wymuszamy min-width/min-height ani clip-path na .et-pill,
   więc animacja dalej normalnie dochodzi do fullscreen.
───────────────────────────────────────────── */
#eyvi-tech {
  --eyvi-tech-css-version-v134: "2026-06-14-tech-v134-native-video-safe-pill";
  --et-pill-y: clamp(36px, 5vh, 72px);
}

/* Tylko pozycja startowa / fallback bez GSAP. Finalny fullscreen robi JS. */
#eyvi-tech .et-pill {
  transform: translate3d(-50%, calc(-50% + var(--et-pill-y, 0px)), 0) !important;
  clip-path: none !important;
}

/* Native video z serwera — zostawiamy stare klasy .vimeo, żeby nie ruszać HTML. */
#eyvi-tech .et-pill .et-pill-vimeo video,
#eyvi-tech .et-pill .et-pill-video video,
#eyvi-tech #et-hv video,
#eyvi-tech .et-tile-vimeo video,
#eyvi-tech .et-tile-video video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  background: #121212 !important;
  transform: translate3d(-50%, -50%, 0) scale(1.02) !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Hero/pastylka */
#eyvi-tech .et-pill .et-pill-vimeo video,
#eyvi-tech .et-pill .et-pill-video video,
#eyvi-tech #et-hv video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .6s ease !important;
}

#eyvi-tech .et-pill .et-pill-vimeo.ok video,
#eyvi-tech .et-pill .et-pill-video.ok video,
#eyvi-tech #et-hv.ok video {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Kafle */
#eyvi-tech .et-tile-vimeo video,
#eyvi-tech .et-tile-video video {
  width: calc(104% + 16px) !important;
  height: calc(116% + 16px) !important;
  min-width: calc(104% + 16px) !important;
  min-height: calc(116% + 16px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .28s ease !important;
}

#eyvi-tech .et-tile-vimeo.ok video,
#eyvi-tech .et-tile-video.ok video {
  opacity: 1 !important;
  visibility: visible !important;
}

#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-vimeo video,
#eyvi-tech .et-tile:not(.is-suppress-hover):not(.is-fullscreen-source):hover .et-tile-video video {
  transform: translate3d(-50%, -50%, 0) scale(1.026) !important;
}

/* Fullscreen case study */
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source .et-tile-video video,
#eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source:hover .et-tile-video video,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source.is-opening .et-tile-video video,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source.is-expanded .et-tile-video video,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source.is-closing .et-tile-video video {
  width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  min-width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  min-height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  transform-origin: center center !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Mobile: w gridzie zostają lekkie postery, video tylko w otwartym case study. */
@media (max-width: 850px) {
  #eyvi-tech {
    --et-pill-y: clamp(28px, 4.5vh, 52px);
  }

  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-vimeo video,
  #eyvi-tech .et-tile:not(.is-fullscreen-source) .et-tile-video video {
    width: calc(290% + 18px) !important;
    height: calc(108% + 18px) !important;
    min-width: calc(290% + 18px) !important;
    min-height: calc(108% + 18px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-video,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-fullscreen-source .et-tile-video.ok {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
  }

  @supports (height: 100dvh) {
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-video,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-vimeo.ok,
    #eyvi-tech .et-tile.is-fullscreen-source .et-tile-video.ok {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}


/* ─────────────────────────────────────────────
   EYVI TechLab — PATCH v135 MOBILE VIDEO LIVE FIX
   Cel: na mobile pastylka i kafle case study pokazują natywne MP4,
   a nie sam czarny gradient/poster. Wklejone na końcu CSS wygrywa z v134.
───────────────────────────────────────────── */
#eyvi-tech {
  --eyvi-tech-css-version-v135: "2026-06-14-tech-v135-mobile-video-ready";
}

#eyvi-tech .et-pill .et-pill-vimeo.ok,
#eyvi-tech #et-hv.ok {
  opacity: 1 !important;
  visibility: visible !important;
}

#eyvi-tech .et-pill .et-pill-vimeo.ok video,
#eyvi-tech #et-hv.ok video {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 850px) {
  /* Kafle w mobile: pokazujemy żywe video, nie ukrywamy go pod posterem. */
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-vimeo,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-video,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-vimeo.ok,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-video.ok {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-vimeo video,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-video video,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-vimeo.ok video,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-video.ok video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(290% + 18px) !important;
    height: calc(108% + 18px) !important;
    min-width: calc(290% + 18px) !important;
    min-height: calc(108% + 18px) !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
    object-fit: cover !important;
    pointer-events: none !important;
    background: #121212 !important;
  }

  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-poster,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-poster.has-image,
  #eyvi-tech .et-tile.is-visible:not(.is-fullscreen-source) .et-tile-poster.hid {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Pastylka mobile: bez czarnej pauzy zanim Safari odpali loadeddata. */
  #eyvi-tech .et-pill .et-pill-vimeo,
  #eyvi-tech #et-hv {
    background: #121212 !important;
  }
}


/* ═════════════════════════════════════════════
   EYVI TechLab v136 — HERO PILL MP4 FIX
   Naprawa: #et-hv jest DIV-em z klasą .et-pill-vimeo, więc nie wolno go ukrywać.
   Wideo MP4 dodawane przez JS siedzi jako <video> wewnątrz #et-hv.
═════════════════════════════════════════════ */
#eyvi-tech .et-pill #et-hv,
#eyvi-tech .et-pill .et-pill-vimeo {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  background: #121212 !important;
  pointer-events: none !important;

  transform: none !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

#eyvi-tech .et-pill #et-hv.ok,
#eyvi-tech .et-pill .et-pill-vimeo.ok {
  opacity: 1 !important;
  visibility: visible !important;
}

#eyvi-tech .et-pill #et-hv video,
#eyvi-tech .et-pill .et-pill-vimeo video,
#eyvi-tech .et-pill video.eyvi-native-video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center center !important;

  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #121212 !important;
  pointer-events: none !important;

  transform: none !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

/* Ukrywamy tylko stare iframe/Vimeo, nie cały holder #et-hv. */
#eyvi-tech .et-pill #et-hv iframe,
#eyvi-tech .et-pill #et-hv > div,
#eyvi-tech .et-pill .et-pill-vimeo iframe,
#eyvi-tech .et-pill .et-pill-vimeo > div {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#eyvi-tech .et-pill-ov {
  z-index: 3 !important;
}

/* EYVI Plugin v1.2 — Elementor editable TechLab driver */
#eyvi-tech .et-driver {
  height: calc(var(--eyvi-tech-driver-vh, 300) * 1vh) !important;
  min-height: calc(var(--eyvi-tech-driver-vh, 300) * 1vh) !important;
}
@media (max-width: 700px) {
  #eyvi-tech .et-driver {
    height: calc(var(--eyvi-tech-driver-mobile-vh, var(--eyvi-tech-driver-vh, 280)) * 1vh) !important;
    min-height: calc(var(--eyvi-tech-driver-mobile-vh, var(--eyvi-tech-driver-vh, 280)) * 1vh) !important;
  }
}

/* EYVI plugin v1.3.2 — Elementor font/position controls */
#eyvi-tech {
  --eyvi-tech-title-x: 0px;
  --eyvi-tech-title-y: 0px;
}

#eyvi-tech .et-title {
  margin-left: var(--eyvi-tech-title-x, 0px);
  margin-top: var(--eyvi-tech-title-y, 0px);
}

/* ============================================================
   v1.3.7 TECH FULLSCREEN VIDEO RESTORE
   Gwarantuje, że natywne MP4 w case study jest widoczne w fullscreenie.
   ============================================================ */
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-vimeo,
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-video,
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-vimeo.ok,
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-video.ok {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  background: #121212 !important;
}

#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-vimeo video,
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-video video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  min-width: calc(var(--eyvi-video-width, 100vw) + 32px) !important;
  min-height: calc(var(--eyvi-video-height, 100vh) + 32px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  pointer-events: none !important;
  background: #121212 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-poster,
#eyvi-tech .et-tile.is-fullscreen-source[data-eyvi-tech-fullscreen-video="on"] .et-tile-poster.has-image {
  opacity: 0 !important;
  visibility: hidden !important;
}