/* ==========================================================================
   WikTymOne - components.css
   Pasek pilny, nawigacja, przyciski, hero, mechanizm „kamera”, sekcje.
   ========================================================================== */

/* --- Pasek pilny (zawsze widoczny, główna ścieżka konwersji) -------------- */

.pilny {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 90;
  height: var(--pasek-h);
  background: var(--granat-glab);
  border-bottom: 1px solid var(--rysa);
}

.pilny__wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.pilny__etykieta {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--sygnal);
  white-space: nowrap;
}

.pilny__tel {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: var(--fs-400);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--kreda);
  white-space: nowrap;
  transition: color var(--t-szybki) var(--ease);
}

.pilny__tel:hover { color: var(--sygnal); }

.pilny__meta {
  font-size: var(--fs-200);
  color: var(--szron);
  margin-inline-start: auto;
  white-space: nowrap;
}

.pilny__akcje { display: none; gap: var(--s-2); margin-inline-start: auto; }

.pilny__akcja {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
}

.pilny__akcja--tel { background: var(--sygnal); color: var(--stal); font-weight: 500; }
.pilny__akcja--pisz { border: 1px solid var(--rysa); color: var(--kreda); }

@media (max-width: 56rem) {
  .pilny__meta { display: none; }
  .pilny__etykieta { display: none; }
  .pilny__tel { display: none; }
  .pilny__akcje { display: flex; width: 100%; }
  .pilny__akcja { flex: 1; justify-content: center; }
}

/* Na desktopie pasek znika (sesja 4): nawigacja przejmuje telefon jako
   pierwszy element po prawej. Zerowanie --pasek-h w tym samym miejscu
   przelicza od razu padding body, wysokość hero, pozycję sticky nawigacji
   i offset kotwic w main.js - jedna zmienna, pięć miejsc. */
@media (min-width: 64rem) {
  :root { --pasek-h: 0px; }
  .pilny { display: none; }
}

/* Telefon w nawigacji (tylko desktop). Etykieta w mono nad numerem -
   ta sama treść, którą niósł pasek, tylko bez osobnego wiersza. */
.nav__tel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--kreda);
  padding-inline: var(--s-4);
  border-inline-start: 1px solid var(--rysa);
  line-height: 1;
}

.nav__tel-etykieta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--sygnal);
}

.nav__tel-numer {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  transition: color var(--t-szybki) var(--ease);
}

.nav__tel:hover .nav__tel-numer { color: var(--sygnal); }

@media (min-width: 64rem) {
  .nav__tel { display: flex; }
}

/* --- Nawigacja ------------------------------------------------------------ */

.nav {
  position: relative;
  z-index: 80;
  border-bottom: 1px solid var(--rysa);
  background: var(--stal);
}

.nav__wrap {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--kreda);
}

.nav__znak { width: 2.25rem; height: 2.25rem; flex: none; }

.nav__nazwa {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.nav__podpis {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--szron);
  margin-top: 0.2rem;
}

.nav__lista {
  display: none;
  align-items: center;
  gap: var(--s-5);
  margin-inline-start: auto;
}

.nav__link {
  font-size: var(--fs-200);
  text-decoration: none;
  color: var(--szron);
  position: relative;
  padding-block: var(--s-2);
  transition: color var(--t-szybki) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--woda);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-bazowy) var(--ease);
}

.nav__link:hover { color: var(--kreda); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__burger {
  margin-inline-start: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
}

.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--kreda);
  transition: transform var(--t-bazowy) var(--ease), opacity var(--t-szybki) var(--ease);
}

.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 64rem) {
  .nav { position: sticky; inset-block-start: var(--pasek-h); }
  .nav__lista { display: flex; }
  .nav__burger { display: none; }
}

/* Szuflada mobilna */
.szuflada {
  position: fixed;
  inset: var(--pasek-h) 0 0 0;
  z-index: 85;
  background: var(--granat-glab);
  padding: var(--s-7) var(--gutter);
  display: grid;
  align-content: start;
  gap: var(--s-4);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-wolny) var(--ease), visibility 0s linear var(--t-wolny);
}

.szuflada[data-otwarta="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-wolny) var(--ease), visibility 0s;
}

.szuflada__link {
  font-family: var(--font-naglowek);
  font-size: var(--fs-500);
  text-decoration: none;
  color: var(--kreda);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rysa);
}

