/* ==================================================
   TARNO Lake Apartment — GOLD PREMIUM LIGHT MASTER
   FINAL VERSION — CLEAN, COMPLETE, PRODUCTION READY
================================================== */


/* ==================================================
   1. ROOT VARIABLES
================================================== */

:root{

  --gold:#D4AF37;
  --gold-soft:#F5D87A;
  --gold-dark:#B8962E;

  --bg-main:#ffffff;
  --bg-soft:#f8f8f8;
  --bg-glass:rgba(255,255,255,.12);

  --text-main:#1c1c1c;
  --text-soft:#666;
  --text-light:#999;

  --shadow-soft:0 8px 22px rgba(0,0,0,.08);
  --shadow-medium:0 12px 30px rgba(0,0,0,.12);
  --shadow-premium:0 20px 45px rgba(0,0,0,.18);

  --radius-soft:12px;
  --radius-medium:16px;
  --radius-premium:22px;

}


/* ==================================================
   2. RESET
================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  overflow-x:hidden;
}

body{

  font-family:
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Arial,
  sans-serif;

  background:var(--bg-main);
  color:var(--text-main);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;
}


/* ==================================================
   3. HEADER
================================================== */

.header{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:72px;

  z-index:1000;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);

  border-bottom:1px solid rgba(255,255,255,.15);
}

.header-inner{

  max-width:1200px;
  height:100%;

  margin:auto;
  padding:0 22px;

  display:flex;
  align-items:center;
}

.logo img{

  height:90px;

  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}


/* ==================================================
   4. MENU
================================================== */

.menu{

  margin-left:auto;

  display:flex;
  align-items:center;
  gap:22px;
}

.menu a{

  color:#fff;
  text-decoration:none;

  font-weight:600;
  font-size:15px;

  transition:.25s;
}

.menu a:hover{
  color:var(--gold-soft);
}

.btn-main{

  background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-dark)
  );

  color:#1c1c1c;

  padding:9px 18px;

  border-radius:8px;

  font-weight:700;

  box-shadow:var(--shadow-soft);

  transition:.25s;
}

.btn-main:hover{

  transform:translateY(-2px);

  box-shadow:var(--shadow-medium);
}


/* ==================================================
   5. HAMBURGER
================================================== */

.hamburger{

  display:none;

  margin-left:auto;

  font-size:30px;
  color:#fff;

  cursor:pointer;
}


/* ==================================================
   6. HERO
================================================== */

.hero{

  background:url("../img/hero.jpg") center/cover no-repeat;

  min-height:78vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding-top:80px;

  position:relative;
}

.hero::before{

  content:"";

  position:absolute;
  inset:0;

  background:rgba(0,0,0,.25);
}

.hero-content{

  position:relative;
  z-index:2;

  max-width:820px;

  padding:34px;

  border-radius:var(--radius-premium);

  background:var(--bg-glass);

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow-premium);

  color:#fff;

  text-align:center;
}

.hero h2{

  font-size:32px;

  margin-bottom:14px;
}

.features{

  font-size:15px;

  margin-bottom:22px;
}


/* ==================================================
   7. BUTTONS
================================================== */

/* ==================================================
   CTA BUTTON — GOLD PREMIUM (ZAMIAST ZIELONEGO)
================================================== */

.btn-cta{

  background:linear-gradient(
    135deg,
    var(--gold-soft),
    var(--gold)
  );

  color:#1c1c1c;

  padding:15px 32px;

  border-radius:40px;

  font-weight:700;

  text-decoration:none;

  display:inline-block;

  transition:.25s;

  box-shadow:
    0 10px 26px rgba(0,0,0,.25),
    0 0 12px rgba(212,175,55,.25);

}

.btn-cta:hover{

  transform:translateY(-3px);

  background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-dark)
  );

  box-shadow:
    0 18px 36px rgba(0,0,0,.35),
    0 0 18px rgba(212,175,55,.45);
}



