/* ========================================================= Zadrukowane — theme CSS (clean final) ========================================================= */
/* ---------- Design tokens ---------- */
:root{
  --bg:#faf7fb;
  --panel:#ffffff;
  --muted:#7d6a75;
  --text:#4b2e3a;
  --brand:#e65c8f;
  --brand2:#f6a444;
  --brand3:#a74bc2;
  --radius:18px;
  --maxw:1180px;
  --shadow:0 8px 24px rgba(0,0,0,.10);

  /* sekcje / hero */
  --sec-pad:56px; /* padding Y sekcji */
  --hero-pad: calc(var(--sec-pad) * 1.25); /* hero na starcie ~25% większe */
  --hero-scale:1.04; /* delikatna skala startowa */
}

/* ---------- Base ---------- */
*{ 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.55;
  color:var(--text);
  background:
    radial-gradient(1200px 1200px at 80% 30%, rgba(167,75,194,.06), transparent 60%),
    radial-gradient(1200px 1200px at 20% 20%, rgba(230,92,143,.06), transparent 60%),
    linear-gradient(160deg, rgba(255,232,240,.6), rgba(255,249,235,.6));
  overflow-x:hidden; /* dla full-bleed */
}
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--maxw); margin-inline:auto; padding:0 20px }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:999px; padding:.95rem 1.3rem; font-weight:700; border:1px solid transparent;
  cursor:pointer; transition:transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.98) }
.btn.primary{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 10px 26px rgba(230,92,143,.22) }
.btn.ghost{ background:transparent; color:var(--brand3); border:1px solid var(--brand3); }

/* ========================================================= Header — transparentny, full-bleed, przyciski po LEWEJ ========================================================= */
header.site{
  position:sticky; top:0; z-index:50; background:transparent; border:0; box-shadow:none;
}
header.site, .intro{ /* full-bleed tła */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
header.site .container{ /* rozciągnij wewnętrzny wrapper */
  max-width:100%; width:100%; padding-inline:24px; margin:0;
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
}
.nav-links{ display:flex; gap:12px; padding:10px 0; justify-content:flex-start }
.nav-links a{
  display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border-radius:999px; font-weight:700;
  border:1px solid rgba(167,75,194,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  box-shadow:0 6px 16px rgba(167,75,194,.06);
  transition:background .2s, transform .08s, box-shadow .2s;
}
.nav-links a:hover{ background:rgba(255,255,255,.75); transform:translateY(1px) }
header a[href^="#"].is-active{
  background:linear-gradient(90deg, rgba(230,92,143,.18), rgba(246,164,68,.18));
  border-color:transparent;
}

/* ========================================================= HERO — lekko większy start, zbliżone kolumny, chowa się przy scrollu ========================================================= */
body.hero-compact{
  --hero-pad: var(--sec-pad);
  --hero-scale:1
} /* po scrollu: jak sekcja */

.intro{
  padding: var(--hero-pad) 5vw; /* sterowane zmiennÄ… */
  min-height:auto; /* NIE fullscreen */
  position:relative; display:flex; align-items:center; overflow:visible;
  background:
    radial-gradient(70rem 70rem at 18% 20%, rgba(230,92,143,.10), transparent 60%),
    radial-gradient(70rem 70rem at 82% 32%, rgba(167,75,194,.10), transparent 60%),
    linear-gradient(120deg, rgba(255,229,244,.58), rgba(255,248,229,.68));
  transition: padding .35s ease;
}
.intro__grid{
  width:min(var(--maxw), 92vw); /* zawęź treść i wycentruj */
  margin:0 auto; display:grid; align-items:center;
  grid-template-columns: 1.05fr 0.95fr; /* bliĹĽej siebie */
  gap: clamp(14px, 3.2vw, 32px);
}
@media (max-width:980px){
  .intro__grid{ grid-template-columns:1fr; text-align:center }
}
.intro__left{ text-align:left; padding-right: clamp(6px, 1vw, 14px) }
@media (max-width:980px){ .intro__left{ text-align:center } }

.intro__title2{ margin:0 0 .4rem }
.intro__kicker{
  display:block; margin-bottom:.45rem; letter-spacing:.3px;
  font-size:clamp(1rem, 1vw + .5rem, 1.45rem); color:rgba(75,46,58,.85);
}
.intro__brand{
  display:block; font-weight:800; line-height:1.05; font-size:clamp(2.6rem, 5vw, 5.6rem);
  background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95));
}
.intro__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(1rem,2vh,2rem) }
.intro__cta .btn{ padding:clamp(.9rem,1.2vw,1.2rem) clamp(1.2rem,2vw,1.6rem); font-size:clamp(.92rem,1vw,1.05rem) }