/* --- Przyciski ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform var(--t-szybki) var(--ease),
              background-color var(--t-szybki) var(--ease),
              border-color var(--t-szybki) var(--ease),
              color var(--t-szybki) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--pilny { background: var(--sygnal); color: var(--stal); font-weight: 500; }
.btn--pilny:hover { background: #ffb43a; }

.btn--duch { border-color: var(--rysa); color: var(--kreda); }
.btn--duch:hover { border-color: var(--woda); color: var(--woda-jasna); }

.btn--jasny { background: var(--granat); color: var(--kreda); }
.btn--jasny:hover { background: var(--stal); }

/* --- Hero (v3: karta zlecenia) -------------------------------------------- */

.hero {
  position: relative;
  min-height: min(calc(96svh - var(--pasek-h) - 4.5rem), 52rem);
  display: grid;
  align-content: center;
  gap: var(--s-6);
  padding-block: var(--s-6);
  overflow: clip;
  isolation: isolate;
  background: var(--stal);
}

/* Siatka techniczna - ledwie widoczna, ma dawać wrażenie papieru
   milimetrowego pod spodem, nie kraty. */
.hero__raster {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(230, 237, 245, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 237, 245, .045) 1px, transparent 1px),
    radial-gradient(100% 80% at 68% 34%, rgba(18, 48, 107, .55), transparent 70%);
  background-size: 88px 88px, 88px 88px, 100% 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

.hero__instalacja {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__uklad {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__uklad {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--s-8);
  }
}

/* --- Kolumna treści ------------------------------------------------------- */

.hero__tresc {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-3);
  align-content: center;
}

.hero__etykieta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--woda-jasna);
}

@media (max-width: 40rem) {
  .hero__etykieta-srodek { display: none; }
}

.hero__znacznik {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sygnal);
  flex: none;
}

/* Tytuł w układzie dwukolumnowym jest mniejszy niż w wersji pełnoekranowej -
   kolumna ma ~600 px, a wers „zgadywania.” musi się w niej zmieścić bez
   łamania (łamanie rozbija maskę wersu). */
.hero__tytul {
  display: grid;
  gap: 0.04em;
  font-size: clamp(2.125rem, 1.1rem + 3.1vw, 4.25rem);
}

/* Maska wersu - tekst wjeżdża od dołu spod krawędzi */
.hero__wers {
  display: block;
  overflow: hidden;
  padding-block-end: 0.06em;
}

.hero__wers > span { display: block; }

.hero__tytul em { font-style: normal; color: var(--woda-jasna); }

.hero__lead {
  font-size: var(--fs-400);
  color: var(--kreda);
  max-width: 34rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* Metryka: pasek na całą szerokość pod układem - stopka karty dokumentu.
   Etykieta w mono nad wartością, cztery pozycje w rzędzie na desktopie. */
.hero__stopka {
  position: relative;
  z-index: 2;
}

.hero__spec {
  display: grid;
  gap: var(--s-4) var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rysa);
}

@media (min-width: 40rem) {
  .hero__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .hero__spec { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hero__spec-poz {
  display: grid;
  gap: var(--s-1);
  align-content: start;
}

.hero__spec dt {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--szron);
}

.hero__spec dd {
  margin: 0;
  font-size: var(--fs-200);
  color: var(--kreda);
}

/* --- Kadr w ramce inspekcyjnej -------------------------------------------- */

.hero__kadr {
  position: relative;
  z-index: 3;
  margin: 0;
  aspect-ratio: 16 / 10;
  will-change: transform;
}

@media (max-width: 63.99rem) {
  .hero__kadr { aspect-ratio: 16 / 10; }
}

.hero__kadr-okno {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05090d;
}

.hero__kadr-okno img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  filter: brightness(0.86) saturate(0.95);
  will-change: transform;
}

/* Naroża zamiast pełnej ramki - znak kadru, nie obwódka obrazka. */
.hero__naroza {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background:
    linear-gradient(var(--woda), var(--woda)) 0 0 / 26px 1px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 0 0 / 1px 26px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 100% 0 / 26px 1px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 100% 0 / 1px 26px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 0 100% / 26px 1px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 0 100% / 1px 26px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 100% 100% / 26px 1px no-repeat,
    linear-gradient(var(--woda), var(--woda)) 100% 100% / 1px 26px no-repeat;
}

