/* ====== BASE (mobile-first: <=480px) ====== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
body { background-color: #F9F9F9; color: #111; line-height: 1.6; }
html, body { overflow-x: hidden; }

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; display: flex; justify-content: center; align-items: center; padding: 1rem 2rem; transition: all 0.3s ease; background: transparent; }
header.scrolled { position: fixed; background-color: transparent; padding: 0.5rem 2rem; }

.logo { position: absolute; top: 1.5rem; left: 25%; transform: translateX(-50%); font-weight: bold; font-size: 1.2rem; color: #fff; z-index: 5; }
.logo img{ width: 200px; height: auto; max-width: 100%; }

.center-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 7px 2px; border-radius: 2rem; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; margin-top: 1rem; flex-wrap: wrap; }
nav a { padding: 0.4rem 0.8rem; border-radius: 20px; text-decoration: none; color: #fff; font-weight: 500; transition: all 0.2s ease; }
nav a:hover { background-color: rgba(255, 255, 255, 0.2); }
nav a.active { background-color: white; color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

  
.container { padding: 4rem 2rem; margin: auto; max-width: 1100px; }

.hero { padding: 1rem; text-align: center; background-image: linear-gradient(315deg, #00000075 80%, #fafafa3c 120%), url('./img/hero-768.jpg'); background-color: #b8c6db; background-size: cover; background-position: center; margin-top: 0px; color:#d9d6d6; max-width: none; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.hero h3 { margin-left: 2%; margin-top: 30rem; font-size: 1.9rem; margin-bottom: 0.8rem; letter-spacing: 1.2px; text-shadow:  2px 4px rgba(0,0,0,0.6) }
.hero p { margin-left: 2%; font-size: 1.2rem; color: #d9d6d6; margin-bottom: 1rem; }
.hero button { margin-left: 2%; margin-top: 2rem; background: #FF6B00; border: none; color: white; padding: 0.7rem 1.5rem; border-radius: 20px; font-size: 1.1rem; cursor: pointer; transition: background 0.3s ease; }
.hero button:hover { background: #e65a00; }
.hero a button { color: white; text-decoration: none; }


/* === Produkty: nagłówek + lekki odstęp === */
#products { background-color: #adacac; text-align: center; }
.products-header { margin-bottom: .6rem; }
.products-header h2 { font-size: 2rem; margin-bottom: .25rem; }
.products-header p  { font-size: 1.1rem; color: #333; }

/* === Galeria (układ jak u Ciebie: flex, zawijanie) === */
.products-gallery{display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;margin-top: .25rem;}

/* === Karta produktu (3:4, cień, zaokrąglenia) === */
.products-image{position: relative;width: 100%;max-width: 300px;aspect-ratio: 3 / 4;border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,.1);}
.products-image img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.products-image figcaption { display: none;}


/* === Swap obrazków (stan bazowy + hover na desktopie) === */
.swap .primary  { opacity: 1; transition: opacity .25s ease; }
.swap .secondary{ opacity: 0; transition: opacity .25s ease; }
/* hover zostawiamy – działa na desktopie */
.swap:hover .primary  { opacity: 0; }
.swap:hover .secondary{ opacity: 1; }


  .swap-img-two { order: 1; }
  .swap-img-one { order: 2; }
  .swap-img-three { order: 3; }

