/* A&W Partners — strona firmowa.
   Kierunek: apple.com (duża typografia, sekcje jasne/ciemne, materiały z rozmyciem),
   kolory z logo: żółty #fdd856, czerń #231f20. */

/* ---------- Tokeny ---------- */
:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --line: #d2d2d7;
  --night: #000000;
  --night-2: #161617;
  --night-3: #1d1d1f;
  --on-night: #f5f5f7;
  --on-night-2: #a1a1a6;
  --brand: #fdd856;
  --brand-hover: #ffe27f;
  --brand-press: #f0c93a;
  --brand-ink: #231f20;
  --brand-text: #8a6a00; /* żółty jako tekst na jasnym tle (kontrast AA) */
  --ok: #1f7a37;
  --ok-bg: #e3f5e8;
  --danger: #c4000f;
  --danger-bg: #fff1f1;
  --focus: #0a84ff;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --nav-h: 52px;
  --gutter: clamp(20px, 5vw, 40px);
  --max: 1080px;

  /* Krzywe: apple.com (treść), ease-out (wejścia), iOS sheet (ruch elementów sterujących, bez overshootu). */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto,
    Arial, sans-serif;
}

/* ---------- Baza ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html.menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
a,
summary,
label,
[role="tab"] {
  touch-action: manipulation;
}

button,
.btn,
summary,
[role="tab"],
.chip span {
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

main:focus,
[data-scroll-focus]:focus {
  outline: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.missing {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px dashed currentColor;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.75;
}

/* ---------- Przyciski i linki ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 980px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    color 200ms ease;
}

/* Reakcja na dotyk od razu przy wciśnięciu. */
.btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

.btn--brand {
  background: var(--brand);
  color: var(--brand-ink);
}

.btn--brand:active {
  background: var(--brand-press);
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:active {
  background: #000;
}

.btn--sm {
  min-height: 30px;
  padding: 0 14px;
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

/* Mały przycisk w nawigacji: większy obszar dotyku bez zmiany wyglądu. */
.btn--sm::after {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

.btn--lg {
  min-height: 52px;
  padding: 0 30px;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
}

.link .icon {
  transition: transform 240ms var(--ease-out);
}

.link--brand {
  color: var(--brand);
}

@media (hover: hover) and (pointer: fine) {
  .btn--brand:hover {
    background: var(--brand-hover);
  }

  .btn--dark:hover {
    background: #333336;
  }

  .link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .link:hover .icon {
    transform: translateX(3px);
  }
}

/* ---------- Typografia sekcji ---------- */
.section {
  padding-block: clamp(80px, 11vw, 150px);
}

.section-head {
  max-width: 860px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--brand-text);
}

.section-title {
  margin: 0;
  font-size: clamp(2.125rem, 1.3rem + 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.022em;
}

.section-lead {
  margin: 20px auto 0;
  max-width: 40ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.33;
  letter-spacing: 0.002em;
  color: var(--ink-2);
}

.section-head--dark .eyebrow,
.join .eyebrow {
  color: var(--brand);
}

.section-head--dark .section-lead,
.join .section-lead {
  color: var(--on-night-2);
}

/* ---------- Nawigacja (materiał z rozmyciem; tło w ::before, żeby menu `fixed` nie dziedziczyło bloku zawierającego) ---------- */
.gnav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--on-night);
}

.gnav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 300ms var(--ease);
}

.gnav.is-open::before {
  background: #000;
}

.gnav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.gnav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--on-night);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.gnav__brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.gnav__links {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__links a:not(.btn) {
  display: block;
  padding: 8px 10px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 200ms ease;
}

.gnav__menu-cta {
  display: none;
}

.gnav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

.gnav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font: 600 0.75rem/1 var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.gnav__lang:active {
  background: rgba(255, 255, 255, 0.16);
}

.gnav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gnav__burger-line {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 400ms var(--ease-ios);
}

.gnav__burger-line:first-child {
  transform: translateY(-3.5px);
}

.gnav__burger-line:last-child {
  transform: translateY(3.5px);
}

.gnav.is-open .gnav__burger-line:first-child {
  transform: rotate(45deg);
}

.gnav.is-open .gnav__burger-line:last-child {
  transform: rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .gnav__links a:not(.btn):hover,
  .gnav__lang:hover {
    color: #fff;
  }

  .gnav__lang:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Menu rozwijane zamiast paska, gdy linki nie mieszczą się w jednej linii: pasek po polsku (najdłuższy język) potrzebuje
   ~980 px, więc próg 64em (1024 px przy domyślnym rozmiarze tekstu) daje zapas — także iPadom w pionie. W em, żeby
   próg rósł razem z większym domyślnym tekstem przeglądarki. To samo zapytanie ma initNav() w main.js (test strony). */
@media (width < 64em) {
  .gnav__burger {
    display: inline-block;
  }

  .gnav__links {
    position: fixed;
    inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
    background: #000;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 280ms var(--ease),
      visibility 0s linear 280ms;
  }

  .gnav.is-open .gnav__links {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 280ms var(--ease),
      visibility 0s;
  }

  .gnav__links li {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 240ms ease,
      transform 240ms var(--ease-out);
  }

  .gnav.is-open .gnav__links li {
    opacity: 1;
    transform: none;
    transition:
      opacity 420ms ease calc(var(--i) * 35ms + 60ms),
      transform 520ms var(--ease-out) calc(var(--i) * 35ms + 60ms);
  }

  .gnav__links a:not(.btn) {
    padding: 10px 0;
    color: #e8e8ed;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .gnav__menu-cta {
    display: block;
    margin-top: 24px;
  }

  .gnav__menu-cta .btn {
    width: 100%;
    min-height: 52px;
  }
}

@media (max-width: 380px) {
  .gnav__wordmark {
    display: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gnav::before {
    background: rgba(0, 0, 0, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .gnav::before {
    background: #000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Menu języków (Popover API, pozycja liczona od przycisku w JS) ---------- */
.lang-menu {
  position: fixed;
  inset: auto;
  top: var(--lang-top, calc(var(--nav-h) + 8px));
  right: var(--lang-right, 16px);
  margin: 0;
  min-width: 220px;
  padding: 6px;
  border: 0;
  border-radius: 16px;
  background: rgba(36, 36, 38, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: var(--on-night);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.4),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 180ms var(--ease-out),
    transform 260ms var(--ease-ios),
    overlay 260ms,
    display 260ms;
  transition-behavior: allow-discrete;
}

.lang-menu:popover-open,
.lang-menu.is-open {
  display: block;
  opacity: 1;
  transform: none;
}

@starting-style {
  .lang-menu:popover-open {
    opacity: 0;
    transform: scale(0.94);
  }
}

.lang-menu__title {
  margin: 6px 10px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-night-2);
}

.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--on-night);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.lang-menu__item:active {
  background: rgba(255, 255, 255, 0.14);
}

.lang-menu__check {
  color: var(--brand);
}

@media (hover: hover) and (pointer: fine) {
  .lang-menu__item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lang-menu {
    background: #2c2c2e;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Sugestia języka ---------- */
.lang-banner {
  position: relative;
  z-index: 40;
  margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  background: var(--night-3);
  color: var(--on-night);
  font-size: 0.875rem;
}

.lang-banner[hidden] {
  display: none;
}

.lang-banner:not([hidden]) + main .hero {
  padding-top: clamp(48px, 8vw, 96px);
}

.lang-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding: 10px 40px 10px 0;
  position: relative;
}

.lang-banner__text {
  margin: 0;
}

.lang-banner__action {
  color: var(--brand);
  font-weight: 600;
}

.lang-banner__close {
  position: absolute;
  right: -12px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--on-night-2);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(48px, 8vw, 96px));
  background: var(--night);
  color: var(--on-night);
  text-align: center;
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--on-night-2);
}

.hero__brand {
  color: var(--on-night);
}

.hero__apps {
  display: block;
}

.hero__title {
  margin: 0.25em 0 0;
  font-size: clamp(2.625rem, 1.2rem + 6.2vw, 5.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.hero__line {
  display: block;
}

.hero__line--accent {
  background: linear-gradient(100deg, #fdd856 10%, #ffbf3c 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Zapas na ogonki liter przy przycinaniu tła. */
  padding-bottom: 0.08em;
}

.hero__lead {
  /* Dwie zrównoważone linie na szerokim ekranie zamiast trzech wąskich (balance — równa długość linii). */
  max-width: 48ch;
  text-wrap: balance;
  margin: 22px auto 0;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: 0.002em;
  color: var(--on-night-2);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 36px;
  font-size: 1.0625rem;
}

.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  height: clamp(470px, 58vw, 600px);
  margin-top: clamp(56px, 8vw, 88px);
}

.hero__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 85%);
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  top: 2%;
  left: 50%;
  width: min(1000px, 160vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(253, 216, 86, 0.3), rgba(253, 216, 86, 0.08) 55%, transparent 75%);
  pointer-events: none;
}

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 20px;
  background: rgba(44, 44, 46, 0.66);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  text-align: left;
  white-space: nowrap;
}

.float-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-ink);
}