.hero__podpis {
  position: absolute;
  inset-block-start: calc(100% + var(--s-4));
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--szron);
}

/* --grafit jest kolorem tekstu na JASNYM tle - na stali daje 2,1:1.
   Podpis kadru zostaje na --szron (7,49:1), a pierwszy człon dostaje
   pełną kredę, żeby para miała hierarchię bez utraty kontrastu. */
.hero__podpis span:first-child { color: var(--kreda); }

@media (max-width: 63.99rem) {
  /* Kadr rezerwuje pas na podpis pod oknem, a naroża obejmują samo okno -
     wcześniej łapały też podpis i wyglądały jak błąd ramki. */
  .hero__kadr { aspect-ratio: auto; padding-bottom: 2rem; }
  .hero__kadr-okno { position: relative; aspect-ratio: 16 / 10; }
  .hero__naroza { inset: -10px -10px calc(2rem - 10px) -10px; }
  .hero__podpis {
    inset-block-start: auto;
    inset-block-end: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

/* Winieta domykająca kadr, gdy wypełni ekran - przejście do sekcji kamery. */
.hero__winieta {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(76% 66% at 50% 48%, transparent 26%, rgba(13, 20, 28, .74) 66%, var(--stal) 100%);
}

.hero__wskaznik {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-end: var(--s-5);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--szron);
}

.hero__wskaznik::after {
  content: "";
  width: 4rem;
  height: 1px;
  background: linear-gradient(to right, var(--woda), transparent);
}

@media (min-width: 64rem) {
  .hero__wskaznik { display: flex; }
}

/* --- Trzy wejścia --------------------------------------------------------- */

.wejscie {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--stal-plus);
  border: 1px solid var(--rysa);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-bazowy) var(--ease), transform var(--t-bazowy) var(--ease);
}

.wejscie:hover { border-color: var(--woda); transform: translateY(-3px); }

.wejscie__numer {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  color: var(--woda);
}

.wejscie__tytul { font-size: var(--fs-500); }
.wejscie h3 { margin: 0; }
.wejscie p { color: var(--tekst-cichy); }

.wejscie--pilne {
  background: linear-gradient(160deg, rgba(240, 162, 27, .12), transparent 60%), var(--stal-plus);
  border-color: rgba(240, 162, 27, .38);
}

.wejscie--pilne .wejscie__numer { color: var(--sygnal); }
.wejscie--pilne:hover { border-color: var(--sygnal); }

.wejscie__link {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--woda-jasna);
  margin-top: var(--s-2);
}

.wejscie--pilne .wejscie__link { color: var(--sygnal); }

/* --- Mechanizm: kamera w rurze -------------------------------------------- */

.kamera {
  background: var(--stal);
  padding-block: 0;
}

.kamera__scena {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--s-6);
  padding-block: var(--s-8);
}

@media (min-width: 64rem) {
  .kamera__scena {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: center;
  }
}

.kamera__ekran {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Ściana rury oświetlona pierścieniem kamery - bez tego tunel jest płaski */
  background:
    radial-gradient(circle at 50% 48%,
      #05090d 0 14%, #0e1c28 34%, #0b1620 58%, #070d13 78%, #05090d 100%);
  border: 1px solid var(--rysa);
  border-radius: var(--radius);
  overflow: hidden;
  perspective: 620px;
  perspective-origin: 50% 48%;
  isolation: isolate;
}

@media (min-width: 64rem) {
  .kamera__ekran { aspect-ratio: 16 / 11; }
}

.kamera__tunel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.kamera__pierscien {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78%;
  aspect-ratio: 1;
  border: 2px solid rgba(46, 126, 192, .5);
  border-radius: 50%;
  transform: translateZ(calc(var(--i) * -520px)) rotate(calc(var(--i) * 4deg));
  box-shadow: 0 0 24px rgba(46, 126, 192, .18) inset;
}

.kamera__pierscien:nth-child(even) {
  border-color: rgba(147, 167, 188, .3);
  width: 74%;
}

/* Głębia: ciemny środek i ciemne krawędzie - rury nie widać w nieskończoność */
.kamera__glebia {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 50% 48%, rgba(5, 9, 13, .96) 0%, rgba(5, 9, 13, .55) 45%, transparent 72%),
    radial-gradient(120% 120% at 50% 48%, transparent 42%, rgba(5, 9, 13, .78) 78%, #05090d 100%);
}

.kamera__nakladki {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.nakladka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.nakladka path,
.nakladka circle,
.nakladka ellipse { vector-effect: non-scaling-stroke; }

.kamera__hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 237, 245, .62);
}

