:root{--maxw:1120px;--gap:1rem;--radius:20px;--brand:#0a7ea3;--ink:#0f172a;--muted:#475569;--bg:#ffffff;--alt:#f6f8fb}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
.container{max-width:var(--maxw);margin:auto;padding:clamp(16px,2vw,24px)}
.topbar{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 16px;position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #eee;z-index:10}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
.navlink{color:var(--ink);text-decoration:none;margin:0 4px}
.btn{display:inline-block;border:1px solid #cbd5e1;padding:.7rem 1rem;border-radius:999px;text-decoration:none;color:var(--ink);background:#fff;transition:.2s}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--small{padding:.45rem .8rem}
.lead{font-size:1.125rem;color:var(--muted);max-width:60ch}
.hero{display:grid;gap:clamp(16px,3vw,24px);align-items:center}
.hero__content{display:grid;gap:10px}
.section{padding:clamp(28px,5vw,60px) 0}
.section--alt{background:var(--alt)}
.section--gallery{padding-bottom:80px}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.maxw{max-width:70ch}
.card,.tile{border:1px solid #e2e8f0;border-radius:var(--radius);overflow:hidden;background:#fff}
.card img,.tile img{width:100%;height:auto;display:block}
.card figcaption,.tile figcaption{padding:12px 14px}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;list-style:none;padding:0;margin:16px 0}
.benefits li{border:1px solid #e2e8f0;border-radius:14px;padding:12px;background:#fff}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;list-style:none;padding:0}
.steps li{position:relative;border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#fff}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;top:-10px;left:-10px;background:var(--brand);color:#fff;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;font-weight:700}
.site-footer{background:#0b1220;color:#e5e7eb;margin-top:40px}
.footer-inner{max-width:var(--maxw);margin:auto;padding:24px}
.legal{font-size:.85rem;color:var(--muted)}
.hp{position:absolute!important;left:-9999px!important}
/* Before/After component */
.before-after{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid #e2e8f0;touch-action:none}
.before-after__img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.before-after__img--before{clip-path:inset(0 50% 0 0)}
.before-after__handle{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:3px;background:var(--brand);box-shadow:0 0 0 2px rgba(255,255,255,.8) inset}
.before-after__handle:after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:999px;border:2px solid var(--brand);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}

.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:.95rem}
.form input,.form select,.form textarea{border:1px solid #cbd5e1;border-radius:12px;padding:.7rem 1rem;font:inherit}
.form button{justify-self:start}
@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px)}
}

/* Fallback + wyższa specyficzność: .section#solution */
.section#solution {
  /* fallback dla przeglądarek bez clamp i gdyby coś nadpisało */
  padding: 40px 12px;          /* min. odstęp > 7px */
  background: var(--alt);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
}

/* Jeśli jest wsparcie dla clamp — nadpisz lepszymi wartościami */
@supports (padding: clamp(1px, 1vw, 2px)) {
  .section#solution {
    padding: clamp(28px, 5vw, 60px) clamp(12px, 2.5vw, 28px);
  }
}

/* Zabezpieczenie przed margin-collapsing nagłówków/akapitów */
.section#solution > *:first-child { margin-top: 0; }
.section#solution > *:last-child  { margin-bottom: 0; }

/* (opcjonalnie) ciut większe „pigułki” */
.section#solution .benefits li { padding: 12px 14px; }

.section#solution p,
.section#solution .lead,
.section#solution .maxw {
  max-width: none; /* pozwala płynąć na całą szerokość */
}

/* Sekcja HOW — wygodne odstępy i ramka */
.section#how,
section.how {                    /* obsłuż obie nazwy na wszelki wypadek */
  padding: 40px 12px;            /* fallback (min. odstęp) */
  background: var(--alt);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
}

/* Jeśli jest wsparcie dla clamp — ładniejsze skalowanie */
@supports (padding: clamp(1px, 1vw, 2px)) {
  .section#how,
  section.how {
    padding: clamp(28px, 5vw, 60px) clamp(12px, 2.5vw, 28px);
  }
}

/* Zapobiegamy „collapsing margins” pierwszego/ostatniego elementu */
.section#how > *:first-child,
section.how > *:first-child { margin-top: 0; }
.section#how > *:last-child,
section.how > *:last-child  { margin-bottom: 0; }

/* Kroki — więcej luzu w środku i bez nachodzenia numerków */
.section#how .steps li,
section.how .steps li {
  padding: 14px 20px 14px 48px;  /* więcej z lewej pod badge */
}

.section#how .steps li:before,
section.how .steps li:before {
  top: 14px;                     /* było -10px – teraz w środku pudełka */
  left: 14px;
}

/* --- Progress modal --- */
.progress-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  display:none;align-items:center;justify-content:center;z-index:1000;
  backdrop-filter:saturate(140%) blur(2px)
}
.progress-dialog{
  width:min(520px,92vw);background:#fff;border-radius:16px;border:1px solid #e2e8f0;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:16px 18px
}
.progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.progress-title{font-weight:700;margin:0}
.progress-close{appearance:none;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.progress-steps{list-style:none;padding:0;margin:8px 0 12px 0;display:grid;gap:6px}
.progress-steps li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:#64748b}
.progress-steps li .dot{width:18px;height:18px;border-radius:999px;border:2px solid #cbd5e1;display:inline-block}
.progress-steps li.active{color:#0f172a}
.progress-steps li.active .dot{border-color:var(--brand,#0a7ea3);background:var(--brand,#0a7ea3)}
.progress-steps li.done{color:#0f172a}
.progress-steps li.done .dot{border-color:#22c55e;background:#22c55e}
.progress-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:10px 0 4px 0}
.progress-bar > b{display:block;height:100%;width:0%;background:var(--brand,#0a7ea3);transition:width .4s ease}
.progress-note{font-size:.85rem;color:#64748b;margin:0}
.progress-error{color:#b91c1c}
.progress-ok{color:#065f46}
.progress-ok:before{content:"✓";margin-right:4px}
/* Wymiary – układ i estetyka */
.dims .dims-list{
  display:grid;
  gap:.75rem 1rem;
}
.dims .dim-row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .5rem 1rem;
  align-items:end;
}
@media (max-width:700px){
  .dims .dim-row{
    grid-template-columns: 1fr 1fr;
  }
  .dims .dim-row .dim-del{ justify-self:start; }
}
.dims .dims-actions{
  margin-top:.25rem;
}