.float-card__icon--ok {
  background: #30d158;
  color: #002a0d;
}

.float-card__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--on-night-2);
}

.float-card__value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.float-card--paid {
  top: 42%;
  right: calc(50% + 104px);
}

.float-card--signed {
  top: 22%;
  left: calc(50% + 104px);
}

@media (max-width: 733px) {
  .float-card {
    padding: 8px 12px 8px 8px;
    border-radius: 16px;
    gap: 10px;
  }

  .float-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .float-card__value {
    font-size: 0.9375rem;
  }

  .float-card--paid {
    top: 52%;
    right: auto;
    left: max(8px, calc(50% - 178px));
  }

  .float-card--signed {
    display: none;
  }
}

/* Wejście hero przy załadowaniu. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-enter] {
    animation: enter-up 900ms var(--ease-out) both;
    animation-delay: calc(var(--d, 0) * 1ms);
  }

  .js .device--hero {
    animation: device-in 1300ms var(--ease-out) 250ms both;
  }

  .js .float-card--signed {
    animation: float-in 800ms var(--ease-out) 800ms both;
  }

  .js .float-card--paid {
    animation: float-in 800ms var(--ease-out) 950ms both;
  }

  .js .hero__glow {
    animation: fade-in 2000ms var(--ease) 200ms both;
  }
}

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes device-in {
  from {
    opacity: 0;
    transform: translateY(90px) scale(0.94);
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Platformy ---------- */
.platforms {
  padding: 8px var(--gutter) clamp(72px, 10vw, 120px);
  background: var(--night);
  color: var(--on-night-2);
  text-align: center;
}

.platforms__label {
  margin: 0 0 22px;
  font-size: 0.9375rem;
}

.platforms__list {
  /* Wysokość wielkiej litery w logach; napisy Uber, Bolt i freenow stoją na wspólnej linii bazowej
     (kropka Bolta i „by Lyft” wiszą pod nią jak wydłużenia dolne). */
  --logo-cap: clamp(24px, 1.1rem + 1vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px clamp(36px, 8vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.platforms__item img {
  display: block;
  width: auto;
  height: var(--logo-cap);
}

/* Bolt: litery zajmują ~3/4 wysokości pliku (pod spodem kropka „o”). */
.platforms__item--bolt img {
  height: calc(var(--logo-cap) * 1.35);
}

/* FREENOW: pod znakiem jest dopisek „by Lyft”, więc plik jest wyższy niż same litery;
   linia bazowa napisu leży na 46% wysokości pliku, stąd przesunięcie w dół. */
.platforms__item--freenow img {
  height: calc(var(--logo-cap) * 1.75);
  margin-top: calc(var(--logo-cap) * 0.2);
}

/* ---------- Dlaczego my (bento) ---------- */
.why {
  background: var(--paper-2);
}

.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
  padding: clamp(28px, 3.4vw, 40px);
  /* clip, nie hidden: kafelek nie może być kontenerem przewijania — oś przewijania wykresu wypłat (.week, view-timeline)
     liczy się względem najbliższego kontenera przewijania. hidden — dla przeglądarek bez clip. */
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand);
  color: var(--brand-ink);
}

.tile__copy {
  margin: 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.002em;
  color: var(--ink-2);
}

.tile__copy strong {
  color: var(--ink);
  font-weight: 700;
}

.tile--payout .tile__copy {
  max-width: 30ch;
}

.week {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 20px);
  margin-top: auto;
}

.week__bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: clamp(6px, 1.4vw, 12px);
  height: 120px;
}

.week__day {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}

.week__day i {
  width: 100%;
  max-width: 34px;
  height: calc(var(--h) * 88px);
  border-radius: 8px;
  background: var(--ink);
  transform-origin: bottom;
}

.week__day b {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
}

.week__pay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-bottom: 26px;
  padding: 10px 16px 10px 10px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}

.tile--since {
  justify-content: flex-end;
  gap: 6px;
  background: var(--night);
  color: var(--on-night);
}

/* Logo podporządkowane liczbie „2020” (główny element kafelka): 72 px ≈ wysokość jej wielkich liter
   i 1,5 × ikona 48 px z sąsiednich kafelków (siatka 8 px); promień ≈ 22% boku jak ikona aplikacji.
   Plik 216 px = ostry przy gęstości 3× (iPhone). */