/* wspĂłlna skala + parallax (bez konfliktu) */
.intro__left, .intro__title2, .intro__cta, .intro__logo-img{
  --introShift: 0px; transform-origin:left top; transform: translateY(var(--introShift)) scale(var(--hero-scale));
  transition: transform .35s ease;
}
@media (max-width:980px){
  .intro__left, .intro__title2, .intro__cta, .intro__logo-img{ transform-origin:center top }
}

/* logo */
.intro__right{ position:relative; display:grid; place-items:center }
.intro__right::after{
  content:""; position:absolute; inset:-6% -8%;
  background: radial-gradient(60% 60% at 55% 50%, rgba(255,255,255,.75), rgba(255,255,255,0));
  filter: blur(12px); z-index:0; pointer-events:none;
}
.intro__logo-img{
  position:relative; z-index:1; width: clamp(320px, 36vw, 560px); height:auto;
  opacity:.95; object-fit:contain; mix-blend-mode:multiply;
  -webkit-mask-image: radial-gradient(150% 150% at 50% 50%, #000 80%, transparent 100%);
  mask-image: radial-gradient(150% 150% at 50% 50%, #000 80%, transparent 100%);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.18)); border-radius:20px;
}

/* miękki zanik do sekcji niżej (bez ostrej linii) */
.intro::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 90%);
  pointer-events:none; filter:blur(6px); opacity:.9;
}

/* ========================================================= Sekcje ========================================================= */
section{ padding:var(--sec-pad) 0; position:relative; scroll-margin-top:90px }
/* blend separatora nad sekcjami, ale NIE pod headerem */
section:not(.intro)::before{
  content:""; position:absolute; left:0; right:0; top:-70px; height:70px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 95%);
  pointer-events:none; filter:blur(6px); opacity:.9;
}
/* delikatny hover na kartach/sekcjach (nie intro) */
section:not(.intro){ transition: transform .25s ease, box-shadow .25s ease; }
section:not(.intro):hover{ transform: translateY(-2px) scale(1.01); }

/* ========================================================= Tytuły sekcji ========================================================= */
.section-title{ margin:0 0 20px; font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); color:var(--text) }

/* ========================================================= Oferta ========================================================= */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.feature h3{ margin:0 0 6px; font-size:1.08rem; color:var(--brand3); text-shadow:0 1px 0 rgba(255,255,255,.8) }
.feature p{ margin:0; color:var(--muted) }

/* ========================================================= Realizacje (multimedia) ========================================================= */
.realizacje-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
  align-items:stretch;
}

.realizacja-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px 24px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 28px rgba(17,25,39,.08);
}

.realizacja-card__header{ display:flex; flex-direction:column; gap:6px }
.realizacja-card__title{ margin:0; font-size:1.32rem; color:var(--brand3); }

.realizacja-card__media{ display:flex; flex-direction:column; gap:18px }

.realizacja-card__before-after{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.realizacja-card__image-block{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#faf7fb;
  min-height:200px;
}

.realizacja-card__image-block img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.realizacja-card__badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:4px 12px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(17,24,39,.78);
  color:#fff;
  border-radius:999px;
}

.before-after-trigger{
  position:relative;
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:#0f172a;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.before-after-trigger:hover,
.before-after-trigger:focus-visible{
  transform: translateY(-2px) scale(1.01);
  box-shadow:0 18px 32px rgba(17,24,39,.22);
}

.before-after-trigger:focus-visible{
  outline:3px solid var(--brand3);
  outline-offset:4px;
}

.before-after-trigger img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  min-height:220px;
  transition: transform .6s ease;
}

