/* =====================================================================
   LUCAS-VAG-MOTORS — arkusz stylów
   Motyw: jasny, „warsztatowy blueprint". Biała karta na jasnym papierze,
   granatowy tusz, pomarańczowy akcent akcji, siatka rysunku technicznego.
   ===================================================================== */

:root{
  /* --- kolory --- */
  --paper:#ffffff;
  --paper-2:#f5f6f8;
  --paper-3:#eaedf1;
  --ink:#141719;
  --ink-2:#4a5058;
  --muted:#7a8b a3;
  --muted:#848b94;
  --line:#e3e6ea;
  --line-2:#f0f2f5;

  --brand:#c8102e;
  --brand-d:#9d0b23;
  --brand-l:#fdeaed;

  --accent:#dc0b24;
  --accent-d:#ad0a1d;
  --accent-l:#fdeaed;

  --ok:#0f9d58;
  --ok-l:#e7f6ee;
  --warn:#c77700;
  --danger:#d93025;
  --danger-l:#fdecea;

  /* --- typografia --- */
  --display:"Archivo","Arial Black",Helvetica,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- rytm --- */
  --track:1200px;
  --gutter:clamp(18px,4.5vw,44px);
  --r:10px;
  --r-s:6px;
  --shadow-s:0 1px 2px rgba(20,23,25,.06),0 2px 6px rgba(20,23,25,.04);
  --shadow-m:0 2px 6px rgba(20,23,25,.06),0 12px 28px rgba(20,23,25,.08);
  --shadow-l:0 4px 12px rgba(20,23,25,.08),0 24px 56px rgba(20,23,25,.12);

  color-scheme:light;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--brand);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.06;letter-spacing:-.018em;text-wrap:balance;font-weight:800}
p{margin:0}
ul{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- układ ---------- */
.track{width:100%;max-width:var(--track);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(60px,8.5vw,112px);position:relative}
.section--alt{background:var(--paper-2);border-block:1px solid var(--line)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--accent);border-radius:2px}
.h2{font-size:clamp(31px,5.1vw,52px)}
.h3{font-size:clamp(22px,3vw,28px)}
.lead{color:var(--ink-2);max-width:60ch;margin-top:18px;font-size:clamp(16px,1.9vw,18.5px)}

/* siatka blueprint w tle sekcji */
.blueprint{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}

/* ---------- przyciski ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:15.5px;letter-spacing:.005em;
  padding:15px 26px;border-radius:var(--r-s);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .18s,border-color .18s,color .18s;
}
.btn::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(220,11,36,.3)}
.btn--primary:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 8px 22px rgba(220,11,36,.36)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#24282c;transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.btn--sm{padding:10px 16px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn[disabled]::after{display:none}

/* ---------- pasek postępu przewijania ---------- */
.scrollbar-top{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;background:transparent;pointer-events:none}
.scrollbar-top i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffa571);transition:width .1s linear}

/* ---------- nagłówek ---------- */
.header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(20,23,25,.06)}
.header__inner{display:flex;align-items:center;gap:22px;height:76px;transition:height .3s}
.header.is-stuck .header__inner{height:64px}

/* logo: obraz rastrowy, skalowany wysokością — proporcje pilnuje width:auto */
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);margin-right:auto;flex:none}
/* bez flex:none logo kurczy się poniżej swojej treści, a podtytuł
   wychodzi poza swój obszar i nachodzi na menu */
.logo img{height:46px;width:auto;flex:none;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.logo:hover img{transform:scale(1.035)}
.header.is-stuck .logo img{height:40px}
.logo__sub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-left:14px;border-left:1px solid var(--line);
  line-height:1.45;max-width:9.5em;
}
@media (max-width:1200px){.logo__sub{display:none}}
/* na wąskich ekranach podtytułu i tak nie ma, więc logo może się
   znów kurczyć — inaczej na małym telefonie pasek nie mieści się w ekranie */
@media (max-width:1080px){.logo{flex:0 1 auto;min-width:0}}
@media (max-width:420px){.logo img{height:38px}}

.menu{display:flex;gap:4px;list-style:none}
.menu a{
  position:relative;display:block;padding:9px 13px;border-radius:var(--r-s);
  font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .18s,background .18s;
}
.menu a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover{color:var(--ink);background:var(--paper-2)}
.menu a:hover::after,.menu a.is-active::after{transform:scaleX(1)}
.menu a.is-active{color:var(--ink);font-weight:600}

.header__phone{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap}
.header__phone svg{color:var(--accent);flex:none}
.header__phone:hover{color:var(--accent)}

/* ikona menu: flex z jawnym odstępem — w gridzie wiersze rozciągały się
   na całą wysokość i kreski nie schodziły się w krzyżyk */
.burger{
  display:none;width:44px;height:40px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* nagłówek mobilny — reguły niżej, przy punkcie 1080px */

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f3f5f9 0%,#f1f3f7 60%,#ffffff 100%)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 25% 20%,#000,transparent 70%);
          mask-image:radial-gradient(ellipse 70% 70% at 25% 20%,#000,transparent 70%);
}
.hero__glow{
  position:absolute;width:760px;height:760px;right:-180px;top:-280px;border-radius:50%;
  background:radial-gradient(circle,rgba(220,11,36,.10),rgba(220,11,36,0) 62%);
  filter:blur(8px);
}
.hero__glow--b{
  left:-260px;bottom:-360px;top:auto;right:auto;width:680px;height:680px;
  background:radial-gradient(circle,rgba(200,16,46,.09),rgba(200,16,46,0) 62%);
}
.hero__inner{
  position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(10px,2vw,30px);align-items:center;
  max-width:1480px;min-height:clamp(540px,46vw,680px);padding-block:clamp(40px,5vw,70px);
}
.hero__txt{position:relative;z-index:3;min-width:0}
@media (max-width:980px){.hero__inner{grid-template-columns:1fr;gap:10px;min-height:0}}

.hero__badge{
  display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px 7px 8px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-s);margin-bottom:22px;
}
.hero__badge b{
  display:inline-flex;align-items:center;gap:5px;background:var(--ok-l);color:var(--ok);
  border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;
}
.hero h1{font-size:clamp(34px,4.7vw,60px);line-height:1.03}
.hero h1 .mark{position:relative;color:var(--brand);white-space:nowrap}
.hero h1 .mark::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.26em;background:rgba(220,11,36,.22);
  border-radius:3px;z-index:-1;transform:scaleX(0);transform-origin:left;
  animation:markIn .8s .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes markIn{to{transform:scaleX(1)}}
.hero__lead{margin-top:20px;font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-2);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* przyciski w hero: pigułki, strzałka wysuwa się, telefon „dzwoni” */
.btn--hero{border-radius:999px;padding:15px 26px;font-size:16px}
.btn--primary.btn--hero{box-shadow:0 10px 26px -8px rgba(220,11,36,.55)}
.btn__strzalka{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.btn--hero:hover .btn__strzalka{transform:translateX(5px)}
.btn--primary.btn--hero{animation:pulsBtn 2.8s 3.4s ease-out infinite}
@keyframes pulsBtn{0%{box-shadow:0 10px 26px -8px rgba(220,11,36,.55),0 0 0 0 rgba(220,11,36,.4)}70%,100%{box-shadow:0 10px 26px -8px rgba(220,11,36,.55),0 0 0 18px rgba(220,11,36,0)}}
.btn--primary.btn--hero:hover{animation:none}
.btn__dzwon{display:inline-grid;place-items:center;position:relative;color:var(--accent)}
.btn--ghost.btn--hero:hover .btn__dzwon svg,.btn--ghost.btn--hero:focus-visible .btn__dzwon svg{animation:dzwon .7s ease-in-out}
@keyframes dzwon{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}}