.tile__logo {
  width: clamp(64px, 5vw, 72px);
  height: auto;
  margin-bottom: auto;
  border-radius: 16px;
}

.tile__kicker {
  margin: 24px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--on-night-2);
}

.tile__year {
  margin: 0;
  font-size: clamp(4rem, 3rem + 4vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(100deg, #fdd856 10%, #ffbf3c 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tile__note {
  margin: 8px 0 0;
  color: var(--on-night-2);
}

@media (min-width: 734px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .tile--payout {
    grid-column: span 2;
  }
}

@media (min-width: 1068px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .tile--payout {
    grid-column: span 4;
  }

  .tile--since {
    grid-column: span 2;
  }

  /* Dłuższe teksty (rozliczenia, licencja) w połowie szerokości, krótsze — po trzy w rzędzie. */
  .tile--clear,
  .tile--license {
    grid-column: span 3;
  }

  .tile--car,
  .tile--docs,
  .tile--lang {
    grid-column: span 2;
  }
}

/* ---------- Telefon (makieta Portalu Kierowcy) ---------- */
.device {
  position: relative;
  flex: none;
  width: var(--device-w, 300px);
  aspect-ratio: 300 / 620;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(150deg, #48484a, #1c1c1e 35%, #2c2c2e 70%, #3a3a3c);
  box-shadow:
    inset 0 0 0 1.5px #5a5a5e,
    inset 0 0 0 4px #111,
    0 50px 100px -30px rgba(0, 0, 0, 0.7);
}

.device__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background: #f2f2f7;
  color: #1d1d1f;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
}

.device__island {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  width: 90px;
  height: 26px;
  translate: -50% 0;
  border-radius: 20px;
  background: #000;
}

.device__status {
  position: absolute;
  inset: 14px 0 auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 13px;
  font-weight: 600;
}

.device__status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.device__status-icons i {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(to right, #1d1d1f 20%, transparent 20% 30%, #1d1d1f 30% 50%, transparent 50% 60%, #1d1d1f 60%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.device__status-icons i + i {
  width: 12px;
  border-radius: 50% 50% 0 0;
  clip-path: none;
  background: radial-gradient(circle at 50% 100%, #1d1d1f 30%, transparent 32%);
}

.device__status-icons b {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(29, 29, 31, 0.5);
  box-shadow: inset 0 0 0 1.5px #f2f2f7;
  background: #1d1d1f;
}

.screen {
  position: absolute;
  inset: 0;
  padding: 54px 14px 14px;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition:
    opacity 380ms var(--ease),
    transform 600ms var(--ease-ios);
  pointer-events: none;
}

.screen.is-active {
  opacity: 1;
  transform: none;
}

.app-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 4px 12px;
}

.app-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.app-sub,
.app-label {
  font-size: 12px;
  letter-spacing: 0;
  color: #8e8e93;
}

.app-label {
  display: block;
  margin-bottom: 4px;
}

.app-card {
  margin-bottom: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.app-card--hero {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.app-amount {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pill--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.pill--wait {
  background: #fff4cc;
  color: #7a5c00;
}

.app-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 70px;
}

.app-chart__bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}

.app-chart__bar i {
  width: 100%;
  height: calc(var(--h) * 50px);
  border-radius: 5px;
  background: var(--brand);
}

.app-chart__bar b {
  font-size: 9px;
  font-weight: 600;
  color: #8e8e93;
}

.app-rows {
  margin: 0;
  padding: 0 14px;
  list-style: none;
  border-radius: 18px;
  background: #fff;
}

.app-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 0.5px solid #e5e5ea;
}

.app-rows li:last-child {
  border-bottom: 0;
}

.app-rows span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-rows b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-rows__muted {
  color: #8e8e93;
}

.app-rows.app-card {
  padding-block: 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot--uber {
  background: #000;
}

.dot--bolt {
  background: #2fb36d;
}

.dot--freenow {
  background: #e5004b;
}

.app-docs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.app-doc--active {
  box-shadow:
    0 0 0 1.5px var(--brand),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.app-doc__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f2f2f7;
  color: #3a3a3c;
}

.app-doc__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.app-sign__pad {
  width: 100%;
  height: auto;
  margin: 4px 0 10px;
}

.app-sign__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.app-button {
  display: block;
  padding: 10px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  text-align: center;
}

.app-car {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 14px;
  color: #1d1d1f;
}

.app-car .car-art {
  width: 82%;
  height: auto;
}

.app-plate {
  margin-top: 4px;
  padding: 3px 10px 3px 18px;
  border: 1.5px solid #1d1d1f;
  border-radius: 6px;
  background: linear-gradient(to right, #2557d6 0 12px, #fff 12px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- Portal Kierowcy ---------- */
.portal {
  background: var(--night);
  color: var(--on-night);
}

.portal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  width: min(100%, 560px);
  padding: 4px;
  border-radius: 980px;
  background: var(--night-3);
}

.seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--count));
  border-radius: 980px;
  background: var(--brand);
  transform: translateX(calc(var(--index) * 100%));
  transition: transform 500ms var(--ease-ios);
}

.seg__btn {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 8px 6px;
  border: 0;
  border-radius: 980px;
  background: none;
  color: var(--on-night-2);
  font: 600 clamp(0.75rem, 0.6rem + 0.9vw, 0.9375rem) / 1.15 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 300ms ease;
  overflow-wrap: anywhere;
}

.seg__btn[aria-selected="true"] {
  color: var(--brand-ink);
}

@media (hover: hover) and (pointer: fine) {
  .seg__btn[aria-selected="false"]:hover {
    color: #fff;
  }
}

.portal__panels {
  display: grid;
  min-height: 7.5em;
  margin: 32px 0 36px;
  max-width: 36rem;
}

.portal__panel {
  grid-area: 1 / 1;
  border-radius: 8px;
}

.portal__panel-title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.portal__panel-text {
  margin: 10px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  color: var(--on-night-2);
}

@media (prefers-reduced-motion: no-preference) {
  .js .portal__panel:not([hidden]) {
    animation: enter-up 520ms var(--ease-out) both;
  }
}

.device--portal {
  --device-w: 300px;
}

.portal__login {
  margin-top: 48px;
}

/* ---------- Wynajem aut ---------- */
.cars {
  background: var(--paper);
}

.compare {
  display: grid;
  gap: 20px;
}

@media (min-width: 834px) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.plan {
  --plan-pad: clamp(28px, 4vw, 48px);
  --badge-inset: clamp(20px, 3vw, 28px);
  --badge-height: calc(0.75rem * 1.5 + 12px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--plan-pad);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.plan--featured {
  background: var(--night);
  color: var(--on-night);
}

.plan__badge {
  position: absolute;
  top: var(--badge-inset);
  right: var(--badge-inset);
  padding: 6px 12px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Ilustracja zaczyna się pod etykietą „Bez własnego samochodu” (--badge-height) — w obu kartach, żeby obrazki
   kart stojących obok siebie były na tej samej wysokości. */
.plan__art {
  width: min(260px, 80%);
  margin: max(12px, calc(var(--badge-inset) + var(--badge-height) + 12px - var(--plan-pad))) auto 8px;
  color: var(--ink);
}

.plan--featured .plan__art {
  color: #fff;
}

.plan__art .car-art {
  width: 100%;
  height: auto;
}

.plan__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan__text {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.plan--featured .plan__text {
  color: var(--on-night-2);
}

.plan__list {
  display: grid;
  gap: 14px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.plan__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0.05em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
}

.plan--featured .plan__check {
  background: var(--brand);
  color: var(--brand-ink);
}

/* Przycisk na całą szerokość karty — w obu kartach i każdym układzie taki sam. Dłuższy tekst na wąskim ekranie łamie
   się na dwie wyrównane linie z odstępem od krawędzi przycisku. */
.plan__cta {
  align-self: stretch;
  margin-top: auto;
  padding-block: 12px;
  line-height: 1.25;
  text-wrap: balance;
}

.cars__note {
  margin: 28px 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Samochody na wynajem: kafelki wyboru (main.js — wybór trafia do formularza) na półce przewijanej w bok z przyciąganiem
   (natywne przewijanie kontenera) na każdej szerokości, w szerokości treści strony; następny kafelek widać z boku.
   Krawędź, na której kafelek jest ucięty, miękko się wygasza (apple-design: efekt krawędzi przewijania zamiast twardego
   cięcia, tylko tam, gdzie treść biegnie dalej). Szerokość wygaszenia (--fade-start, --fade-end) ustawia main.js w każdej
   klatce przewijania z położenia kafelków — rośnie i maleje razem z ruchem, bez progów i przejść czasowych. Bez skryptu —
   stałe wygaszenie prawej krawędzi (półka startuje z kolejnymi kafelkami po prawej). Strzałki pod półką (tylko mysz). */

.fleet {
  margin-top: clamp(56px, 8vw, 88px);
}

.fleet__head {
  margin-bottom: 24px;
  text-align: center;
}

.fleet__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fleet__lead {
  max-width: 46ch;
  margin: 10px auto 0;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: balance;
}

/* Kilka pikseli zapasu po bokach (ujemny margines = wcięcie) mieści obwódkę fokusu kafelka przy krawędzi treści. */
.fleet__list {
  --edge: 6px;
  --fade: 48px;
  --fade-start: 0px;
  --fade-end: var(--fade);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 320px);
  gap: 16px;
  margin: 0 calc(-1 * var(--edge));
  padding: 4px var(--edge) 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}

@media (max-width: 639px) {
  .fleet__list {
    --fade: 32px;
  }
}

.fleet__list::-webkit-scrollbar {
  display: none;
}

.fleet__item {
  display: grid;
  scroll-snap-align: start;
}

/* Strzałki półki (jak na apple.com): tylko przy myszy — dotyk przewija palcem; ukryte, gdy wszystko się mieści. */
.fleet__nav {
  display: none;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .fleet__nav:not([hidden]) {
    display: flex;
  }
}

.fleet__paddle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    opacity 200ms ease,
    transform 160ms var(--ease-out);
}

.fleet__paddle--prev .icon {
  transform: scaleX(-1);
}

.fleet__paddle:active {
  transform: scale(0.94);
}

.fleet__paddle:disabled {
  opacity: 0.42;
  cursor: default;
}

.fleet__paddle:disabled:active {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .fleet__paddle:not(:disabled):hover {
    background: rgba(223, 223, 227, 0.92);
  }
}

.fleet-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 20px 20px 22px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--ink);
  transition:
    box-shadow 240ms var(--ease-out),
    background-color 200ms ease,
    transform 160ms var(--ease-out);
}

.fleet-card:active {
  transform: scale(0.98);
}

/* Wybrany samochód: obwódka kafelka i etykieta „Wybrany” (przenikanie, bez zmiany szerokości). */
.fleet-card[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* Bez działającego skryptu kafelki są tylko opisem oferty. */
.fleet-card:disabled {
  cursor: default;
}

.fleet-card:disabled:active {
  transform: none;
}

.no-js .fleet-card__action {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .fleet-card:not(:disabled):hover {
    background-color: #ececf0;
  }
}

/* Wiersz etykiety jest w każdym kafelku (także pusty), więc ilustracje w rzędzie stoją na tej samej wysokości. */
.fleet-card__flag {
  display: flex;
  min-height: calc(0.75rem * 1.5 + 8px);
}

.fleet-card__badge {
  padding: 4px 10px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.fleet-card__art {
  display: block;
  width: 100%;
  padding: 8px 4px 0;
}

.fleet-card__art .car-art {
  display: block;
  width: 100%;
  height: auto;
}

.fleet-card__name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.fleet-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fleet-card__tag {
  padding: 4px 10px;
  border-radius: 980px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

.fleet-card__action {
  display: grid;
  margin-top: auto;
  padding-top: 6px;
}

.fleet-card__choose,
.fleet-card__chosen {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 980px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    opacity 180ms ease,
    transform 240ms var(--ease-out);
}

.fleet-card__choose {
  background: var(--ink);
  color: #fff;
}

.fleet-card__chosen {
  background: var(--brand);
  color: var(--brand-ink);
  opacity: 0;
  transform: scale(0.96);
}

.fleet-card[aria-pressed="true"] .fleet-card__choose {
  opacity: 0;
}

.fleet-card[aria-pressed="true"] .fleet-card__chosen {
  opacity: 1;
  transform: none;
}

/* Wybrany samochód w formularzu (pod „Co Cię interesuje?”): pojawia się i znika płynnie (main.js, swapLayers);
   pusty nie zajmuje miejsca — odstęp ma treść. */
.lead-car {
  display: grid;
}

.lead-car > * {
  grid-area: 1 / 1;
  align-self: start;
}

.lead-car__box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 8px 10px 16px;
  border-radius: 14px;
  background: var(--paper-2);
}

.lead-car__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.lead-car__label {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.lead-car__name {
  font-weight: 600;
}

.lead-car__change {
  padding: 8px 6px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.lead-car__remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.lead-car__remove:active {
  background: #e3e3e8;
}

@media (hover: hover) and (pointer: fine) {
  .lead-car__change:hover {
    text-decoration: underline;
  }

  .lead-car__remove:hover {
    background: #e8e8ed;
  }
}

/* ---------- Gdzie działamy (mapa licencji) ---------- */
.atlas-section {
  background: var(--night);
  color: var(--on-night);
}

.atlas {
  display: grid;
  gap: 20px;
}

@media (min-width: 1000px) {
  .atlas {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
}

.atlas__panel {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--night-2);
}

@media (max-width: 999px) {
  .atlas__stage {
    order: -1;
  }
}

.atlas__up {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  margin: -6px 0 14px -8px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand);
  font: 600 0.875rem/1 var(--font);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 160ms var(--ease-out);
}

.atlas__up[hidden] {
  display: none;
}

.atlas__up-icon {
  transform: scaleX(-1);
}

.atlas__up:active {
  transform: scale(0.97);
}

.atlas__view[hidden] {
  display: none;
}

.atlas__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  border-radius: 6px;
}

.atlas__title:focus {
  outline: none;
}

.atlas__meta,
.atlas__hint {
  margin: 6px 0 0;
  color: var(--on-night-2);
}

.atlas__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}

.atlas__stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atlas__stats dd {
  order: -1;
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.atlas__stats dt {
  font-size: 0.8125rem;
  letter-spacing: -0.003em;
  color: var(--on-night-2);
}

.atlas__hint {
  margin-top: 22px;
  font-size: 0.9375rem;
}

.atlas__rows {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.atlas__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-night);
  font: 600 1rem/1.25 var(--font);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 160ms var(--ease-out);
}

.atlas__row:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.12);
}

.atlas__row-label {
  flex: 1;
  min-width: 0;
}

.atlas__row-label small {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand);
}