.before-after-trigger:hover img{
  transform: scale(1.02);
}

.before-after-trigger__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:18px 20px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.75) 100%);
}

.before-after-trigger__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  box-shadow:0 10px 20px rgba(15,23,42,.3);
}

.realizacja-card__videos{
  display:grid;
  gap:18px;
}

.realizacja-card__video{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#111827;
}

.realizacja-card__video iframe,
.realizacja-card__video video{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  background:#000;
}

.realizacja-card__video video{
  height:auto;
}

.realizacja-card__video-link{ margin:0; font-size:.95rem; }
.realizacja-card__video-link a{ color:var(--brand3); text-decoration:underline; word-break:break-word; }

.realizacja-card__gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
}

.realizacja-card__gallery img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

.realizacja-card__content{
  font-size:.98rem;
  color:var(--muted);
}

#realizacje .container{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
}

@media (max-width:1080px){
  .realizacje-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
}

@media (max-width:780px){
  .realizacja-card{ padding:20px; }
  .realizacja-card__before-after{ gap:12px; }
}

@media (max-width:520px){
  .realizacje-grid{ grid-template-columns:1fr; }
}
/* ========================================================= Kroki / „Jak to działa” ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }
.steps .card{
  background:#fff; border-radius:18px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 22px 24px; min-height:170px;
}
.step .num, .steps [class*="num"], .steps .badge, .steps .step__num{ display:none } /* usunięte numerki */
.step strong{ display:block; font-size:1.16rem; margin:0 0 6px; color:var(--brand3); text-shadow:0 1px 0 rgba(255,255,255,.9) }
.step .small{ font-size:1rem; color:var(--muted) }

/* Reveal sekwencyjny dla steps/features (dodaj .is-visible z JS) */
.steps .card, .features .card{ opacity:0; transform: translateY(14px) scale(.985); filter: blur(2px); transition: all .55s ease }
.steps .card.is-visible, .features .card.is-visible{ opacity:1; transform:none; filter:none }
.steps .card:nth-child(1){ transition-delay:.05s }
.steps .card:nth-child(2){ transition-delay:.12s }
.steps .card:nth-child(3){ transition-delay:.19s }
.steps .card:nth-child(4){ transition-delay:.26s }

/* ========================================================= Kontakt / Formularze (CF7) ========================================================= */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:980px){ .contact{ grid-template-columns:1fr } }

.wpcf7 form .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px }
.wpcf7 form .field.half{ grid-column:auto }
.wpcf7 form label{ font-weight:600; font-size:.92rem; color:var(--text) }
.wpcf7 form .field{ display:flex; flex-direction:column; gap:6px }
.wpcf7 form input, .wpcf7 form select, .wpcf7 form textarea{
  width:100%; padding:12px 14px; font-size:1rem; border:1px solid rgba(0,0,0,.12); border-radius:12px;
  background:#ffeaf4; outline:none; transition: box-shadow .15s, border-color .15s; font:inherit; color:var(--text);
}
.wpcf7 form textarea{ min-height:120px; resize:vertical }
.wpcf7 form input:focus, .wpcf7 form select:focus, .wpcf7 form textarea:focus{
  box-shadow:0 0 0 3px rgba(233,30,99,.15); border-color:rgba(233,30,99,.35);
}
.wpcf7 form .wpcf7-submit{
  display:inline-block; padding:12px 18px; border-radius:999px; border:none;
  background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#fff; font-weight:700;
  box-shadow:0 6px 14px rgba(233,30,99,.25); cursor:pointer;
}
.wpcf7 form .wpcf7-response-output{ margin-top:10px; border-radius:10px; padding:10px 12px }