/* ==================================================
   8. SECTIONS
================================================== */

.section{

  max-width:1150px;

  margin:70px auto;

  padding:0 20px;

  text-align:center;
}

.section h2{

  font-size:30px;

  margin-bottom:20px;
}

.bg-light{

  background:var(--bg-soft);

  padding:70px 20px;
}


/* ==================================================
   9. SUMMARY
================================================== */

.apartment-summary{

  max-width:1150px;

  margin:70px auto 40px;

  padding:0 20px;
}

.summary-box{

  background:#fff;

  border-radius:var(--radius-premium);

  padding:35px 40px;

  box-shadow:var(--shadow-soft);

  border:1px solid rgba(212,175,55,.25);
}


/* ==================================================
   10. BOXES
================================================== */

.boxes{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:25px;

  margin-top:35px;
}

.box{

  background:#fff;

  border-radius:var(--radius-medium);

  overflow:hidden;

  box-shadow:var(--shadow-soft);

  transition:.3s;
}

.box:hover{

  transform:translateY(-6px);

  box-shadow:var(--shadow-medium);
}

.box img{

  width:100%;
  height:200px;

  object-fit:cover;
}

.box-text{
  padding:18px;
}


/* ==================================================
   11. INFO GRID
================================================== */

.info-grid{

  max-width:1150px;

  margin:40px auto 0;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:25px;
}

.info-box{

  background:#fff;

  border-radius:var(--radius-medium);

  padding:25px 20px;

  box-shadow:var(--shadow-soft);

  border:1px solid rgba(212,175,55,.25);

  transition:.3s;
}

.info-box:hover{

  transform:translateY(-6px);

  box-shadow:var(--shadow-premium);
}

.info-box .icon{

  font-size:34px;

  color:var(--gold);

  margin-bottom:10px;
}


/* ==================================================
   12. GALLERY
================================================== */

.gallery-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:15px;

  margin-top:25px;
}

.gallery-grid img{

  width:100%;
  height:220px;

  object-fit:cover;

  border-radius:var(--radius-soft);

  cursor:pointer;

  transition:.3s;
}

.gallery-grid img:hover{

  transform:scale(1.04);
}


/* ==================================================
   13. FOOTER
================================================== */

.footer-premium{

  position:relative;

  background:linear-gradient(
    180deg,
    #0b0f18 0%,
    #020617 100%
  );

  color:#e5e7eb;

  margin-top:80px;

  overflow:hidden;
}

.footer-premium::before{

  content:"";

  position:absolute;

  top:0;
  left:0;
  width:100%;
  height:2px;

  background:linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--gold-soft),
    var(--gold),
    transparent
  );

  opacity:.85;
}

.footer-container{

  max-width:1200px;

  margin:auto;

  padding:65px 20px 45px;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

  gap:40px;
}

.footer-logo{

  height:72px;

  margin-bottom:20px;

  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.6))
    drop-shadow(0 0 10px rgba(212,175,55,.25));
}

.footer-description{

  color:#9ca3af;

  font-size:14px;

  line-height:1.7;
}

.footer-col h4{

  color:var(--gold-soft);

  margin-bottom:16px;

  font-size:15px;
}

.footer-col ul{

  list-style:none;
}

.footer-col li{

  margin-bottom:10px;
}

.footer-col a{

  color:#9ca3af;

  text-decoration:none;

  transition:.25s;
}

.footer-col a:hover{

  color:var(--gold-soft);
}


/* footer button */

.footer-button{

  display:inline-block;

  padding:14px 26px;

  border-radius:12px;

  font-size:14px;

  font-weight:700;

  text-decoration:none;

  color:#ffffff;

  background:linear-gradient(
    135deg,
    #9F7F2A,
    #7A631F
  );

  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    0 0 14px rgba(212,175,55,.25);

  transition:.3s;
}

