/* Poprawki z audytu UX/SEO (2026-11-13). Ładowany po index/showcase/buttons.css, więc nadpisuje ich reguły. */

/* ---------- Stopka: linki z odstępami i większym polem dotyku ---------- */
.ps-foot-nav { column-gap: 1.25rem; row-gap: .25rem; }
.ps-foot-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .25rem; }
.ps-foot-cities { column-gap: .75rem; }
.ps-foot-cities a { min-height: 2.25rem; }

/* ---------- Menu mobilne: przycisk 44 × 44 px ---------- */
@media (max-width: 1023px) {
  button[aria-controls="ps-mobile-nav"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.75rem; min-height: 2.75rem; margin-right: -.625rem;
  }
}

/* ---------- Formularze ---------- */
/* iOS powiększa stronę po kliknięciu w pole z czcionką < 16 px */
@media (max-width: 1023px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
}
/* Wstecz / Dalej w formularzu kontaktowym */
.ps-step-btn { min-height: 2.75rem; padding: 0 .5rem; margin: 0 -.5rem; }

/* ---------- Minimalny rozmiar tekstu: 12 px ---------- */
.text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: .75rem; }

/* ---------- Hero: fraza kluczowa (część H1) nad hasłem ---------- */
.ps-hero-kicker {
  display: block; margin-bottom: 1.25rem;
  font-size: .8125rem; line-height: 1.4; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgb(255 255 255 / .82);
  -webkit-text-fill-color: currentColor;
}
@media (min-width: 768px) { .ps-hero-kicker { font-size: .9375rem; } }