.card-actions{position: absolute;width: 100%;left: 50%;bottom: .6rem;transform: translateX(-50%);z-index: 3;display: block;}
.btn-flip{border: 0;background: #FF6B00;color: #fff;font-weight: 600;position: absolute;bottom: -9px;left: 0;width: 100%;padding: .8rem .9rem;font-size:1rem;text-align: center; z-index: 2; }

.card-desc{margin: .45rem 0 1rem;font-size: .95rem;color: #222;text-align: center;}

#about { background-image: linear-gradient( #adacac,#adacac97, #111111f8), url('./img/tlo-1920.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 4rem 1rem; }
.about-container { max-width: 1100px; margin: auto; text-align: center; }
.about-content { display: flex; flex-direction: column; gap: 3rem; margin-top: 2rem; }
/* ===== O NAS: tło z parallax tylko dla sekcji ===== */
#about {position: relative;padding: 5rem 2rem;color: #111;background-image: linear-gradient( #adacac,#adacac5d, #111111f8), url('./img/tlo-1920.jpg');  /* tylko obrazek */background-size: cover;background-position: center;background-attachment: scroll; overflow: clip;}

/* Overlay z Twoim gradientem – zgodny ze stylem strony */
#about::before {content: "";position: absolute;inset: 0;pointer-events: none;background: linear-gradient(#adacac, #adacac97, #111111f8);mix-blend-mode: multiply; /* miękki efekt; opcjonalnie usuń */}

/* Layout sekcji */
.about-container {position: relative;z-index: 1;display: flex;flex-direction: column;gap: 2rem;max-width: 1100px;margin: 0 auto;}
#about .about-container{display: block;text-align: center;}
.about-header h2 {font-size: 2rem;margin-bottom: .5rem;color: #ffffff;}
.about-header p { color:#dad8d8; margin-bottom: 2rem; }
.about-block {display: flex;flex-direction: column;gap: 1rem;align-items: center;margin-bottom: 2rem;}
.about-number {font-size: 1.7rem;font-weight: 800;line-height: 1;color: #FF6B00;            min-width: 3.2rem;text-shadow: 0 1px 0 rgba(0,0,0,.06);}
.about-text h3 { font-weight: 700; margin-bottom: .25rem; color: #ffffff; }
.about-text p  { color:#dad8d8; }

/* Prawa kolumna: 3 kółka w kolumnie */
.about-right { width: 100%; }

.badge-list {list-style: none;display: grid;grid-template-columns: 1fr;gap: 1rem;max-width: 420px;margin: 0 auto;}
.badge-item {display: grid;grid-template-columns: 72px 1fr;align-items: center;gap: .9rem;background: rgba(255, 255, 255, 0.345);border-radius: 14px;padding: .6rem .9rem;box-shadow: 0 6px 18px rgba(0,0,0,.08);backdrop-filter: blur(4px);}
.badge {width: 64px; height: 64px;border-radius: 999px;display: grid; place-items: center;background: #fff;border: 2px solid #FF6B00;box-shadow: inset 0 0 0 4px rgba(255,107,0,.12);}
.emoji { font-size: 30px; line-height: 1; }
.badge-label {font-weight: 700;color: #111;}
.badge-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); transition: .18s ease; }


#contact{ background-color: #111111f8; color: white; text-align: center;}
#contact h2 {position: relative;display: inline-block;margin-bottom: 1.5rem;}
#contact h2::after {content: "";display: block;width: 50px;height: 3px;background-color: #FF6B00;margin: 0.5rem auto 0;border-radius: 2px;}
.contact-form input, .contact-form textarea { width: 100%; padding: 0.8rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; }
.contact-form button { background: #FF6B00; color: white; border: none; padding: 0.8rem 2rem; border-radius: 20px; cursor: pointer; }

.contact-header{ text-align: left; margin-left: 37px; text-align: center;}
.contact-header h3 {font-size: 1.0rem;font-weight: 600;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;margin-top: 1.0rem;}

.contact-info { flex-direction: column; gap: 0.3rem; align-items: center; padding-left:0; margin-top: 5px;  display: flex; }
.contact-info a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #fff; font-size: 0.9rem; background: transparent; }
.contact-info i { background-color: #FF6B00; border-radius: 50%; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; font-size: 1.0rem; }
.contact-info span { color: #fff; font-weight: 500; font-size: 13px }

footer { text-align: center; padding:4rem 2rem 0rem 2rem; background-color: #111111f8; font-size: 0.7rem; color: white; }

/* ====== Cookie banner (bez zmian) ====== */
.cookie-banner { position: fixed; inset: auto 0 0 0; display: none; z-index: 1000; }
.cookie-inner { margin: 0 auto 0 auto; max-width: 1100px; display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: rgba(17,17,17,0.95); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cookie-inner p { font-size: .9rem; line-height: 1.4; }
.cookie-actions { display: flex; gap: .5rem; }
.btn-accept, .btn-more { border: 0; border-radius: 20px; padding: .5rem .9rem; cursor: pointer; }
.btn-accept { background: #FF6B00; color: #fff; }
.btn-accept:hover { filter: brightness(0.95); }
.btn-more { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }
.btn-more:hover { background: rgba(255,255,255,0.25); }

/* ====== >=481px (dawne max-width:768px) ====== */
@media (min-width: 481px) {
  .center-nav { font-size: 14px; padding: 7px 5px; margin-top: 1rem; flex-wrap: wrap; }
  .hero { padding: 1rem; text-align: center; background-image: linear-gradient(315deg, #00000075 80%, #fafafa3c 120%), url('./img/hero-1280.jpg'); }
  .hero h3 { font-size: 1.7rem; margin-bottom: 0.7rem; margin-top: 30rem; }
  .hero p { font-size: 1.2rem; margin-bottom: 1rem; }
  .hero button { font-size: 1.1rem; padding: 1rem 1.5rem; }

  .logo { position: absolute; top: 1.5rem; left: 27%; transform: translateX(-50%); z-index: 5; }
  .logo img { width: 250px; height: auto; max-width: 100%; }

  h2{ font-size: 24px; }
  p{ font-size: 16px; }
  #contact .container{max-width: 900px;}
  .contact-info{flex-direction: row; justify-content: center;}
  
  .swap-img-two { order: 1; }
  .swap-img-one { order: 2; }
  .swap-img-three { order: 3; }
  .card-actions{

  display: none;
}
.products-image figcaption {display: block; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.5rem 0.8rem; color: #fff; font-size: 1rem; text-align: center; background-color: #e65a00; z-index: 2;}
}

/* ====== >=769px (zakres 769–1024; dawne max-width:1024px) ====== */
@media (min-width: 769px) {
  .logo { position: absolute; top: 2.2rem; left: 14%; transform: translateX(-50%); font-weight: bold; font-size: 1.2rem; color: #fff; z-index: 5; }
  .logo img{ width: 200px; height: 40px; }

    
  .swap-img-one { order: 1; }
  .swap-img-two { order: 2; }
  .swap-img-three { order: 3; }


  /* Przywrócenie układu kontaktu jak w większych widokach (z oryginału) */
  .contact-info { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; padding-left: 0; }
  .contact-info a { gap: 0.2rem; font-size: 1.1rem; }
  .contact-info i { width: 45px; height: 45px; font-size: 1.3rem; }
  .contact-info span { font-size: 14px; }
  .contact-header{ text-align: center; margin-left: 0; }
 
 
  #about { padding: 4rem 2rem;background-attachment: fixed;  }
  .about-container {flex-direction: row;align-items: flex-start;gap: 3rem;}
  .about-block{flex-direction: row;}
  .about-left { flex: 1.2; margin-left: 15px;}
  .about-right { flex: 1; }
  .badge-list { margin-left: auto; }

  #about .about-container{display: grid;grid-template-columns: 0.9fr 0.5fr;  align-items: start;gap: 3rem;text-align: left;}
  #about .about-header{align-self: start;justify-self: start;background: transparent;         padding: 0;color: inherit;}
  #about .about-header p{ color:#eaeaea; } /* jeśli tło jest ciemne; usuń jeśli wolisz #333 */
  #about .about-content{ align-self: start; }
  #about .about-steps{margin-top: 1rem;}
.products-image figcaption {display: blocks; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.5rem 0.8rem; color: #fff; font-size: 1rem; text-align: center; background-color: #e65a00; z-index: 2;}
  
.badge-list{gap: 3rem;max-width: 20px;justify-content: center;}
.badge-item {justify-content: center;justify-items: center;grid-template-columns: 0fr;}
}

/* ====== >=1025px (desktop; wartości bazowe z oryginału) ====== */
@media (min-width: 1025px) {
  .logo { top: 1rem; left: 2rem; transform: none; font-weight: bold; font-size: 1.2rem; color: #fff; position: absolute; }
  .logo img{ width: 250px; height: 50px; }

  .center-nav { gap: 1rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-top: 0; flex-wrap: nowrap; }

  .hero { background-image: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 45%), linear-gradient(315deg, #00000075 80%, #fafafa3c 120%), url('./img/hero-1920.jpg'); padding: 0 2rem; }
  .hero h3 { margin-left: 2%; margin-top: 35%; font-size: 48px; margin-bottom: 1rem; letter-spacing: 1.2px; text-shadow:  2px 4px rgba(0,0,0,0.6) }
  .hero p { margin-left: 2%; font-size: 1.5rem; color: #d9d6d6; }
  .hero button { margin-left: 2%; margin-top: 2rem; padding: 15px 35px; font-size: 1rem; }

  .contact-info { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; }
  .contact-header{ text-align: center; margin-left: 0; }

  #about { padding: 4rem 2rem;background-attachment: fixed;}
  .about-container {flex-direction: row;align-items: flex-start;gap: 3rem;}
  .about-left { flex: 1.2; margin-left: 5rem;}
  .about-right { flex: 1; margin-right: 5rem; }
  .badge-list { margin-left: auto; }
  #about .about-container{display: grid;grid-template-columns: 1fr 1fr;align-items: start;gap: 3rem;text-align: left;}

  #about .about-header{align-self: start;justify-self: start;background: transparent;padding: 0;color: inherit;}
  #about .about-header p{ color:#eaeaea; } 

  #about .about-content{ align-self: start; }
  #about .about-steps{margin-top: 1rem;  }
.about-right {margin-top: 2rem;}
.badge-list{gap: 2rem;max-width: 280px;justify-content: center;}
.badge-item {justify-content: center;justify-items: center;grid-template-columns: 0fr;}

}