.atlas__count {
  min-width: 32px;
  padding: 3px 9px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.atlas__row .icon {
  flex: none;
  color: var(--on-night-2);
}

.atlas__row--cluster {
  background: rgba(253, 216, 86, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .atlas__row:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .atlas__row--cluster:hover {
    background: rgba(253, 216, 86, 0.2);
  }

  .atlas__up:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}

.atlas__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Miejscowość w panelu: przycisk przybliżający jej gminę na mapie. */
.atlas__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 0;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background 150ms ease,
    transform 120ms var(--ease-out);
}

.atlas__chip:active {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .atlas__chip:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}

.atlas__office {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--on-night-2);
}

.atlas__office .icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--brand);
}

.atlas__office b {
  color: var(--on-night);
}

.atlas__contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.atlas__contact-title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-night-2);
}

.atlas__phones {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atlas__phones li {
  display: grid;
}

.atlas__phone-area {
  font-size: 0.8125rem;
  color: var(--on-night-2);
}

.atlas__phones a,
.atlas__write a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.atlas__write {
  margin: 0;
  color: var(--on-night-2);
}

@media (prefers-reduced-motion: no-preference) {
  .js .atlas__view:not([hidden]) {
    animation: enter-up 460ms var(--ease-out) both;
  }
}

/* Scena mapy */
.atlas__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(253, 216, 86, 0.07), transparent 60%),
    #070708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  container-type: inline-size;
  touch-action: manipulation;
}

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