.kamera__hud-gora,
.kamera__hud-dol {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.kamera__rec {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--sygnal);
}

.kamera__rec::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sygnal);
}

.kamera__metr { color: var(--kreda); }

/* Ramka rejestratora - cztery narożniki */
.kamera__ramka {
  position: absolute;
  inset: var(--s-3);
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(var(--rysa), var(--rysa)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--rysa), var(--rysa)) 100% 100% / 1px 18px no-repeat;
}

/* Panel opisów */
.kamera__panel { display: grid; gap: var(--s-5); }

.przystanki {
  position: relative;
  display: grid;
}

.przystanek {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.przystanek__numer {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  color: var(--woda);
}

.przystanek__ikona { display: none; }

.przystanek h3 { font-size: var(--fs-600); }
.przystanek p { color: var(--tekst-cichy); }
.przystanek__rozwiazanie { color: var(--kreda); }

.przystanek__rozwiazanie::before {
  content: "→ ";
  color: var(--woda);
}

.kamera__stopka {
  border-top: 1px solid var(--rysa);
  padding-top: var(--s-5);
  color: var(--tekst-cichy);
  max-width: 34rem;
}

/* Postęp przejazdu */
.kamera__postep {
  position: relative;
  height: 2px;
  background: var(--rysa);
}

.kamera__postep span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--woda);
  transform: scaleX(0);
  transform-origin: left;
}

/* Wariant mobilny (sesja 4). Ekran kamery jest przyklejonym TŁEM na całą
   szerokość, a karty przystanków przewijają się NAD nim, na własnym
   podkładzie. Wcześniej tekst wjeżdżał pod ekran i urywał się przy jego
   górnej krawędzi - to była wada kompozycji, nie animacji. */
@media (max-width: 63.99rem) {
  .kamera__scena {
    min-height: 0;
    padding-block: var(--s-6) 22svh;
  }

  .kamera--mobilna .kamera__ekran {
    position: sticky;
    inset-block-start: var(--pasek-h);
    z-index: 1;
    aspect-ratio: auto;
    height: 60svh;
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
    border-radius: 0;
    perspective-origin: 50% 40%;
  }

  /* Tunel siedzi wyżej, żeby jego środek nie chował się pod kartami. */
  .kamera--mobilna .kamera__ekran { background-position: 50% 40%; }
  .kamera--mobilna .kamera__pierscien { inset: 0 0 20% 0; }
  .kamera--mobilna .kamera__glebia {
    background:
      radial-gradient(38% 38% at 50% 40%, rgba(5, 9, 13, .96) 0%, rgba(5, 9, 13, .55) 45%, transparent 72%),
      radial-gradient(120% 120% at 50% 40%, transparent 42%, rgba(5, 9, 13, .78) 78%, #05090d 100%);
  }
  .kamera--mobilna .nakladka { inset: 0 0 20% 0; height: 80%; }

  .kamera--mobilna .kamera__panel { position: relative; z-index: 2; }
  .kamera--mobilna .kamera__postep { display: none; }

  .kamera--mobilna .przystanki {
    display: grid;
    gap: 34svh;
    margin-top: -16svh;
  }

  /* HUD w dwóch wierszach u góry: dolne 40% ekranu należy do kart. */
  .kamera--mobilna .kamera__hud { justify-content: flex-start; gap: var(--s-2); }

  .kamera--mobilna .przystanek {
    grid-area: auto;
    padding: var(--s-5);
    background: var(--stal-plus);
    border: 1px solid var(--rysa);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
  }

  .kamera--mobilna .kamera__stopka {
    margin-top: var(--s-7);
    padding: var(--s-5);
    border: 1px solid var(--rysa);
    background: var(--stal-plus);
  }
}

/* Wariant statyczny - prefers-reduced-motion albo brak JS */
.kamera--statyczna .przystanki {
  display: grid;
  gap: var(--s-6);
}

.kamera--statyczna .przystanek {
  grid-area: auto;
  opacity: 1 !important;
  transform: none !important;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rysa);
}