/* Checkbox RODO — „ładny”, gradientowy */
.wpcf7 form input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; display:inline-block; vertical-align:middle;
  border:2px solid #f6a444; border-radius:4px; background:#fff; position:relative; cursor:pointer;
  transition:.15s border-color,.15s background; margin-right:6px; box-shadow:none; outline:none;
}
.wpcf7 form input[type="checkbox"]:hover{ border-color:#f08b2c }
.wpcf7 form input[type="checkbox"]:focus{ box-shadow:0 0 0 3px rgba(246,164,68,.25) }
.wpcf7 form input[type="checkbox"]:checked{
  background: linear-gradient(90deg, var(--brand), var(--brand2)); border-color:transparent;
}
.wpcf7 form input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:11px; top:5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ========================================================= Stopka — pełna szerokość, symetria 1/1/1, jedna subtelna linia ========================================================= */
footer{
  position:relative; padding:34px 0 36px; color:var(--muted);
  background:
    radial-gradient(900px 900px at 15% 20%, rgba(230,92,143,.06), transparent 60%),
    radial-gradient(900px 900px at 85% 30%, rgba(167,75,194,.06), transparent 60%),
    #fffafc;
  border-top:1px solid rgba(0,0,0,.08); /* jedna linia */
}
footer::before{ display:none } /* brak drugiej linii */
.site-footer .container{ max-width:100%; width:100%; padding-inline:24px }
footer .grid{
  display:grid; grid-template-columns:minmax(260px,1fr) 1fr minmax(260px,1fr);
  align-items:center; gap:24px;
}
.site-footer .footer-col{ display:flex; align-items:center; gap:16px }
.site-footer .footer-links{ display:flex; gap:14px; margin:0; padding:0; list-style:none; flex-wrap:wrap }
.site-footer strong{ margin-right:8px; white-space:nowrap }
footer p{ margin:0 }
footer img{
  height:40px; padding:6px; border-radius:12px;
  background:linear-gradient(135deg,#fff2f7,#ffeedd);
  box-shadow:0 3px 8px rgba(0,0,0,0.12);
}
footer a{ color:inherit }
footer a:hover{ text-decoration:underline }

@media (max-width:980px){
  .features{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr }
  .contact{ grid-template-columns:1fr }
  footer .grid{ grid-template-columns:1fr; gap:12px; }
}

/* ========================================================= Reveal on scroll (wymaga html.js) ========================================================= */
html.js .reveal{ opacity:0; transform: translateY(12px) scale(.98); filter:blur(2px); transition: all .5s ease }
html.js .reveal.is-visible{ opacity:1; transform:none; filter:none }
.reveal.delay-1{ transition-delay:.06s }
.reveal.delay-2{ transition-delay:.12s }

/* ========================================================= Lightbox (popup) ========================================================= */
#realizacjaPopup{
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); z-index: 99999;
}
#realizacjaPopup.active{ display: flex }
#realizacjaPopup .popup-inner{
  position: relative; width: min(90vw, 1200px); height: min(80vh, 800px);
  background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding:0;
}
#realizacjaPopup img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
#realizacjaPopup .close-btn, #realizacjaPopup .prev-btn, #realizacjaPopup .next-btn{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.95);
  border:0; cursor:pointer; font-size:1.6rem; width:42px; height:42px; line-height:40px; text-align:center; border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.2); z-index:1000;
}
#realizacjaPopup .prev-btn{ left:10px }
#realizacjaPopup .next-btn{ right:10px }
#realizacjaPopup .close-btn{ top:10px; right:10px; transform:none; font-size:1.4rem; width:36px; height:36px; line-height:34px }

/* =================== HOTFIX: przywrĂłcenie stanu + hero bliĹĽej =================== */
/* 0) HERO – zawsze widoczny (gdyby IO nie zdążył dodać .is-visible) */
.intro .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }

/* 1) HEADER – transparentny, bez linii; przyciski po LEWEJ */
header.site, header.site.scrolled{ background: transparent !important; border: 0 !important; box-shadow: none !important; }
header.site .container{
  max-width:100% !important; width:100% !important; padding-inline:24px !important; margin:0 !important;
  display:flex; align-items:center; justify-content:flex-start !important; gap:12px;
}
header .nav-links{ justify-content:flex-start !important; }
header.site::before, header.site::after, header .container::before, header .container::after{ display:none !important; }