.atlas__region {
  fill: #18181a;
  stroke: #333336;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition:
    fill 300ms ease,
    stroke 300ms ease,
    opacity 450ms ease;
}

.atlas__region.is-active {
  fill: rgba(253, 216, 86, 0.2);
  stroke: rgba(253, 216, 86, 0.65);
  cursor: pointer;
}

.atlas:not([data-level="country"]) .atlas__region:not(.is-focus) {
  opacity: 0.35;
}

.atlas__region.is-focus {
  fill: rgba(253, 216, 86, 0.07);
  stroke: var(--brand);
}

@media (hover: hover) and (pointer: fine) {
  .atlas[data-level="country"] .atlas__region.is-active:hover,
  .atlas__region.is-active:not(.is-focus):hover {
    fill: rgba(253, 216, 86, 0.34);
  }
}

/* Obszary licencji: gminy, w których mamy licencje (granice z OSM, przycięte do lądu), widoczne po wybraniu
   województwa, aglomeracji lub gminy. Kontury są w <defs> (z vector-effect), tu tylko wypełnienie i obrys.
   Ukryte obszary mają visibility: hidden (po wygaszeniu) — przy samym opacity: 0 WebKit i tak je rysuje. */
.atlas__areas {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 250ms ease,
    visibility 0s linear 250ms;
  pointer-events: none;
}

.atlas__areas.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease 80ms;
}

.atlas__area {
  fill: rgba(253, 216, 86, 0.24);
  fill-rule: nonzero;
  stroke: rgba(253, 216, 86, 0.9);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

/* Widok gminy: wybrana gmina jaśniejsza i z pełnym konturem (na tle sąsiednich obszarów licencji). */
.atlas__area--focus {
  fill: rgba(253, 216, 86, 0.2);
  stroke: var(--brand);
  stroke-width: 2.25;
}

.atlas__credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.6875rem;
  text-decoration: none;
  border-radius: 4px;
  transition:
    opacity 300ms ease,
    visibility 0s;
}

.atlas[data-level="country"] .atlas__credit {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 300ms ease,
    visibility 0s linear 300ms;
}

@media (hover: hover) and (pointer: fine) {
  .atlas__credit:hover {
    color: #fff;
    text-decoration: underline;
  }
}

/* Znaczniki (HTML nad SVG; pozycje w % sceny liczone w buildzie dla kadru widoku) */
.atlas__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atlas__layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s linear 200ms;
}

.atlas__layer.is-shown {
  visibility: visible;
  transition: none;
}

.atlas__pin,
.atlas__spark,
.atlas__cluster {
  position: absolute;
}

.atlas__pin,
.atlas__spark {
  width: 0;
  height: 0;
}

/* Kropka miejscowości: średnica w proporcji do szerokości mapy (cqi sceny) jak na desktopie — 12 px na scenie ~700 px —
   z dolnym limitem, żeby na telefonie nie była dwa razy większa względem mapy. Obrys (--ring) to stała cienka linia,
   jednakowa dla każdej kropki niezależnie od jej wielkości — oddziela kropkę od żółtego obszaru licencji; głębię daje
   mały cień, bez rozmytej poświaty. */
.atlas__dot {
  --size: clamp(6px, 1.75cqi, 12px);
  --ring: clamp(1px, 0.2cqi, 1.5px);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--brand);
  box-shadow:
    0 0 0 var(--ring) #070708,
    0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Kropka przycisku przybliżającego gminę: pole dotyku większe niż sama kropka. */
button.atlas__pin .atlas__dot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.atlas__pin--hub .atlas__dot {
  --size: clamp(9px, 2.6cqi, 18px);
}