.kamera--statyczna .przystanek__ikona {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--woda);
}

.kamera--statyczna .kamera__scena { min-height: 0; }
.kamera--statyczna .kamera__postep { display: none; }

/* --- Rejestr usług -------------------------------------------------------- */

.rejestr { border-top: 1px solid var(--rysa-jasna); }

.rejestr__poz {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rysa-jasna);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-szybki) var(--ease);
}

@media (min-width: 60rem) {
  .rejestr__poz { grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr) 2rem; }
}

.rejestr__poz:hover { background: rgba(18, 48, 107, .05); }

.rejestr__numer {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--woda);
}

.rejestr__nazwa {
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--fs-500);
  line-height: 1.15;
}

.rejestr__opis { color: var(--grafit); }

.rejestr__strzalka {
  display: none;
  color: var(--granat);
  transition: transform var(--t-bazowy) var(--ease);
}

@media (min-width: 60rem) { .rejestr__strzalka { display: block; } }

.rejestr__poz:hover .rejestr__strzalka { transform: translateX(6px); }

/* --- Porównanie metod ----------------------------------------------------- */

.metody { display: grid; gap: var(--s-5); }

@media (min-width: 60rem) {
  .metody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.metoda {
  padding: var(--s-6);
  border: 1px solid var(--rysa);
  border-radius: var(--radius);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.metoda--wyrozniona {
  border-color: rgba(46, 126, 192, .5);
  background: linear-gradient(180deg, rgba(46, 126, 192, .08), transparent 55%);
}

.metoda__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--woda);
}

.metoda ul { display: grid; gap: var(--s-2); color: var(--tekst-cichy); list-style: none; }

.metoda li { padding-left: 1.25rem; position: relative; }

.metoda li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--woda);
}

/* --- Proces --------------------------------------------------------------- */

.proces { display: grid; gap: 0; }

.krok {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rysa);
}

.krok__numer {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--woda);
  padding-top: 0.35em;
}

.krok h3 { font-size: var(--fs-500); margin-bottom: var(--s-2); }
.krok p { color: var(--tekst-cichy); max-width: 46rem; }

/* --- Pasmo B2B ------------------------------------------------------------ */

.b2b {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .b2b { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); }
}

.b2b__lista { display: grid; gap: var(--s-3); }

.b2b__poz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rysa);
  color: var(--tekst-cichy);
}

.b2b__poz strong { color: var(--kreda); font-weight: 600; }

/* --- Flota ---------------------------------------------------------------- */

.flota__kadr {
  position: relative;
  border: 1px solid var(--rysa);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--s-6);
}

.flota__kadr img { width: 100%; height: auto; }

.flota__podpis {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--s-4);
  background: linear-gradient(to top, rgba(13, 20, 28, .9), transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--kreda);
}

/* --- Zaufanie ------------------------------------------------------------- */

.opinia {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--rysa);
  border-radius: var(--radius);
  background: var(--stal-plus);
}

.opinia blockquote { color: var(--tekst-cichy); font-size: var(--fs-400); }
.opinia figcaption { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--szron); }

.placeholder {
  display: inline-block;
  padding: 0.1em 0.45em;
  background: rgba(240, 162, 27, .14);
  border: 1px dashed rgba(240, 162, 27, .5);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: var(--sygnal);
}

.sekcja--jasna .placeholder { color: #9a6200; background: rgba(240, 162, 27, .16); }

/* --- Obszar --------------------------------------------------------------- */

.obszar__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
}

.obszar__lista li {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rysa-jasna);
  border-radius: var(--radius);
  color: var(--grafit);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--rysa); }

.faq__poz { border-bottom: 1px solid var(--rysa); }

.faq__pyt {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-5);
  text-align: left;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--fs-500);
  color: var(--kreda);
}

.faq__znak {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.faq__znak::before,
.faq__znak::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--woda);
  transition: transform var(--t-bazowy) var(--ease);
}

.faq__znak::after { transform: rotate(90deg); }

.faq__pyt[aria-expanded="true"] .faq__znak::after { transform: rotate(0deg); }

.faq__odp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-bazowy) var(--ease);
}

.faq__odp > div { overflow: hidden; }

