/* Oferta page Af�cAc‚¬Ac€�? dodatkowe style (spAfA�A��3jne z home) */

body.oferta-page{
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------
   WOW layer: progress bar + ambient cursor glow
   --------------------------------------------------------- */
.iw-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  opacity: .95;
}
.iw-progress span{
  display:block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, rgba(129,34,169,.95), rgba(229,46,113,.95), rgba(155,93,229,.95));
  filter: drop-shadow(0 6px 14px rgba(229,46,113,.25));
}

/* ---------------------------------------------------------
   New hover (no spotlight): gradient border + sheen sweep
   --------------------------------------------------------- */
.iw-hover{ position: relative; overflow: hidden; }
.iw-hover::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(229,46,113,.55), rgba(155,93,229,.45), rgba(129,34,169,.35));
  opacity: 0;
  pointer-events:none;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .22s ease;
}
.iw-hover::after{
 content:"";
  position:absolute;
  inset: -120% -20%;
  background: linear-gradient(90deg, transparent, rgb(104 30 109 / 20%), transparent);
  transform: rotate(18deg) translateX(-35%);
  opacity: 0;
  pointer-events:none;
  transition: transform .92s cubic-bezier(.2,.9,.2,1), opacity .62s ease;
}
.iw-hover:hover::before{opacity: 0.15;}
.iw-hover:hover::after{/* opacity: 1; *//* transform: rotate(
359deg) translateX(35%); */}

@media (prefers-reduced-motion: reduce){
  .iw-hover::after{ transition:none; }
}

/* ---------------------------------------------------------
   Tilt: smooth pointer interaction without edge "snaps"
   We animate CSS vars via rAF in JS, so we must NOT also
   transition `transform` here (it causes jitter at the hit-test
   boundary when pointerleave fires). See oferta.js.
   --------------------------------------------------------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  [data-tilt]{
    will-change: transform;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
  }
}

.iw-stagger > *{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .52s cubic-bezier(.18,.92,.25,1),
    transform .52s cubic-bezier(.18,.92,.25,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* show stagger when either: (1) parent reveal is active, or (2) the grid itself is revealed */
