/* =========================================================
   WZORZEC SATELITY - design zaimportowany z Claude Design
   (projekt "Czyszczenie wtryskiwaczy", Strona-glowna.dc.html)
   Runtime x-dc/style-hover zamieniony na zwykly CSS.
   Jeden plik obsluguje wszystkie jezyki - tlumaczy sie tylko HTML.
   ========================================================= */

:root{
  --purple:#8e1b96;
  --purple-dark:#7d1685;
  --purple-darker:#6d1274;
  --bg:#f4f4f4;
  --paper:#fff;
  --ink:#333;
  --ink-body:#3d3d3d;
  --ink-head:#2c2c2c;
  --nav:#3b3b3b;
  --dash:#cfcfcf;
  --dash-2:#c9c9c9;
  --ph:#ececec;
  --ph-dark:#d9d9d9;
  --ph-mid:#cfcfcf;
  --ph-line:rgba(0,0,0,.05);
  --maxw:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font-family:Lato,Helvetica,Arial,sans-serif;
  color:var(--ink);
  min-height:100vh;
  padding-bottom:60px;
  -webkit-text-size-adjust:100%;
}
a{color:var(--purple);text-decoration:none}
a:hover{color:var(--purple-darker)}
img{max-width:100%;height:auto}

/* biala kartka na szarym tle */
.paper{max-width:var(--maxw);margin:0 auto;background:var(--paper)}

/* ---------- placeholdery zdjec (jak w makiecie) ---------- */
.ph{
  background-color:var(--ph);
  background-image:repeating-linear-gradient(45deg,var(--ph-line) 0 8px,transparent 8px 18px);
}
.ph-lbl{
  font-family:'Courier New',monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#6f6f6f;
}