.faq__poz[data-otwarte="true"] .faq__odp { grid-template-rows: 1fr; }

.faq__odp p {
  color: var(--tekst-cichy);
  max-width: 52rem;
  padding-bottom: var(--s-5);
}

/* --- Kontakt (zapowiedź, pełny formularz w sesji 3) ----------------------- */

.kontakt {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 64rem) {
  .kontakt { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
}

.kontakt__tresc { display: grid; gap: var(--s-6); align-content: start; }
.kontakt__wiecej { font-size: var(--fs-200); color: var(--grafit); }
.kontakt__wiecej a { color: var(--granat); }

.kontakt__dane { display: grid; gap: var(--s-4); align-content: start; }

.kontakt__poz {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rysa-jasna);
}

.kontakt__poz dt {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--grafit);
}

.kontakt__poz dd {
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--fs-500);
  color: var(--stal);
}

.kontakt__poz a { text-decoration: none; color: var(--granat); }
.kontakt__poz a:hover { text-decoration: underline; }

/* --- Stopka --------------------------------------------------------------- */

.stopka__grupa h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--szron);
  margin-bottom: var(--s-4);
}

.stopka__grupa ul { display: grid; gap: var(--s-2); list-style: none; }

.stopka__grupa a {
  text-decoration: none;
  color: var(--kreda);
  font-size: var(--fs-200);
  transition: color var(--t-szybki) var(--ease);
}

.stopka__grupa a:hover { color: var(--woda-jasna); }

.stopka__nap { color: var(--tekst-cichy); font-size: var(--fs-200); }
.stopka__nap strong { display: block; color: var(--kreda); font-size: var(--fs-300); margin-bottom: var(--s-2); }

/* --- Kontrast akcentów na jasnym tle -------------------------------------- */
/* --woda na --mgla to 3,95:1 - za mało dla małego tekstu (AA wymaga 4,5).
   Na jasnych sekcjach akcent tekstowy przechodzi na --granat (11,56:1). */

.sekcja--jasna .naglowek__numer,
.sekcja--jasna .rejestr__numer,
.sekcja--jasna .metoda__tag,
.sekcja--jasna .przystanek__numer,
.sekcja--jasna .wejscie__numer { color: var(--granat); }

.sekcja--jasna .rejestr__poz:hover .rejestr__nazwa { color: var(--granat); }

/* --- Proces: nitka instalacji --------------------------------------------- */
/* Ten sam motyw co w Hero, tylko pionowo. Nitka rysuje się przewijaniem
   (transform: scaleY), węzły siedzą na niej przy numerach kroków. */

.proces { position: relative; }

.proces__nitka {
  position: absolute;
  inset-block: var(--s-5) var(--s-5);
  inset-inline-start: 3rem;
  width: 1px;
  background: var(--rysa);
  pointer-events: none;
}

.proces__nitka i {
  display: block;
  height: 100%;
  background: var(--woda);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.krok { position: relative; }

.krok::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(3rem - 3px);
  inset-block-start: calc(var(--s-5) + 0.42em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--granat-glab);
  border: 1px solid var(--woda);
  z-index: 1;
}

@media (max-width: 40rem) {
  .proces__nitka { inset-inline-start: 1.05rem; }
  .krok::before { inset-inline-start: calc(1.05rem - 3px); }
}

/* --- Dopracowanie wizualne (sesja 3) -------------------------------------- */

/* Nagłówek sekcji dostaje krótką kreskę akcentu - porządkuje start sekcji
   i powtarza motyw linii bez dokładania ruchu. */
.naglowek__numer {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.naglowek__numer::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--woda);
}

/* Wejścia: mocniejsza hierarchia i wyraźniejszy stan wskazania. */
.wejscie {
  padding: var(--s-6) var(--s-6) var(--s-5);
  position: relative;
  overflow: hidden;
}

.wejscie::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--woda);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-bazowy) var(--ease);
}

.wejscie--pilne::after { background: var(--sygnal); }
.wejscie:hover::after,
.wejscie:focus-visible::after { transform: scaleX(1); }

.wejscia__glowne .wejscie__tytul { font-size: var(--fs-600); }
.wejscia__glowne p { max-width: 34rem; }

/* Rejestr: pasek akcentu przy wskazaniu zamiast samego tła. */
.rejestr__poz { position: relative; }