.reveal.is-in .iw-stagger > *,
.reveal.inview .iw-stagger > *,
.iw-stagger.is-in > *,
.iw-stagger.inview > *{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   WOW: floating CTA
   --------------------------------------------------------- */
.iw-float-cta{
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 120;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.iw-float-cta__icon{ opacity: .95; }
body.iw-float-on .iw-float-cta{ opacity: 1; transform: translateY(0); pointer-events: auto; }

.offer-hero{
  position: relative;
  padding: 132px 0 60px;
}

.offer-hero .hero__bg .grid{ opacity: .85; }

.offer-hero__grid{
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 26px;
    align-items: stretch;
    position: relative;
}

.offer-hero__copy{ max-width: 720px; }

.offer-hero__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.offer-hero__proof{ margin-top: 18px; display:flex; flex-wrap:wrap; gap: 10px; }

.offer-hero__stats{ margin-top: 22px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.offer-stat{
    border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    padding: 14px 14px;
    /* border: 1px solid rgba(255, 255, 255, .10); */
    background: rgb(255 255 255 / 3%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.offer-stat__n{ font-weight: 800; letter-spacing: .01em; }
.offer-stat__l{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.74); }

.offer-hero__visual{ position: relative; }

.offer-stack{
  display:grid;
  gap: 40px;
  perspective: 1100px;
  margin-top: 11.4px;
}

.offer-tile{
  border-radius: 18px;
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  padding: 16px 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;
}
.offer-tile:hover{ border-color: rgba(229,46,113,.35); background: rgba(255,255,255,.055); }
.offer-tile__icon{font-size: 18px;opacity: .95;}
.offer-tile__t{font-weight: 800;}
.offer-tile__p{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.78); }
.offer-tile__tags{ margin-top: 12px; display:flex; flex-wrap:wrap; gap: 8px; }
.offer-tile__tags span{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
}

/* sticky service nav */
.service-nav-wrap{
  position: sticky;
  top: 74px;
  z-index: 25;
  padding: 14px 0;
}

.service-nav{
    position: relative;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    overflow: hidden;
    /* border: 1px solid rgba(255, 255, 255, .10); */
    background: rgb(255 255 255 / 3%);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.service-nav__link{
  position: relative;
  flex: 1;
  text-align:center;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  z-index: 2;
  transition: color .2s ease;
}

.service-nav__link.is-active{ color: rgba(255,255,255,.96); }

.service-nav__indicator{
    position: absolute;
    inset: 8px;
    width: 25%;
    border-radius: 999px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
    transform: translateX(var(--x, 0%));
    z-index: 1;
    background: rgb(255 255 255 / 3%);
    
    
    /* NOTE: keep transform transition (was overridden by the rule below) */
    transition:
      transform .34s cubic-bezier(.2, .9, .2, 1),
      width .34s cubic-bezier(.2, .9, .2, 1),
      border-color .25s ease,
      background .25s ease,
      box-shadow .25s ease;
    background: rgb(255 255 255 / 3%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
    /* transform: translateX(0px) !important; */
}

/* service sections */
.offer-service{ padding: 78px 0; }
.offer-service .section-head{ max-width: 900px; place-self: anchor-center;    margin-top: 30px;}

.offer-bento{
  margin-top: 160px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 30px;
}

.offer-card{
  border-radius: 22px;
  /* border: 1px solid rgba(255,255,255,.12); */
  padding: 18px 18px;
  transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;
  background: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.offer-card:hover{/* border-color: rgba(155,93,229,.35); *//* background: rgba(255,255,255,.045); */}

.offer-card--wide{ grid-column: 1 / -1; }

.offer-card__kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.offer-card__title{ margin-top: 10px; font-size: 20px; line-height: 1.2; }
.offer-card__text{ margin-top: 10px; color: rgba(255,255,255,.78); }

.offer-card__list
{
    margin-top: 30px;
    margin: 20px auto 10px auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    /* width: 100%; */
}
.offer-bullet
{
	display: flex;
	gap: 10px;
	color: rgba(255, 255, 255, .86);
	font-size: 13px;
	border-radius: 22px;
	/* border: 1px solid rgba(255, 255, 255, .10); */
	padding: 15px;
	justify-content: center;
	background: rgb(255 255 255 / 3%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	backdrop-filter: blur(14px) saturate(135%);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
	transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.b-dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 4px; background: linear-gradient(135deg, #8122a9, #e52e71, #9b5de5); box-shadow: 0 10px 30px rgba(229,46,113,.25); }

.offer-card__mini{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 8px; }

/* helpers / missing base classes */
.gradient-text{
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  background-size: 320% 100%;
  animation: iwGradientShift 12s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 0px 10px #b400ff66;
}

.pill.small{ padding: 6px 10px; font-size: 11px; opacity: .92; }

/* steps */
.offer-steps{
    margin-top: 160px;
    border-radius: 22px;
    padding: 18px;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    background: rgb(255 255 255 / 3%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
    }
.offer-steps__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.offer-steps__head p{ color: rgba(255,255,255,.74); }
.offer-steps__grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.step
{
    border-radius: 18px;
    /* border: 1px solid rgba(255, 255, 255, .12); */
    background: rgba(255, 255, 255, .03);
    padding: 14px;
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 5px;
    align-items: center;
    align-content: start;
    background: rgb(255 255 255 / 3%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.step:hover{ border-color: rgba(155, 93, 229, .35);
    background: rgba(255, 255, 255, .045); }
.step__n{ font-weight: 900; opacity: .85; }
.step__t{ margin-top: 0px; font-weight: 800; }
.step__p{ margin-top: 5px; font-size: 14px; color: rgba(255,255,255,.74); grid-column: 1 / -1;}

/* demo grid */
.demo-block{ margin-top: 22px; }
.demo-block__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.demo-block__head p{ color: rgba(255,255,255,.74); }

.demo-grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.demo-card{
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 16px;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;
}
.demo-card__badge{ display:inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.demo-card__title{ display:block; margin-top: 10px; font-weight: 800; }
.demo-card__sub{ display:block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.74); }
.demo-card__cta{ display:block; margin-top: 12px; font-weight: 800; }

/* Process + FAQ */
.offer-process{ padding-top: 30px; }
.process-rail{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.process-node{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px;
}
.process-node h3{ margin: 10px 0 0; font-size: 16px; }
.process-node p{ margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.74); }
.process-node .num{ font-weight: 900; opacity: .8; }

.offer-faq{ padding-top: 30px; }
.faq-grid{ margin-top: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.faq-card summary,
.faq-grid details summary{
  cursor:pointer;
  font-weight: 800;
  padding: 12px 6px;
  list-style: none;
}
.faq-grid details summary::-webkit-details-marker{ display:none; }
.faq-card p,
.faq-grid details .faq-body p{
  margin: 0 0 14px 6px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.7;
}

/* Offer note */
.offer-note{ padding-top: 26px; }
.offer-note__box{
  border-radius: 24px;
  /* border: 1px solid rgba(255,255,255,.14); */
  background:
    radial-gradient(700px 220px at 18% 18%, rgba(129,34,169,.28), transparent 60%),
    radial-gradient(700px 240px at 82% 82%, rgba(229,46,113,.22), transparent 62%),
    rgba(255,255,255,.04);
  padding: 22px;
  display:flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  /* background: rgb(255 255 255 / 3%); */
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.offer-note__box h3{ margin:0; letter-spacing:-0.02em; }
.offer-note__box p{margin: 8px 0 0;color: rgba(255,255,255,.74);max-width: 830px;}
.offer-note__box a{margin: auto;}

/* Approach */
.offer-approach{     padding: 150px 0px; }
.approach-grid{margin-top: 18px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 12px;max-width: 900px;margin: auto;}
.approach-card{
  border-radius: 22px;
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgba(255,255,255,.03);
  padding: 18px;
  position: relative;
  overflow:hidden;
  background: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  text-align: center;
}
.approach-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: none;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.approach-card:hover::before{ opacity: 1; }
.approach-card > *{ position:relative; z-index:1; }
.approach-card h3{ margin:0; font-size: 16px; letter-spacing:-0.02em; }
.approach-card p{ margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.74); line-height: 1.7; }

/* Timeline (Proces wspAfA�A��3Af…Ac€A!pracy) */
.offer-process .timeline{margin-top: 18px;max-width: 900px;}
.offer-process .tl-item{
  display:flex;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgba(255,255,255,.03);
  align-items:flex-start;
  background: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.offer-process .tl-n{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,.04);
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.offer-process .tl-item h3{ margin: 2px 0 6px; font-size: 16px; letter-spacing:-0.02em; }
.offer-process .tl-item p{ margin: 0; font-size: 13px; color: rgba(255,255,255,.74); line-height: 1.7; }

/* galleries */
.media-gallery__head,
.logo-gallery__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.media-gallery__head p,
.logo-gallery__head p{ color: rgba(255,255,255,.74); }

.media-grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.media-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 12px;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.media-card:hover{ transform: translateY(-3px); border-color: rgba(155,93,229,.35); }
.media-card__frame{ display:block; border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); }
.media-card__frame img{ width:100%; height:auto; display:block; }
.media-card__meta{ display:flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.media-card__meta strong{ font-size: 13px; }
.media-card__meta em{ font-size: 12px; font-style: normal; color: rgba(255,255,255,.70); }

.logo-grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.logo-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 8px;
  flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.logo-card:hover{ transform: translateY(-2px); border-color: rgba(229,46,113,.35); }
.logo-card img{ width: 74px; height: 74px; }
.logo-card span{ font-size: 11px; letter-spacing: .12em; opacity: .78; }

/* modals */
body.modal-open{ overflow: hidden; }
.iw-modal{ position: fixed; inset: 0; z-index: 100; display:none; }
.iw-modal.is-open{ display:block; }
.iw-modal__backdrop{position:absolute;inset:0;background: rgba(0,0,0,0.5);backdrop-filter: blur(10px);}
.iw-modal__panel{
  position: relative;
    margin: min(84px) auto 0px;
    width: min(90%, calc(100% - 28px));
    border-radius: 22px;
    border: 1px solid;
    background: rgb(255 255 255 / 62%);
    border-color: rgba(155, 93, 229, .35);
    background: linear-gradient(135deg, rgb(229 46 113 / 25%), rgb(155 93 229 / 15%), rgb(129 34 169 / 25%));
    backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 40px 140px rgba(0, 0, 0, .55);
    overflow: hidden;
    transform: translateY(8px) scale(.985);
    opacity: 0;
    animation: iwModalIn .26s cubic-bezier(.18, .92, .25, 1) forwards;
}
@keyframes iwModalIn{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.iw-modal:not(.is-open) .iw-modal__panel{ animation: none; }
.iw-modal__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
}
.iw-modal__title{ font-weight: 800; }
.iw-modal__controls{ display:flex; gap: 8px; flex-wrap: wrap; justify-content:flex-end; }
.iw-chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
  text-decoration: none;
  transition: 0.2s;
}
.iw-chip.is-active{ border-color: rgba(229,46,113,.45); background: rgba(229,46,113,.12); }
.iw-chip--close{ padding: 8px 12px; }

.iw-modal__viewport{ padding: 0px 14px 14px; }
.iw-iframe-shell{ margin: 0 auto; border-radius: 10px; overflow:hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.iw-iframe-shell[data-device="desktop"]{width: 100%;height: min(80vh, 720px);}
.iw-iframe-shell[data-device="tablet"]{ width: min(860px, 100%); height: min(72vh, 760px); }
.iw-iframe-shell[data-device="mobile"]{ width: 420px; max-width: 100%; height: min(72vh, 760px); }
.iw-iframe-shell iframe{ width:100%; height:100%; border:0; display:block; }

.iw-media-shell, .iw-media-wrap{ display:flex; justify-content:center; padding: 14px; }
.iw-media-shell img, .iw-media-wrap img{
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

/* Respect reduced motion (WCAG) */
@media (prefers-reduced-motion: reduce){
  body.oferta-page{ scroll-behavior: auto; }
  .iw-cursor-glow{ display:none; }
  .offer-lines{ animation: none; }
  .iw-stagger > *{ transition: none; opacity: 1; transform: none; }
  .iw-progress span{ transition: none; }
  .iw-float-cta{ transition:none; }
}

/* responsive */
@media (max-width: 980px){
  .offer-hero__grid{ grid-template-columns: 1fr; }
  .offer-hero{ padding: 118px 0 50px; }
  .offer-hero__stats{ grid-template-columns: 1fr; }
  .offer-bento{ grid-template-columns: 1fr; }
  .offer-steps__grid{ grid-template-columns: 1fr 1fr; }
  .demo-grid{ grid-template-columns: 1fr 1fr; }
  .process-rail{ grid-template-columns: 1fr 1fr; }
  .media-grid{ grid-template-columns: 1fr 1fr; }
  .logo-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .faq-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .service-nav{border-radius: 22px;flex-wrap: nowrap;display: flex;align-items: center;}
  .service-nav__indicator{/* display:none; */width: 23% !important;border-radius: 14px;}
  .service-nav__link{flex: 1 1 48%;min-width: 16%;font-size: 11px;}
  .demo-grid{ grid-template-columns: 1fr; }
  .offer-steps__grid{ grid-template-columns: 1fr; }
  .process-rail{ grid-template-columns: 1fr; }
  .media-grid{ grid-template-columns: 1fr; }
  .logo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* === OFFER TILES: ujednolicenie hover + brak artefaktAfA�A��3w ==================== */

/* 0) Bazowo: pilnujemy warstw i Af�cAc‚¬A��oglassAf�cAc‚¬A��? (jeAf…Ac€�oli juAf…A��1 masz styl Af�cAc‚¬Ac€A� to tylko go stabilizuje) */
.offer-tile{
  position: relative;
  isolation: isolate; /* wymusza nowy stacking context, pomaga przy blend/maskach */ /* :contentReference[oaicite:1]{index=1} */
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(700px 220px at 18% 18%, rgb(129 34 169 / 15%), #00000000 60%), radial-gradient(700px 240px at 82% 82%, rgb(229 46 113 / 0%), transparent 62%), rgba(255, 255, 255, .04);
  border: 1px solid rgb(255 255 255 / 0%);
  
  
   /* :contentReference[oaicite:2]{index=2} */
  /* background: rgb(255 255 255 / 3%); */
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

/* 1) Af�cAc‚¬A��oTo samoAf�cAc‚¬A��? co wczeAf…Ac€�oniej: wyAf…Ac€A!Af„Ac€¦czamy specjalne pseudo-elementy (glow/border), ktAfA�A��3re mogAf„Ac€¦ robiAf„Ac€�! inny hover */
.offer-tile::before,
.offer-tile::after{
  content: none !important;
  display: none !important;
}

/* 2) WymuAf…Ac€�o identyczny hover (jak Twoje .offer-card:hover z DevTools) */
.offer-tile:hover{
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgb(155 93 229 / 60%);
  box-shadow: 0px 0px 10px #b400ff66;
}

/* 3) Tilt/parallax: tylko podpowiedAf…A��o dla renderera (opcjonalnie) */
.offer-tile[data-tilt]{
  will-change: transform; /* ostroAf…A��1nie Af�cAc‚¬Ac€A� tylko tam gdzie faktycznie animujesz */ /* :contentReference[oaicite:3]{index=3} */
}

/* === (opcjonalnie) typografia/ukAf…Ac€A!ad wewnAf„Ac€¦trz kafla, jeAf…Ac€�oli chcesz Af�cAc‚¬A��opremiumAf�cAc‚¬A��? ===== */
.offer-tile__icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* border: 1px solid rgba(255,255,255,.12); */
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  background: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  align-content: center;
  margin: auto 0px;
}

.offer-tile__t{
  font-weight: 650;
  font-size: 16px;
  line-height: 1.15;
  color: rgba(255,255,255,.92);
  align-content: center;
}

.offer-tile__p{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,.68);
}

.offer-tile__tags{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.offer-tile__tags > span{
  padding: 6px 10px;
  border-radius: 999px;
  /* border: 1px solid rgba(255,255,255,.10); */
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background
Shorthand property for setting most background properties at the same place in the style sheet.

Szeroko dost�pne w g��wnych przegl�darkach (Baseline od stycze� 2018)
Wi�cej informacji

Nie pokazuj: rgb(255 255 255 / 3%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

/* =================== AURORA DEMO DOCK =================== */

/* Sekcja/Wrapper Af�cAc‚¬Ac€A� robi Af�cAc‚¬A��owyrAfA�A��3Af…A��1nikAf�cAc‚¬A��? moduAf…Ac€A!u na tle strony */
.demo-dock{
  position: relative;
  border-radius: 28px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(167, 92, 255, .18), transparent 55%),
    radial-gradient(760px 380px at 88% 35%, rgba(70, 205, 255, .14), transparent 55%),
    radial-gradient(680px 340px at 55% 95%, rgba(120, 255, 187, .10), transparent 60%),
    rgba(255,255,255,.02);

  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.demo-dock::before{
  /* delikatne Af�cAc‚¬A��ohaloAf�cAc‚¬A��? pod moduAf…Ac€A!em */
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      rgba(167, 92, 255, .18),
      rgba(70, 205, 255, .12),
      rgba(120, 255, 187, .10)
    );
  filter: blur(18px);
  opacity: .35;
  z-index: -1;
}

/* Grid */
.demo-grid{
  display:grid;
  width:100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

@media (max-width: 980px){ .demo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .demo-grid{ grid-template-columns: 1fr; } }

/* Kolory kafli Af�cAc‚¬Ac€A� bardziej innowacyjnie, ale nie Af�cAc‚¬A��obijeAf�cAc‚¬A��? */
.demo-card:nth-child(1){ --acc: 330 70% 60%; } /* rose */
.demo-card:nth-child(2){ --acc: 150 55% 55%; } /* mint */
.demo-card:nth-child(3){ --acc: 200 75% 58%; } /* sky */
.demo-card:nth-child(4){ --acc: 270 65% 64%; } /* violet */

/* Karta */
.demo-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-height: 400px;
  min-height: 400px;
  border-radius: 26px;
  padding: 22px;
  text-align: left;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  border: 1px solid rgb(0 0 0);

  /* ZdjAf„Ac„�ccie + mocny overlay jak w referencji */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.64)),
    var(--bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 22px 70px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(0);
  filter: saturate(0.80) contrast(1) brightness(0.96);
  /* transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    filter .28s ease; */
  align-items: center;
}

.wysokie {
    min-height: 600px;
}

/* Af�cAc‚¬A��oSpotlightAf�cAc‚¬A��? Af�cAc‚¬Ac€A� dziaAf…Ac€A!a bez JS jako statyczny glow,
   a z JS staje siAf„Ac„�c highlightem pod kursorem */
.demo-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:0;

  /* mx/my ustawiamy z JS, fallback 35/30 */
  background:
    radial-gradient(520px 380px at var(--mx, 35%) var(--my, 30%),
      hsl(var(--acc) / .34),
      transparent 58%
    ),
    radial-gradient(520px 380px at 85% 80%,
      hsl(var(--acc) / .14),
      transparent 62%
    );

  opacity: .38;
  transition: opacity .28s ease;
}

/* Irydiowa ramka na hover (conic-gradient) */
.demo-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding: 1px;
  z-index: 3;
  opacity: 0;
  transition: opacity .28s ease;

  background:
    conic-gradient(from 180deg at 50% 50%,
      hsl(var(--acc) / .0),
      hsl(var(--acc) / .85),
      rgba(255,255,255,.10),
      hsl(var(--acc) / .85),
      hsl(var(--acc) / .0)
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Ustaw treAf…Ac€�oAf„Ac€�! nad warstwami */
.demo-card > *{ position: relative; z-index: 2; }

/* DuAf…A��1e 01/02/03/04 (zmienisz w HTML badge na same liczby) */
.demo-card__badge{
  position:absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-weight: 800;
  font-size: 78px;
  letter-spacing: -0.04em;
  color: hsl(var(--acc) / .20);
  mix-blend-mode: screen; /* daje Af�cAc‚¬A��oAf…Ac€�owietlistyAf�cAc‚¬A��? efekt na zdjAf„Ac„�cciu */ /* :contentReference[oaicite:1]{index=1} */
  pointer-events:none;
}

/* Typo */
.demo-card__title{
  font-size: 22px;
  font-weight: 720;
  line-height: 1.12;
  color: rgba(255,255,255,.94);
}
.demo-card__sub{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.72);
  max-width: 34ch;
}

/* CTA Af�cAc‚¬Ac€A� minimalistyczny pill */
.demo-card__cta{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: hsl(var(--acc) / .14);
  border: 1px solid hsl(var(--acc) / .30);
  color: hsl(var(--acc) / .92);

  font-weight: 650;
  font-size: 13px;

  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              background .28s ease,
              border-color .28s ease,
              color .28s ease;
}

/* HOVER Af�cAc‚¬Ac€A� Af�cAc‚¬A��oigniteAf�cAc‚¬A��? bardziej widoczny */
.demo-card:hover{
  transform: translateY(-7px);
  border-color: hsl(var(--acc) / .40);
  filter: saturate(1.16) contrast(1.06) brightness(1.06);-
  shadow: 0 36px 105px rgb(0 0 0 / 66%), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.demo-card:hover::before{ opacity: 0; }
.demo-card:hover::after{ opacity: 0; }
.demo-card:hover .demo-card__badge{color: hsl(var(--acc) / .50);transition: 0.3s;}
.demo-card:hover .demo-card__cta{
  background: hsl(var(--acc) / .20);
  border-color: hsl(var(--acc) / .55);
  color: rgba(255,255,255,.92);
}

/* Focus */
.demo-card:focus{ outline:none; }
.demo-card:focus-visible{
  border-color: hsl(var(--acc) / .55);
  box-shadow:
    0 36px 105px rgba(0,0,0,.66),
    0 0 0 4px hsl(var(--acc) / .18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Ruch ograniczony */
@media (prefers-reduced-motion: reduce){
  .demo-card, .demo-card__cta{ transition: none; }
}

.demo-block h3 {
    color: #ffffff42 !important;
}

.faq-v3-list .iw-hover::before { background:none; !important}

section#process {
    padding-top: 78px;
}

.stack-ico {
    display: grid;
    gap: 10px;
    grid-template-columns: 0.05fr 1.95fr;
}