/* 2) HERO – kolumny BLIŻEJ (bez nachodzenia) */
.intro__grid{
  width: min(var(--maxw), 94vw) !important; /* lekko ciaśniej */
  gap: clamp(10px, 1.8vw, 22px) !important; /* mniejsza przerwa */
}
.intro__left{ padding-right: clamp(4px, .8vw, 10px) !important; }
.intro__logo-img{ width: clamp(320px, 33vw, 520px) !important; }

/* 3) „Jak to działa” — usuń numerki (na pewno) */
.steps .num, .steps [class*="num"], .steps .badge, .steps .step__num{ display:none !important; }

/* 4) STOPKA — pełna szerokość, jedna linia, układ 1/1/1 */
.site-footer .container{ max-width:100% !important; width:100% !important; padding-inline:24px !important; }
footer::before{ display:none !important; } /* ĹĽadnej drugiej linii */
footer{ border-top:1px solid rgba(0,0,0,.08) !important; } /* jedna, subtelna linia */
.site-footer .grid{
  display:grid !important; grid-template-columns: minmax(260px,1fr) 1fr minmax(260px,1fr) !important;
  align-items:center !important; gap:24px !important;
}
.site-footer .footer-col:first-child{ justify-self:start !important; }
.site-footer nav.footer-col{ justify-self:center !important; }
.site-footer .footer-col:last-child{ justify-self:end !important; }
.site-footer .footer-links{
  display:flex !important; gap:14px !important; margin:0 !important; padding:0 !important; list-style:none !important; flex-wrap:wrap !important;
}
footer p{ margin:0 !important; }

/* =============== MOBILE-ONLY FIX (≤ 640px) =============== */
@media (max-width:640px){
  /* 1) STOPKA — pionowo, bez poziomego scrolla */
  html, body, footer, .site-footer{ overflow-x:hidden; }
  .site-footer .container{ width:100%; max-width:100%; padding-inline:16px !important; }
  .site-footer .grid{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:12px !important; width:100% !important;
  }
  .site-footer .footer-col{ width:100% !important; display:flex; flex-wrap:wrap; gap:10px; }
  .site-footer .footer-links{ width:100%; display:flex; flex-wrap:wrap; gap:10px; }
  .site-footer .footer-links a{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
  footer img{ height:34px; max-width:100%; }

  /* 3) PRZYCISK „Wyślij wycenę” — center */
  .wpcf7 form .wpcf7-submit{ display:block !important; margin: 14px auto 0 !important; /* wyśrodkuj */ }

  /* 4) Tytuły sekcji — na środku (mobile) */
  .section-title{ text-align:center !important; }
}

/* === Mobile: centrowanie tylko przycisku "ZamĂłw wycenÄ™" w hero === */
@media (max-width:640px){
  .intro__cta{ justify-content:center !important; } /* oĹ› X w kontenerze */
  .intro__cta .btn.primary{ display:block !important; margin-inline:auto !important; /* wyśrodkuj sam przycisk */ }
}

/* ===== MOBILE (≤768px) ===== */
/* 1) Header: sticky na telefonie + linki widoczne */
@media (max-width:768px){
  header.site{
    position: sticky; top: 0; z-index: 3000; background: transparent; /* zostawiam transparent, możesz podmienić na rgba(...) jeśli chcesz „glass” */
  }
  header.site .container{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; /* wyśrodkuj linki */
    gap:10px; padding-block:10px;
  }
  .nav-links{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:10px; }
  .nav-links a{ padding:.55rem .85rem; }
}

/* 2) HERO: ukryj logo, zostaw tylko napis/CTA */
@media (max-width:768px){
  /* poprawny selektor z podwójnym podkreślnikiem */
  .intro__right, .intro__logo-img{ display: none !important; /* schowaj logo i jego kontener */ }

  /* układ i treść */
  .intro__grid{ grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 12px; }
  .intro__left{ display:block !important; text-align:center !important; }

  /* upewnij się, że tekst jest widoczny, nawet jeśli wcześniej był ukrywany */
  .intro__kicker, .intro__title2, .intro__brand{ display:block !important; }
  .intro__cta{ display:flex !important; justify-content:center !important; }
}

/* ================= MOBILE FIX: hero ostre + lepszy blend + środek ================= */
@media (max-width:768px){
  /* 1) HERO: bez skalowania/transformów na tekście => zero rozmycia */
  :root{ --hero-scale: 1 !important; }
  .intro__left, .intro__title2, .intro__brand, .intro__kicker, .intro__cta{
    transform: none !important; filter: none !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }

  /* 2) Delikatniejszy fade na dole hero + brak drugiego blendu z sekcji niĹĽej */
  .intro{ padding-bottom: calc(var(--sec-pad) * 0.9) !important; /* trochę ciaśniej */ }
  .intro::after{
    height: 72px !important; /* było 120px */
    filter: blur(3px) !important; /* było 6px */
    opacity: .75 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 100%) !important;
  }
  /* usuń separator nad PIERWSZĄ sekcją, żeby nie było „podwójnej mgiełki” */
  section:first-of-type::before{ display:none !important; }

  /* 3) Nagłówki sekcji i linki headera na środku */
  .section-title, section .section-title, section h2{
    text-align:center !important; margin-left:auto !important; margin-right:auto !important;
  }
  header.site .container{ justify-content:center !important; }
  .nav-links{ width:100%; justify-content:center !important; gap:10px !important; }
}