.footer-button:hover{

  transform:translateY(-3px);

  background:linear-gradient(
    135deg,
    #D4AF37,
    #B8962E
  );
}

.footer-cta-note{

  display:block;

  margin-top:8px;

  font-size:12px;

  color:#8b95a7;
}


/* footer bottom */

.footer-bottom{

  border-top:1px solid rgba(212,175,55,.2);

  padding:24px 20px;
}

.footer-bottom-container{

  max-width:1200px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;
}


/* social */

.footer-social{

  display:flex;

  align-items:center;
}

.footer-social a{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;

  margin-right:10px;

  border-radius:50%;

  background:rgba(255,255,255,.04);

  color:#e5e7eb;

  transition:.3s;
}

.footer-social a:hover{

  background:linear-gradient(
    135deg,
    var(--gold-soft),
    var(--gold)
  );

  color:#1c1c1c;

  transform:translateY(-3px);

  box-shadow:
    0 0 18px rgba(212,175,55,.45);
}


/* copyright */

.footer-links{

  margin-left:auto;

  display:flex;

  justify-content:flex-end;
}

.footer-copy{

  font-size:13px;

  color:#6b7280;

  text-align:right;

  white-space:nowrap;
}


/* ==================================================
   14. LIGHTBOX
================================================== */

.lightbox{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(0,0,0,.92);

  display:none;

  align-items:center;
  justify-content:center;

  z-index:999999;
}

.lightbox.active{
  display:flex;
}

.lightbox-img{

  max-width:90%;
  max-height:85%;

  border-radius:12px;

  box-shadow:
    0 0 40px rgba(0,0,0,.8);
}


/* ==================================================
   15. MOBILE
================================================== */

@media(max-width:768px){

  .menu{

    position:fixed;

    top:72px;
    right:-100%;

    width:260px;
    height:100vh;

    background:#000;

    flex-direction:column;

    padding:25px;

    transition:.3s;
  }

  .menu.active{
    right:0;
  }

  .hamburger{
    display:block;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom-container{

    flex-direction:column;

    gap:14px;
  }

  .footer-links{

    margin-left:0;

    justify-content:center;
  }

  .footer-copy{

    text-align:center;

    white-space:normal;
  }

}


/* ==================================================
   16. MOBILE BOOK BUTTON
================================================== */

.mobile-book-btn{

  position:fixed;

  left:50%;
  transform:translateX(-50%);

  bottom:15px;

  width:calc(100% - 30px);
  max-width:480px;

  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:40px;

  background:rgba(20,20,20,.6);

  backdrop-filter:blur(12px);

  color:#fff;

  font-weight:700;

  text-decoration:none;

  border:1px solid rgba(212,175,55,.4);

  box-shadow:var(--shadow-premium);

  z-index:999999;
}

@media(min-width:769px){

  .mobile-book-btn{
    display:none;
  }

}

/* ==================================================
   LIGHTBOX NAVIGATION — DESKTOP ARROWS FIX
================================================== */

.lightbox-nav{

  position:absolute;

  top:50%;

  left:0;
  width:100%;

  transform:translateY(-50%);

  display:flex;

  justify-content:space-between;

  align-items:center;

  pointer-events:none;
}


/* strzałki */

.lightbox-prev,
.lightbox-next{

  pointer-events:auto;

  cursor:pointer;

  font-size:42px;

  color:#ffffff;

  padding:16px 18px;

  margin:0 18px;

  border-radius:12px;

  background:rgba(0,0,0,.35);

  backdrop-filter:blur(6px);

  transition:.25s;

  user-select:none;

}


/* hover efekt */

.lightbox-prev:hover,
.lightbox-next:hover{

  background:linear-gradient(
    135deg,
    var(--gold-soft),
    var(--gold)
  );

  color:#1c1c1c;

  transform:scale(1.08);

  box-shadow:
    0 0 18px rgba(212,175,55,.45);
}


/* lewa / prawa pozycja */

.lightbox-prev{

  margin-left:30px;
}

.lightbox-next{

  margin-right:30px;
}


/* ==================================================
   MOBILE — trochę mniejsze
================================================== */

@media(max-width:768px){

  .lightbox-prev,
  .lightbox-next{

    font-size:34px;

    padding:12px 14px;

    margin:0 10px;
  }

}


/* ==================================================
   DETAILS BUTTON — GOLD PREMIUM (FIX)
================================================== */

.btn-details{

  display:inline-block;

  padding:14px 34px;

  border-radius:40px;

  background:linear-gradient(
    135deg,
    var(--gold-soft),
    var(--gold)
  );

  color:#1c1c1c;

  font-weight:700;

  text-decoration:none;

  box-shadow:
    0 10px 26px rgba(0,0,0,.25),
    0 0 12px rgba(212,175,55,.25);

  transition:.25s;
}

.btn-details:hover{

  transform:translateY(-3px);

  background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-dark)
  );

  box-shadow:
    0 18px 36px rgba(0,0,0,.35),
    0 0 18px rgba(212,175,55,.45);
}

