/* Podstrony usług (/uslugi/*) i strony formularza (/kontakt/*) — generowane przez tools/uslugi.py.
   Ładowane po style.css: te same tokeny, sekcje na zmianę ciemne i srebrne, bez nowych kolorów. */

.uintro {
  display: grid; gap: 1.25rem; justify-items: start;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(48px, 10svh, 120px)) var(--gutter) clamp(64px, 12svh, 130px);
}
.uintro--solo { min-height: 70svh; align-content: center; }
.uintro__back {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .5rem;
  font-size: .94rem; color: var(--szary); text-decoration: none; transition: color .18s ease;
}
.uintro__back:hover { color: var(--biel); }
.uintro__back:hover .arr { transform: translateX(-3px); }
.uintro h1 { margin: 0; max-width: 14em; font-size: clamp(2.8rem, 7vw, 7rem); font-weight: 600; line-height: .95; letter-spacing: -.058em; }
.uintro__lead { margin: .5rem 0 0; max-width: 58ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--srebro); }
.uintro__lead a { color: var(--biel); }
.uintro__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* „Brzmi znajomo?” — sytuacje klienta, linie jak w Pytaniach */
.ukiedy { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ln); }
.ukiedy li {
  padding: clamp(18px, 3svh, 28px) 0 clamp(18px, 3svh, 28px) 2.2rem; position: relative;
  border-bottom: 1px solid var(--ln); font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.35; letter-spacing: -.02em;
}
.ukiedy li::before { content: ""; position: absolute; left: 0; top: calc(clamp(18px, 3svh, 28px) + .45em); width: .7rem; height: .7rem; border: 1.5px solid currentColor; }

/* „Od rozmowy do wdrożenia” — 4 kroki */
.ustep { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ln); }
.ustep li { display: grid; gap: .5rem; padding: clamp(20px, 3.5svh, 32px) 0; border-bottom: 1px solid var(--ln); }
.ustep h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -.035em; }
.ustep p { margin: 0; max-width: 40rem; line-height: 1.6; color: var(--tx2); }
.ustep__n { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: var(--tx3); }
@media (min-width: 900px) {
  .ustep { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
}

/* Przykład — jedna duża linia z odnośnikiem */
.uex { display: grid; gap: 1.1rem; justify-items: start; }
.uex h2 { margin: 0; max-width: 20em; font-size: clamp(2rem, 4.4vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.uex h2 a { text-decoration: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3em; }
.uex h2 a:hover .arr { transform: translateX(6px); }
.uex h2 .arr { width: .7em; height: .7em; }
.uex__opis { margin: 0; max-width: 56ch; color: var(--srebro); line-height: 1.6; }
.uex__scen { margin: .75rem 0 0; max-width: 62ch; padding: 1.2rem 1.4rem; border: 1px solid var(--linia); border-left: 3px solid var(--srebro);
  background: var(--grafit); color: var(--srebro); line-height: 1.6; }

/* Inne usługi pod nagłówkiem Pytań */
.uinne { display: grid; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.uinne a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--tx2); text-decoration: none; font-weight: 500; }
.uinne a:hover { color: var(--noc); }
.uinne a:hover .arr { transform: translateX(3px); }