.rejestr__poz::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--granat);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-bazowy) var(--ease);
}

.rejestr__poz:hover::before { transform: scaleY(1); }

/* Karty metod: WUKO ma być wyraźnie tą wyróżnioną, nie „drugą z dwóch”. */
.metoda { padding: var(--s-6) var(--s-6) var(--s-7); }

.metoda--wyrozniona {
  box-shadow: inset 0 1px 0 0 rgba(46, 126, 192, .45);
}

/* Opinie: cudzysłów jako znak, żeby puste pola nie wyglądały na błąd. */
.opinia { position: relative; padding-top: var(--s-7); }

.opinia::before {
  content: "„";
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-5);
  font-family: var(--font-naglowek);
  font-size: 3rem;
  line-height: 1;
  color: var(--woda);
  opacity: .35;
}

/* Kadr floty: obraz jest o 10% wyższy od ramki, a paralaksa chodzi w ±3,5%,
   więc nigdy nie odsłoni tła pod spodem ani nie utnie listy usług z burty.
   Kadr jest wąskim pasem (3,75:1), więc zapas musi być mały i policzony. */
.flota__kadr {
  aspect-ratio: 2400 / 639;
  overflow: hidden;
}

.flota__kadr img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 52%;
  will-change: transform;
}

@media (max-width: 48rem) {
  .flota__kadr { aspect-ratio: 16 / 10; }
}

/* Proces: więcej powietrza między nitką a treścią kroku. */
.krok { gap: var(--s-6); }

/* Akcenty na granatowym tle sekcji Procesu - --woda jest tam za ciemna
   na mały tekst, tak jak na jasnym tle (patrz docs/design-tokens.md §1). */
.sekcja--granat .naglowek__numer,
.sekcja--granat .krok__numer { color: var(--woda-jasna); }

/* --- Formularze (sesja 4) --------------------------------------------------
   Dwa formularze w jednym przełączniku (prywatny / firmowy) i formularz
   rekrutacyjny na /kariera/. Zawsze na jasnym tle (--mgla). Styl: karta
   zlecenia - etykiety w mono, pola z cienką ramką, zero zaokrągleń.
   Interaktywność nigdy nie zależy od preferencji ruchu. */

.formularze {
  background: #fff;
  border: 1px solid var(--rysa-jasna);
  border-radius: var(--radius);
}

.przelacznik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--rysa-jasna);
}

.przelacznik__btn {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  text-align: left;
  color: var(--grafit);
  border-bottom: 2px solid transparent;
  transition: color var(--t-szybki) var(--ease), border-color var(--t-szybki) var(--ease), background-color var(--t-szybki) var(--ease);
}

.przelacznik__btn:hover { background: rgba(18, 48, 107, .04); }

.przelacznik__btn strong {
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--fs-400);
  color: var(--stal);
}

.przelacznik__btn span {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.przelacznik__btn[aria-selected="true"] {
  border-bottom-color: var(--granat);
  color: var(--granat);
}

.przelacznik__btn[aria-selected="true"] strong { color: var(--granat); }

/* Na wąskich ekranach podtytuł zakładki łamie się na trzy wiersze -
   zostaje sam tytuł, podtytuł wraca od 30 rem. */
@media (max-width: 30rem) {
  .przelacznik__btn span { display: none; }
  .przelacznik__btn { padding: var(--s-4); }
}

.formularz {
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 40rem) {
  .formularz { padding: var(--s-7) var(--s-6); }
}

.formularz__siatka {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .formularz__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pole--pelne { grid-column: 1 / -1; }
}

.formularz__lead { color: var(--grafit); }

.pole {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.pole__etykieta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--grafit);
}

.pole__etykieta em { font-style: normal; color: #9a6200; letter-spacing: 0.04em; text-transform: none; }

.pole input[type="text"],
.pole input[type="tel"],
.pole input[type="email"],
.pole select,
.pole textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--mgla);
  border: 1px solid var(--rysa-jasna);
  border-radius: var(--radius);
  color: var(--stal);
  font-size: var(--fs-300);
  transition: border-color var(--t-szybki) var(--ease), background-color var(--t-szybki) var(--ease);
}

.pole textarea { min-height: 7.5rem; resize: vertical; }