/* Widok województwa: mniejsze, jednakowe pinezki — gmina pod spodem pozostaje widoczna. Średnica z warstwy (--dot,
   skaluje się z mapą — atlas.mjs, DOTS), kropka łącząca kilka miejscowości — --s. */
.atlas__pin--small .atlas__dot {
  --size: calc(var(--dot, 8px) * var(--s, 1));
}

.atlas__pin--small .atlas__label {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.6875rem;
}

.atlas__pin--office .atlas__dot {
  --size: clamp(16px, 3.2cqi, 22px);
  border-radius: calc(var(--size) / 3);
  background: #fff;
  color: var(--brand-ink);
  box-shadow:
    0 0 0 var(--ring) var(--brand),
    0 2px 6px rgba(0, 0, 0, 0.45);
}

.atlas__label {
  position: absolute;
  left: var(--gap, 11px);
  top: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(22, 22, 24, 0.86);
  color: #f5f5f7;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.003em;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.atlas__pin--hub .atlas__label {
  font-size: 0.875rem;
}

[data-pos="left"] > .atlas__label {
  left: auto;
  right: var(--gap, 11px);
}

[data-pos="top"] > .atlas__label {
  left: 0;
  top: calc(-1 * var(--gap, 11px));
  transform: translate(-50%, -100%);
}

[data-pos="bottom"] > .atlas__label {
  left: 0;
  top: var(--gap, 11px);
  transform: translate(-50%, 0);
}

[data-pos="none"] > .atlas__label {
  display: none;
}

/* Kropki miejscowości na mapie Polski: średnica z warstwy (--dot, skaluje się z mapą — atlas.mjs, DOTS), kropka
   łącząca kilka miejscowości jest większa (--s). */
.atlas__spark::before {
  --size: calc(var(--dot, 5px) * var(--s, 1));
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 calc(var(--size) * 1.6) rgba(253, 216, 86, 0.8);
}

