@font-face { font-family: "Momo Trust Sans"; src: url("../fonts/MomoTrustSans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('../fonts/Urbanist-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta Variable'; src: url('../fonts/AspektaVariable.woff2') format('woff2-variations'); font-weight: 50 1000; font-style: normal; font-display: swap; }
.jn-services-hero, .jn-services-hero * { box-sizing: border-box; }
/* The gradient fades to near-white, and the cards hang below it onto the dark wrapper.
   The cards are anchored to the bottom of the wrap, so the overhang stays constant at any hero height. */
.jn-services-hero {
  --case-height: 397px;
  --case-bottom-gap: 64px;
  --case-inside-hero: 130px;
  --case-overhang: calc(var(--case-height) + var(--case-bottom-gap) - var(--case-inside-hero));
  padding-bottom: var(--case-overhang);
  overflow-x: clip;
  background: #0f0f0f;
}

.jn-services-hero .services-hero {
  position: relative;
  --hero-badge-x: 0px;
  --hero-badge-y: 0px;
  min-height: 780px;
  height: 100vh;
  max-height: 1000px;
  overflow: visible;
  color: #fff;
  background: radial-gradient(ellipse at 48% 48%, rgb(62 30 174 / 74%) 0%, transparent 46%), radial-gradient(ellipse at 5% 86%, rgb(255 255 255 / 78%) 0%, transparent 38%), radial-gradient(ellipse at 96% 82%, rgb(247 242 255 / 82%) 0%, transparent 36%), linear-gradient(180deg, #09031a 0%, #170540 28%, #522fc7 56%, #f4efff 100%);
}

.jn-services-hero .services-title {
  position: absolute;
  top: 49%;
  left: 50%;
  z-index: 1;
  width: min(1160px, 90vw);
  margin: 0;
  font-family: "Urbanist", Arial, sans-serif;
  font-size: clamp(86px, 8.4vw, 140px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.18;
  text-align: center;
  transform: translate(-50%, -50%);
}

.jn-services-hero .hero-badge-row {
  display: contents;
}

.jn-services-hero .hero-badge {
  position: absolute;
  z-index: 2;
  --hero-badge-strength: 1;
  --hero-badge-rotate: 0deg;
  --hero-badge-float-x: 0px;
  --hero-badge-float-y: 0px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(6px);
  transform: translate3d(
      calc(var(--hero-badge-x, 0px) * var(--hero-badge-strength)),
      calc(var(--hero-badge-y, 0px) * var(--hero-badge-strength)),
      0
    )
    translate3d(var(--hero-badge-float-x), var(--hero-badge-float-y), 0)
    rotate(var(--hero-badge-rotate));
  transition: transform 260ms ease-out;
  will-change: transform;
}

.jn-services-hero .hero-badge::before,
.jn-services-hero .services-case-arrow::before {
  position: absolute;
  inset: 0;
  padding: 0.7px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 72%) 0%,
    rgb(255 255 255 / 18%) 34%,
    rgb(255 255 255 / 8%) 54%,
    rgb(255 255 255 / 42%) 100%
  );
  content: "";
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.jn-services-hero .hero-badge--eshopy {
  --hero-badge-strength: 0.72;
  --hero-badge-rotate: 1.2deg;
  top: 28.6%;
  left: 12.2%;
}

.jn-services-hero .hero-badge--web {
  --hero-badge-strength: -0.55;
  --hero-badge-rotate: -1deg;
  top: 25.7%;
  left: 50%;
  transform: translateX(-50%)
    translate3d(
      calc(var(--hero-badge-x, 0px) * var(--hero-badge-strength)),
      calc(var(--hero-badge-y, 0px) * var(--hero-badge-strength)),
      0
    )
    translate3d(var(--hero-badge-float-x), var(--hero-badge-float-y), 0)
    rotate(var(--hero-badge-rotate));
}

.jn-services-hero .hero-badge--emaily {
  --hero-badge-strength: -0.85;
  --hero-badge-rotate: -0.8deg;
  top: 32.6%;
  right: 9.3%;
}

.jn-services-hero .hero-badge--grafika {
  --hero-badge-strength: 0.58;
  --hero-badge-rotate: 0.9deg;
  top: 54.2%;
  left: 19.5%;
}

.jn-services-hero .hero-badge--reklamy {
  --hero-badge-strength: -0.68;
  --hero-badge-rotate: 1deg;
  top: 61.8%;
  right: 20.7%;
}

.jn-services-hero .hero-badge-icon {
  width: 23px;
  height: 23px;
  overflow: visible;
  object-fit: contain;
}

.jn-services-hero .services-cases {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(var(--case-overhang) * -1);
  z-index: 3;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 var(--case-bottom-gap) 82px;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
  -ms-overflow-style: none;
}

.jn-services-hero .services-cases::-webkit-scrollbar {
  display: none;
}

.jn-services-hero .services-cases.is-dragging {
  cursor: grabbing;
}

.jn-services-hero .services-cases.is-dragging .services-case-link {
  pointer-events: none;
}

.jn-services-hero .services-case-card {
  flex: 0 0 523px;
  height: var(--case-height);
}

.jn-services-hero .services-case-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  color: inherit;
  text-decoration: none;
  background: #1a1a1a;
}

.jn-services-hero .services-case-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jn-services-hero .services-case-shade {
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 70%) 100%);
  pointer-events: none;
}

