.slider-wrapper { position: relative; margin: 0 auto; max-width: 1200px; }
.slider-viewport { overflow: hidden; }
.slider-track { display: flex; align-items: stretch; gap: 12px; transition: transform 320ms ease; will-change: transform; }
.mini-wrapper { flex: 0 0 30%; overflow: hidden; cursor: pointer; user-select: none; touch-action: manipulation; }
.slider-track img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider-nav { position: absolute; top: 45%; left: 0; right: 0; display:flex; justify-content: space-between; pointer-events: none; }
.slider-nav button { pointer-events: all; background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 6px 10px; margin: 0 12px; cursor: pointer; height:48px; }
.mini-wrapper { flex: 0 0 100%; }

.why-card { transition: transform .18s ease, box-shadow .18s ease; border-radius: 0 !important;}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.45); }
@media (prefers-reduced-motion: reduce) {
    .why-card { transition: none; }
}

.process-card { transition: transform .18s ease, box-shadow .18s ease; border-radius:0!important; }
.process-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.45); }
.step-number { font-size: 1.8rem; }
@media (prefers-reduced-motion: reduce) {
    .process-card { transition: none; }
}

.video-screen { 
  width: 100%; 
  max-width: 360px; 
  display: block; 
  perspective: 1200px; 
}

.video-screen { 
  width: 100%; 
  max-width: 360px; 
  display: block; 
  perspective: 1200px; 
}

/* SHORTS (9:16) */
.video-frame {
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s;
  box-shadow: 0 18px 40px rgba(6,18,47,0.28), inset 0 1px 0 rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  transform: rotateX(3deg) rotateY(6deg) translateZ(0);
  position: relative;
  border: 1px solid rgba(255,255,255,0.03);
  max-width: 360px;
}

.video-frame-wide {
  aspect-ratio: 16/9; 
  max-width: 100%; 
  transform: none; 
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(6,18,47,0.28);
}

/* responsive iframe */
.responsive-iframe { 
  width:100%; 
  height:100%; 
  border:0; 
  display:block; 
}

/* Hover efekt */
.video-frame:hover, .video-frame:focus {
  transform: rotateX(0deg) rotateY(0deg) translateZ(6px);
  box-shadow: 0 28px 60px rgba(6,18,47,0.32);
  outline: none;
}

/* Hover efekt - normal */
.video-frame:hover, 
.video-frame:focus {
  transform: rotateX(0deg) rotateY(0deg) translateZ(6px);
  box-shadow: 0 28px 60px rgba(6,18,47,0.32);
  outline: none;
}

/* SHORTS reversed */
.video-frame.reversed-video-frame {
  transform: rotateX(3deg) rotateY(-6deg) translateZ(0); /* lekko w LEWO */
}

/* Hover reversed */
.video-frame.reversed-video-frame:hover, 
.video-frame.reversed-video-frame:focus {
  transform: rotateX(0deg) rotateY(0deg) translateZ(6px); /* też płaskie na hover */
  box-shadow: 0 28px 60px rgba(6,18,47,0.32);
}

@media (min-width: 991px) {
        nav .invert-navbar-icon-custom {
        filter: invert(1);
    }

    nav.navbar-shrink .invert-navbar-icon-custom {
        filter: invert(0);
    }
}

@media (max-width: 550px) {
    .smart-minify {
        font-size: calc(1.275rem + 0.3vw);
    }
    .smart-cut {
        display: none;
    }
}

/* CSS: umieść w pliku lub <style> */
.btn-liquid{
  --glass-bg: rgba(255,255,255,0.12);   /* baza dla jasnego motywu */
  --glass-bg-dark: rgba(24,24,24,0.20);  /* baza dla ciemnego motywu */
  --border-alpha: 0.22;
  --shadow-alpha: 0.12;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, opacity .12s;
  box-shadow: 0 6px 18px rgba(0,0,0,var(--shadow-alpha));
  border: 1px solid rgba(255,255,255,var(--border-alpha)); /* fallback dla prostoty */
  color: white;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* tło i obramowanie robią różnicę między primary a secondary */
.btn-liquid::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* subtelny gradient i rozjaśnienie góry - "specular highlight" */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  mix-blend-mode: overlay;
  opacity: 0.9;
}

/* Primary — jaśniejszy, bardziej "glassy" */
.btn-liquid.btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: #06121a;
  /* wewnętrzna poświata i delikatny kolor */
  background-color: var(--glass-bg);
  /* gradientowe obramowanie — używamy pseudo-elementu do ładnego efektu */
  border: none;
}
.btn-liquid.btn-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px; /* trick do gradient border */
  background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .65;
}

/* Secondary — przyciemniona, kontrastująca (np. dla ciemnego tła) */
.btn-liquid.btn-secondary{
  background-color: rgba(10,20,30,0.28);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-liquid.btn-secondary::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  pointer-events: none;
}

/* Ustawienia warstwy treści (tekst, ikony) nad pseudo-elementami */
.btn-liquid > * { position: relative; z-index: 2; }

/* interakcje */
.btn-liquid:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.btn-liquid:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  opacity: 0.98;
}

/* focus accessibility */
.btn-liquid:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(100,160,255,0.15), 0 12px 30px rgba(0,0,0,0.18);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-liquid { transition: none; transform: none; }
}

/* dark-mode tweak (jeśli używasz prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  .btn-liquid{ --glass-bg: var(--glass-bg-dark); color: white; }
  .btn-liquid.btn-primary{ color: rgba(255,255,255,0.95); }
}

/* Wyróżnienie numeru telefonu */
.phone-highlight {
  font-weight: 600;
  font-size: 1rem;
  border-left: 1px solid rgb(211, 211, 211);
  padding-left: 1rem;
}