/* ======================= MOBILE (≤768px): hide header + logo nad tekstem + blend ======================= */
@media (max-width:768px){
  /* 1) Header off i brak offsetu dla kotwic */
  header.site{ display:none !important; }
  section{ scroll-margin-top:0 !important; }

  /* 2) Hero: logo u góry, tekst pod spodem, wszystko na środek */
  .intro{ isolation:isolate; } /* blend w obrębie hero */
  .intro__grid{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "right"  /* logo */
      "left";  /* tekst/CTA */
    justify-items:center; text-align:center; gap:12px;
  }
  .intro__right{
    grid-area:right; position:relative; display:grid !important; place-items:center; z-index:1;
  }
  .intro__left {
    grid-area:left; display:block !important; text-align:center !important; position:relative; z-index:2;
  }
  .intro__cta { justify-content:center !important; }

  /* 3) Logo: BLEND FIX NA MOBILE — wyłącz maskę (Safari bug) i wymuś blend */
  .intro__logo-img{
    display:block !important;
    width: clamp(260px, 68vw, 520px) !important;
    height:auto !important;
    margin:0 auto !important;

    /* kluczowe: blend z tłem hero */
    mix-blend-mode: multiply !important;
    opacity:.98;

    /* FIX: iOS/Safari problem z mix-blend-mode + mask-image -> wyłącz maskę na mobile */
    -webkit-mask-image: none !important;
    mask-image: none !important;

    /* stabilizacja kompozycji */
    position:relative; z-index:1;
    pointer-events:none; -webkit-user-drag:none; user-select:none; backface-visibility:hidden;

    box-shadow:none !important; filter:none !important; border-radius:18px;
  }

  /* 4) Tekst i CTA ostre (bez skalowania) i nad fade’em na dole */
  :root{ --hero-scale:1 !important; }
  .intro__kicker, .intro__title2, .intro__brand, .intro__cta{
    transform:none !important; filter:none !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    position:relative; z-index:2;
  }

  /* 5) Łagodniejszy zanik do następnej sekcji (bez „zamleczenia”) */
  .intro::after{
    height:56px !important; opacity:.6 !important; filter:blur(3px) !important;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 100%) !important; z-index:1 !important;
  }
  section:first-of-type::before{ display:none !important; } /* bez podwójnego fade’u */

  /* 6) Nagłówki sekcji na środku */
  .section-title, section .section-title, section h2{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
}

.site-footer .footer-links a{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
footer img{ height:34px; max-width:100%; }

/* tytuły sekcji – center */
.section-title{ text-align:center !important; }

/* przycisk CF7 – center */
.wpcf7 form .wpcf7-submit{ display:block !important; margin:14px auto 0 !important; }
}