.pole select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--granat) 50%), linear-gradient(135deg, var(--granat) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.pole input:focus-visible,
.pole select:focus-visible,
.pole textarea:focus-visible {
  outline: 2px solid var(--granat);
  outline-offset: 0;
  border-color: var(--granat);
  background: #fff;
}

.pole.jest-blad input,
.pole.jest-blad select,
.pole.jest-blad textarea { border-color: #b23a2a; }

.pole__blad {
  min-height: 1.2em;
  font-size: var(--fs-200);
  color: #b23a2a;
}

.pole__blad:empty { display: none; }

.pole__pomoc { font-size: var(--fs-200); color: var(--grafit); }

/* Chipy objawów: checkboxy jako pastylki. Sam input jest ukryty wizualnie,
   ale dostępny - stan widać po ramce i po focusie. */
.chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip { position: relative; }

.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  color: var(--grafit);
  border: 1px solid var(--rysa-jasna);
  border-radius: var(--radius);
  background: var(--mgla);
  transition: color var(--t-szybki) var(--ease), border-color var(--t-szybki) var(--ease), background-color var(--t-szybki) var(--ease);
}

.chip input:checked + span {
  color: #fff;
  background: var(--granat);
  border-color: var(--granat);
}

.chip input:focus-visible + span { outline: 2px solid var(--sygnal); outline-offset: 2px; }

/* Segment (pilność, zakres): radio jako trzy równe komórki. */
.segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rysa-jasna);
  border-radius: var(--radius);
  overflow: hidden;
}

.segment label { position: relative; }

.segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.segment span {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-3);
  text-align: center;
  font-size: var(--fs-200);
  color: var(--grafit);
  background: var(--mgla);
  border-inline-start: 1px solid var(--rysa-jasna);
  transition: color var(--t-szybki) var(--ease), background-color var(--t-szybki) var(--ease);
}

.segment label:first-child span { border-inline-start: 0; }

.segment span small {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .8;
}

.segment input:checked + span { color: #fff; background: var(--granat); }
.segment--pilny input:checked + span { color: var(--stal); background: var(--sygnal); }
.segment input:focus-visible + span { outline: 2px solid var(--sygnal); outline-offset: -3px; }

@media (max-width: 26rem) {
  .segment { grid-template-columns: minmax(0, 1fr); }
  .segment span { border-inline-start: 0; border-top: 1px solid var(--rysa-jasna); text-align: left; }
  .segment label:first-child span { border-top: 0; }
}

/* Zgoda RODO */
.zgoda {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-200);
  color: var(--grafit);
}

.zgoda input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; accent-color: var(--granat); }

/* Honeypot: poza ekranem, nie display:none - boty sprawdzają widoczność CSS */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.formularz__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-2);
}

.formularz__stopka .btn { padding-inline: var(--s-7); }

@media (max-width: 40rem) {
  .formularz__stopka .btn { width: 100%; }
}

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

.formularz__blad {
  padding: var(--s-4);
  border: 1px solid rgba(178, 58, 42, .5);
  border-left: 3px solid #b23a2a;
  color: #7a2a1e;
  background: rgba(178, 58, 42, .06);
  font-size: var(--fs-200);
}

.formularz__demo {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--grafit);
}

/* Sukces: protokół przyjęcia zgłoszenia. Działa bez animacji. */
.sukces {
  padding: var(--s-7) var(--s-6);
  display: grid;
  gap: var(--s-4);
}

.sukces:focus { outline: none; }

.sukces__znak {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--granat);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--granat);
}

.sukces__znak svg { width: 1.25rem; height: 1.25rem; }

.sukces h3 { color: var(--stal); font-size: var(--fs-600); }
.sukces p { color: var(--grafit); max-width: 34rem; }

.sukces ol {
  display: grid;
  gap: var(--s-2);
  padding-left: 1.25rem;
  color: var(--grafit);
  font-size: var(--fs-300);
}

.sukces__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--grafit);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rysa-jasna);
}

/* Plik CV (kariera) */
.plik {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px dashed rgba(18, 48, 107, .4);
  border-radius: var(--radius);
  background: var(--mgla);
  color: var(--grafit);
  font-size: var(--fs-200);
}

.plik input[type="file"] { font-size: var(--fs-200); color: var(--stal); }
.plik strong { color: var(--stal); font-weight: 600; }