/*------------------------------------------------------------------------*/
.homepage-button {
  background: #0a0a0a;
  font-family: "Unica One", sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  padding: 18px 30px 18px;
  margin-top: 30px;
  border-radius: 3px; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;

  display: inline-block;
  transition: background-color 0.3s ease;
}

.homepage-button:hover {
  opacity: 0.85;
  color: #ffffff;
}

/*------------------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 900px;
  padding: 0px 0;
  background: #ffffff;
}

.hero .container {
  background: #fafafa;
  width: 100%;
  min-height: 1000px;
  margin: 0 auto;
  border-radius: 0px;
  display: flex;
  overflow: hidden;
}

/* kolumny */
.column_left,
.column_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.column_left  { width: 30%; padding: 60px 60px; }
.column_right { width: 70%; }

/* treść */
.content {
  max-width: 450px;
  width: 100%;
  color: #737373;
  font-size: 18px;
  line-height: 28px;
  text-align: left;
}
.content h1 {
  font-size: 64px;
  line-height: 62px;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 10px;
}

/* obraz – pseudo <img> w tagnie DIV */
.image {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  background: #fafafa url(/images/photos/DSC5637.jpg) center/cover no-repeat;
}

/* ========== mobile / tablet (≤ 992 px) ========== */
@media (max-width:992px){
  .hero{
    min-height:auto;
    padding:0px;
  }
  .hero .container{
    width: 100%;
    border-radius: 0px;
    min-height:auto;
    flex-direction:column; /* układ pionowy */
  }
  /* odwracamy kolejność: obraz ↑ tekst ↓ */
  .column_right{order:-1;}
  
  .column_right{
    width:100%;
    padding:0px;
  }
  .column_left {
    width:100%;
    padding:30px 20px;
  }
  .image{
    height:500px;      /* zapewnia czytelny kadr na mobile */
  }
  .content{
    max-width:100%;
    text-align:left;
    font-size:16px;
    line-height:26px;
  }
  .content h1{
    font-size:40px;
    line-height:44px;
  }
}

/* ========== bardzo małe ekrany (≤ 576 px) ========== */
@media (max-width:576px){
  .content{padding:0 10px;}
  .image{min-height:220px;}
  .content h1{font-size:34px;line-height:38px;}
}

/* (opcjonalnie) przycisk */
.btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 28px;
  background:#ffffff;
  color:#0a0a0a;
  text-decoration:none;
  font-weight:600;
  border-radius:4px;
  transition:opacity .25s;
}
.btn:hover{opacity:.8;}

/*------------------------------------------------------------------------*/