/* ========================================================= Polityka prywatności / RODO — kolory jak w sekcjach ========================================================= */
section.privacy h1 {
  text-align: center;
  margin: 0 0 20px;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  color: var(--brand); /* różowy jak tytuły sekcji */
}

section.privacy h2 {
  margin: 2rem 0 1rem;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 700;
  color: var(--brand3); /* fiolet jak nagłówki w kartach */
  text-align: left;
}

section.privacy h3 {
  margin: 1.2rem 0 .6rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand3); /* teĹĽ fiolet, ale mniejszy */
  text-align: left;
}

section.privacy p,
section.privacy li {
  color: var(--text); /* zwykły kolor tekstu */
  font-size: 1.05rem;
  line-height: 1.65;
}

section.privacy strong {
  color: var(--brand3);
  font-weight: 700;
}

a {
  color: var(--text); /* normalny kolor tekstu */
  font-weight: 600;
  text-decoration: underline;
  transition: color .25s ease;
}

a:hover {
  color: var(--brand); /* różowy przy najechaniu */
}

p {
  word-break: normal;
  white-space: normal;
}

p span.nbsp {
  white-space: nowrap;
}\nbody.before-after-modal-open{
  overflow:hidden;
}

.before-after-modal{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.before-after-modal[hidden]{
  display:none;
}

.before-after-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(6px);
}

.before-after-modal__dialog{
  position:relative;
  width:min(960px, 100%);
  max-height:90vh;
  background:#0b1220;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(15,23,42,.5);
}

.before-after-modal__body{
  padding:32px;
}

.before-after-modal__close{
  position:absolute;
  top:16px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(15,23,42,.7);
  color:#fff;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .3s ease, transform .3s ease;
}

.before-after-modal__close:hover{
  background:rgba(255,255,255,.18);
  transform:scale(1.05);
}

.before-after-modal__close:focus-visible{
  outline:3px solid rgba(255,255,255,.7);
  outline-offset:3px;
}

.before-after-slider{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  max-height:calc(90vh - 120px);
  border-radius:20px;
  overflow:hidden;
  background:#0b1220;
  cursor:col-resize;
  --slider-position:50;
}

.before-after-slider__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.before-after-slider__image.before{
  z-index:2;
  clip-path: inset(0 calc(100% - (var(--slider-position, 50) * 1%)) 0 0);
}

.before-after-slider__image.after{
  z-index:1;
}

.before-after-slider__divider{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  left:calc(var(--slider-position, 50) * 1%);
  transform:translateX(-50%);
  background:rgba(255,255,255,.7);
  pointer-events:none;
}

.before-after-slider__handle{
  position:absolute;
  top:50%;
  left:calc(var(--slider-position, 50) * 1%);
  transform:translate(-50%, -50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(15,23,42,.85);
  border:2px solid rgba(255,255,255,.95);
  pointer-events:none;
  box-shadow:0 14px 32px rgba(15,23,42,.4);
}

.before-after-slider__handle::before,
.before-after-slider__handle::after{
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:8px solid transparent;
}

.before-after-slider__handle::before{
  left:9px;
  border-right-color:#fff;
}

.before-after-slider__handle::after{
  right:9px;
  border-left-color:#fff;
}

.before-after-slider__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:col-resize;
}

.before-after-slider__caption{
  position:absolute;
  bottom:18px;
  padding:6px 14px;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(15,23,42,.65);
  border-radius:999px;
  pointer-events:none;
}

.before-after-slider__caption.before{
  left:20px;
}

.before-after-slider__caption.after{
  right:20px;
}

@media (max-width: 768px){
  .before-after-modal{
    padding:20px;
  }
  .before-after-modal__body{
    padding:22px;
  }
  .before-after-slider{
    aspect-ratio:1 / 1;
    max-height:calc(90vh - 100px);
  }
  .before-after-slider__handle{
    width:38px;
    height:38px;
  }
  .before-after-slider__caption{
    font-size:.8rem;
    padding:6px 12px;
  }
}

@media (max-width: 520px){
  .before-after-modal__close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
  }
  .before-after-modal__body{
    padding:18px;
  }
  .before-after-trigger__label{
    padding:8px 12px;
    font-size:.75rem;
  }
}