/* ---------- scena z samochodem ---------- */
.hero__visual{position:relative;min-width:0}
.scena{
  --x:0px; --v:0; --przechyl:0deg;
  /* scena dochodzi do prawej krawędzi okna — auto wyjeżdża zza niej */
  margin-right:calc(-1 * (var(--gutter) + max(0px, (100vw - 1480px) / 2)));
  aspect-ratio:1.22;align-self:center;
}
.scena__tlo{position:absolute;inset:0;pointer-events:none}
.pierscien{
  position:absolute;left:52%;top:46%;width:74%;aspect-ratio:1;margin:-37% 0 0 -37%;border-radius:50%;
  border:2px dashed rgba(20,23,25,.09);animation:obrot 70s linear infinite;
}
.pierscien.p2{width:56%;margin:-28% 0 0 -28%;border:1.5px solid rgba(220,11,36,.14);animation-duration:46s;animation-direction:reverse}
.plama{
  position:absolute;left:46%;top:4%;width:62%;aspect-ratio:1;border-radius:50%;margin-left:-20%;
  background:radial-gradient(circle,rgba(220,11,36,.10),rgba(220,11,36,0) 66%);animation:oddech 7s ease-in-out infinite;
}
@keyframes obrot{to{transform:rotate(360deg)}}
@keyframes oddech{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.6}}

.scena__linie{position:absolute;inset:0;pointer-events:none;opacity:var(--v)}
.scena__linie i{position:absolute;right:0;height:2px;border-radius:2px;background:linear-gradient(270deg,rgba(20,23,25,0),rgba(20,23,25,.22))}
.scena__linie i:nth-child(1){top:22%;width:38%;right:-4%}
.scena__linie i:nth-child(2){top:33%;width:26%;right:6%}
.scena__linie i:nth-child(3){top:49%;width:44%;right:-6%}
.scena__linie i:nth-child(4){top:61%;width:30%;right:2%}
.scena__linie i:nth-child(5){top:71%;width:40%;right:-3%}
.scena__linie i:nth-child(6){top:80%;width:22%;right:10%}