/* ───────────────────────────────────────────
   FEATURE SECTION – 3 × 1/3 KAFELKI + ZOOM TŁA
──────────────────────────────────────────── */
.section-container{
  width:100%;
  background:#ffffff;
  justify-content:center;
  padding:30px 0;
}
.section-inner{
  width:96%;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:space-between;
}
.section-container{
  position:relative;
  width:100%;
  background:#ffffff;
  padding:30px 0;
}
.slider-track{
  width:96%;
  margin:0 auto;
  display:flex;
  gap:20px;
   flex-wrap:nowrap;
   overflow-x:auto;
   overflow-y:hidden;
   scroll-snap-type:x mandatory;
   scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider-track::-webkit-scrollbar{display:none;}
.feature-box{scroll-snap-align:start;}

.slider-nav-wrap{
  width:96%;
  margin:25px auto 0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.slider-nav{
  width:32px; height:32px;
  border-radius:50%;
  background:#d4d4d4;
  color:#171717;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity .25s;
}
.slider-nav:hover {
  background:#d4d4d4 !important;
  color:#171717;
  opacity:.8;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.slider-nav[disabled]{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
.slider-nav i{font-size:16px;}
/* .slider-nav:not([disabled]):hover{opacity:.3;} */
.feature-box{
  position:relative;
  flex:0 0 calc((100% - 40px) / 3);      /* 3 kolumny w kadrze */
  max-width:calc((100% - 40px) / 3);
  height:600px;
  min-width:250px;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  text-decoration:none;
  cursor:pointer;
}
.feature-box::before{
  content:'';
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .6s ease;
  transform:scale(1);
  z-index:0;
}
.feature-box:hover::before{
  transform:scale(1.08);
}
.feature-content{
  position:relative;
  width:100%;
  padding:60px 30px 30px;
  color:#262626;
  z-index:1;
}
.feature-content::before{
  content:'';
  position:absolute;
  inset:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  mask-image:
    linear-gradient(to top,
      rgba(0,0,0,1)  50%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-image:
    linear-gradient(to top,
      rgba(0,0,0,1) 50%,
      rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:-1;
}
.feature-content h2{
  font-size:36px;
  line-height:40px;
  margin:0 0 10px;
  text-transform:uppercase;
  color:#0a0a0a;
  max-width:70%;
}
.feature-content p{
  font-size:16px;
  line-height:22px;
  margin:0;
  max-width:70%;
}
.feature-button{
  position:absolute;
  right:30px;
  bottom:30px;
  background:#0a0a0a;
  border-radius:50%;
  padding:14px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s ease;
}
.feature-button i{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  color:#ffffff;
  font-size:22px;
  transition:transform .3s ease;  /* przesunięcie strzałki */
}
.feature-box:hover .feature-button{opacity:.85;}
.feature-box:hover .feature-button i{transform:translateX(2px);}

/* ----- OBRAZY TŁA (podpinamy do ::before) ----- */
.box1::before{background-image:url(/images/photos/IMG_0090.jpg);}
.box2::before{background-image:url(/images/photos/DSC04778.jpg);}
.box3::before{background-image:url(/images/photos/DSC04654.jpg);}

.box4::before{background-image:url(/images/photos/DSC04073.jpg);}
.box5::before{background-image:url(/images/photos/DSC04770.jpg);}
.box6::before{background-image:url(/images/photos/stickers/DSC05546.jpg);}

/* ----- RESPONSYWNOŚĆ ----- */
@media(max-width:992px){              /* tablet – 2 kolumny */
  .feature-box{
    flex:0 0 calc((100% - 20px) / 2);
    max-width:calc((100% - 20px) / 2);
  }
}
@media(max-width:640px){              /* telefon – 1 kolumna */
  .feature-box{
    flex:0 0 100%;
    max-width:100%;
  }
}
/*------------------------------------------------------------------------*/
.quote-section {
  width: 100%;
  background-color: #ffffff;
  padding: 100px 0 70px;
  display: flex;
  justify-content: center;
}

.quote-inner {
  width: 90%;
  text-align: left;
}

.quote-text {
  font-size: 2.75rem;
  color: #171717;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}

/* ↓ mały desktop / tablet poziomo (992 – 1199 px) */
@media(max-width:1199px){
  .quote-text{font-size:2.8rem;}
}

/* ↓ tablet pionowo (641 – 991 px) */
@media(max-width:991px){
  .quote-text{font-size:2.4rem;}
}

/* ↓ telefony (≤ 640 px) */
@media(max-width:640px){
  .quote-text{font-size:2rem;}
}
/*------------------------------------------------------------------------*/
.testimonials-section {
  width: 100%;
  background: #ffffff;
  padding: 100px 0 80px;
  display: flex;
  justify-content: center;
}

.testimonials-inner {
  width: 90%;
}

.testimonials-heading {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 80px;
  line-height: 1.2;
  color: #0a0a0a;
}

/* Grid / flex na boxy */
.testimonials-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.testimonial-box {
  flex: 1 1 30%;
  min-width: 280px;
  max-width: 33.333%;
}

.testimonial-meta {
  margin-bottom: 40px;
}

.testimonial-name {
  display: block;
  font-weight: 400;
  font-size: 20px;
  color: #0a0a0a;
}

.testimonial-role {
  display: block;
  font-size: 16px;
  color: #a3a3a3;
  margin-top: 4px;
  margin-bottom: 60px;
}

.testimonial-quote {
  position: relative;
  font-size: 18px;
  line-height: 1.4;
  color: #737373;
}

/* dekoracyjny cudzysłów */
.testimonial-quote::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -10px;
  font-size: 32px;
  line-height: 0;
  color: #737373;
  pointer-events: none;
}

/* ── Sekcja slidera ────────────────────────────── */
.brands{
  position: relative;
  background: #ffffff;
  padding: 40px 0 100px;
  overflow: hidden;
}

/* Tor ma 90 % i jest wyśrodkowany */
.brands-track{
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  
  /* ---- Gradient maskujący ---- */
  --fade:130px;
  mask-image:
    linear-gradient(to right,
      transparent   0,
      #000          var(--fade),
      #000          calc(100% - var(--fade)),
      transparent   100%);
  -webkit-mask-image:
    linear-gradient(to right,
      transparent   0,
      #000          var(--fade),
      #000          calc(100% - var(--fade)),
      transparent   100%);
}

/* Elastyczna taśma logo – bez zmian */
.brands-track-inner{
  display:flex;
  align-items:center;
  gap:60px;
  width:max-content;
  animation:scroll 40s linear infinite;
}

.brands-track-inner img{
  height:46px;
  width:auto;
  flex-shrink:0;
}

@keyframes scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 30px)); }
}

/* (opcjonalnie) zatrzymaj na hover */
.brands:hover .brands-track-inner{
  animation-play-state:paused;
}