.jn-services-hero .services-case-arrow {
  position: absolute;
  top: 23px;
  right: 23px;
  z-index: 2;
  --arrow-badge-size: 64px;
}

.jn-services-hero .services-case-copy {
  position: absolute;
  right: 26px;
  bottom: 23px;
  left: 26px;
  z-index: 2;
  display: grid;
  gap: 9px;
}

.jn-services-hero .services-case-copy strong,
.jn-services-hero .services-case-copy span {
  display: block;
  font-family: "Momo Trust Sans", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
}

.jn-services-hero .services-case-copy strong {
  font-size: 46px;
  font-weight: 400;
}

.jn-services-hero .services-case-copy span {
  color: rgb(255 255 255 / 72%);
  font-size: 25px;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .jn-services-hero .hero-badge {
    transform: none;
    transition: none;
  }

  .jn-services-hero .hero-badge--web {
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .jn-services-hero {
    --case-height: clamp(280px, 60vw, 330px);
    --case-bottom-gap: 40px;
    --case-inside-hero: 110px;
  }

  .jn-services-hero .services-hero {
    min-height: 720px;
    height: 100svh;
  }

  .jn-services-hero .services-title {
    top: 44%;
    width: min(680px, 86vw);
    font-size: clamp(58px, 12vw, 98px);
    line-height: 1.1;
  }

  .jn-services-hero .hero-badge-row {
    position: absolute;
    top: 118px;
    right: 24px;
    left: 24px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    align-content: flex-start;
    gap: 8px 10px;
  }

  .jn-services-hero .hero-badge-row .hero-badge {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    font-size: 16px;
    transform: translate3d(
      var(--hero-badge-float-x),
      var(--hero-badge-float-y),
      0
    );
  }

  .jn-services-hero .hero-badge--grafika {
    grid-column: 1 / span 2;
    justify-self: end;
  }

  .jn-services-hero .hero-badge--reklamy {
    grid-column: 3;
  }

  .jn-services-hero .hero-badge-icon {
    width: 16px;
    height: 16px;
  }

  .jn-services-hero .services-cases {
    gap: 12px;
    padding-left: 24px;
  }

  .jn-services-hero .services-case-card {
    flex-basis: min(78vw, 430px);
    height: var(--case-height);
  }

  .jn-services-hero .services-case-link {
    border-radius: 24px;
  }

  .jn-services-hero .services-case-arrow {
    top: 18px;
    right: 18px;
    --arrow-badge-size: 54px;
  }

  .jn-services-hero .services-case-copy {
    right: 22px;
    bottom: 21px;
    left: 22px;
  }

  .jn-services-hero .services-case-copy strong {
    font-size: clamp(31px, 7vw, 38px);
  }

  .jn-services-hero .services-case-copy span {
    font-size: clamp(17px, 4vw, 21px);
  }
}

@media (max-width: 520px) {
  .jn-services-hero {
    --case-height: 270px;
    --case-bottom-gap: 32px;
    --case-inside-hero: 90px;
  }

  .jn-services-hero .services-hero {
    min-height: 650px;
  }

  .jn-services-hero .services-title {
    top: 45%;
    width: 92vw;
    font-size: 46px;
  }

  .jn-services-hero .hero-badge-row {
    top: 92px;
    right: auto;
    left: 50%;
    width: calc(100vw - 32px);
    transform: translateX(-50%);
  }

  .jn-services-hero .services-cases {
    padding-left: 16px;
  }

  .jn-services-hero .services-case-card {
    flex-basis: 86vw;
  }

  .jn-services-hero .services-case-link {
    border-radius: 22px;
  }
}

.jn-services-hero .services-cases { scroll-behavior: auto; overflow-anchor: none; }
.jn-services-hero .services-case-card { margin: 0; }
.jn-services-hero .services-case-link { user-select: none; }
.jn-services-hero .services-case-arrow { display: grid; place-items: center; width: var(--arrow-badge-size); height: var(--arrow-badge-size); border: 0; border-radius: 50%; background: rgb(255 255 255 / 10%); backdrop-filter: blur(6px); }
.jn-services-hero .services-case-arrow svg { width: calc(var(--arrow-badge-size, 64px) * .48); height: calc(var(--arrow-badge-size, 64px) * .48); fill: none; stroke: currentColor; stroke-width: 2.5; transform: rotate(45deg); transition: transform 360ms cubic-bezier(.16, 1, .3, 1); stroke-linecap: round; stroke-linejoin: round; }
.jn-services-hero a.services-case-link:is(:hover, :focus-visible) .services-case-arrow svg { transform: rotate(0); }
.jn-services-hero .services-case-link:focus-visible { outline: 3px solid #b49aff; outline-offset: -4px; }
.jn-services-hero .services-cases:focus-visible { outline: 2px solid #b49aff; outline-offset: -3px; }
@media (max-width: 900px) { .jn-services-hero .services-cases { padding-right: 24px; } }
@media (max-width: 520px) { .jn-services-hero .services-cases { padding-right: 16px; } }

/* Shared, editable navbar overlays the reference hero. */
.jn-services-hero .jn-header { position: absolute; top: 5.4%; right: 6.8%; left: 6.8%; width: auto; padding: 0; background: transparent; z-index: 10; }
@media (min-width: 701px) {
  .jn-services-hero .jn-header { --jn-logo-width: 165px; gap: 28px; }
  .jn-services-hero .jn-header__media { height: 52px; }
  .jn-services-hero .jn-header__nav { position: static; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 38px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; }
  .jn-services-hero .jn-header__nav-link { padding: 0; }
  .jn-services-hero .jn-header__cta { display: inline-flex; }
  .jn-services-hero .jn-header__toggle { display: none; }
}
@media (max-width: 700px) {
  .jn-services-hero .jn-header { --jn-logo-width: 130px; top: 20px; right: 20px; left: 20px; }
  .jn-services-hero .jn-header__nav { top: calc(100% + 12px); right: 0; left: 0; }
}
@media (max-width: 520px) {
  .jn-services-hero .jn-header { --jn-logo-width: 118px; top: 16px; right: 16px; left: 16px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .jn-services-hero .jn-header { --jn-logo-width: 118px; gap: 12px; }
  .jn-services-hero .jn-header__nav { gap: 14px; }
  .jn-services-hero .jn-header__nav-text { font-size: 14px; }
  .jn-services-hero .jn-header__cta { font-size: 12px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .jn-services-hero .services-case-arrow svg { transition: none; } }

/* Allow text selection while editing service cards on the Elementor canvas. */
.elementor-editor-active .jn-services-hero .services-cases,
.elementor-editor-active .jn-services-hero .services-case-link { user-select: text; }
.elementor-editor-active .jn-services-hero .elementor-inline-editing { cursor: text; }