/* ==================================================
   MORE DETAILS BUTTON — BIGGER SPACING FROM BOXES
================================================== */

.more-details-btn{

  margin-top:60px;   /* było 35px */

  text-align:center;
}

/* ==================================================
   PREMIUM SPACING SYSTEM — TARNO Lake Apartment
   unified vertical rhythm
================================================== */


/* sekcje główne */

.section{

  margin:90px auto;   /* było 70px */

}


/* sekcje z jasnym tłem */

.bg-light{

  padding:90px 20px;  /* było 70px */

}


/* sekcja apartamentu */

.apartment-summary{

  margin:90px auto 50px;  /* było 70px auto 40px */

}


/* kafelki */

.boxes{

  margin-top:45px;   /* było 35px */

}


/* przycisk "więcej szczegółów" */

.more-details-btn{

  margin-top:70px;

  margin-bottom:20px;
}


/* info grid */

.info-grid{

  margin-top:50px;   /* było 40px */

}


/* galeria */

.gallery-grid{

  margin-top:35px;   /* było 25px */

}


/* stopka odstęp od sekcji */

.footer-premium{

  margin-top:100px;   /* było 80px */

}

/* ==================================================
   TARNO Lake Apartment — OFFER PAGE PREMIUM SYSTEM
   clean • unified • no duplicates • production ready
================================================== */



/* ==================================================
   PREMIUM BLOCK — PARALLAX BACKGROUND
   wspólne tło dla opisu i sekcji "Dlaczego warto"
================================================== */

.premium-block{

  position:relative;

  background-image:
    linear-gradient(
      rgba(255,255,255,.78),
      rgba(255,255,255,.88)
    ),
    url("../img/oferta1.jpg");

  background-size:cover;

  background-position:center;

  background-attachment:fixed;

  padding:60px 0 100px 0;

}


.premium-overlay{

  max-width:1150px;

  margin:auto;

  padding:0 20px;

}



/* MOBILE PARALLAX — KEEP ENABLED */

@media(max-width:768px){

  .premium-block{

    background-attachment:fixed;

    background-position:center center;

    transform:translateZ(0);

  }

}




/* ==================================================
   PREMIUM GLASS SYSTEM — unified dla wszystkich boxów
================================================== */

.glass{

  background:rgba(255,255,255,.24);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border-radius:22px;

  box-shadow:
    0 30px 65px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 0 0 1px rgba(212,175,55,.20);

  border:1px solid rgba(255,255,255,.55);

}



/* ==================================================
   APARTMENT SUMMARY — opis apartamentu
================================================== */

.summary-box{

  padding:42px;

  margin:40px auto;

}



/* ==================================================
   WHY PREMIUM SECTION
================================================== */

