:root{--bg:#0f0f10;--panel:#151517;--text:#e8e8ea;--muted:#b5b5b9;--accent:#ffd000;--accent-2:#ff554d;--radius:20px;--container:1200px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;color:var(--text);background:var(--bg)}
.container{max-width:var(--container);padding:0 24px;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text--accent{color:var(--accent)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(15,15,16,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1f1f22}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__logo{font-weight:800;letter-spacing:.3px;color:var(--text);text-decoration:none}
.nav__menu{display:flex}
.nav__list{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav__link{color:var(--muted);text-decoration:none;font-weight:600}
.nav__link:hover{color:var(--text)}
.nav__toggle{display:none;background:none;border:0;color:var(--text);font-size:24px}

/* Hero (layout) */
.main{padding-block:48px}
.home {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "title image"
    "info image"
    "usp usp";
  gap:32px;
  align-items:center;
  background:var(--panel);
  border-radius:var(--radius);
  padding:48px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.home__title{grid-area:title;font-size:clamp(28px,4vw,64px);line-height:1.05;margin:0 0 8px}
.home__information{grid-area:info}
.home__img{grid-area:image}
.box{grid-area:usp}

/* USP boxes */
.box{display:flex;gap:24px;align-items:stretch;margin-top:24px}
.box>div{display:grid;gap:24px}
.box__content{background:#0c0c0d;border:1px solid #1c1c20;border-radius:16px;padding:20px 22px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.box__medium{min-width:260px}
.box__small{min-width:220px}
.icon-box{font-size:28px;vertical-align:middle}
.icon-box--small{font-size:22px}
.box__medium-title,.box__small-title{font-weight:800;margin-right:8px}
.box__medium-description,.box__small-description{color:var(--accent);font-weight:800;letter-spacing:.3px}
.box__medium-detail,.box__small-detail{display:block;color:var(--muted);font-size:14px;margin-top:6px}

/* Sections */
.section{margin-top:56px}
.section--alt{background:#0c0c0d;border:1px solid #1c1c20;border-radius:var(--radius);padding:28px}
.services{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.services .service{display:flex;gap:10px;align-items:center;background:#0c0c0d;border:1px solid #1c1c20;border-radius:12px;padding:14px 16px;color:var(--text)}
.services ion-icon{font-size:20px}
.reviews{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.review{margin:0;background:#0c0c0d;border:1px solid #1c1c20;border-radius:12px;padding:16px;color:var(--muted)}
.section--cta{text-align:center;background:linear-gradient(180deg,#151517,#101011);border:1px solid #1c1c20;border-radius:var(--radius);padding:36px}
.btn{display:inline-block;border-radius:12px;padding:12px 18px;border:1px solid #2a2a30;text-decoration:none;color:#111;background:var(--accent);font-weight:800}
.btn:hover{filter:brightness(.96)}

/* Footer */
.footer{padding:36px 0;color:var(--muted)}

/* Grid Helpers */
.grid{display:grid}

/* Responsive base */
@media (max-width:980px){
  .home{grid-template-columns:1fr;gap:20px;padding:28px}
  .box{flex-direction:column}
  .services{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav__toggle{display:block}
  .nav__menu{display:none;position:absolute;top:64px;right:16px;background:#0c0c0d;border:1px solid #1c1c20;border-radius:12px;padding:12px}
  .nav__menu.is-open{display:block}
  .nav__list{flex-direction:column;gap:12px}
  .services{grid-template-columns:1fr}
}

/* ===== HERO fullscreen ===== */
.main{padding-block:0}
html,body{overflow-x:hidden}
.hero{
  position:relative;width:100%;height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:none;
}
/* tło tylko na HOME */
.hero--home{background:url("../img/1.PNG.png") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero--home .hero__title{
  position:absolute;left:50%;top:10%;transform:translate(-50%,-50%);
  color:#fff;font-weight:800;text-transform:uppercase;text-align:center;
  font-size:clamp(20px,4vw,40px);z-index:1;
}
/* wyłącz stare elementy w sekcji home */
.home__img,.home__information{display:none !important}

/* --- Sekcja pod hero (home) --- */
.about-extended__grid{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:flex-start}
.about-extended__image img{max-width:550px;width:100%;height:auto;border-radius:12px;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.about-extended__content{padding-right:40px}
.about-extended__brand{font-size:2rem;font-weight:900;color:red;margin-bottom:.5rem}
.about-extended__divider{width:80px;height:4px;margin-bottom:1.5rem;background:linear-gradient(to right,red 50%,red 50%);box-shadow:0 6px 0 0 red}
.about-extended__title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.about-extended__content p{margin-bottom:1rem;color:var(--muted);line-height:1.7;text-align:justify}
.about-extended__content{max-width:600px;margin-left:auto;margin-right:auto;padding-right:40px}
@media (max-width:980px){.about-extended__grid{grid-template-columns:1fr}.about-extended__content{padding-right:0}}

/* LOGO */
.nav__logo img{height:65px;width:auto;display:block}

/* ===== Sekcja Usługi (pattern) ===== */
.services-pattern{position:relative;color:#fff;padding:64px 0;background-color:#0f0f10;background-image:
linear-gradient(30deg,#1b1b1f 12%,transparent 12.5%,transparent 87%,#1b1b1f 87.5%,#1b1b1f),
linear-gradient(150deg,#1b1b1f 12%,transparent 12.5%,transparent 87%,#1b1b1f 87.5%,#1b1b1f),
linear-gradient(30deg,#1b1b1f 12%,transparent 12.5%,transparent 87%,#1b1b1f 87.5%,#1b1b1f),
linear-gradient(150deg,#1b1b1f 12%,transparent 12.5%,transparent 87%,#1b1b1f 87.5%,#1b1b1f),
linear-gradient(60deg,#141418 25%,transparent 25.5%,transparent 75%,#141418 75%,#141418);
background-size:80px 140px;background-position:0 0,0 0,40px 70px,40px 70px,0 0}
.services-pattern__container{max-width:1200px;margin:0 auto;padding:0 24px}
.services-pattern__topimg{margin:0 0 24px;text-align:center}
.services-pattern__topimg img{max-width:1060px;width:100%;height:auto;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.services-pattern__title{font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;margin:8px 0}
.services-pattern__divider{width:80px;height:4px;background:red;margin:0 0 28px}
.services-pattern__grid{display:grid;grid-template-columns:1fr;gap:28px}
.service-card__heading{position:relative;font-size:1.1rem;font-weight:800;letter-spacing:.02em;margin:0 0 8px}
.service-card__heading::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:red;margin-right:10px;transform:translateY(-1px)}
.service-card__text{margin:0;color:#e8e8ea;line-height:1.7}
@media (max-width:980px){.services-pattern{padding:48px 0}.services-pattern__grid{grid-template-columns:1fr;gap:22px}}

/* ===== Czerwona ramka ===== */
.highlight-box{padding:60px 20px;background:linear-gradient(180deg,#000,#8c0b0b);color:#fff;border-radius:12px;margin:40px auto;max-width:900px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.highlight-box__container{max-width:700px;margin:0 auto;text-align:center}
.highlight-box__list{list-style:none;padding:0;margin:0 0 32px}
.highlight-box__list li{margin-bottom:28px}
.highlight-box__list h3{font-size:1.2rem;font-weight:800;text-transform:uppercase;margin-bottom:8px;position:relative}
.highlight-box__list h3::before{content:"•";color:#fff;font-size:1.5rem;margin-right:8px}
.highlight-box__list p{margin:0;font-size:.95rem;line-height:1.6;color:#f2f2f2}
.highlight-box__cta .btn{background:#fff;color:#b30000;font-weight:700;padding:12px 24px;border-radius:6px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:.3s}
.highlight-box__cta .btn:hover{background:#f2f2f2;color:#800000}

/* --- Galeria (siatka + lightbox) --- */
.gallery__wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.gallery__title{font-weight:900;text-transform:uppercase;margin-bottom:16px}
.gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery__item{position:relative;display:block;overflow:hidden;border-radius:10px}
.gallery__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:6px}
.gallery__item:hover img{transform:scale(1.05);filter:brightness(.9)}
@media (max-width:1100px){.gallery__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.gallery__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.gallery__grid{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:8px}
.lightbox__close{position:absolute;top:14px;right:18px;font-size:36px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;width:44px;height:64px;border-radius:8px;font-size:32px}
.lightbox__prev{left:16px}.lightbox__next{right:16px}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}

/* --- Stopka diagonal --- */
:root{--footer-bg1:#0b0c0d;--footer-bg2:#40080a;--footer-bg3:#b10f1e;--footer-text:#f5f7fa;--footer-muted:#b7bcc7;--footer-border:#1d2024}
.footer-diagonal{color:var(--footer-text);border-top:1px solid var(--footer-border);background:linear-gradient(160deg,var(--footer-bg1) 0%,var(--footer-bg2) 40%,var(--footer-bg3) 80%,#07090b 100%);position:relative;padding:60px 0 0}
.footer-diagonal::before{content:"";position:absolute;inset:0;clip-path:polygon(60% 0,100% 0,100% 100%,40% 100%);background:#07090b;opacity:.85;pointer-events:none}
.footer-diagonal__inner{display:grid;grid-template-columns:1.1fr .8fr 1.1fr;gap:30px;position:relative;z-index:1}
.footer-diagonal h3{margin-bottom:12px;font-weight:700}
.footer-diagonal ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-diagonal a{color:var(--footer-text);text-decoration:none;font-weight:600}
.footer-diagonal a:hover{opacity:.8}
.map-embed{border:1px solid var(--footer-border);border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35);margin-bottom:12px}
.map-embed iframe{width:100%;height:240px;border:0}
#navBtn.btn--primary{display:inline-block;padding:10px 18px;border-radius:8px;background:var(--footer-bg3);color:#fff;text-decoration:none;font-weight:600;transition:background .3s}
#navBtn.btn--primary:hover{background:var(--footer-bg2)}
.footer-diagonal__bottom{margin-top:20px;padding:14px 0;border-top:1px solid var(--footer-border);background:rgba(0,0,0,.2);color:var(--footer-muted);font-size:14px}
@media (max-width:980px){
  .footer-diagonal__inner{grid-template-columns:1fr 1fr}
  .footer-diagonal__col--map{grid-column:1/-1}
  .map-embed iframe{height:260px}
}
@media (max-width:640px){
  .footer-diagonal__inner{grid-template-columns:1fr}
  .map-embed iframe{height:220px}
  .footer-diagonal::before{clip-path:polygon(70% 0,100% 0,100% 100%,30% 100%)}
}

/* ===== Kontakt ===== */
.hero--kontakt{
  position:relative;width:100%;height:100svh;
  background:url("../img/1.png") center/cover no-repeat;
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:clamp(24px,8vw,160px);overflow:clip;
}
.hero--kontakt::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.hero--kontakt::before{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,transparent,#0f0f10 70%,#0f0f10);pointer-events:none}
.hero__title{
  position:absolute;left:2%;top:70%;transform:none;text-align:left;
  font-size:clamp(25px,5vw,62px);background:rgba(0,0,0,.65);
  padding:12px 20px;border:2px solid #000;border-radius:8px;
}
.contact-section{margin-top:16px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;margin-top:40px}
.contact-left{text-align:left}
.contact-title{font-size:2rem;font-weight:800;margin:0 0 16px}
.contact-right{display:grid;gap:24px;justify-items:center}
.map-embed{width:100%;max-width:640px;border:1px solid #1c1c20;border-radius:12px;overflow:hidden}
.map-embed iframe{width:100%;height:300px;border:0}

/* Przyciski */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:#b10f1e;color:#fff;font-weight:700;text-decoration:none;transition:filter .15s ease}
.btn:hover{filter:brightness(.96)}
.btn--nav{background:#ffd000;color:#111;font-weight:800}
.btn--nav:hover{filter:brightness(.94)}

/* Formularz */
.contact-form{width:100%;max-width:520px;display:grid;gap:16px;text-align:left}
.contact-form label{display:grid;gap:6px;font-weight:600;color:#e8e8ea}
.contact-form input,.contact-form textarea{padding:12px 14px;border-radius:8px;border:1px solid #2a2a30;background:#0c0c0d;color:#e8e8ea;font:inherit}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8b8b90}
:root{--accent:#ffd000}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent),transparent 85%)}
#formMsg{font-weight:700;margin-top:4px;text-align:left;min-height:1.2em}
#formMsg.success{color:#9ae6b4}
#formMsg.error{color:#feb2b2}
.contact-form input:invalid,.contact-form textarea:invalid{border-color:#b10f1e}

/* Kafelki (opcjonalnie) */
.contact-page{padding:32px 0;display:grid;gap:28px}
.contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:#0c0c0d;border:1px solid #1c1c20;border-radius:12px;padding:14px 16px;color:#e8e8ea;text-decoration:none;font-weight:600;text-align:center}
.card:hover{filter:brightness(1.05)}
/* Ramki na dane */
.contact-box{display:grid;gap:12px;max-width:420px;margin:24px auto}
.contact-box p{margin:0;padding:14px 18px;background:#000;border:2px solid #000;border-radius:8px;color:#fff;font-size:1.2rem;font-weight:700;text-align:center}
.contact-box a{color:#fff;text-decoration:none;font-weight:inherit}
.contact-box a:hover{text-decoration:underline}
.contact-description{margin-top:20px;font-size:1rem;line-height:1.7;color:#e8e8ea;max-width:700px;margin-left:auto;margin-right:auto}

/* Kontakt – układ pionowy */
.contact-stack{display:grid;gap:28px;max-width:960px;margin:36px auto 48px}
.info-card{background:linear-gradient(180deg,#0b0b0d,#17171b);border:1px solid #232329;border-radius:14px;padding:clamp(18px,3vw,28px);box-shadow:0 14px 40px rgba(0,0,0,.35);color:#eaeaec;text-align:left}
.info-card__heading{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.info-card p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.85}
.contact-box--center{max-width:540px;margin:0 auto}
.contact-box p{margin:0;padding:14px 18px;background:#000;border:2px solid #000;border-radius:10px;color:#fff;font-size:1.15rem;font-weight:800;text-align:center}
.map-embed--wide{max-width:960px;margin:0 auto}
.map-embed--wide iframe{height:340px}
.btn--center{display:block;width:max-content;margin:6px auto 0}
.contact-form{width:100%;max-width:520px;margin:0 auto;display:grid;gap:16px;text-align:left}

/* ===== O nas ===== */
.about-box{display:flex;justify-content:center;padding:40px 20px}
.about-box__inner{max-width:800px;background:#000;border:2px solid #000;border-radius:12px;padding:32px;color:#fff;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.about-box__inner h2{margin-top:0;font-size:2rem;font-weight:900;text-transform:uppercase;margin-bottom:16px}
.about-box__inner p{font-size:1.1rem;line-height:1.8;margin:0}



/* O nas – tytuł na obrazku */
.hero--onas .hero__title{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  color:#fff;font-weight:800;text-transform:uppercase;text-align:center;
  font-size:clamp(24px,5vw,56px);z-index:1;
}

/* Plakaty (O nas) */
.gallery-posters__wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:0 24px}
.gallery-posters__wrap img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
@media (max-width:800px){.gallery-posters__wrap{grid-template-columns:1fr}}
/* Obraz O nas – główny */
.hero--onas{position:relative;width:100%;height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden}
.hero--onas .hero__img{width:120%;height:120%;object-fit:contain}

/* Slider */
.presentation-slider{text-align:center;margin-top:60px}
.slider{position:relative;max-width:1100px;margin:0 auto;overflow:hidden;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.slides{display:flex;transition:transform .5s ease}
.slides img{width:100%;flex-shrink:0;object-fit:contain;background:#000}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;padding:14px 18px;cursor:pointer;font-size:28px;border-radius:50%;z-index:10;transition:background .2s}
.slide-btn:hover{background:rgba(0,0,0,.8)}
.slide-btn.prev{left:12px}.slide-btn.next{right:12px}

/* Facebook icon */
.icon-wrapper{font-size:48px;display:inline-flex;align-items:center;justify-content:center}
.icon-wrapper ion-icon{color:#fff;transition:color .3s}
.icon-wrapper:hover ion-icon{color:#ffd000}

/* ===== GALERIA – HERO ===== */
.hero--galeria{position:relative;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}
.hero--galeria .hero__img{width:100%;height:100%;object-fit:contain;background:#000}
.hero--galeria .hero__title{position:absolute;z-index:1;color:#fff}
/* pozostawiam desktopowe przesunięcie jak miałeś: */


/* ===== Mobile tweaks ===== */
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-left{text-align:center}
  .hero--kontakt{justify-content:center;padding-left:24px}
  .hero--kontakt .hero__title{text-align:center;max-width:90vw}
  .contact-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .contact-cards{grid-template-columns:1fr}
  .map-embed iframe{height:240px}

  /* GALERIA: pełny kadr na telefonie */
  .hero--galeria{
    position:relative;
    display:block;
    height:auto;              /* było 100svh */
    overflow:visible;         /* było hidden */
  }
  .hero--galeria .hero__img{
    position:static;          /* było absolute */
    inset:auto;
    width:100%;
    height:auto;              /* było 100% */
    object-fit:contain;       /* było cover — to kluczowa zmiana */
    background:#000;
  }
  .hero--galeria .hero__title{
    position:absolute;left:20%;bottom:22px;top:auto;transform:translateX(-50%);
    margin:0;text-align:center;background:rgba(0,0,0,.55);padding:8px 12px;border-radius:6px;
    font-size:clamp(18px,5vw,28px);
  }
}


/* Preferencje: mniej animacji */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

.hero-title-block {
  background: #0f0f10; /* albo ten sam kolor/tło co reszta */
  padding: 40px 20px;
  text-align: center;
}

.hero-title-block .hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .hero {
    background-size: contain !important;
    background-color: #000; /* czarne tło dla pustych miejsc */
  }
}


/* === FIX: pełny kadr obrazów hero na mobile (bez przycinania) === */
@media (max-width: 768px){
  /* Home – tło jako contain */
  .hero--home{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000;               /* tło dla „boków” */
    height: 100svh;                        /* może zostać pełny ekran */
  }
}
  /* Kontakt – tło jako contain */
  .hero--kontakt{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000;
    height: 100svh;
  }
  

/* === USŁUGI – hero jako <img> pełny ekran (DESKTOP) === */
:root { --header-h: 64px; }  /* wysokość sticky nagłówka */

:root { --header-h: 64px; } /* wysokość sticky nagłówka */

/* === USŁUGI: hero pełny ekran na desktopie === */
.hero--uslugi{
  position: relative;
  width: 100%;
  height: 100vh;           /* pełne okno */
  overflow: hidden;
  background: #000;
}

.hero--uslugi .hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* pełne wypełnienie, bez pasków */
  display: block;
}




/* Tytuł wyśrodkowany pod nawigacją (desktop) */
.hero--uslugi .hero__title{
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 16px);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(24px, 4vw, 40px);
  background: rgba(0,0,0,.45);
  border: 2px solid #000;
  border-radius: 8px;
}

/* === Mobile / małe tablety (≤768px) === */
@media (max-width: 768px){
  .hero--uslugi{
    height: auto;          /* nie trzymaj na sztywno 100vh */
  }
  .hero--uslugi .hero__img{
    position: static;      /* obraz wraca do normalnego przepływu */
    width: 100%;
    height: auto;
    object-fit: contain;   /* nie przycinaj na wąskich ekranach */
  }
  /* Ukryj tytuł na mobile */
  .hero--uslugi .hero__title,
  .hero-title-block{
    display: none !important;
  }
}

@media (min-width: 769px){
  .hero--uslugi .hero__title{
    left:  calc(380px);                              /* → w prawo: podmień 200px */
    top:   calc(var(--header-h) + 12px + 3px);      /* ↓ w dół:   podmień 80px  */
    transform: none !important;                      /* WYŁĄCZAMY -50% */
  }
}

/* Desktop: sterowanie góra–dół przez top:% */
@media (min-width: 641px){
  .hero--galeria{ position: relative; } /* kotwica dla absolute */
  .hero--galeria .hero__title{
    position: absolute;
    left: 50%;
    top: 90%;                 /* ← zmieniaj: 20% wyżej, 60% niżej */
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 1;
    color: #fff;

    font-size: 40px;   /* 🔽 zmniejsz/powiększ */
    line-height: 1.2;  /* odstęp między liniami */
    font-weight: 700;  /* pogrubienie */
  }
}

@media (max-width: 640px){
  .hero--galeria .hero__title {
    position: absolute;
    left: -9999px; /* schowany daleko w lewo */
    top: auto;
  }
}


.about-extended__content {
  border: 2px solid #ff0000;   /* ramka – np. czerwona */
  border-radius: 10px;         /* zaokrąglone rogi */
  padding: 50px;               /* odstęp od krawędzi ramki */
  margin: 40px auto;           /* odstęp góra/dół = 40px, wyśrodkowanie w poziomie */
  background: #111;            /* ciemne tło spójne z resztą strony */
  line-height: 1.6;            /* lepsza czytelność */
  max-width: 900px;            /* szerokość ramki na desktopie */
}

@media (max-width: 640px) {
  .about-extended__content {
    margin: 16px 12px;
    padding: 16px;
  }
}


/* === STREFA WIEDZY – pełnoekranowy hero (final) === */
.hero--wiedza{
  position: relative;
  width: 100%;
  height: 100svh;        /* pełny ekran */
  overflow: hidden;
  background: #000;
}

/* Desktop: ładne wypełnienie + fokus na górze (mniej „uciętego” dołu) */
.hero--wiedza .hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* <- tu ustawiasz „punkt kadru” */
}

.hero--wiedza .hero__title{
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 16px);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(24px, 4vw, 40px);
  background: rgba(0,0,0,.45);
  border: 2px solid #000;
  border-radius: 8px;
}

/* Mobile: pokaż CAŁY obraz (bez cięcia) + przenieś tytuł na dół */
@media (max-width: 768px){
  .hero--wiedza { height: 100svh; background:#000; }
  .hero--wiedza .hero__img{
    object-fit: contain;         /* zero przycięcia, mogą być „belki” */
    object-position: center center;
  }
  .hero--wiedza .hero__title{
    top: auto;
    bottom: 24px;
    transform: translateX(-50%);
  }
}


/* === Poradnik – siatka długich kart (1 kolumna zawsze) === */
.article-cards,
.article-cards.article-cards--long{
  display: grid;
  grid-template-columns: 1fr;   /* jedna kolumna */
  gap: 14px;
}

.card--article{
  background:#0c0c0d;
  border:1px solid #1c1c20;
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.card--article h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; font-weight:800; font-size:1.06rem;
}

.card--article h4{
  margin:.6rem 0 .2rem; font-size:1rem; font-weight:800;
}

.card--article p{
  margin:0 0 .75rem; line-height:1.75; color:var(--text);
}

.card-list{ margin:.25rem 0 0; padding-left:18px; }
.card-list--rich > li{ margin-bottom:.6rem; }
.card--article ion-icon{ font-size:22px; }

/* Media query niepotrzebne — zawsze 1 kolumna */




/* === WYMIANA OPON — dedykowany hero bez rozciągania === */
.hero--wymiana{
  position: relative;
  width: 100%;
  height: auto;             /* nadpisuje 100svh z .hero */
  display: block;           /* wyłącz flex z .hero */
  padding: 16px 0 24px;
  overflow: visible;
  background: #000;         /* tło pod banerem */
}

.hero--wymiana .hero__title{
  position: static;         /* tytuł nad obrazem */
  margin: 0 auto 12px;
  transform: none;
  text-align: center;
  padding: 8px 14px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0,0,0,.45);
  border: 2px solid #000;
  border-radius: 8px;
  width: max-content;
}

.hero--wymiana .hero__img{
  position: static;         /* żadnego absolute */
  display: block;
  width: auto;              /* nie rozciągaj szerokości */
  height: auto;             /* nie rozciągaj wysokości */
  max-width: 100%;          /* ale nie wychodź poza ekran */
  max-height: 80vh;         /* opcjonalny limit wysokości */
  object-fit: contain;      /* zero przycięć */
  margin-inline: auto;      /* wyśrodkuj */
}

/* (opcjonalnie) na bardzo małych ekranach możesz zmniejszyć limit wysokości: */
@media (max-width: 480px){
  .hero--wymiana .hero__img{ max-height: 70vh; }
}

/* Mobilnie: pokaż CAŁY obraz w hero Strefy wiedzy */
@media (max-width: 768px){
  .hero--wiedza{ 
    height: 100svh;         /* pełny ekran; będą ewentualnie czarne pasy */
    background: #000;
  }
  .hero--wiedza .hero__img{
    object-fit: contain;     /* NIC nie przycinaj */
    object-position: center; /* wyśrodkuj */
  }
  /* przenieś tytuł niżej, żeby nie zasłaniał środka */
  .hero--wiedza .hero__title{
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
  }
}

/* Laptop/desktop: pokaż CAŁE zdjęcie w hero Strefy wiedzy (bez przycięcia) */
@media (min-width: 900px){
  .hero--wiedza{
    height: 100svh;          /* pełny ekran; mogą pojawić się pasy po bokach/górze */
    background: #000;
  }
  .hero--wiedza .hero__img{
    object-fit: contain !important;  /* nic nie przycinaj */
    object-position: center center !important;
  }
  /* tytuł w bezpiecznym miejscu, żeby nie zasłaniał środka */
  .hero--wiedza .hero__title{
    top: 24px !important;
    bottom: auto !important;
    transform: translateX(-50%);
  }
}