/* ---------- Cennik: co jest w cenie + CTA ---------- */
.ps-price-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.ps-price-list li { position: relative; padding-left: 1.25rem; }
.ps-price-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: hsl(var(--primary)); font-weight: 600; }
.ps-price-cta { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; font-weight: 600; color: hsl(var(--primary)); }
@media (hover: hover) and (pointer: fine) { .price-card:hover .ps-price-cta { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Przyklejony przycisk "Darmowa wycena" (telefon) ---------- */
.ps-sticky-cta--hero { display: none !important; }

/* ---------- Prerender: gotowa treść widoczna od razu, aplikacja podmienia ją po starcie ---------- */
/* W prerenderze zostają klasy startowe animacji (opacity-0) - w podglądzie mają być widoczne */
#ps-shell .opacity-0 { opacity: 1 !important; }
.ps-boot #root { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; }

/* ---------- Telefon: mniejsze odstępy między sekcjami (było 6rem góra i dół) ---------- */
@media (max-width: 767px) {
  .section-padding { padding: 4rem 1.25rem; }
  .ps-hero-kicker { font-size: .75rem; letter-spacing: .1em; margin-bottom: 1rem; }
  /* długie napisy (np. po niemiecku) zawijają się zamiast rozpychać sekcję */
  .btn-primary { max-width: 100%; white-space: normal; line-height: 1.25; text-align: left; }
  .btn-primary:has(> .psb-go) { min-height: 3.25rem; padding-top: .5rem; padding-bottom: .5rem; }
  .pse-split > *, .psb-split > * { min-width: 0; }
}

/* ---------- Pola dotyku: linki w stopce i okruszki (min. ~40 px) ---------- */
footer a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.psx-crumb-link, nav[aria-label="Ścieżka nawigacji"] a, nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 2.5rem; }

/* ---------- Klasy Tailwind używane w JS, których brakowało w skompilowanym CSS ---------- */
.inline-flex { display: inline-flex; }
.whitespace-nowrap { white-space: nowrap; }
.min-h-11 { min-height: 2.75rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: .25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-16 { padding-top: 4rem; }
.pb-12 { padding-bottom: 3rem; }
.pl-4 { padding-left: 1rem; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-primary\/40 { border-color: hsl(var(--primary) / .4); }
.text-foreground\/80 { color: hsl(var(--foreground) / .8); }
.tracking-\[0\.08em\] { letter-spacing: .08em; }
@media (min-width: 768px) {
  .md\:items-baseline { align-items: baseline; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:w-\[40\%\] { width: 40%; }
  .md\:w-\[60\%\] { width: 60%; }
}

/* ================= FX: efekty interakcji (src/motion-fx.js) ================= */

/* 1. Pit lane: smugi prędkości i obrotomierz przy szybkim skoku do sekcji */
.fx-warp { position: fixed; inset: 0; z-index: 70; pointer-events: none; --fx-speed: 0; }
.fx-warp-lines { position: absolute; inset: -10% 0; opacity: calc(var(--fx-speed) * .9);
  background:
    repeating-linear-gradient(90deg, transparent 0 7%, hsl(var(--primary) / .22) 7% 7.25%, transparent 7.25% 13%, rgb(255 255 255 / .5) 13% 13.15%, transparent 13.15% 19%),
    linear-gradient(180deg, hsl(var(--primary) / .1), transparent 30%, transparent 70%, hsl(var(--primary) / .1));
  filter: blur(calc(var(--fx-speed) * 1.5px));
  transform: scaleY(calc(1 + var(--fx-speed) * 2.5));
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 35%, #000 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 35%, #000 75%); }
.fx-warp-rev { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: hsl(var(--primary) / .15); }
.fx-warp-rev b { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, hsl(var(--primary)), #22c55e 55%, #facc15 80%, #ef4444); box-shadow: 0 0 12px hsl(var(--primary) / .6); }
.fx-warp--out { animation: fx-fade .45s ease forwards; }
@keyframes fx-fade { to { opacity: 0; } }
/* dojazd: błysk przelatujący przez górę docelowej sekcji */
.fx-arrive { position: relative; }
.fx-arrive::before { content: ""; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)) 45%, #fff 50%, hsl(var(--primary)) 55%, transparent);
  animation: fx-sweep-line 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes fx-sweep-line { from { transform: translateX(-100%); opacity: 1; } 80% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* 2. Płynne suwaki w kalkulatorze */
.fx-range { position: relative; }
.fx-bubble { position: absolute; top: 1.35rem; z-index: 2; min-width: 2rem; padding: .2rem .5rem; border-radius: 999px;
  translate: -50% -100%; transform: scale(var(--fx-sx, 1), var(--fx-sy, 1)) rotate(var(--fx-tilt, 0deg)); transform-origin: 50% 120%;
  background: hsl(var(--primary)); color: #fff; font-size: .8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px hsl(var(--primary) / .35); opacity: 0; pointer-events: none; transition: opacity .2s, top .25s cubic-bezier(.34,1.56,.64,1); }
.fx-bubble::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg; background: inherit; border-radius: 2px; }
.fx-range.fx-active .fx-bubble { opacity: 1; top: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .fx-range:hover .fx-bubble { opacity: 1; top: 1.1rem; } }
.fx-range input[type="range"]::-webkit-slider-thumb { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.fx-range.fx-active input[type="range"]::-webkit-slider-thumb { transform: scale(1.35); box-shadow: 0 0 0 8px hsl(var(--primary) / .15), 0 4px 12px hsl(var(--primary) / .35); }

/* 3. Przełącznik języka: pigułka + kurtyna */
.fx-lang { position: relative; isolation: isolate; }
.fx-lang-pill { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: hsl(var(--primary));
  box-shadow: 0 4px 14px hsl(var(--primary) / .35); will-change: transform, width; }
.fx-lang button { background: transparent !important; transition: color .25s; }
.fx-lang button.fx-on { color: #fff !important; }
.fx-lang button:not(.fx-on) { color: hsl(var(--muted-foreground)) !important; }
html.fx-wipe-out body::after, html.fx-wipe-in body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-conic-gradient(#0a1628 0 25%, #13233d 0 50%) 0 0 / 28px 28px, #0a1628; }
html.fx-wipe-out body::after { animation: fx-wipe-out .42s cubic-bezier(.7,0,.3,1) forwards; }
html.fx-wipe-in body::after { animation: fx-wipe-in .55s .05s cubic-bezier(.7,0,.3,1) both; }
@keyframes fx-wipe-out { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-wipe-in { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* 4. Menu w nagłówku: przeskakujące podkreślenie + przelot światła po literach */
.fx-nav { position: relative; }
.fx-nav-bar { position: absolute; left: 0; bottom: 18px; height: 2px; width: 0; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, hsl(var(--primary)), #60a5fa); box-shadow: 0 0 10px hsl(var(--primary) / .55); transition: opacity .3s; }
.fx-nav.fx-nav-on .fx-nav-bar { opacity: 1; }
.fx-sweep { background: linear-gradient(100deg, hsl(var(--muted-foreground)) 0 40%, hsl(var(--primary)) 47%, hsl(var(--foreground)) 53%, hsl(var(--foreground)) 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position .6s cubic-bezier(.2,.7,.2,1); }
.fx-sweep:focus-visible { background-position: 0 0; }
@media (hover: hover) and (pointer: fine) { .fx-sweep:hover { background-position: 0 0; } }

/* 5. Telefon: fala po dotknięciu, wciśnięcie, menu wjeżdżające kolejno, sprężysty CTA */
.fx-ripple-host { overflow: hidden; isolation: isolate; }
.fx-ripple { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 70%);
  transform: scale(0); animation: fx-ripple .65s cubic-bezier(.2,.7,.2,1) forwards; }
.price-card .fx-ripple, .pse-cfg-chip .fx-ripple, #contact button .fx-ripple { background: radial-gradient(circle, hsl(var(--primary) / .22), transparent 70%); }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
/* (wciśnięcie :active usunięte - na iOS zmiany w chwili dotknięcia blokowały kliknięcia) */
#ps-mobile-nav > * { animation: fx-menu-in .45s cubic-bezier(.2,.8,.2,1) both; }
#ps-mobile-nav > :nth-child(2) { animation-delay: .04s; } #ps-mobile-nav > :nth-child(3) { animation-delay: .08s; }
#ps-mobile-nav > :nth-child(4) { animation-delay: .12s; } #ps-mobile-nav > :nth-child(5) { animation-delay: .16s; }
#ps-mobile-nav > :nth-child(6) { animation-delay: .2s; } #ps-mobile-nav > :nth-child(7) { animation-delay: .24s; }
#ps-mobile-nav > :nth-child(n+8) { animation-delay: .28s; }
@keyframes fx-menu-in { from { opacity: 0; transform: translateX(-18px); } }
@media (max-width: 767px) {
  .ps-sticky-cta { animation: fx-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
}
@keyframes fx-pop { from { transform: translateY(140%) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .fx-warp, .fx-bubble, .fx-nav-bar, .fx-ripple { display: none !important; }
  #ps-mobile-nav > *, .ps-sticky-cta, .fx-arrive::before { animation: none !important; }
  html.fx-wipe-out body::after, html.fx-wipe-in body::after { display: none; }
}

/* Ekrany dotykowe: bez efektów odsłanianych przy najechaniu (Tailwind group-hover) - iPhone wymagałby dwóch stuknięć */
@media (hover: none) {
  .group:hover .group-hover\:opacity-100 { opacity: 0; }
}