.why-premium{

  position:relative;

  padding:60px 20px;

  text-align:center;

  background:none;

}


.why-overlay{

  max-width:900px;

  margin:auto;

}


.why-premium h2{

  margin-bottom:40px;

  font-size:32px;

  color:var(--text-main);

}




/* hover subtelny premium */

.why-box:hover{

  background:rgba(255,255,255,.30);

  box-shadow:
    0 35px 75px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(212,175,55,.30);

}


.why-box p{

  margin-bottom:18px;

  font-size:16px;

  color:var(--text-main);

  font-weight:500;

}
/* ==================================================
   FAQ ACCORDION — GOLD PREMIUM
   clean • stable • production ready
================================================== */

.faq-container{

  max-width:900px;
  margin:50px auto 0;

  display:flex;
  flex-direction:column;

  gap:18px;

}


.faq-item{

  background:#ffffff;

  border-radius:16px;

  border:1px solid rgba(212,175,55,.25);

  box-shadow:var(--shadow-soft);

  cursor:pointer;

  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.faq-item:hover{

  transform:translateY(-3px);

  box-shadow:var(--shadow-medium);

}


.faq-question{

  padding:22px 26px;

  font-weight:600;

  font-size:16px;

  color:var(--text-main);

}


.faq-answer{

  max-height:0;

  overflow:hidden;

  padding:0 26px;

  color:var(--text-soft);

  line-height:1.6;

  transition:
    max-height .35s ease,
    padding .35s ease;

}


.faq-item.active .faq-answer{

  max-height:300px;

  padding:0 26px 22px 26px;

}




/* DESKTOP HOVER — subtle premium */

.why-box:hover{

  background:rgba(255,255,255,.20);

  box-shadow:
    0 45px 100px rgba(0,0,0,.22),
    0 15px 40px rgba(212,175,55,.14);

  transform:translateY(-2px);

}



/* MOBILE — always premium active */

@media (max-width:768px){

  .why-box{

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(26px);
    -webkit-backdrop-filter:blur(26px);

    box-shadow:
      0 40px 90px rgba(0,0,0,.20),
      0 12px 35px rgba(212,175,55,.12);

  }

}


/* ==================================================
   WHY BOX — ULTRA PREMIUM GLASS (FINAL CLEAN VERSION)
================================================== */

.why-box{

  background:rgba(255,255,255,.18);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border-radius:22px;

  border:1px solid rgba(255,255,255,.60);

  box-shadow:
    0 35px 80px rgba(0,0,0,.18),
    0 0 0 1px rgba(212,175,55,.22),
    0 0 30px rgba(212,175,55,.10);

  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;

}


/* DESKTOP HOVER */

.why-box:hover{

  background:rgba(255,255,255,.22);

  box-shadow:
    0 40px 90px rgba(0,0,0,.20),
    0 0 0 1px rgba(212,175,55,.32),
    0 0 40px rgba(212,175,55,.16);

  transform:translateY(-2px);

}



/* MOBILE — ACTIVE PREMIUM LOOK */

@media (max-width:768px){

  .why-box{

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(26px);
    -webkit-backdrop-filter:blur(26px);

    box-shadow:
      0 40px 90px rgba(0,0,0,.20),
      0 0 0 1px rgba(212,175,55,.28),
      0 0 35px rgba(212,175,55,.14);

  }

}



/* ==================================================
   18. TRUE PARALLAX — iOS + Android + Desktop FIX
   does not break your structure
================================================== */

.premium-block{
  position:relative;
  overflow:hidden;
}

.premium-block::before{

  content:"";

  position:absolute;

  top:-120px;
  left:0;

  width:100%;
  height:140%;

  background-image:
    linear-gradient(
      rgba(255,255,255,.78),
      rgba(255,255,255,.88)
    ),
    url("../img/oferta1.jpg");

  background-size:cover;
  background-position:center;

  z-index:-1;

  transform:translateY(var(--parallax, 0));

  will-change:transform;

}


/* ================= GOLD TITLES – DLACZEGO WARTO ================= */

.why-box h2{
  color:var(--gold);
  font-weight:600;
  letter-spacing:.5px;
}

.why-box p{
  color:#2b2b2b;
  line-height:1.7;
  text-align:justify;
}



/* ==================================================
   TARNO SAFE PATCH — fixes only • no visual changes
================================================== */


/* FIX 1 — usuwa konflikt gold strong */

.why-box strong{

  font-weight:600;

  color:var(--gold);

  background:linear-gradient(
    90deg,
    #D4AF37,
    #F5D87A,
    #D4AF37
  );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

  display:inline-block;
}

/* FIX 2 — stabilność glass */

.glass{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}


/* FIX 3 — gallery stability */

.gallery-grid img{
  display:block;
}


/* FIX 4 — footer grid stability */

.footer-container{
  width:100%;
}


/* FIX 5 — parallax stability */

.premium-block{
  position:relative;
  overflow:hidden;
}


/* FIX 6 — mobile render stability */

@media(max-width:768px){

  .glass{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

}


/* ==================================================
   TARNO FINAL SAFE CONSOLIDATION PATCH
   does NOT change appearance
   removes conflicts and stabilizes rendering
================================================== */


/* FINAL SPACING VALUES (already used visually) */

.section{
  margin:90px auto;
}

.bg-light{
  padding:90px 20px;
}

.apartment-summary{
  margin:90px auto 50px;
}

.boxes{
  margin-top:45px;
}

.gallery-grid{
  margin-top:35px;
}

.footer-premium{
  margin-top:100px;
}


/* FINAL GLASS LOOK */

.glass{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}


/* FINAL WHY BOX LOOK */

.why-box{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border-radius:22px;

  border:1px solid rgba(255,255,255,.60);

  box-shadow:
    0 35px 80px rgba(0,0,0,.18),
    0 0 0 1px rgba(212,175,55,.22),
    0 0 30px rgba(212,175,55,.10);

  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}


/* FINAL WHY BOX HOVER */

.why-box:hover{
  background:rgba(255,255,255,.22);

  box-shadow:
    0 40px 90px rgba(0,0,0,.20),
    0 0 0 1px rgba(212,175,55,.32),
    0 0 40px rgba(212,175,55,.16);

  transform:translateY(-2px);
}


/* FINAL GOLD TEXT */

.why-box strong{

  font-weight:600;

  color:var(--gold);

  background:linear-gradient(
    90deg,
    #D4AF37,
    #F5D87A,
    #D4AF37
  );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}


/* STABILITY FIXES */

.gallery-grid img{
  display:block;
}

.footer-container{
  width:100%;
}

.premium-block{
  position:relative;
  overflow:hidden;
}


/* MOBILE STABILITY */

@media(max-width:768px){

  .glass{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

}


/* ==================================================
   WHY SECTION — SAFE SPACING PATCH (NO VISUAL CHANGE)
   poprawia marginesy i odsunięcie od krawędzi
================================================== */

.why-premium{

  padding:80px 20px; /* było 60px 20px */

}

.why-overlay{

  padding:0 10px; /* subtelne odsunięcie od krawędzi */

}

.why-box{

  padding:32px 34px; /* było optycznie za ciasno */

  margin-bottom:18px; /* odstęp między elementami */

}

@media (max-width:768px){

  .why-premium{

    padding:70px 18px;

  }

  .why-overlay{

    padding:0 6px;

  }

  .why-box{

    padding:26px 22px;

  }

}



/* ===== FIX POWIĄZANE ARTYKUŁY ===== */

.tarno-card{
border:1px solid #eee;
border-radius:16px;
overflow:hidden;
background:#fff;
}

.tarno-card img{
width:100%;
height:220px;        /* stała wysokość jak w blog.html */
object-fit:cover;
display:block;
}