/* ---------- GORNY PASEK: logo + kontakt ---------- */
.topbar{display:flex;align-items:stretch;justify-content:space-between;background:var(--paper);flex-wrap:wrap}
.brand{background:var(--purple);color:#fff;padding:18px 34px;display:flex;align-items:center}
.brand:hover{background:var(--purple-dark);color:#fff}
.brand span{
  font-family:'Lobster Two',Georgia,cursive;font-style:italic;font-weight:700;
  font-size:33px;line-height:1.1;color:#fff;
}
.topcontact{
  background:var(--purple);color:#fff;padding:18px 44px;
  display:flex;align-items:center;gap:14px;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:22px;letter-spacing:.01em;
}
.topcontact .ic{
  width:26px;height:26px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--purple);font-size:15px;flex:none;
}
.slot{opacity:.85;font-size:17px;font-weight:500}

/* ---------- NAWIGACJA ---------- */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:22px 34px 26px;background:var(--paper)}
.nav a{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:17px;
  color:var(--nav);padding:6px 8px;
}
.nav a:hover{color:var(--purple)}
.nav a.active{color:var(--purple)}
.nav a.off{color:#a8a8a8}
.nav a.off:hover{color:#8f8f8f}
.nav a.wide{flex-basis:100%}

/* ---------- HERO (tylko strona glowna) ---------- */
.hero{
  position:relative;height:430px;
  background-color:var(--ph-dark);
  background-image:repeating-linear-gradient(45deg,var(--ph-line) 0 8px,transparent 8px 18px);
}
.hero>.ph-lbl{position:absolute;top:18px;right:22px;font-size:12px;letter-spacing:.12em;color:#7a7a7a}
.hero-boxes{position:absolute;left:0;bottom:60px;max-width:640px}
.hero-boxes .b1{
  background:rgba(51,51,51,.86);color:#fff;padding:22px 34px;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:26px;
}
.hero-boxes .b2{
  background:rgba(30,30,30,.9);color:#fff;padding:20px 34px;margin-top:8px;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:20px;line-height:1.45;
}

/* ---------- KAFLE (strona glowna) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.tile{position:relative;display:block;height:245px}
.tile.mid{background-color:var(--ph)}
.tile.dim{background-color:var(--ph-mid)}
.tile>.ph-lbl{position:absolute;top:14px;left:16px}
.corner{
  position:absolute;left:0;bottom:0;background:var(--purple);color:#fff;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:17px;letter-spacing:.03em;
  padding:14px 22px;display:flex;align-items:center;gap:16px;
}
.tile:hover .corner{background:var(--purple-dark)}
.corner .arr{font-size:14px}
.tile-contact{position:relative;min-height:245px;background:#3f3f3f;color:#fff;padding:26px 30px 76px}
.tile-contact h2{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:20px;
  margin:0 0 14px;color:#fff;text-transform:none;border:0;padding:0;
}
.tile-contact p{font-size:15.5px;line-height:1.55;margin:0 0 14px;color:#ececec;max-width:none}
.tile-contact p:last-of-type{margin:0}
.tile-contact .slot{color:#cfcfcf;font-style:italic}

/* ---------- TRESC ---------- */
main{background:var(--paper);padding:8px 34px 40px}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:46px;align-items:start;
  padding:34px 0;border-top:1px dashed var(--dash);
}
.row.full{display:block}
.row:first-of-type{border-top:0;padding-top:10px}
.rail .shot{
  height:210px;display:grid;place-items:center;text-align:center;padding:16px;
}
.rail .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.rail .th{aspect-ratio:1/1;background-image:repeating-linear-gradient(45deg,var(--ph-line) 0 6px,transparent 6px 13px);background-color:#e2e2e2}
.rail .th.sel{outline:3px solid var(--purple);outline-offset:-3px}

h1{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:700;font-size:30px;line-height:1.28;
  text-transform:uppercase;color:var(--purple);margin:6px 0 26px;text-wrap:pretty;
}
.lead{font-size:18.5px;line-height:1.6;color:var(--ink-body);margin:0 0 24px;max-width:74ch}
h2{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:700;font-size:25px;line-height:1.3;
  text-transform:uppercase;color:var(--purple);margin:0 0 18px;text-wrap:pretty;
}
h3{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:24px;color:var(--ink-head);margin:28px 0 16px}
p{font-size:17px;line-height:1.6;color:var(--ink-body);margin:0 0 18px;max-width:74ch}
ul,ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:12px;max-width:74ch}
li{font-size:17px;line-height:1.5;color:var(--ink-body)}
strong{font-weight:700;color:var(--ink-head)}

/* ---------- TABELE ---------- */
.table-scroll{overflow-x:auto;margin:0 0 24px;border:1px solid #e6e6e6}
table{width:100%;border-collapse:collapse;background:#fff;font-size:15.5px;min-width:560px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #ededed;vertical-align:top}
th{
  background:var(--purple);color:#fff;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:0;
}
td{color:var(--ink-body);line-height:1.5}
tbody tr:nth-child(even) td{background:#fafafa}
tr:last-child td{border-bottom:0}

/* ---------- FAQ (bez JS) ---------- */
.faq{margin:10px 0 26px;border-top:1px dashed var(--dash)}
.faq details{border-bottom:1px dashed var(--dash);background:#fff}
.faq summary{
  cursor:pointer;padding:16px 2px;list-style:none;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:19px;color:var(--ink-head);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-weight:600;font-size:23px;line-height:1;flex:none}
.faq details[open] summary{color:var(--purple)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--purple)}
.faq .answer{padding:0 2px 18px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- CTA ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;background:var(--purple);color:#fff;
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;font-size:17px;letter-spacing:.03em;
  padding:14px 24px;
}
.btn:hover{background:var(--purple-dark);color:#fff}

/* ---------- BOKSY ---------- */
.box{border-left:4px solid var(--purple);background:#faf6fb;padding:18px 22px;margin:0 0 22px}
.box p:last-child,.box ul:last-child{margin-bottom:0}

/* ---------- STOPKA ---------- */
.site-footer{border-top:1px dashed var(--dash-2);margin:28px 0 0;padding:26px 34px 34px;background:var(--paper)}
.site-footer .copy{font-size:15px;color:#8a8a8a}
.site-footer .flinks{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 20px;max-width:none}
.site-footer .flinks a{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:15px;color:var(--nav)}
.site-footer .flinks a:hover{color:var(--purple)}

/* ---------- RESPONSYWNOSC ---------- */
@media(max-width:1000px){
  .row{grid-template-columns:1fr;gap:28px}
  .rail{max-width:420px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile-contact{grid-column:1/-1}
}
@media(max-width:720px){
  body{padding-bottom:30px}
  .topbar{flex-direction:column}
  .brand,.topcontact{padding:16px 20px;justify-content:center}
  .brand span{font-size:26px}
  .topcontact{font-size:19px}
  .nav{padding:16px 20px 20px;gap:2px 8px}
  .nav a{font-size:15.5px;padding:5px 6px}
  .hero{height:320px}
  .hero-boxes{bottom:24px;max-width:100%}
  .hero-boxes .b1{padding:16px 20px;font-size:21px}
  .hero-boxes .b2{padding:14px 20px;font-size:17px}
  .tiles{grid-template-columns:1fr}
  main{padding:8px 20px 30px}
  h1{font-size:24px}
  h2{font-size:21px}
  h3{font-size:20px}
  p,li{font-size:16.5px}
  .site-footer{padding:22px 20px 28px}
}

.topright{display:flex;align-items:stretch}
.langsw{display:flex;align-items:center;gap:2px;padding:0 16px;background:#fff}
.langsw a{font-family:Oswald,sans-serif;font-weight:600;font-size:14px;color:#8e1b96;border:1px solid #e0cfe2;padding:5px 10px;border-radius:3px}
.langsw a:hover{background:#f7eef8}
.langsw a.on{background:#8e1b96;color:#fff;border-color:#8e1b96}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 -34px;align-items:stretch}
.kontakt-dane{padding:8px 34px 34px}
.kontakt-dane p{font-size:17px;line-height:1.6;margin:0 0 18px}
.kontakt-form{margin-top:26px}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.kontakt-form input,.kontakt-form textarea{
  width:100%;background:#ececec;border:0;border-radius:0;padding:18px 20px;
  font-family:Lato,Helvetica,Arial,sans-serif;font-size:16px;color:#333;resize:vertical}
.kontakt-form input::placeholder,.kontakt-form textarea::placeholder{color:#8a8a8a}
.kontakt-form input:focus,.kontakt-form textarea:focus{outline:2px solid #8e1b96;outline-offset:-2px}
.ff-send{display:flex;justify-content:flex-end;margin-top:16px}
.ff-send .btn{border:0;cursor:pointer;font-size:18px;padding:16px 30px}
.kontakt-mapa{min-height:520px;position:relative;background:#e6e6e6}
.kontakt-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:900px){
  .kontakt-grid{grid-template-columns:1fr;margin:0}
  .kontakt-dane{padding:8px 0 24px}
  .ff-row{grid-template-columns:1fr}
  .kontakt-mapa{min-height:340px}
}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:26px 0 8px}
.gallery .shot{margin:0;border:1px solid #e2e2e2;background:#fafafa;overflow:hidden}
.gallery img{display:block;width:100%;height:210px;object-fit:cover}
.hero{background-size:cover;background-position:center}
.tile{background-size:cover;background-position:center}
.tile .ph-lbl{display:none}
@media(max-width:720px){.gallery img{height:180px}}
@media(max-width:720px){.topright{flex-direction:column;width:100%}.langsw{justify-content:center;padding:10px 0}}