.auto{
  position:absolute;right:0;top:50%;width:122%;margin-top:-34.3%;z-index:2;
  --kolo1-x:32.3%;--kolo2-x:73.3%;--kolo1-y:68%;--kolo2-y:74.4%;--kolo1-w:13%;--kolo2-w:21%;
  --stop-x:94%;--stop-y:34%;
  transform:translate3d(var(--x),0,0);will-change:transform;
}
.auto__ruch{position:relative;transform-origin:40% 95%}
.auto__foto{
  width:100%;height:auto;display:block;position:relative;z-index:1;
  /* zdjęcie bez obróbki — tylko miękko wtapiamy jego lewą i dolną krawędź w tło */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 14%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 14%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.auto.jedzie .auto__foto{filter:url(#rozmycieRuchu)}
/* światło stop rozbłyska przy hamowaniu */
.auto__swiatlo{
  position:absolute;z-index:3;left:var(--stop-x);top:var(--stop-y);width:22%;aspect-ratio:1.6;
  margin:-7% 0 0 -11%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,60,70,.85),rgba(255,30,50,.35) 45%,rgba(255,30,50,0));
  mix-blend-mode:multiply;transition:opacity .35s;
}
.auto.hamuje .auto__swiatlo{opacity:1}

/* pochylenie przy hamowaniu i oddychanie na postoju */
.auto.nurek .auto__ruch{animation:nurek .9s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes nurek{0%{transform:rotate(0)}35%{transform:rotate(-1.2deg) translateY(2px)}70%{transform:rotate(.4deg)}100%{transform:none}}

/* skaner diagnostyczny: czerwona linia przejeżdża po aucie */
.auto__skan{
  position:absolute;top:-2%;bottom:2%;left:0;width:3px;z-index:4;background:var(--accent);border-radius:2px;opacity:0;
  box-shadow:0 0 18px 4px rgba(220,11,36,.45);pointer-events:none;
}
.auto__skan::before{
  content:"";position:absolute;right:3px;top:0;bottom:0;width:130px;
  background:linear-gradient(270deg,rgba(220,11,36,.16),rgba(220,11,36,0));
}
.auto.skanuje .auto__skan{animation:skan 2.3s cubic-bezier(.5,0,.3,1) forwards}
@keyframes skan{0%{left:98%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:2%;opacity:0}}
.auto__ping{
  position:absolute;aspect-ratio:1;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none;
  z-index:4;
}
.auto__ping--1{left:var(--kolo1-x);top:var(--kolo1-y);width:var(--kolo1-w);margin:calc(var(--kolo1-w) / -2) 0 0 calc(var(--kolo1-w) / -2)}
.auto__ping--2{left:var(--kolo2-x);top:var(--kolo2-y);width:var(--kolo2-w);margin:calc(var(--kolo2-w) / -2) 0 0 calc(var(--kolo2-w) / -2)}
.auto.skanuje .auto__ping{animation:ping 1.4s ease-out 1 both}
.auto.skanuje .auto__ping--1{animation-delay:.35s}.auto.skanuje .auto__ping--2{animation-delay:1.55s}
@keyframes ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}

/* plusy pod przyciskami */
.hero__micro{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--ink-2)}
.hero__micro li{display:inline-flex;align-items:center;gap:8px}
.hero__micro svg{color:#fff;background:var(--ok);border-radius:50%;padding:3px;box-sizing:content-box;width:11px;height:11px;flex:none}

/* pomiary z diagnostyki — kropka na aucie, linia i karta z wartością */
.pomiary{position:absolute;inset:0;z-index:5;pointer-events:none}
.pomiar{position:absolute;width:0;height:0}
.pomiar__kropka{
  position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.25);
  transform:scale(0);transition:transform .45s cubic-bezier(.3,1.8,.5,1);
}
.pomiar__kropka::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);opacity:0;
}
.pomiar.on .pomiar__kropka{transform:scale(1)}
.pomiar.on .pomiar__kropka::after{animation:kropkaPuls 2.4s .5s ease-out infinite}
@keyframes kropkaPuls{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
.pomiar__linia{
  position:absolute;left:-1px;bottom:0;width:2px;height:calc(var(--dl,1) * clamp(34px,4.4vw,60px));
  background:linear-gradient(0deg,var(--accent),rgba(220,11,36,.25));
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s .15s cubic-bezier(.3,.8,.3,1);
}
.pomiar.on .pomiar__linia{transform:scaleY(1)}
.pomiar__karta{
  position:absolute;bottom:calc(var(--dl,1) * clamp(34px,4.4vw,60px));display:flex;flex-direction:column;gap:1px;white-space:nowrap;
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:7px 12px 8px;box-shadow:var(--shadow-m);
  opacity:0;transform:translateY(8px) scale(.9);transition:opacity .4s .35s,transform .5s .35s cubic-bezier(.3,1.5,.5,1);
}
.pomiar--l .pomiar__karta{right:-14px;transform-origin:100% 100%}
.pomiar--p .pomiar__karta{left:-14px;transform-origin:0 100%}
.pomiar.on .pomiar__karta{opacity:1;transform:none}
.pomiar__nazwa{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pomiar__wartosc{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.pomiar__wartosc em{font-style:normal;font-family:var(--body);font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-l);border-radius:99px;padding:1px 7px;margin-left:4px;vertical-align:2px}
.pomiar.mig .pomiar__wartosc b{animation:mig .6s ease}
@keyframes mig{0%{color:var(--accent)}100%{color:var(--ink)}}
.no-js .pomiar .pomiar__kropka,.no-js .pomiar .pomiar__linia,.no-js .pomiar .pomiar__karta{transform:none;opacity:1}

.gauge{
  position:absolute;left:0;top:0;width:clamp(100px,10vw,128px);z-index:4;
  background:var(--paper);border:1px solid var(--line);border-radius:50%;
  box-shadow:var(--shadow-l);padding:9px;
}
@media (max-width:980px){
  .scena{width:auto;aspect-ratio:1.5}
  .auto{width:104%;margin-top:-29.2%}
}
@media (max-width:640px){
  .scena{aspect-ratio:auto;padding-bottom:6px}
  .auto{position:relative;top:auto;width:135%;margin:6px 0 0 -35%}
  .pomiar--dodatkowy{display:none}
  .pomiar--l .pomiar__karta{right:auto;left:-14px;transform-origin:0 100%}
  .pomiar__karta{padding:5px 9px 6px;border-radius:10px}
  .pomiar__wartosc{font-size:14px}
  .pomiar__nazwa{font-size:9px}
  .gauge{display:none}
  .pierscien{top:34%}
}

/* ---------- pasek marek (marquee) ---------- */
.marq{
  border-block:1px solid var(--line);background:var(--paper-2);overflow:hidden;padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq__row{display:flex;gap:16px;width:max-content;animation:marq 48s linear infinite}
.marq:hover .marq__row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq__item{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:132px;height:72px;padding:0 26px;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;color:#6a717b;white-space:nowrap;
  transition:color .25s,border-color .25s,transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .25s;
}
.marq__item:hover{color:var(--ink);border-color:#f0a9b4;transform:translateY(-4px);box-shadow:var(--shadow-m)}
.marq__item img{height:44px;width:auto;max-width:106px;object-fit:contain;transition:filter .35s,opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.marq__item:hover img{transform:scale(1.12)}
.marq__item:hover img{filter:none;opacity:1}
.marq__item--logo b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.marq__item{position:relative}
@media (max-width:640px){.marq__item{min-width:104px;height:60px;font-size:16px;padding:0 18px}.marq__item img{height:32px}}

/* ---------- pasek faktów ---------- */
.facts{background:var(--ink);color:#fff}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:26px var(--gutter);border-right:1px solid rgba(255,255,255,.1)}
.fact:last-child{border-right:none}
.fact__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* Wartość i dopisek pod nią zawsze w osobnych wierszach — inaczej przy
   czterech wąskich kolumnach numer telefonu albo adres łamał się w połowie. */
.fact__v{
  font-family:var(--display);font-weight:800;font-size:clamp(21px,2.5vw,28px);
  margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fact__v small{
  display:block;font-family:var(--body);font-weight:400;font-size:13.5px;
  color:rgba(255,255,255,.6);letter-spacing:0;margin-top:3px;white-space:normal;
}
.fact__v a{color:inherit;text-decoration:none}
.fact__v a:hover{color:var(--accent)}
.fact__v--tel{font-size:clamp(19px,2.2vw,25px)}
.fact__v--adr{font-size:clamp(19px,2.2vw,25px)}
.fact__v .stars{font-size:.82em;letter-spacing:.02em;margin-right:2px}
.stars{color:#ffc53d;letter-spacing:.06em}
@media (max-width:860px){
  .facts__grid{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2n){border-right:none}
  .fact:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ---------- usługi ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:18px;margin-top:46px}
.svc__card{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:13px;min-width:0;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
  transform-style:preserve-3d;
}
.svc__card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(200,16,46,.07),transparent 42%);
}
.svc__card:hover{border-color:#e8bcc3;box-shadow:var(--shadow-m)}
.svc__card:hover::before{opacity:1}
.svc__ico{
  width:48px;height:48px;border-radius:var(--r-s);background:var(--brand-l);color:var(--brand);
  display:grid;place-items:center;flex:none;transition:background .3s,color .3s,transform .3s;
}
.svc__card:hover .svc__ico{background:var(--accent);color:#fff;transform:translateY(-2px) rotate(-6deg)}
.svc__card h3{font-size:19.5px;font-weight:800}
.svc__card p{font-size:14.8px;color:var(--ink-2);line-height:1.6}
.svc__meta{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.svc__meta a{color:var(--brand);text-decoration:none;font-weight:500;letter-spacing:.06em}

/* ---------- Cały kafelek usługi klikalny na dotyku ----------
   Na telefonie człowiek stuka w kafelek, nie w napis „Rezerwuj”.
   Wcześniej działał tylko ten napis (87x44 px w kafelku 324x268) —
   stuknięcie w środek kafelka nie robiło nic.

   Rozciągamy istniejący odnośnik na całą kartę zamiast owijać ją
   drugim linkiem: czytnik ekranu nadal widzi jedno łącze z sensowną
   nazwą, a nie dwa prowadzące w to samo miejsce.

   Tylko tam, gdzie się stuka (hover:none). Na komputerze zostaje
   jak było, bo nakładka uniemożliwiłaby zaznaczanie tekstu. */
@media (hover:none){
  .svc__meta a::after{content:"";position:absolute;inset:0;z-index:1}
  .svc__card:active{transform:scale(.985)}
}
.svc__meta a:hover{text-decoration:underline}

/* ---------- sekcja „dlaczego" ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
@media (max-width:980px){.why{grid-template-columns:1fr}}
.why__steps{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:30px}
.why__steps li{
  display:flex;gap:18px;padding:18px;border-radius:var(--r);
  transition:background .25s,transform .25s;min-width:0;
}
.why__steps li:hover{background:var(--paper);transform:translateX(4px);box-shadow:var(--shadow-s)}
.why__n{
  font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;background:var(--ink);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
}
.why__steps h4{font-size:18px;font-weight:800;margin-bottom:3px}
.why__steps p{font-size:14.8px;color:var(--ink-2)}

.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow-s)}
.gal figure:first-child{grid-column:1/-1;aspect-ratio:16/9}
.gal figure:not(:first-child){aspect-ratio:4/3}
.gal img,.gal svg{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img,.gal figure:hover svg{transform:scale(1.05)}

/* ---------- rezerwacja ---------- */
.book{position:relative}
.book__shell{
  margin-top:42px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-l);overflow:hidden;
}
.book__progress{display:flex;background:var(--paper-2);border-bottom:1px solid var(--line)}
.book__progress li{
  flex:1;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;
  font-size:13.5px;font-weight:600;color:var(--muted);border-right:1px solid var(--line);
  transition:background .25s,color .25s;min-width:0;
}
.book__progress li:last-child{border-right:none}
.book__progress li b{
  width:24px;height:24px;border-radius:50%;background:var(--paper-3);color:var(--muted);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;flex:none;transition:background .25s,color .25s,transform .25s;
}
.book__progress li.is-done{color:var(--ok);background:var(--ok-l)}
.book__progress li.is-done b{background:var(--ok);color:#fff;transform:scale(1.06)}
.book__progress li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.book__progress li span{display:none}.book__progress li{justify-content:center}}

.step{padding:28px clamp(18px,3.6vw,34px);border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:none}
.step__head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.step__head h3{font-size:19px;font-weight:800}
.step__tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:4px 9px;border-radius:4px;flex:none;
}
.step__hint{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* kafelki usług */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.chip{
  text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}
.chip b{font-weight:600;font-size:14.8px}
.chip small{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.chip:hover{border-color:#f0a9b4;transform:translateY(-2px);box-shadow:var(--shadow-s)}
.chip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.chip[aria-pressed="true"] small{color:var(--brand)}

/* pasek dni */
.days{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.days::-webkit-scrollbar{height:6px}
.days::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.day{
  flex:none;width:84px;scroll-snap-align:start;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-s);padding:11px 6px 9px;cursor:pointer;text-align:center;
  transition:border-color .2s,transform .2s,box-shadow .2s,background .2s;
}
.day:hover:not(:disabled){border-color:#f0a9b4;transform:translateY(-3px);box-shadow:var(--shadow-s)}
.day[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.day:disabled{opacity:.42;cursor:not-allowed;background:var(--paper-2)}
.day__dow{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.day__num{display:block;font-family:var(--display);font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.03em}
.day[aria-pressed="true"] .day__num{color:var(--brand)}
.day__mon{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase}
.day__free{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ok)}
.day__free.is-none{color:var(--muted)}

/* Nagłówki dni tygodnia, puste pola wyrównujące i podpis miesiąca —
   potrzebne tylko w siatce na telefonie; pasek ich nie używa. */
.day-head,.day-pusty,.days__miesiac{display:none}

/* ---------- KALENDARZ NA TELEFONIE ----------
   Poziomy pasek mieścił 3,5 dnia naraz — do terminu za trzy tygodnie
   trzeba było przesuwać palcem przez 2600 px. Zamiast tego zwykła
   siatka miesięczna: siedem kolumn, cztery tygodnie widoczne od razu,
   bez przewijania. Układ, który każdy zna z telefonu. */
@media (max-width:720px){
  .days__miesiac{
    display:block;text-align:center;font-weight:700;font-size:15px;
    margin:2px 0 10px;color:var(--ink);
  }
  .days{
    display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
    overflow:visible;padding:2px 0 4px;scroll-snap-type:none;
  }
  .day-head{
    display:block;text-align:center;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:2px;
  }
  .day-pusty{display:block}
  .day{
    width:auto;min-height:56px;padding:7px 2px 6px;border-radius:10px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  }
  .day:hover:not(:disabled){transform:none}
  /* skrót dnia i miesiąca powtarzałby nagłówek kolumny — zbędny szum */
  .day .day__dow{display:none}
  .day .day__mon{display:none}
  .day .day__num{font-size:19px;line-height:1}
  /* W kolumnie szerokiej na ~44 px nie zmieści się „8 wolnych godzin”,
     więc zostaje sama liczba. Pełny opis nadal siedzi w aria-label
     przycisku, więc czytnik ekranu przeczyta całe zdanie. */
  .day .day__free{
    margin-top:1px;line-height:1.1;font-size:0;
    width:100%;overflow:hidden;white-space:nowrap;
  }
  .day .day__free::before{content:attr(data-n);font-size:11px;font-weight:600;color:var(--ok)}
  .day .day__free.is-none::before{content:"·";font-size:16px;line-height:.5;color:var(--muted)}
}

/* Na wąskich telefonach siedem kolumn musi odzyskać każdy piksel —
   siatka wychodzi na całą szerokość karty, inaczej kafelek dnia
   schodzi poniżej 32 px i trudno w niego trafić kciukiem. */
@media (max-width:420px){
  .book__shell .step{padding-left:11px;padding-right:11px}
  .days,.days__miesiac{margin-inline:-11px}
  /* odstęp 3 px zamiast 4 daje kolumnie 6 px więcej — tyle brakowało,
     żeby na telefonie 360 px kafelek dnia sięgnął 44 px */
  .days{gap:3px;padding-inline:0}
  .day{min-height:58px}
}

/* Najwęższe telefony (320–360 px, np. starsze iPhone SE i tańsze
   Androidy). Siedem kolumn fizycznie nie zmieści się tu w 44 px, więc
   zabieramy margines karty do minimum i nadrabiamy wysokością —
   kafelek jest wtedy wyższy niż szerszy, ale pole do trafienia
   kciukiem wychodzi większe niż kwadrat 44x44. */
@media (max-width:365px){
  .book__shell .step{padding-left:6px;padding-right:6px}
  .days,.days__miesiac{margin-inline:-6px}
  .days{gap:2px}
  .day{min-height:64px;padding:6px 1px 5px;border-radius:9px}
  .day .day__num{font-size:18px}
  .day-head{font-size:9.5px;letter-spacing:.02em}
}

/* godziny */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.slot{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:13px 6px;
  cursor:pointer;font-family:var(--mono);font-size:14.5px;font-weight:500;letter-spacing:.02em;
  transition:border-color .2s,transform .2s,box-shadow .2s,background .2s,color .2s;
  opacity:0;transform:translateY(6px);animation:slotIn .32s forwards;
}
@keyframes slotIn{to{opacity:1;transform:none}}
.slot:hover:not(:disabled){border-color:#f0a9b4;transform:translateY(-3px);box-shadow:var(--shadow-s)}
.slot[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(200,16,46,.25)}
.slot:disabled{
  opacity:1;cursor:not-allowed;color:var(--muted);background:var(--paper-2);border-style:dashed;
}
.slot:disabled::after{content:" zajęte";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;display:block;color:var(--muted)}
.slots__empty{
  padding:20px;border:1px dashed var(--line);border-radius:var(--r-s);background:var(--paper-2);
  font-size:14.5px;color:var(--ink-2);text-align:center;
}

/* podsumowanie */
.summary{
  display:flex;flex-wrap:wrap;gap:14px 30px;background:var(--ink);color:#fff;
  border-radius:var(--r-s);padding:18px 22px;margin-bottom:22px;
}
.summary div{min-width:0}
.summary dt{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.summary dd{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:18.5px;letter-spacing:-.01em}
.summary dd.is-empty{color:rgba(255,255,255,.4);font-weight:500}

/* formularz */
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:660px){.fields{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f--full{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.f label i{color:var(--accent);font-style:normal}
.f input,.f textarea{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;font-size:15.5px;width:100%;transition:border-color .18s,box-shadow .18s;
}
.f input::placeholder,.f textarea::placeholder{color:#a9b6c6}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.f.is-bad input,.f.is-bad textarea{border-color:var(--danger);background:var(--danger-l)}
.f textarea{resize:vertical;min-height:92px}
.f em{font-style:normal;font-size:12.5px;color:var(--danger);min-height:1.2em}

.consent{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;padding:16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-s);font-size:14px;color:var(--ink-2);
}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--brand);cursor:pointer}
.consent.is-bad{border-color:var(--danger);background:var(--danger-l)}
.consent a{color:var(--brand)}

.privacy-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  background:var(--brand-l);border-radius:var(--r-s);font-size:13.5px;color:var(--ink-2);
}
.privacy-note svg{color:var(--brand);flex:none;margin-top:2px}

.msg{margin-top:20px;padding:18px 20px;border-radius:var(--r-s);font-size:15px;display:none}
.msg.is-ok{display:block;background:var(--ok-l);border:1px solid #b7e2cb;color:#0b6b3d}
.msg.is-bad{display:block;background:var(--danger-l);border:1px solid #f3c2bd;color:#9c231a}
.msg b{display:block;font-family:var(--display);font-size:18px;margin-bottom:5px}

/* ---------- opinie ---------- */
.rev{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width:860px){.rev{grid-template-columns:1fr}}
.score{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 42px;text-align:center;box-shadow:var(--shadow-m);
}
.score__n{font-family:var(--display);font-weight:800;font-size:76px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.score__s{font-size:22px;margin-top:4px}
.score__src{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.rev__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- kontakt ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,46px);margin-top:42px;align-items:start}
@media (max-width:980px){.contact{grid-template-columns:1fr}}
.info{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s)}
.info__row{display:flex;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line-2);min-width:0}
.info__row:last-child{border-bottom:none}
.info__ico{width:38px;height:38px;border-radius:var(--r-s);background:var(--brand-l);color:var(--brand);display:grid;place-items:center;flex:none}
.info__k{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.info__v{font-size:16px;margin-top:3px;word-break:break-word}
.info__v a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent-l)}
.info__v a:hover{color:var(--accent);border-color:var(--accent)}
.hours{list-style:none;margin-top:8px;font-size:14.5px;font-variant-numeric:tabular-nums}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px dotted var(--line)}
.hours li:last-child{border-bottom:none}
.hours li.is-today{font-weight:700;color:var(--brand)}
.hours li.is-closed{color:var(--muted)}
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);background:var(--paper-2)}

/* ---------- stopka ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.72)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-block:52px}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer__grid{grid-template-columns:1fr;gap:26px}}
.footer h4{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer p,.footer li{font-size:14.5px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .18s}

/* Odnośniki w stopce miały 17 px wysokości celu — trafienie kciukiem
   w taki pasek to loteria, a chybienie nie robi nic i trzeba stukać
   drugi raz. Na dotyku rozciągamy je na pełną szerokość kolumny
   i dokładamy wysokości; odstęp między nimi zmniejszamy, żeby rytm
   stopki wyglądał tak samo jak wcześniej. */
@media (hover:none){
  .footer ul{gap:0}
  .footer ul li a{display:block;padding-block:13px}
}
.footer a:hover{color:var(--accent)}
.footer__logo{display:block;margin-bottom:18px}
.footer__logo img{height:54px;width:auto}
.footer a:hover{color:#ff5569}

/* pasek administratora na samym dole */
.adminbar{border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25)}
.adminbar__in{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:16px;font-size:13px;color:rgba(255,255,255,.4);
}
.adminbar__in span{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.adminbar__btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  padding:9px 16px;border-radius:var(--r-s);font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.2);background:transparent;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.adminbar__btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.adminbar__btn svg{flex:none}
@media (max-width:540px){.adminbar__btn{margin-left:0;width:100%;justify-content:center}}

/* Na telefonie okrągły przycisk „do góry” wisi 76 px nad dolną
   krawędzią, a pod nim jest jeszcze pasek „Zadzwoń”. Na samym dole
   strony lądował dokładnie na przycisku „Panel administratora”
   i obcinał mu prawą krawędź. Odsuwamy ostatni blok stopki tak,
   żeby przycisk unosił się nad pustym miejscem. */
@media (max-width:640px){
  .adminbar__in{padding-bottom:74px}
}
.footer__social{display:flex;gap:10px;margin-top:16px}
.footer__social a{
  width:40px;height:40px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s,transform .2s;
}
.footer__social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

/* ---------- pływające akcje ---------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:70;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow-m);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s;
}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--accent)}
.callbar{display:none}
@media (max-width:640px){
  .fab{bottom:76px}
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--accent);color:#fff;
    text-decoration:none;font-weight:700;align-items:center;justify-content:center;gap:10px;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px rgba(20,23,25,.18);
  }
  body{padding-bottom:66px}
}

/* ---------- animacje wejścia ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* bez JS wszystko i tak widoczne */
.no-js .rv{opacity:1;transform:none}

/* =====================================================================
   RUCH NA STRONIE GŁÓWNEJ
   Klasy poniżej dokłada skrypt, więc bez JS strona wygląda normalnie.
   ===================================================================== */

/* ---------- nagłówek w hero: słowo po słowie ---------- */
.hero h1.split .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  /* zapas na ogonki: ą, ę, Ł — żeby overflow ich nie ucinał */
  padding-bottom:.14em;margin-bottom:-.14em;
}
.hero h1.split .w__i{
  display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1);
}
.hero h1.split.is-in .w__i{transform:none;opacity:1}

/* podkreślenie akcentu czeka, aż słowo wjedzie */
.hero h1.split .mark::after{animation:none;transform:scaleX(0)}
.hero h1.split.is-in .mark::after{animation:markIn .8s .6s cubic-bezier(.2,.7,.3,1) forwards}

/* z-index:-1 chował pasek za tłem sekcji — przy rozbitym nagłówku
   podnosimy pasek, a słowo kładziemy nad nim */
.hero h1.split .mark::after{z-index:0}
.hero h1.split .mark .w{position:relative;z-index:1}

/* ---------- pozostałe elementy hero ---------- */
.wejdz{
  opacity:0;transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
}
.wejdz.is-in{opacity:1;transform:none}

/* ---------- paralaksa: płynny ruch zdjęcia i poświat ---------- */
.hero__photo img{will-change:transform}
.hero__glow{will-change:transform}

/* ---------- galeria: zdjęcie odsłania się od dołu ---------- */
.gal figure.odslon img{clip-path:inset(0 0 100% 0)}
.gal figure.odslon.is-seen img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.22,1,.36,1);
}

/* ---------- kafle usług: przechył pod kursorem ---------- */
.svc__card{transition:border-color .22s,box-shadow .22s,transform .35s cubic-bezier(.2,.7,.3,1)}
.svc__card:hover{transition-duration:.22s,.22s,.08s}

/* ---------- numerki kroków w sekcji „warsztat” ---------- */
.rv.is-in .why__steps li:nth-child(1) .why__n{animation:popN .55s .18s cubic-bezier(.34,1.56,.64,1) backwards}
.rv.is-in .why__steps li:nth-child(2) .why__n{animation:popN .55s .3s  cubic-bezier(.34,1.56,.64,1) backwards}
.rv.is-in .why__steps li:nth-child(3) .why__n{animation:popN .55s .42s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes popN{from{transform:scale(.45);opacity:0}}

/* ---------- pasek marek sterowany skryptem ---------- */
.marq--js .marq__row{animation:none;will-change:transform}
.marq--js:hover .marq__row{animation:none}

@media (prefers-reduced-motion:reduce){
  .hero h1.split .w__i{transform:none;opacity:1}
  .wejdz{opacity:1;transform:none}
  .gal figure.odslon img{clip-path:none}
  .rv.is-in .why__n{animation:none}
  .marq__row{animation:none}
}

/* ---------- strona RODO ---------- */
.doc{max-width:74ch;margin-inline:auto}
.doc h2{font-size:clamp(26px,4vw,38px);margin-top:44px;margin-bottom:14px}
.doc h3{font-size:20px;margin-top:28px;margin-bottom:8px}
.doc p,.doc li{color:var(--ink-2);font-size:16px}
.doc ul,.doc ol{padding-left:22px;margin:10px 0}
.doc li{margin-bottom:7px}
.doc a{color:var(--brand)}
.doc__meta{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* =====================================================================
   DOSTĘPNOŚĆ — przeskok do treści
   ===================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* =====================================================================
   PRZEŁĄCZNIK JĘZYKA
   ===================================================================== */
.lang{position:relative;flex:none}
.lang__btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  padding:8px 11px;color:var(--ink-2);transition:border-color .18s,color .18s,background .18s;
}
.lang__btn:hover{border-color:var(--brand);color:var(--brand)}
.lang__btn b{font-size:13px;font-weight:700;letter-spacing:.04em}
.lang__lista{
  position:absolute;right:0;top:calc(100% + 8px);z-index:90;min-width:184px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--shadow-m);list-style:none;padding:6px;overflow:hidden;
}
.lang__lista[hidden]{display:none}
.lang__lista a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-s);
  text-decoration:none;color:var(--ink);font-size:14.5px;transition:background .15s;
}
.lang__lista a:hover{background:var(--paper-2)}
.lang__lista a.is-active{background:var(--brand-l);color:var(--brand);font-weight:600}
.lang__skrot{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  background:var(--paper-3);color:var(--ink-2);border-radius:3px;padding:3px 6px;flex:none;min-width:30px;text-align:center;
}
.lang__lista a.is-active .lang__skrot{background:var(--brand);color:#fff}

/* w menu mobilnym języki jako jeden rząd */
.menu__jezyki{display:none;gap:8px;padding:14px 4px 4px;border-top:1px solid var(--line)}
.menu__jezyki a{
  flex:1;text-align:center;padding:10px 4px!important;border:1px solid var(--line);
  border-radius:var(--r-s);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
}
.menu__jezyki a.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* =====================================================================
   ZGODA NA MAPĘ (Google ustawia cookies dopiero po kliknięciu)
   ===================================================================== */
.map{position:relative;min-height:430px;display:flex}
.map__zgoda{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:34px 26px;color:var(--ink-2);
  background:
    linear-gradient(135deg,rgba(220,11,36,.05),transparent 60%),
    repeating-linear-gradient(45deg,var(--paper-2) 0 12px,var(--paper-3) 12px 24px);
}
.map__zgoda[hidden]{display:none}
.map__zgoda svg{color:var(--brand);opacity:.6}
.map__zgoda h3{font-size:19px;color:var(--ink)}
.map__zgoda p{font-size:14px;max-width:40ch;line-height:1.55}
.map__akcje{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.map__ramka{display:none;flex:1}
.map__ramka.is-on{display:block}
.map__ramka iframe{width:100%;height:100%;min-height:430px;border:0;display:block}

/* informacja przy przycisku panelu w wersji poglądowej */
.adminbar__info{flex-basis:100%;font-size:12.5px;color:rgba(255,255,255,.55)}

/* pułapka na roboty — niewidoczna, ale nie display:none (boty to wykrywają) */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* zajęty slot: podpis pod godziną */
.slot small{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.slot:disabled::after{content:none}

/* =====================================================================
   TABLET — układ pośredni między telefonem a komputerem
   ===================================================================== */
@media (min-width:641px) and (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:clamp(38px,6vw,54px)}
  .why{grid-template-columns:1fr;gap:38px}
  .gal{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .map{min-height:360px}
  .map__ramka iframe{min-height:360px}
  .rev{grid-template-columns:auto 1fr}
  .svc{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}

/* nagłówek: menu chowa się dopiero gdy naprawdę brakuje miejsca */
@media (max-width:1080px){
  .burger{display:flex}
  .header__phone span{display:none}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-m);
    padding:8px var(--gutter) 14px;max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .menu[hidden]{display:none}
  .menu a{padding:13px 4px;border-bottom:1px solid var(--line-2);border-radius:0}
  .menu a::after{display:none}
  .menu__jezyki{display:flex;border-bottom:none}
  .menu__jezyki a{border-bottom:1px solid var(--line)}
  .lang{display:none}        /* na wąskich ekranach języki są w menu */
}

/* =====================================================================
   TELEFON
   ===================================================================== */
@media (max-width:640px){
  .hero__badge{font-size:12.5px}
  .facts__grid{grid-template-columns:1fr 1fr}
  .fact{padding:18px var(--gutter)}
  .fact__v{font-size:20px}
  .fact__v--tel{font-size:18px}
  .fact__v--adr{font-size:18px}
  .gal{grid-template-columns:1fr}
  .gal figure:first-child{aspect-ratio:16/10}
  .gal figure:not(:first-child){aspect-ratio:16/10}
  .score{padding:24px 20px}
  .score__n{font-size:58px}
  .summary{gap:12px 20px;padding:14px 16px}
  .summary dd{font-size:16.5px}
  .step{padding:22px 16px}
  .chips{grid-template-columns:1fr 1fr}
  .chip{padding:11px 12px}
  .chip b{font-size:13.5px}
  .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .map{min-height:300px}
  .map__ramka iframe{min-height:300px}
  .map__zgoda{padding:26px 18px}
}

@media (max-width:400px){
  .chips{grid-template-columns:1fr}
  .facts__grid{grid-template-columns:1fr}
  .fact{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .hero__cta .btn{width:100%}
}

/* =====================================================================
   DRUK — wizytówka z adresem i godzinami
   ===================================================================== */
@media print{
  .header,.fab,.callbar,.adminbar,.marq,.book,.scrollbar-top,.map,.rev__actions,.skip,.blueprint{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:14pt}
  .hero__visual,.gal{display:none}
  .facts{background:#fff;color:#000;border-block:1px solid #999}
  .fact__k,.fact__v small{color:#444}
  .footer{background:#fff;color:#000;border-top:1px solid #999}
  .footer a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- zaproszenie do konta nad formularzem rezerwacji ---------- */
.konto-zacheta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px;margin-bottom:18px;box-shadow:var(--shadow-s);
}
.konto-zacheta strong{display:block;font-size:16px;margin-bottom:3px}
.konto-zacheta span{display:block;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:62ch}
.konto-zacheta__akcje{display:flex;gap:9px;flex-wrap:wrap;flex:none}
@media (max-width:620px){
  .konto-zacheta{flex-direction:column;align-items:flex-start}
  .konto-zacheta__akcje{width:100%}
  .konto-zacheta__akcje .btn{flex:1}
}

/* ---------- konto klienta w górnym pasku ----------
   Dwie małe ikonki zamiast przycisków z napisami — w pasku jest już
   logo, menu, języki i telefon, a napisy łamały całość na kilka linii.
   Opis jest w tytule i w aria-label, więc czytnik ekranu go przeczyta,
   a myszy wystarczy najechać. */
.header__konto{display:flex;align-items:center;gap:6px;flex:none}
.hk{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);
  color:var(--ink-2);text-decoration:none;
  transition:border-color .18s,color .18s,background .18s,transform .18s;
}
.hk svg{width:19px;height:19px;flex:none}
.hk:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.hk--plus{background:var(--ink);border-color:var(--ink);color:#fff}
.hk--plus:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hk--moje{border-color:var(--brand);color:var(--brand)}
.header.is-stuck .hk{width:34px;height:34px}
.header.is-stuck .hk svg{width:17px;height:17px}

/* na wąskich ekranach pozycje konta są w menu pod hamburgerem */
@media (max-width:1080px){.header__konto{display:none}}

.menu__konto{display:flex;gap:8px;flex-wrap:wrap}
.menu__konto a{
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);
}
.menu__konto a:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (min-width:1081px){.menu__konto{display:none}}

/* <picture> wokół logo nie może zmienić układu — to tylko opakowanie */
.logo picture,.footer__logo picture{display:flex;flex:none;line-height:0}

/* =====================================================================
   POTWIERDZENIE REZERWACJI
   ---------------------------------------------------------------------
   Pełnoekranowa nakładka po zapisaniu terminu. Na telefonie zwykły
   komunikat pod formularzem ginie — tu nie da się go przeoczyć.
   ===================================================================== */
.sukces{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.sukces[hidden]{display:none}
.sukces__tlo{
  position:absolute;inset:0;background:rgba(12,14,18,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:sukTlo .32s ease both;
}
@keyframes sukTlo{from{opacity:0}to{opacity:1}}

.sukces__karta{
  position:relative;z-index:2;width:min(100%,420px);
  background:var(--paper);border-radius:var(--r-l,20px);
  padding:34px 26px 28px;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
  animation:sukKarta .5s cubic-bezier(.17,.84,.44,1) both;
  max-height:calc(100vh - 40px);overflow-y:auto;
}
@keyframes sukKarta{
  from{opacity:0;transform:translateY(26px) scale(.94)}
  to{opacity:1;transform:none}
}

/* --- znak potwierdzenia: kółko obrysowuje się, potem ptaszek --- */
.sukces__znak{display:flex;justify-content:center;margin-bottom:14px}
.sukces__kolo{
  stroke:var(--ok,#1a9e5c);stroke-width:2.5;
  stroke-dasharray:145;stroke-dashoffset:145;
  animation:sukKolo .62s cubic-bezier(.65,0,.45,1) .12s forwards;
}
.sukces__ptaszek{
  stroke:var(--ok,#1a9e5c);stroke-width:3.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
  animation:sukPtaszek .36s cubic-bezier(.65,0,.45,1) .66s forwards;
}
@keyframes sukKolo{to{stroke-dashoffset:0}}
@keyframes sukPtaszek{to{stroke-dashoffset:0}}

.sukces__nad{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ok,#1a9e5c);margin-bottom:6px;
}
.sukces__tytul{font-size:23px;line-height:1.2;margin-bottom:12px}
.sukces__termin{
  font-weight:700;font-size:16.5px;line-height:1.35;
  margin-bottom:10px;color:var(--ink);
}
.sukces__tresc{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:22px}
.sukces__tresc em{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
.sukces__ok{width:100%;min-height:50px;font-size:16px}
.sukces__x{
  position:absolute;top:8px;right:8px;width:42px;height:42px;
  border:none;background:none;font-size:26px;line-height:1;
  color:var(--muted);cursor:pointer;border-radius:50%;
}
.sukces__x:hover{background:var(--paper-2);color:var(--ink)}

/* --- konfetti --- */
.sukces__konfetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
/* Wysyp z ptaszka musi być NAD kartą (karta ma z-index 2 i kryjące
   tło), inaczej płatki znikają za nią. */
.sukces__bryzg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.konf{
  position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;
  will-change:transform,opacity;
  animation:konfSpada linear forwards;
}
@keyframes konfSpada{
  0%  {transform:translate3d(0,-10vh,0) rotate(0deg);opacity:1}
  85% {opacity:1}
  100%{transform:translate3d(var(--dx,0),105vh,0) rotate(var(--obrot,540deg));opacity:0}
}

/* --- wysyp konfetti prosto z ptaszka ---
   Samo opadanie z góry wygląda jak tło. Krótki wystrzał od środka
   znaczka wiąże animację z tym, co klient właśnie kliknął. */
.konf--bryzg{
  top:auto;left:auto;width:7px;height:7px;border-radius:2px;
  animation:konfBryzg cubic-bezier(.18,.7,.3,1) forwards;
}
@keyframes konfBryzg{
  0%  {transform:translate3d(0,0,0) scale(.3) rotate(0deg);opacity:1}
  70% {opacity:1}
  100%{transform:translate3d(var(--bx,0),var(--by,0),0) scale(1) rotate(var(--obrot,360deg));opacity:0}
}

/* --- impuls wokół znaczka ---
   Dwa pierścienie rozchodzą się dokładnie w chwili, gdy ptaszek
   kończy się rysować. To ten jeden moment, w którym rezerwacja
   staje się faktem. */
.sukces__znak{position:relative}
.sukces__znak::before,
.sukces__znak::after{
  content:"";position:absolute;top:50%;left:50%;width:78px;height:78px;
  margin:-39px 0 0 -39px;border-radius:50%;
  border:2px solid var(--ok,#1a9e5c);opacity:0;pointer-events:none;
  animation:sukImpuls 1.15s cubic-bezier(.22,.7,.3,1) 1s forwards;
}
.sukces__znak::after{animation-delay:1.22s}
@keyframes sukImpuls{
  0%  {transform:scale(.85);opacity:.55}
  100%{transform:scale(2.1);opacity:0}
}

/* --- linijki tekstu wchodzą po kolei ---
   Wszystko naraz czyta się jak wyskakujące okienko. Po kolei —
   jak odpowiedź. */
.sukces__nad,.sukces__tytul,.sukces__termin,.sukces__tresc,.sukces__ok{
  animation:sukWiersz .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.sukces__nad   {animation-delay:.70s}
.sukces__tytul {animation-delay:.80s}
.sukces__termin{animation-delay:.92s}
.sukces__tresc {animation-delay:1.02s}
.sukces__ok    {animation-delay:1.14s}
@keyframes sukWiersz{
  from{opacity:0;transform:translateY(9px)}
  to  {opacity:1;transform:none}
}

@media (max-width:420px){
  .sukces{padding:14px}
  .sukces__karta{padding:28px 18px 22px}
  .sukces__tytul{font-size:21px}
}

/* Kto prosi o mniej ruchu, dostaje gotowe potwierdzenie bez animacji
   i bez konfetti (konfetti nie jest wtedy w ogóle tworzone w JS). */
@media (prefers-reduced-motion:reduce){
  .sukces__tlo,.sukces__karta{animation:none}
  .sukces__kolo,.sukces__ptaszek{animation:none;stroke-dashoffset:0}
  .sukces__znak::before,.sukces__znak::after{animation:none;opacity:0}
  .sukces__nad,.sukces__tytul,.sukces__termin,.sukces__tresc,.sukces__ok{
    animation:none;opacity:1;transform:none;
  }
}

/* =====================================================================
   CZYTELNOŚĆ I PALEC NA TELEFONIE
   ---------------------------------------------------------------------
   Klienci warsztatu to w dużej części osoby po czterdziestce, a na
   telefonie etykiety miały 10,5 px i zgoda RODO 20x20 px. Tu wszystko,
   co na małym ekranie było za drobne albo za małe, żeby trafić.
   ===================================================================== */
@media (max-width:720px){

  /* --- etykiety pól formularza --- */
  .f label{font-size:12.5px;letter-spacing:.1em}

  /* --- numerki kroków i podpisy przy kaflach --- */
  .step__tag{font-size:11.5px}
  .svc__meta{font-size:12.5px}
  .chip small{font-size:12.5px}
  .fact__k,.info__k{font-size:11.5px}
  .footer__bottom,.footer__bottom span{font-size:12.5px}

  /* --- „Rezerwuj →" na kaflu usługi: pełnoprawny przycisk --- */
  .svc__meta a{
    display:inline-flex;align-items:center;min-height:44px;
    padding:0 2px;font-weight:600;
  }

  /* --- numery telefonu: trafialne, nie 18-pikselowa linijka tekstu --- */
  .fact a[href^="tel:"],.info a[href^="tel:"],
  .footer a[href^="tel:"],.kontakt a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* --- zgoda RODO: największe pojedyncze pole do trafienia
         w całym formularzu, a było najmniejsze --- */
  .consent{align-items:flex-start;gap:12px}
  .consent input[type="checkbox"]{
    width:24px;height:24px;flex:none;margin-top:1px;
    /* powiększamy samo pole dotyku bez ruszania wyglądu ramki */
    position:relative;
  }
  .consent input[type="checkbox"]::before{
    content:"";position:absolute;inset:-10px;
  }
  .consent label,.consent>span{font-size:13.5px;line-height:1.5}
}

/* Ikony w pasku i przycisk „do góry" — 18 i 43 px to za mało, żeby
   pewnie trafić kciukiem w jadącym aucie. */
@media (max-width:720px){
  .header__phone{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    /* bez tego układ nagłówka ściskał ikonę do 35 px przy 320 px */
    flex:none;
  }
  .burger{width:46px;height:44px;flex:none}
  /* nagłówki kolumn kalendarza i podpis pod oceną */
  .day-head{font-size:11.5px}
  .score__src{font-size:11.5px}
}

/* Etykiety w podsumowaniu rezerwacji („Usługa", „Dzień", „Godzina")
   miały 10 px — to ostatnie miejsce, gdzie klient sprawdza, co zamawia. */
@media (max-width:720px){
  .summary dt{font-size:11.5px}
}

/* ---------- Drobny tekst, który coś znaczy ----------
   Podniesione tylko to, co niesie informację. Nadtytuły sekcji
   („Zakres usług”) i numerki kroków zostają małe — są ozdobne,
   a wersaliki z rozstrzeleniem czytają się większe, niż wynika
   z rozmiaru. Klienci warsztatu bywają starsi i czytają to
   w słońcu na parkingu, więc tu kilka pikseli robi różnicę. */
@media (max-width:720px){
  /* etykiety pól — mówią, co wpisać */
  .f label{font-size:13.5px}
  /* „nie wybrano” — mówi, czego brakuje do rezerwacji */
  .step__hint{font-size:13px}
  /* czas trwania i „Rezerwuj” na kafelkach i chipach usług */
  .svc__meta,.svc__meta a,.chip small{font-size:13px}
}

/* =====================================================================
   POLA FORMULARZA NA TELEFONIE
   ---------------------------------------------------------------------
   Safari na iPhonie sam przybliża stronę, gdy dotknięte pole ma
   czcionkę mniejszą niż 16 px — klient musiał po każdym kliknięciu
   odszczypywać widok. 16 px to próg, poniżej którego iOS zoomuje.
   ===================================================================== */
@media (max-width:720px){
  .f input,.f select,.f textarea,
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="search"],input[type="date"],
  input[type="number"],select,textarea{
    font-size:16px;
  }
  .f input,.f select{min-height:50px}
  .f textarea{min-height:96px}
}

/* Pasek „Zadzwoń" i kółko „do góry" ustępują, gdy na ekranie jest
   przycisk rezerwacji — inaczej przykrywały go i kliknięcie
   uruchamiało połączenie zamiast zapisać termin. */
.callbar{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.callbar.is-schowany{transform:translateY(130%)}
.fab.is-schowany{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}
#wyslij{scroll-margin-bottom:96px}
@media (prefers-reduced-motion:reduce){ .callbar{transition:none} }

/* Podpis wykonawcy w stopce strony — trzeci wiersz obok nazwy firmy
   i właściciela, w tym samym wyszarzonym stylu. */
.footer__autor{opacity:.72}
@media (max-width:640px){ .footer__autor{display:block;margin-top:4px} }

/* =====================================================================
   DODATKOWY RUCH (assets/js/ruch.js)
   ===================================================================== */

/* auto: zanim skrypt je ustawi poza ekranem, jest ukryte; awaryjnie
   pokaże się samo po 3 s, gdyby skrypt się nie wczytał */
html:not(.no-js) .scena:not(.start) .auto{opacity:0;animation:pokazAwaryjnie 0s 3s forwards}
@keyframes pokazAwaryjnie{to{opacity:1}}

/* nagłówki sekcji: słowo po słowie po wejściu w ekran */
.ruch .rv .h2.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.ruch .rv .h2.split .w__i{
  display:inline-block;transform:translateY(112%);
  transition:transform .85s cubic-bezier(.22,1,.36,1);
}
.ruch .rv.is-in .h2.split .w__i{transform:none}
.ruch .rv .eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .7s .1s cubic-bezier(.3,.8,.3,1)}
.ruch .rv.is-in .eyebrow::before{transform:scaleX(1)}

/* ikony usług: kontur rysuje się, przy najechaniu ikona podskakuje */
.ruch .svc__ico svg *{stroke-dasharray:1;stroke-dashoffset:1}
.ruch .svc__card.is-in .svc__ico svg *{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s .35s cubic-bezier(.5,0,.2,1)}
.svc__ico{transition:transform .3s}
.svc__card:hover .svc__ico{animation:ikona .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes ikona{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.18) rotate(-9deg)}70%{transform:scale(.96) rotate(5deg)}100%{transform:none}}

/* pasek faktów: kolumny wjeżdżają jedna po drugiej */
.ruch .facts .fact{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.ruch .facts.is-in .fact{opacity:1;transform:none}
.ruch .facts.is-in .fact:nth-child(2){transition-delay:.1s}
.ruch .facts.is-in .fact:nth-child(3){transition-delay:.2s}
.ruch .facts.is-in .fact:nth-child(4){transition-delay:.3s}

/* gwiazdki */
.stars .gw{display:inline-block}
.ruch .stars .gw{transform:scale(0)}
.ruch .facts.is-in .stars .gw,.ruch .score.is-in .stars .gw{animation:gwiazda .6s cubic-bezier(.3,1.9,.5,1) forwards}
@keyframes gwiazda{from{transform:scale(0) rotate(-140deg)}to{transform:none}}

/* fala po kliknięciu przycisku */
.fala{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);pointer-events:none;
  animation:fala .65s ease-out forwards;
}
.btn--ghost .fala,.btn--dark .fala{background:rgba(220,11,36,.18)}
@keyframes fala{to{transform:scale(1);opacity:0}}

/* godziny w rezerwacji wskakują kolejno */
.slot:nth-child(2){animation-delay:.04s}.slot:nth-child(3){animation-delay:.08s}.slot:nth-child(4){animation-delay:.12s}
.slot:nth-child(5){animation-delay:.16s}.slot:nth-child(6){animation-delay:.2s}.slot:nth-child(7){animation-delay:.24s}
.slot:nth-child(8){animation-delay:.28s}.slot:nth-child(9){animation-delay:.32s}.slot:nth-child(n+10){animation-delay:.36s}


@media (prefers-reduced-motion:reduce){
  .pomiar__kropka,.pomiar__linia,.pomiar__karta{transform:none!important;opacity:1!important}
  .auto__skan,.auto__ping{display:none}
  .ruch .facts .fact,.stars .gw{opacity:1;transform:none}
  .btn--primary.btn--hero{animation:none}
  .slot{animation:none;opacity:1;transform:none}
}

/* =====================================================================
   REZERWACJA — ZDJĘCIE DOWODU ZAMIAST PRZEPISYWANIA
   ===================================================================== */
.rv-dowod{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-s);
  background:var(--paper-2);
}
.rv-dowod__btn{white-space:nowrap}
.rv-dowod__opis{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;max-width:72ch}
.rv-dowod__stan{
  margin:0;padding:9px 13px;border-radius:var(--r-s);font-size:13.5px;line-height:1.45;
  width:100%;
}
.rv-dowod__stan[hidden]{display:none}
.rv-dowod__stan.is-czeka{background:var(--paper-3);color:var(--ink-2)}
.rv-dowod__stan.is-dobrze{background:var(--ok-l);color:#0b6b3d;border:1px solid #b7e2cb}
.rv-dowod__stan.is-uwaga{background:#fff6e2;color:#7a4b07;border:1px solid #f0d199}
.rv-dowod__stan.is-zle{background:var(--danger-l);color:#8c1d16;border:1px solid #f3c4bf}

/* Pole, którego odczyt nie był pewny — to samo żółte podświetlenie
   co w panelu i na koncie klienta. */
.rv .f.ma-sprawdz input,
.rv .f.ma-sprawdz textarea{
  background:#fff8e6;border-color:#e8b53d;box-shadow:0 0 0 3px rgba(232,181,61,.18);
}
.rv .f.ma-sprawdz label{color:#7a4b07}