.fade-in-up{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-in-up.visible{opacity:1;transform:none}
.sticky-cta{position:fixed;left:16px;right:16px;bottom:18px;z-index:60;display:none}
@media (max-width:768px){ .sticky-cta{display:block} }
.quote-mark{font-size:40px;color:rgba(20,184,166,0.12)}
.rounded-2xl{border-radius:16px}

/* Testimonials - stable layout */
.testimonial-viewport{position:relative;overflow:hidden}
#testimonials-track{display:flex;gap:16px;align-items:stretch;transition:transform .45s ease}
.testimonial-card{box-sizing:border-box;padding:1.5rem;background:#fff;border-radius:8px;min-height:140px;flex:0 0 100%}

/* desktop: 3 visible */
@media(min-width:768px){
  .testimonial-viewport .testimonial-card{flex:0 0 calc((100% - 32px)/3);min-width:calc((100% - 32px)/3)}
}

/* dots */
#test-dots button{width:10px;height:10px;border-radius:9999px;background:#e5e7eb;border:0;opacity:1}
#test-dots button.active{background:#0d9488}


/* lazy fade-in / blur-up */
img.lazy, .bg-lazy {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(6px);
  transition: opacity .6s cubic-bezier(.22,.9,.35,1), transform .45s var(--ui-ease), filter .6s var(--ui-ease);
  will-change: opacity, transform, filter;
}

/* when fully loaded */
img.lazy.loaded, .bg-lazy.loaded {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reveal on scroll - slide-up + fade with optional stagger */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity .6s cubic-bezier(.22,.9,.35,1), transform .6s cubic-bezier(.22,.9,.35,1);
  will-change: opacity, transform;
  visibility: hidden;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

/* staggered children: add .reveal-group on container and .reveal-child on elements */
.reveal-group .reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ui-ease), transform .55s var(--ui-ease);
  will-change: opacity, transform;
  visibility: hidden;
}
.reveal-group.visible .reveal-child {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* optional: small delay helpers (can be applied inline via style="--delay:0.12s") */
.reveal-child { transition-delay: var(--delay, 0s); }

/* wymusza, żeby overlay i panel były ponad header */
#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#mobile-menu-overlay.open { pointer-events: auto; opacity: 1; }

#mobile-menu-panel {
  position: fixed;
  inset: 0;            /* zajmuje całe okno */
  top: 0;              /* zaczyna od góry - nie pod headerem */
  background: rgba(255,255,255,0.98);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9999;
  transform-origin: top;
  transform: translateY(-8px) scaleY(.995);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease;
  overflow-y: auto;
}
#mobile-menu-panel.open {
  transform: translateY(0) scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

/* jeżeli chcesz, żeby treść panelu zaczynała poniżej headera zamiast na nim:
   dodaj padding-top równy wysokości headera, np. 64px */
#mobile-menu-panel .mobile-panel-inner { padding-top: 74px; } /* opcjonalne */

    #mobile-menu-panel {
      background: rgba(255,255,255,0.06);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .mobile-panel-inner {
      max-width:720px;
      margin:0 auto;
      padding:18px;
      box-sizing:border-box;
      position:relative;
      z-index:10000;
    }

    /* white card that ends at the hours */
    .mobile-card {
      background:#fff;
      border-radius:12px;
      box-shadow:0 10px 30px rgba(0,0,0,.08);
      padding:16px;
      overflow:auto;
      max-height: calc(100vh - 140px); /* header + margins; adjust if needed */
    }
    .mobile-card-header { margin-bottom:6px; }
    .mobile-card-body { padding-top:6px; padding-bottom:12px; display:block; }
    .mobile-card-footer { padding-top:10px; color:#6b7280; font-size:14px; text-align:left; }

    /* CTA buttons inside card */
    .mobile-card .mobile-cta { display:inline-block; padding:10px 12px; border-radius:10px; margin-right:8px; text-decoration:none; }

    /* fade under card -> smooth transition into transparent area */
    .mobile-panel-fade {
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:220px;
      pointer-events:none;
      /* background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.95) 85%, rgba(255,255,255,1) 100%); */
    }

    /* small screens tweaks */
    @media(max-width:420px){
      .mobile-panel-inner { padding-left:12px; padding-right:12px; }
      .mobile-card { border-radius:10px; padding:14px; }
      .mobile-panel-fade { height:160px; }
    }

@media(max-width:767px){  .mobile-card-footer { text-align:center; }}


/* linki / accordion - wyrównanie do lewej */
.mobile-card-body,
.mobile-card-body .space-y-2,
.mobile-card-body .mobile-link,
.mobile-card-body .accordion-btn,
.mobile-card-body .accordion-panel {
  text-align: left;
}

/* upewnij się, że linki zajmują pełną szerokość i mają padding/wyściółkę */
.mobile-card-body .mobile-link {
  display: block;
  padding: 10px 8px;
  border-radius: 8px;
  color: #0f172a;
}

/* accordion button - pełna szerokość i wyrównanie wewnętrzne */
.mobile-card-body .accordion-btn {
  width: 100%;
  justify-content: space-between;
  padding: 10px 8px;
  border-radius: 8px;
}

/* stopka: domyślnie lewa, na mobile wycentrowana */
.mobile-card-footer { text-align: left; }
@media (max-width: 767px) {
  .mobile-card-footer { text-align: center; }
}