.navbar-shrink .phone-highlight {
  color: #1976d2;
}

@media (max-width: 1205px) {
  .phone-highlight {
    display: none;
  }
}

@media (max-width: 992px) {
    .phone-highlight {
        display: block;
        margin-top: 0.5rem;
    }
}

/* ======================================================================
   Core Animations (on-scroll + interactions)
   ====================================================================== */

/* Initial helper */
.fade-in-up, .zoom-in-fade, .zoom-in-overshoot, .zoom-out-fade,
.pop, .text-pop, .slide-left, .slide-right, .stagger-child > * {
  opacity: 0;
  transform-origin: center center;
}

/* Reusable timings */
:root {
  --ease-out: cubic-bezier(.2,.65,.2,1);
  --ease-in: cubic-bezier(.4,0,.7,.2);
  --ease-overshoot: cubic-bezier(.2,1.2,.8,1);
  --dur-s: .45s;
  --dur-m: .65s;
}

/* Fade In Up */
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.fade-in-up.animatable { animation: fadeInUp var(--dur-m) var(--ease-out) both; }

/* Zoom In + Fade */
@keyframes zoomInFade { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }
.zoom-in-fade.animatable { animation: zoomInFade var(--dur-s) var(--ease-out) both; }

/* Zoom In Overshoot */
@keyframes zoomInOvershoot {
  0% { opacity:0; transform: scale(.85); }
  80% { opacity:1; transform: scale(1.05); }
  100% { opacity:1; transform: scale(1); }
}
.zoom-in-overshoot.animatable { animation: zoomInOvershoot .6s var(--ease-overshoot) both; }

/* Zoom Out Fade (hide) */
@keyframes zoomOutFade { from { opacity:1; transform: scale(1); } to { opacity:0; transform: scale(1.1); } }
.zoom-out-fade.animatable { animation: zoomOutFade var(--dur-s) var(--ease-in) both; }

/* Pop (micro-interaction) */
@keyframes pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pop.animatable { animation: pop .4s ease-in-out both; }

/* Text Pop (headlines) */
@keyframes textPop { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
.text-pop.animatable { display:inline-block; animation: textPop .4s var(--ease-out) both; }

/* Slides */
@keyframes slideLeft { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: translateX(0); } }
@keyframes slideRight{ from { opacity:0; transform: translateX(-24px);} to { opacity:1; transform: translateX(0);} }
.slide-left.animatable  { animation: slideLeft  var(--dur-m) var(--ease-out) both; }
.slide-right.animatable { animation: slideRight var(--dur-m) var(--ease-out) both; }

/* Stagger utility: children reveal with delay */
.stagger-child > *.animatable { animation-delay: calc(var(--stagger-i, 0) * 80ms); }

/* Image / BG zoom (fast, paint-only) */
img.image-zoom-in, img.image-zoom-out {
  transition: transform 650ms var(--ease-out);
  will-change: transform;
}
.image-zoom-in:not(img), .image-zoom-out:not(img) {
  transition: background-size 650ms var(--ease-out);
  background-position: center !important;
  background-repeat: no-repeat !important;
}
img.image-zoom-in:not(.animatable) { transform: scale(.96); }
img.image-zoom-out:not(.animatable){ transform: scale(1.06); }
.image-zoom-in:not(img):not(.animatable)  { background-size: 96% 96% !important; }
.image-zoom-out:not(img):not(.animatable) { background-size:106% 106% !important; }
img.image-zoom-in.animatable,
img.image-zoom-out.animatable { transform: scale(1); }
.image-zoom-in:not(img).animatable,
.image-zoom-out:not(img).animatable { background-size: 100% 100% !important; }

/* Button micro pulse (optional) */
@keyframes bnthop { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }
.btn-hop { animation: bnthop 1.5s ease-in-out infinite; animation-delay: .8s; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.tools-digression {
margin-top: 2.4rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.03);
}

/* grid narzędzi */
.tools-grid { margin-top: 0.5rem; }

/* karta narzędzia */
.tool-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform .22s cubic-bezier(.2,.9,.25,1), box-shadow .22s;
background: rgba(0,0,0,0.55); /* mocniejsze dopasowanie do czarnych bloków */
border: 1px solid rgba(255,255,255,0.03);
padding-top: 1rem;
padding-bottom: 1rem;
}

/* utrzymanie kart tej samej wysokości w wierszu */
.tool-card .tool-title { margin-bottom: 0.25rem; }
.tool-card .tool-desc { margin-bottom: 0; }

/* hover efekt */
.tool-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 45px rgba(2,10,30,0.55), 0 0 30px rgba(0,140,255,0.04);
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

/* ikona */
.tool-icon { width:48px; height:48px; display:block; }

/* responsywność: 2 w rzędzie na telefonie (col-6) -> używamy bootstrapowych kolumn */
/* dodatkowe dopracowanie odstępów */
@media (max-width: 575.98px) {
.tools-grid .col-6 { padding-left: 6px; padding-right: 6px; }
.tool-card { padding: .85rem .6rem; border-radius: 10px; }
}

/* minimalne style tekstowe by pasowało do reszty */
.text-pop { letter-spacing: 0.2px; }

/* preferencje reduced motion */
@media (prefers-reduced-motion: reduce) {
.tool-card, .process-card { transition: none !important; transform: none !important; }
}