/* Miejscowość jako przycisk: kliknięcie w kropkę lub etykietę przybliża jej gminę. */
button.atlas__pin {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

button.atlas__pin:active .atlas__label {
  background: rgba(48, 48, 52, 0.96);
}

@media (hover: hover) and (pointer: fine) {
  button.atlas__pin:hover .atlas__label {
    background: rgba(48, 48, 52, 0.96);
    color: var(--brand);
  }
}

/* Pinezka zbiorcza aglomeracji: pełnowymiarowy przycisk obok aglomeracji. */
.atlas__cluster {
  z-index: 1;
  translate: 0 -50%; /* zaczepiona lewą krawędzią w punkcie `pill` (locations.mjs) */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.atlas__cluster-text {
  display: inline-flex;
  align-items: center;
  padding: 7px 8px 7px 14px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow:
    0 0 0 4px rgba(253, 216, 86, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 180ms var(--ease-out);
}

.atlas__cluster-text b {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 980px;
  background: var(--brand-ink);
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 800;
}

.atlas__cluster:active .atlas__cluster-text {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .atlas__cluster:hover .atlas__cluster-text {
    transform: scale(1.04);
  }
}

@container (max-width: 520px) {
  /* Telefon: w widoku województwa mniejsza pinezka zbiorcza — małe gminy (np. Starogard) zostają widoczne. */
  .atlas__cluster-text {
    padding: 5px 6px 5px 10px;
    font-size: 0.75rem;
  }
}

/* Jedna legenda zamiast znacznika na każdym województwie. */
.atlas__key {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px 8px;
  border-radius: 980px;
  background: rgba(22, 22, 24, 0.82);
  color: #f5f5f7;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.atlas__key-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(253, 216, 86, 0.4);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.atlas:not([data-level="country"]) .atlas__key:not(.atlas__key--area),
.atlas[data-level="country"] .atlas__key--area {
  opacity: 0;
}

/* Przycisk cofania na mapie (drugi obok tego w panelu): w lewym górnym rogu, w miejscu legendy „Tu jesteśmy”,
   która na mapie Polski — jedynym widoku bez cofania — zajmuje ten róg. */
.atlas__back {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 980px;
  background: rgba(22, 22, 24, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: var(--brand);
  font: 600 0.875rem/1 var(--font);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 160ms var(--ease-out);
}

/* Większy obszar dotyku niż widoczna pigułka. */
.atlas__back::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.atlas__back[hidden] {
  display: none;
}

.atlas__back:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .atlas__back:hover {
    background: rgba(44, 44, 46, 0.92);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .atlas__back {
    background: #1c1c1e;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Legenda obszaru licencji (widok województwa i aglomeracji) — w lewym dolnym rogu, żeby nie zasłaniała gmin
   przy górnej krawędzi kadru (np. Władysławowo w widoku Trójmiasta). */
.atlas__key--area {
  top: auto;
  bottom: 14px;
}

.atlas__key--area .atlas__key-swatch {
  background: rgba(253, 216, 86, 0.3);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

/* Podpowiedź po najechaniu na województwo (tylko mysz). */
.atlas__tip {
  position: absolute;
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(28, 28, 30, 0.92);
  color: #f5f5f7;
  font-size: 0.8125rem;
  white-space: nowrap;
  translate: -50% calc(-100% - 6px);
  transform-origin: 50% 100%;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 140ms ease,
    transform 180ms var(--ease-out);
}

.atlas__tip.is-shown {
  opacity: 1;
  transform: none;
}

.atlas__tip b {
  font-size: 0.9375rem;
}

.atlas__tip span {
  color: var(--on-night-2);
}

/* Wejście znaczników po wylądowaniu kadru (z kolejnością); wyjście natychmiastowe przed ruchem kadru. */
.atlas__dot,
.atlas__label,
.atlas__spark::before,
.atlas__cluster-text {
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 180ms var(--ease-out);
}

.atlas__layer.is-shown .atlas__dot,
.atlas__layer.is-shown .atlas__label,
.atlas__layer.is-shown .atlas__spark::before,
.atlas__layer.is-shown .atlas__cluster-text {
  opacity: 1;
  transition:
    opacity 320ms ease calc(var(--i, 0) * 30ms),
    transform 520ms var(--ease-out) calc(var(--i, 0) * 30ms);
}

@media (prefers-reduced-motion: no-preference) {
  .atlas__dot {
    transform: scale(0.6);
  }

  .atlas__layer.is-shown .atlas__dot {
    transform: none;
  }

  .atlas__label {
    transform: translateY(-50%) translateX(-4px);
  }

  .atlas__layer.is-shown .atlas__label {
    transform: translateY(-50%);
  }

  .atlas__layer.is-shown [data-pos="top"] > .atlas__label {
    transform: translate(-50%, -100%);
  }

  .atlas__layer.is-shown [data-pos="bottom"] > .atlas__label {
    transform: translate(-50%, 0);
  }

  .atlas__cluster-text {
    transform: scale(0.9);
  }

  .atlas__layer.is-shown .atlas__cluster-text {
    transform: none;
  }
}

/* ---------- Jak zacząć ---------- */
.steps {
  background: var(--paper-2);
}

.steps__list {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 20px;
}

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  font-size: 1.125rem;
  font-weight: 700;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  bottom: -20px;
  left: 23px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}

.step__title {
  margin: 10px 0 6px;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.step__text {
  margin: 0;
  color: var(--ink-2);
}

@media (min-width: 834px) {
  .steps__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .step {
    display: block;
  }

  .step:not(:last-child)::after {
    top: 23px;
    bottom: auto;
    left: 60px;
    right: -12px;
    width: auto;
    height: 2px;
  }

  .step__title {
    margin-top: 20px;
  }
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--paper);
}

.faq__list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.qa {
  border-bottom: 1px solid var(--line);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  list-style: none;
  cursor: pointer;
}

.qa__q::-webkit-details-marker {
  display: none;
}

.qa__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
  transition:
    transform 400ms var(--ease-ios),
    background-color 200ms ease;
}

.qa[open]:not([data-closing]) .qa__icon {
  transform: rotate(45deg);
  background: var(--brand);
}

.qa__a {
  margin: 0;
  padding: 0 54px 26px 0;
  font-size: 1.0625rem;
  color: var(--ink-2);
}

@media (hover: hover) and (pointer: fine) {
  .qa__q:hover .qa__icon {
    background: #e8e8ed;
  }

  .qa[open]:not([data-closing]) .qa__q:hover .qa__icon {
    background: var(--brand-hover);
  }
}

/* ---------- Dołącz / formularz ---------- */
.join {
  background: var(--night);
  color: var(--on-night);
}

.join__grid {
  display: grid;
  gap: 48px;
}

.join .section-lead {
  margin-inline: 0;
}

@media (min-width: 1000px) {
  .join__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 72px;
  }

  .join__intro {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
  }
}

.contact__title {
  margin: 44px 0 0;
  font-size: 1.3125rem;
  font-weight: 700;
}

.contact {
  display: grid;
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.contact li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--night-3);
  color: var(--brand);
}

.contact__label {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: -0.003em;
  color: var(--on-night-2);
}

.contact__value {
  display: block;
  font-weight: 600;
}

.contact__value a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact__value a:hover {
    text-decoration: underline;
  }
}

.form-card {
  --card-pad: clamp(24px, 4vw, 44px);
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
}

/* Podmiana warstw (main.js, swapLayers): formularz i potwierdzenie albo stara i nowa treść komunikatu leżą na czas
   przejścia w jednej komórce siatki i przenikają się, a wysokość kontenera płynie od bieżącej do nowej. */
.is-morphing {
  display: grid;
  overflow: hidden;
}

.is-morphing > * {
  grid-area: 1 / 1;
  align-self: start;
}

.is-morphing > [inert] {
  pointer-events: none;
}

.lead-form:focus {
  outline: none;
}

.form-grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.field > legend {
  margin-bottom: 8px;
}

.field__opt {
  font-weight: 400;
  color: var(--ink-2);
}

.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem; /* ≥16 px: iOS nie przybliża strony przy fokusie */
  letter-spacing: -0.015em;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.input:focus {
  outline: none;
  border-color: var(--ink);
  background-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(253, 216, 86, 0.6);
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
  /* background-color, nie skrót `background` — skrót kasuje strzałkę listy wyboru (select.input). */
  background-color: var(--danger-bg);
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

/* Pusta lista wyboru (opcja-zachęta) wygląda jak placeholder pola tekstowego. */
select.input:invalid {
  color: var(--ink-2);
}

select.input option {
  color: var(--ink);
}

select.input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Opcje w tej samej siatce co pola wyżej (.form-grid): jedna kolumna na telefonie, od 640 px dwie równe kolumny
   z tym samym odstępem — każda opcja ma szerokość pola nad nią. */
.chips {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .chips {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
}

/* Opcja wypełnia komórkę siatki — w jednym wierszu obie mają tę samą wysokość, także gdy tekst się zawija. */
.chip {
  position: relative;
  display: grid;
}

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 980px;
  background: var(--paper-2);
  font-size: 0.9375rem;
  font-weight: 500;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 120ms var(--ease-out);
}

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

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

.chip:active span {
  transform: scale(0.97);
}

fieldset[aria-invalid="true"] .chip span {
  border-color: var(--danger);
}

@media (hover: hover) and (pointer: fine) {
  .chip input:not(:checked):hover + span {
    background: #e8e8ed;
  }
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 200ms ease;
}

.consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.consent a {
  color: var(--ink);
  font-weight: 600;
}

.consent:has(input[aria-invalid="true"]) {
  color: var(--danger);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zbiorczy komunikat formularza pod przyciskiem: pojawia się, zmienia i znika płynnie (main.js), nie przesuwając
   przycisku. Siatka na stałe — margines treści nie przechodzi przez kontener, więc wysokość mierzy się tak samo
   w spoczynku i w trakcie przejścia. */
.form-alert {
  display: grid;
}

.form-alert > * {
  grid-area: 1 / 1;
  align-self: start;
}

.form-alert__box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.form-alert__box .icon {
  flex: none;
  margin-top: 0.1em;
}

.form-alert__box p {
  margin: 0;
  font-weight: 500;
}

.lead-form__submit {
  display: inline-grid;
  width: 100%;
  margin-top: 28px;
}

/* Etykieta i stan wysyłania w jednej komórce: szerokość przycisku się nie zmienia, a stany się przenikają. */
.lead-form__submit-label,
.lead-form__submit-busy {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

.lead-form__submit-busy,
.lead-form__submit[aria-busy="true"] .lead-form__submit-label {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.lead-form__submit[aria-busy="true"] .lead-form__submit-busy {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms ease,
    visibility 0s linear 0s;
}

@media (min-width: 640px) {
  .lead-form__submit {
    width: auto;
  }
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(35, 31, 32, 0.25);
  border-top-color: var(--brand-ink);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.lead-form__submit:not([aria-busy="true"]) .spinner {
  animation-play-state: paused;
}

.lead-form__submit[aria-busy="true"] {
  pointer-events: none;
}

/* Bez skryptu przycisk zostaje nieaktywny, a pod nim jest numer telefonu (main.js ukrywa ten tekst). */
.lead-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lead-form__nojs {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.lead-form__nojs a {
  color: var(--ink);
  font-weight: 600;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* scroll-margin = margines karty: przewinięcie do potwierdzenia (main.js, showSuccess) pokazuje całą kartę pod paskiem,
   a nie samą treść z górną krawędzią karty pod nim. */
.lead-success {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(16px, 4vw, 40px) 0;
  scroll-margin-block: var(--card-pad);
  text-align: center;
}

.lead-success[hidden] {
  display: none;
}

.lead-success:focus {
  outline: none;
}

.lead-success__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
}

.lead-success__title {
  margin: 8px 0 0;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lead-success__text {
  max-width: 36ch;
  margin: 0;
  font-size: 1.1875rem;
  color: var(--ink-2);
}

.lead-success__preview {
  max-width: 42ch;
  margin: 4px 0 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff8db;
  color: #6b5300;
  font-size: 0.9375rem;
}

.lead-success__preview[hidden] {
  display: none;
}

/* Przenikanie formularza i potwierdzenia prowadzi main.js; ikona dochodzi z opóźnieniem. */
@media (prefers-reduced-motion: no-preference) {
  .lead-success:not([hidden]) .lead-success__icon {
    animation: pop-in 700ms var(--ease-out) 120ms both;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ---------- Dokumenty (polityka prywatności) i 404 ---------- */
.doc {
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(40px, 7vw, 80px)) 0 clamp(64px, 9vw, 120px);
  background: var(--paper);
}

.lang-banner:not([hidden]) + main .doc,
.lang-banner:not([hidden]) + main .not-found {
  padding-top: clamp(40px, 7vw, 80px);
}

.doc__inner {
  max-width: 760px;
}

.doc__title {
  margin: 0 0 32px;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.022em;
}

.doc__section h2 {
  margin: 40px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.doc__section p {
  margin: 0 0 14px;
  color: #424245;
}

.doc__section a {
  font-weight: 600;
}

.doc__back {
  margin-top: 48px;
}

.not-found {
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(64px, 12vw, 140px)) 0 clamp(80px, 12vw, 160px);
  background: var(--night);
  color: var(--on-night);
  text-align: center;
}

.not-found__code {
  margin: 0;
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--brand);
}

.not-found__title {
  margin: 16px 0 8px;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.not-found__text {
  margin: 0 0 32px;
  color: var(--on-night-2);
}

/* ---------- Stopka ---------- */
.footer {
  padding: 20px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.footer a {
  color: #424245;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

.footer__note {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  padding: 22px 0;
}

.footer__title {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.footer ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.footer__legal p {
  margin: 0 0 4px;
}

.footer__langs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer__lang + .footer__lang::before {
  content: "|";
  margin: 0 10px;
  color: var(--line);
}

.footer__lang[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.footer__lang .icon {
  display: none;
}

/* ---------- Pojawianie się przy przewijaniu ---------- */
/* Element rozjaśnia się i unosi w rytm przewijania (animacja sterowana przewijaniem): w tym samym miejscu ekranu ma
   zawsze ten sam stan, niezależnie od prędkości, zatrzymania i cofnięcia. Na ekranach dotykowych droga zaczyna się
   100 px pod krawędzią okna podawaną przez przeglądarkę — Safari na iOS pokazuje treść także pod dolnym paskiem kart
   (ok. 98 pt pod tą krawędzią), a strona nie zna wysokości tego pasa. Przeglądarki bez animacji sterowanych
   przewijaniem (Firefox, Safari przed 26): pojawianie się w czasie po wejściu na ekran (initReveal() w main.js; ten sam
   warunek co @supports niżej). Duże powierzchnie (mapa, makieta Portalu, FAQ, formularz, półka samochodów) nie mają
   data-reveal: animacja całej powierzchni wymusza w WebKicie jej przerysowanie (klatki 40–70 ms). */
:root {
  --reveal-below: 0px;
  --reveal-path: 160px;
}

@media (pointer: coarse) {
  :root {
    --reveal-below: -100px;
    --reveal-path: 220px;
  }
}

@supports (animation-timeline: view()) and (animation-range: entry) {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      animation: reveal-rise linear backwards;
      animation-timeline: view(block auto var(--reveal-below));
      animation-range: entry 0% entry var(--reveal-path);
    }

    /* Wykres wypłat na własnej osi przewijania: słupki rosną kolejno, potem wjeżdża „Wypłata”. */
    .js .week {
      view-timeline: --week block;
      view-timeline-inset: auto var(--reveal-below);
    }

    .js .week__day i {
      animation: bar-grow linear backwards;
      animation-timeline: --week;
      animation-range: entry calc(var(--i) * 12px) entry calc(var(--i) * 12px + 120px);
    }

    .js .week__pay {
      animation: pay-in linear backwards;
      animation-timeline: --week;
      animation-range: entry 100px entry 200px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
      animation: reveal-fade linear backwards;
      animation-timeline: view(block auto var(--reveal-below));
      animation-range: entry 0% entry calc(var(--reveal-path) / 2);
    }
  }
}

@supports not ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 500ms var(--ease),
        transform 700ms var(--ease-out);
    }

    .js .tile--payout .week__day i {
      transform: scaleY(0.08);
      transition: transform 700ms var(--ease-out) calc(var(--i) * 45ms + 150ms);
    }

    .js .tile--payout.is-visible .week__day i {
      transform: none;
    }

    .js .week__pay {
      opacity: 0;
      transform: translateX(-12px);
      transition:
        opacity 400ms ease 650ms,
        transform 500ms var(--ease-out) 650ms;
    }

    .js .tile--payout.is-visible .week__pay {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
      opacity: 0;
      transition: opacity 400ms ease;
    }
  }

  /* Awaryjne pokazanie treści (layout.mjs), gdy main.js się nie uruchomi — tylko tu, bo ścieżka wyżej nie zależy od skryptu. */
  .js [data-reveal].is-visible,
  .reveal-fallback [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }
}

@keyframes bar-grow {
  from {
    transform: scaleY(0.08);
  }
}

@keyframes pay-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .screen.is-active .app-sign__path {
    animation: draw 1400ms var(--ease) 300ms both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .seg__thumb,
  .qa__icon,
  .gnav__links,
  .gnav__links li,
  .lang-menu {
    transition-duration: 0.01ms !important;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

/* ---------- Kontrast wymuszony / druk ---------- */
@media (forced-colors: active) {
  .hero__line--accent,
  .tile__year {
    background: none;
    color: CanvasText;
  }

  .seg__thumb {
    background: Highlight;
  }
}

@media print {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .gnav,
  .lang-banner,
  .hero__stage,
  .platforms {
    display: none;
  }

  .hero,
  .portal,
  .join {
    background: #fff;
    color: #000;
  }
}