/* Fonty parami latin + latin-ext (lekcja D-107: Google dzieli tak, że „ó" jest
   w latin, a „ą ć ę ł ń ś ź ż" w latin-ext — sam podzbiór latin-ext renderuje
   większość liter fallbackiem). */
@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-normal-300-800-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-normal-300-800-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0a0908;
  --ink-soft: #12100e;
  --panel: #181512;
  --panel-2: #211d19;
  --cream: #f1eadf;
  --cream-2: #d7cec0;
  --muted: #928a80;
  --orange: #ff5a1f;
  --orange-bright: #ff7a35;
  --orange-soft: rgba(255, 90, 31, 0.13);
  --teal: #43d7c5;
  --teal-bright: #5ee3d4;
  --teal-soft: rgba(67, 215, 197, 0.12);
  --line: rgba(241, 234, 223, 0.14);
  --line-strong: rgba(241, 234, 223, 0.26);
  --shell: min(1380px, calc(100vw - 64px));
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Onest", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  background: var(--orange);
  color: var(--ink);
}

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

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  /* druga warstwa pierścienia: na kremowych sekcjach sam teal ma ~1,5:1 */
  box-shadow: 0 0 0 5px rgba(10, 9, 8, 0.45);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.page-noise {
  position: fixed;
  z-index: 900;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.progress {
  position: fixed;
  z-index: 950;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--teal));
}

.site-header {
  position: fixed;
  z-index: 800;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    height 0.2s var(--ease);
}

.site-header.is-scrolled {
  height: 64px;
  background: rgba(10, 9, 8, 0.88);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  text-decoration: none;
  font-family: "Onest", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand img {
  width: 28px;
  height: 28px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.desktop-nav a {
  position: relative;
  text-decoration: none;
  color: var(--cream-2);
  font-size: 15px;
  font-weight: 400;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s var(--ease);
}

.desktop-nav a.is-active {
  color: var(--cream);
}

.desktop-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  justify-self: end;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.header-cta:hover {
  color: var(--ink);
  border-color: var(--cream);
  background: var(--cream);
}

.menu-button,
.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 144px 0 128px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 16%,
      rgba(255, 90, 31, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 83% 75%,
      rgba(67, 215, 197, 0.06),
      transparent 27%
    ),
    var(--ink);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
  opacity: 0.18;
}

.hero-orbit {
  position: absolute;
  top: 85px;
  left: 50%;
  width: min(78vw, 1050px);
  aspect-ratio: 1;
  transform: translate(-50%, -67%);
  pointer-events: none;
}

.hero-orbit__ring,
.hero-orbit__core {
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-orbit__ring {
  border: 1px solid rgba(255, 90, 31, 0.18);
}

.hero-orbit__ring--one {
  width: 56%;
  height: 56%;
  animation: orbit-pulse 5s ease-in-out infinite;
}

.hero-orbit__ring--two {
  width: 76%;
  height: 76%;
  border-color: rgba(241, 234, 223, 0.06);
  animation: orbit-pulse 7s 1.2s ease-in-out infinite reverse;
}

.hero-orbit__core {
  width: 17%;
  height: 17%;
  background: radial-gradient(
    circle,
    rgba(255, 122, 53, 0.23),
    rgba(255, 90, 31, 0.04) 60%,
    transparent 70%
  );
  filter: blur(1px);
}

@keyframes orbit-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.eyebrow,
.section-index {
  margin: 0 0 24px;
  color: var(--orange-bright);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 1130px;
  margin: 0 auto;
  font-family: "Onest", sans-serif;
  /* maksimum zrównane z .path-kino__tytul (80px): 82 vs 80 to różnica 2,4%,
     której oko nie odróżni, a w systemie były to dwa osobne stopnie hero. */
  font-size: clamp(44px, 5.8vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
}

/* Drugi wers: pełny przygaszony kolor zamiast konturu — text-stroke pokazywał
   szwy nakładających się ścieżek glifów (artefakt widoczny na dużych stopniach). */
.hero__title span,
.display-title span,
.path-head__title span {
  color: rgba(241, 234, 223, 0.5);
}

.hero__lead {
  max-width: 760px;
  margin: 32px auto 0;
  color: var(--cream-2);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  font-weight: 380;
}
.hero__note {
  margin: 32px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 15px;
}

.display-title {
  margin: 0;
  font-family: "Onest", sans-serif;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.large-copy {
  max-width: 850px;
  margin: 32px 0 0;
  color: var(--cream-2);
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.45;
  font-weight: 380;
}

.operator {
  padding: 160px 0;
  background: var(--cream);
  color: var(--ink);
}

.operator__grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) 1.28fr;
  gap: clamp(64px, 8vw, 128px);
  align-items: start;
}

.operator__portrait {
  position: sticky;
  top: 100px;
  margin: 0;
}

.operator__portrait img {
  width: 100%;
  aspect-ratio: 0.84;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.25) contrast(1.04);
}

.operator__portrait figcaption {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(10, 9, 8, 0.25);
  color: #5c544b;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.operator .section-index,
.case-jkt .section-index {
  /* jasny ember na kremie ma 2,17:1 — ten odcień daje 5,0:1 */
  color: #a5441f;
}

.operator .display-title span {
  color: rgba(10, 9, 8, 0.52);
}

.operator .large-copy {
  color: #5c544b;
}

.operator__differences {
  margin-top: 64px;
  border-top: 1px solid rgba(10, 9, 8, 0.25);
}

.operator__differences article {
  padding: 24px 0;
  display: grid;
  grid-template-columns: 56px 220px 1fr;
  gap: 24px;
  align-items: start;
  border-bottom: 1px solid rgba(10, 9, 8, 0.18);
}

.operator__differences article > span {
  color: #a5441f;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.operator__differences h3,
.operator__differences p {
  margin: 0;
}

.operator__differences h3 {
  font-family: "Onest", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.operator__differences p {
  color: #5c544b;
  font-size: 16px;
}

.operator blockquote {
  margin: 72px 0 0;
  padding: 32px 0 0;
  border-top: 2px solid var(--ink);
  font-family: "Onest", sans-serif;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 380;
  /* cudzysłów wychodzi poza oś tekstu — lewa krawędź kolumny czyta się prosto */
  text-indent: -0.42em;
}

.method {
  padding: 128px 0 160px;
  background: var(--ink);
}

.method__intro {
  max-width: 1100px;
  margin: 0;
  text-align: left;
}

.contact {
  padding: 160px 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 15% 45%,
      rgba(255, 90, 31, 0.11),
      transparent 27%
    ),
    radial-gradient(
      circle at 85% 65%,
      rgba(67, 215, 197, 0.07),
      transparent 24%
    ),
    var(--ink);
}

.contact__grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(64px, 8vw, 128px);
  align-items: start;
}

.contact__intro {
  position: sticky;
  top: 110px;
}

.contact__promise {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}

.contact__promise span {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.contact-form {
  position: relative;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line-strong);
  background: rgba(18, 16, 14, 0.94);
}

.contact-form.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10, 9, 8, 0.36);
  cursor: wait;
}

.form-summary {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 90, 31, 0.5);
  background: var(--orange-soft);
  color: var(--cream);
  font-size: 14px;
}

.contact-form fieldset {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.contact-form legend {
  margin-bottom: 12px;
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
}

.route-radio {
  margin-bottom: 8px;
  display: block;
  cursor: pointer;
}

/* Specyficzność wyższa niż `.contact-form input` (width: 100%), który stoi
   dalej w pliku — bez tego niewidzialne radio rozpycha stronę w poziomie. */
.contact-form .route-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.route-radio span {
  min-height: 72px;
  padding: 12px 16px 12px 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.route-radio span::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-50%);
}

.route-radio input:checked + span {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.route-radio input[value="first"]:checked + span {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.route-radio input:checked + span::before {
  border: 5px solid var(--orange);
  background: var(--ink);
}

.route-radio input[value="first"]:checked + span::before {
  border-color: var(--teal);
}

.route-radio input:focus-visible + span {
  outline: 2px solid var(--teal);
}

.route-radio strong {
  font-size: 14px;
}

.route-radio small {
  color: var(--muted);
  font-size: 12px;
}

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

.contact-form > label,
.form-row label {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cream-2);
  font-size: 13px;
  font-weight: 700;
}

.contact-form label .optional {
  color: var(--muted);
  font-weight: 380;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 0;
  border: 0;
  /* linia pola min. 3:1 wobec tła formularza (WCAG 1.4.11) */
  border-bottom: 1px solid rgba(241, 234, 223, 0.5);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-weight: 380;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--teal);
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: var(--orange);
}

.field-error {
  min-height: 1em;
  color: var(--orange-bright);
  font-size: 13px;
  font-weight: 500;
}

.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form > button {
  width: 100%;
  min-height: 64px;
  margin-top: 12px;
  padding: 19px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--ink);
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.contact-form.is-first > button {
  background: var(--teal);
}

.contact-form > button:hover {
  background: var(--orange-bright);
  transform: translateY(-1px);
}

.contact-form.is-first > button:hover {
  background: var(--teal-bright);
}

.contact-form > button:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.contact-form > button b {
  font-size: 22px;
  font-weight: 380;
}

.form-next {
  margin: 20px 0 0;
  max-width: 560px;
  color: var(--cream-2);
  font-size: 14px;
  line-height: 1.55;
}

.form-alt {
  margin: 16px 0 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
}

.form-alt a {
  color: var(--cream-2);
  text-underline-offset: 3px;
}

.form-note {
  margin: 20px 0 0;
  padding-top: 16px;
  max-width: 520px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.form-note a,
.form-noscript a {
  color: var(--cream-2);
  text-underline-offset: 3px;
}

.form-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--cream-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.form-noscript {
  margin: 16px 0 0;
  color: var(--cream-2);
  font-size: 12px;
}

.form-success {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(67, 215, 197, 0.45);
  background: var(--teal-soft);
}

.form-success.is-error {
  border-color: rgba(255, 90, 31, 0.5);
  background: var(--orange-soft);
}

.form-success.is-error strong {
  color: var(--orange-bright);
}

.form-success strong,
.form-success span {
  display: block;
}

.form-success__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-form .form-success__actions button,
.contact-form .form-success__actions a {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(67, 215, 197, 0.46);
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.contact-form .form-success__actions button:hover,
.contact-form .form-success__actions a:hover {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--ink);
  transform: none;
}

.form-success strong {
  color: var(--teal);
}

.form-success span {
  margin-top: 4px;
  color: var(--cream-2);
  font-size: 14px;
}

.faq {
  padding: 128px 0;
  border-top: 1px solid var(--line);
  background: #0d0c0b;
}

.faq__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(56px, 8vw, 128px);
}

.faq__items {
  border-top: 1px solid var(--line-strong);
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq summary {
  position: relative;
  padding: 24px 56px 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Onest", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 19px;
  color: var(--orange);
  font-size: 27px;
  font-weight: 300;
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 65ch;
  margin: -8px 56px 24px 0;
  color: var(--cream-2);
  font-size: 16px;
}

.faq__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 40px;
}

.faq__cta a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.faq__cta a:hover {
  color: var(--orange-bright);
}

.faq__cta .faq__cta-secondary {
  color: var(--muted);
  font-weight: 400;
}

.faq__cta .faq__cta-secondary:hover {
  color: var(--cream);
}

.footer {
  padding: 72px 0 24px;
  border-top: 1px solid var(--line-strong);
  background: var(--ink);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) 2.9fr;
  align-items: start;
  gap: 64px;
}

.footer__identity p {
  margin: 24px 0 0;
  color: var(--cream-2);
  font-size: 17px;
}

.footer__identity .footer__contact {
  margin-top: 24px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.footer__contact strong {
  color: var(--cream-2);
  font-weight: 700;
}

.footer__contact a {
  color: var(--cream);
  text-underline-offset: 3px;
}

.brand--footer img {
  width: 32px;
  height: 32px;
}

.footer__map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col h2 {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__col h2 a {
  color: inherit;
  text-decoration: none;
}

.footer__col h2 a:hover {
  color: var(--cream);
}

.footer__col .footer__col-next {
  margin-top: 20px;
}

.footer__col > a {
  color: var(--cream-2);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
}

.footer__col > a:hover {
  color: var(--cream);
}

.footer__bottom {
  margin-top: 72px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.footer__legal {
  display: inline-flex;
  gap: 16px;
}

.footer__legal a {
  color: inherit;
  text-underline-offset: 3px;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 48px, 1080px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button {
    justify-self: end;
    width: 44px;
    height: 44px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--cream);
  }

  .menu-button span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition:
      transform 0.2s var(--ease),
      opacity 0.2s var(--ease);
  }

  .menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    z-index: 790;
    inset: 64px 0 0;
    /* header ma backdrop-filter, wiec jest containing blockiem dla fixed — bez height panel konczy sie na wysokosci headera */
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 9, 8, 0.98);
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    font-family: "Onest", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-nav__cta {
    margin-top: 32px;
    padding: 16px !important;
    border: 0 !important;
    background: var(--orange);
    color: var(--ink);
    text-align: center;
  }

  .operator__differences article {
    grid-template-columns: 48px 1fr;
  }

  .operator__differences p {
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  :root {
    --shell: calc(100vw - 32px);
  }

  html {
    scroll-padding-top: 72px;
  }

  .site-header {
    height: 64px;
    padding-inline: 16px;
    background: rgba(10, 9, 8, 0.88);
    border-color: var(--line);
    backdrop-filter: blur(16px);
  }

  .hero {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .hero__title {
    font-size: clamp(40px, 12vw, 64px);
  }

  .hero__lead {
    margin-top: 24px;
    font-size: 17px;
  }
  .faq {
    padding: 88px 0;
  }

  .faq__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .path-section,
  .operator,
  .method,
  .contact {
    padding: 96px 0;
  }

  .path-content,
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .operator__grid {
    grid-template-columns: 1fr;
  }

  .operator__portrait,
  .contact__intro {
    position: static;
  }

  .operator__portrait {
    max-width: 520px;
  }

  .operator__differences article {
    grid-template-columns: 32px 1fr;
    gap: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .footer__map {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .display-title {
    font-size: 36px;
  }

  .operator__portrait figcaption {
    flex-direction: column;
  }

  .operator__differences article {
    grid-template-columns: 1fr;
  }

  .operator__differences p {
    grid-column: auto;
  }

  .operator blockquote {
    font-size: 24px;
  }

  .path-cta,
  .contact-form {
    padding: 24px 16px;
  }

  .footer__map {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 8px;
  }

}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   R13 — HERO KUŹNIA (decyzja Mateusza 15.08: kierunek H3 + MIX napisów)
   Rozpalający się łańcuch (generacja 4K) + przekaz wprost. Route usunięty.
   ========================================================================== */

.hero--kuznia { padding-top: 0; }
.hero--kuznia .hero-orbit { display: none; }

.hero__kadr {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(96px, 14vh, 150px) 24px 96px;
}
.hero__tlo {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  overflow: hidden;
}
.hero__tlo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}
.hero__tlo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.74) 0%, rgba(10, 9, 8, 0.38) 26%,
      rgba(10, 9, 8, 0.06) 48%, rgba(10, 9, 8, 0) 68%, rgba(10, 9, 8, 0.35) 100%);
}
.hero__kadr .hero__inner { position: relative; z-index: 2; }

.hero--kuznia .hero__title em {
  font-style: normal;
  color: var(--orange);
}
.hero__cta-pas {
  position: absolute; left: 0; right: 0; bottom: 108px; z-index: 2;
  margin: 0;
  text-align: center;
}
.hero__cta-glowne {
  display: inline-block;
  background: var(--orange);
  color: #0a0908;
  border-radius: 2px;
  padding: 19px 32px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero__cta-glowne:hover, .hero__cta-glowne:focus-visible {
  box-shadow: 0 0 18px rgba(255, 90, 31, 0.5);
  transform: translateY(-1px);
}
.hero__zar-napis {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(10, 9, 8, 0.9);
}
.hero__zar-napis b { color: var(--orange); font-weight: 500; }

/* blok ścieżek pod kadrem (w tej samej sekcji — JS nietknięty) */
.sciezki-glowa {
  text-align: center;
  padding-top: clamp(96px, 12vh, 144px);
}
.sciezki-glowa .eyebrow { margin-bottom: 16px; }
.sciezki-tytul {
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0;
}
/* kontakt: scena „na stole" (klamra z hero) */
.contact--kuznia { position: relative; overflow: hidden; }
.contact__tlo {
  position: absolute; inset: 0; z-index: 0; margin: 0;
}
.contact__tlo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.contact__tlo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(75% 70% at 40% 40%, rgba(10, 9, 8, 0.9) 0%, rgba(10, 9, 8, 0.62) 60%, rgba(10, 9, 8, 0.42) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0.35) 30%, rgba(10, 9, 8, 0.55) 100%);
}
.contact--kuznia > .shell { position: relative; z-index: 2; }
.contact--kuznia .display-title span { color: var(--orange); }

@media (max-width: 720px) {
  .hero__kadr { padding-top: 112px; padding-bottom: 88px; }
  .hero__tlo img { object-position: 58% 72%; }
  .hero__zar-napis {
    font-size: 12px;
    letter-spacing: 0.18em; text-indent: 0.18em;
    padding: 0 16px;
    bottom: 28px;
  }
  .hero__cta-pas { bottom: 84px; padding: 0 16px; }
  .hero__cta-glowne { padding: 17px 26px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta-glowne { transition: none; }
}

/* --- R13a hotfix (Mateusz, prod 15.08): kontrast leadu + skala napisu ----- */
.hero__tlo::after {
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.8) 0%, rgba(10, 9, 8, 0.58) 30%,
      rgba(10, 9, 8, 0.3) 55%, rgba(10, 9, 8, 0) 74%, rgba(10, 9, 8, 0.35) 100%);
}
.hero--kuznia .hero__lead {
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(10, 9, 8, 0.85);
}
.hero--kuznia .hero__title {
  text-shadow: 0 3px 28px rgba(10, 9, 8, 0.7);
}
.hero__zar-napis {
  font-size: 12px;
  letter-spacing: 0.26em; text-indent: 0.26em;
}
@media (max-width: 720px) {
  .hero__zar-napis { font-size: 12px; letter-spacing: 0.16em; text-indent: 0.16em; }
}

/* --- R13b (15.08): „Jak pracujemy" jako kucie + separator-pas -------------- */
.method__pod {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cream-2);
}
.method__kroki {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
.method-krok {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.method-krok__kadr {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.method-krok__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.method-krok__kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, 0.15) 0%,
    rgba(10, 9, 8, 0) 45%,
    rgba(24, 21, 18, 0.9) 96%,
    var(--panel) 100%
  );
}
.method-krok__nr {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.9);
}
.method-krok__tresc {
  padding: 18px 20px 22px;
}
.method-krok__tresc h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.method-krok__tresc p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream-2);
}

.pas-kuznia {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.pas-kuznia picture,
.pas-kuznia img {
  width: 100%;
  height: 100%;
  display: block;
}
.pas-kuznia img {
  object-fit: cover;
  object-position: 50% 46%;
}
.pas-kuznia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    rgba(10, 9, 8, 0.25) 22%,
    rgba(10, 9, 8, 0.2) 78%,
    var(--ink) 100%
  );
}

@media (max-width: 980px) {
  .method__kroki {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 48px;
  }
  .pas-kuznia {
    height: 190px;
  }
}
@media (max-width: 720px) {
  .method__kroki {
    grid-template-columns: 1fr;
  }
  .method__pod {
    font-size: 16px;
  }
  .pas-kuznia {
    height: 150px;
  }
}

/* --- R13c (15.08): dowód JKT SYSTEM — trzy etapy, zmierzone liczby -------- */
.case-jkt {
  padding: 160px 0;
  background: var(--cream);
  color: var(--ink);
}
.case-jkt .display-title {
  color: var(--ink);
}
.case-jkt .display-title span {
  color: rgba(10, 9, 8, 0.52);
}
.case-jkt__glowa {
  max-width: 1100px;
}
.case-jkt__lead {
  margin: 24px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(10, 9, 8, 0.72);
}
.case-jkt__etapy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}
.case-etap {
  border: 1px solid rgba(10, 9, 8, 0.22);
  border-radius: var(--radius);
  padding: 28px 28px 32px;
  background: rgba(255, 255, 255, 0.28);
}
.case-etap__nr {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #5c544b;
}
.case-etap__liczba {
  margin: 22px 0 0;
  font-size: clamp(44px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.case-etap__liczba i {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 700;
  color: rgba(10, 9, 8, 0.55);
}
.case-etap--zar .case-etap__liczba {
  color: var(--orange);
}
.case-etap--zar .case-etap__liczba i {
  color: rgba(255, 90, 31, 0.6);
}
.case-etap__jednostka {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #5c544b;
}
.case-etap h3 {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 9, 8, 0.16);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.case-etap__opis {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(10, 9, 8, 0.72);
}
.case-jkt__dotego {
  margin: 40px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(10, 9, 8, 0.72);
}
.case-jkt__stopka {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.case-jkt__cta {
  display: inline-block;
  padding: 19px 32px;
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.case-jkt__cta:hover {
  background: var(--orange-bright);
}

@media (max-width: 980px) {
  .case-jkt {
    padding: 96px 0;
  }
  .case-jkt__etapy {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 48px;
  }
}
@media (max-width: 720px) {
  .case-jkt__lead {
    font-size: 16px;
  }
  .case-etap {
    padding: 24px 20px 28px;
  }
}

/* --- R13d (15.08): sekcje ścieżek w układzie filmowym (wariant F3) -------- */
.path-kino {
  padding: 128px 0 0;
  background: var(--ink);
}
.path-kino__glowa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 44px;
}
.path-kino__obszar {
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.path-kino__obszar span:first-child { color: var(--orange); }
.path-kino__obszar span + span { color: var(--muted); }
.path-kino__tytul {
  margin-top: 14px;
  font-size: clamp(38px, 5.6vw, 80px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.path-kino__tytul span { color: rgba(241, 234, 223, 0.5); }
.path-kino__def {
  max-width: 440px;
  justify-self: end;
  /* start od linii tytułu: wysokość eyebrow (18px) + jego margines (14px) + zapas */
  margin-top: 46px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream-2);
}
.path-kino__kadr {
  position: relative;
  height: clamp(460px, 44vw, 660px);
  overflow: hidden;
}
.path-kino__kadr picture,
.path-kino__kadr img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.path-kino__kadr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    rgba(10, 9, 8, 0.2) 14%,
    rgba(10, 9, 8, 0) 40%,
    rgba(10, 9, 8, 0) 68%,
    rgba(10, 9, 8, 0.4) 90%,
    var(--ink) 100%
  );
}
.path-kino__scena {
  position: relative;
}
.path-kino__haslo {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  z-index: 2;
  width: var(--shell);
  margin: 0 auto;
  pointer-events: none;
}
.path-kino__haslo-tresc {
  max-width: 500px;
}
.path-kino__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--orange);
}
.path-kino__mem {
  margin-top: 14px;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(10, 9, 8, 0.95), 0 0 34px rgba(10, 9, 8, 0.75);
}
.path-kino__stopy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 44px 0 34px;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, 0) 0%,
    rgba(10, 9, 8, 0.88) 52%,
    var(--ink) 100%
  );
}
.path-kino__stopy-siatka {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.path-stopa span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.path-stopa p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream-2);
  max-width: 340px;
}
.path-stopa--kucie {
  text-align: center;
  transform: translateY(-3px);
}
.path-stopa--kucie span {
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.path-stopa--kucie p { margin-inline: auto; }
.path-stopa--po { text-align: right; }
.path-stopa--po span { color: var(--teal); }
.path-stopa--po p { margin-left: auto; }
.path-kino__final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 36px;
  padding-bottom: 64px;
}
.path-kino__final-info { display: grid; gap: 10px; }
.path-kino__inercja {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.path-kino__dowod {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cream-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 234, 223, 0.3);
  width: fit-content;
  padding-bottom: 2px;
}
.path-kino__dowod:hover { color: var(--cream); border-color: var(--cream); }
.path-kino__cta {
  display: inline-block;
  padding: 19px 32px;
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.path-kino__cta:hover { background: var(--orange-bright); }
.path-kino--first .path-kino__kadr img { object-position: 50% 60%; }

@media (max-width: 980px) {
  .path-kino { padding-top: 96px; }
  .path-kino__glowa {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding-bottom: 36px;
  }
  .path-kino__def { justify-self: start; margin-top: 0; }
  .path-kino__stopy { position: static; padding: 24px 0 8px; background: var(--ink); }
  .path-kino__stopy-siatka { grid-template-columns: 1fr; gap: 20px; }
  .path-stopa--kucie, .path-stopa--po { text-align: left; transform: none; }
  .path-stopa--kucie p, .path-stopa--po p { margin-inline: 0; }
  .path-kino__kadr { height: auto; overflow: visible; }
  .path-kino__kadr::before { display: none; }
  .path-kino__kadr picture,
  .path-kino__kadr img { position: static; height: auto; }
  .path-kino__haslo { position: static; width: var(--shell); pointer-events: auto; padding-bottom: 28px; }
  .path-kino__haslo-tresc { max-width: 620px; }
  .path-kino__mem { text-shadow: none; }
}
@media (max-width: 720px) {
  .path-kino__final { padding-bottom: 48px; }
  .path-kino__cta { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .path-kino__cta { transition: none; }
}

/* --- R13g (15.08): dowód jako karta-zajawka w finale sekcji ścieżek ------- */
.dowod-karta {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  max-width: 600px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dowod-karta:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
}
.dowod-karta:focus-visible {
  outline: 2px solid var(--teal);
}
.dowod-karta__kadr {
  position: relative;
  height: 96px;
  overflow: hidden;
}
.dowod-karta__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 12%;
  display: block;
}
.dowod-karta--02 .dowod-karta__kadr img { object-position: 50% 8%; }
.dowod-karta__kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 9, 8, 0.05) 50%, var(--panel) 100%);
}
.dowod-karta__opis {
  padding: 16px 20px;
  display: block;
}
.dowod-karta__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.dowod-karta__cel {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--cream);
}
.dowod-karta__cel i { font-style: normal; color: var(--orange); }
.dowod-karta--02 .dowod-karta__cel i { color: var(--teal); }

@media (max-width: 980px) {
  .dowod-karta { max-width: none; width: 100%; }
}
@media (max-width: 520px) {
  .dowod-karta { grid-template-columns: 110px 1fr; }
  .dowod-karta__kadr { height: 100%; min-height: 88px; }
  .dowod-karta__cel { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dowod-karta { transition: none; }
}


/* — R15 · CINEMAGRAPH HERO ————————————————————————————————————————
   Pętla leży NAD statyką w tym samym kadrze i przejmuje tło dopiero, gdy
   naprawdę gra (js ustawia data-gotowe na zdarzeniu `playing`). Dzięki temu
   LCP zostaje przy statyce z fetchpriority=high, a zablokowany autoplay albo
   wolne łącze nie zostawiają pustego kadru — zostaje dzisiejszy hero.
   object-position statyki i wideo NIE musi być identyczny: mobilny wariant pętli
   to osobny, pionowy kadr 322x700, wycięty wokół rozżarzonego ogniwa, a statyka jest
   kadrem panoramicznym. Wartości dobrane osobno i sprawdzone wizualnie (17.08).
   Przy wspólnym kadrze desktopowym zgodność nadal obowiązuje — nie zrównuj ich w ciemno; dlatego wartość mobilna (58%) jest tu powtórzona za regułą img. */
.hero__tlo .hero__wideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.hero__tlo .hero__wideo[data-gotowe] { opacity: 1; }

@media (max-width: 720px) {
  .hero__tlo .hero__wideo { object-position: 50% 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__tlo .hero__wideo { display: none; }
}

/* Dolna strefa kadru pod grającą pętlą — POMIAR, nie oko:
   żar rozświetla dół kadru mocniej niż statyka (tło obok CTA 74,8 wobec 25,4;
   pas napisu żarowego 57,5 wobec 21,0), a przycisk ma luminancję ~120, więc
   pomarańcz siadał na pomarańczu i tracił krawędź. Gradient dokłada ciemności
   TYLKO tam, gdzie leży tekst (poniżej 78% kadru) i tylko gdy pętla naprawdę
   gra — statyka zostaje dokładnie taka, jaka jest dziś na produkcji.
   Pas łańcucha (55–78% kadru) celowo prawie nietknięty: to on ma świecić. */
.hero__tlo--wideo::after {
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.8) 0%, rgba(10, 9, 8, 0.58) 30%,
      rgba(10, 9, 8, 0.28) 52%, rgba(10, 9, 8, 0.1) 68%,
      rgba(10, 9, 8, 0.3) 82%, rgba(10, 9, 8, 0.52) 100%);
}

/* Niskie kadry (≤820 px wysokości) — układ tekstu wobec pasa łańcucha.
   Łańcuch trzyma stały udział kadru (55–78% wysokości), a bloki tekstu mają
   wysokość w px, więc im niższy ekran, tym ciaśniej. Zmierzone przy 1280×720
   PRZED korektą: lead kończył się 1 px nad łańcuchem, a CTA wchodziło na jego
   dolną krawędź o 11 px (statyka miała tam zresztą ten sam styk).
   Korekta podnosi blok nagłówka i odsuwa CTA w dół — po niej prześwity wynoszą
   32 px nad łańcuchem i 13 px pod nim. Wyższych kadrów to nie dotyka. */
@media (min-width: 721px) and (max-height: 820px) {
  .hero__kadr { padding-top: clamp(72px, 11vh, 110px); }
  .hero__lead { margin-top: 22px; }
  .hero__cta-pas { bottom: 84px; }
}

/* Oddech kadru — bez niego pętla czyta się jak zdjęcie.
   Materiał to ujęcie ze statywu: żar pełznie po ogniwach, iskry drgają, dym idzie
   przez kadr. Na tle rozciągniętym na cały ekran ten ruch jest tak drobny, że oko
   go nie łapie — użytkownik patrzy i nie widzi animacji (zgłoszone 16.08).
   Bardzo wolne skalowanie (28 s w jedną stronę, alternate) daje ciągły ruch, który
   widać kątem oka, a nie odciąga uwagi od nagłówka. Cykl celowo NIE jest zgodny
   z 16-sekundową pętlą — dzięki temu kadr nigdy nie powtarza się identycznie.
   Działa tylko na grającym wideo i tylko dla tych, którzy nie proszą o mniej ruchu. */
@media (prefers-reduced-motion: no-preference) {
  .hero__tlo--wideo .hero__wideo[data-gotowe] {
    animation: hero-oddech 28s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes hero-oddech {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Wzorzec przycisku głównego na wąskich ekranach.
   Desktop ujednolicono do 17 px / 19×32 (za hero). Telefon dostaje jeden krok
   w dół — dokładnie ten, który hero miał już wcześniej — żeby przyciski nie
   rozpychały kolumny. Blok stoi na końcu arkusza świadomie: to ostatnie słowo
   w kaskadzie dla tych czterech komponentów. */
@media (max-width: 720px) {
  .case-jkt__cta,
  .path-kino__cta,
  .contact-form > button {
    padding: 17px 26px;
    font-size: 16px;
  }
}

/* — R16 · SEKCJA WYBORU ŚCIEŻKI: DYPTYK BEZ RAM ————————————————————————
   Zastępuje blok kart z ramkami (R13). Powód: pełna obwódka w kolorze akcentu
   wokół dużej karty była jedynym takim pojemnikiem na stronie — sekcje niżej
   (positioning, path-kino) trzymają się samym światłem i typografią, więc karty
   czytały się jak wklejone z innego projektu.
   Trzy zasady tego bloku:
   1. zero pojemników — kolumny rozdziela jedna włosowa linia, kadry wygaszają
      się w tło zamiast siedzieć w ramce;
   2. akcent występuje DWA razy na kolumnę (etykieta stanu + strzałka CTA), bo
      kolor działa przez izolację, a nie przez liczbę wystąpień;
   3. obie kolumny mają wspólną linię bazową CTA — równorzędność ścieżek czyta
      się z lustrzanego rytmu, nie z dwóch identycznych ramek.
   Uwaga przy edycji: JS (strona-glowna.js) trzyma się atrybutów data-choice-card
   i data-select-path oraz klasy .is-selected — nie klas wyglądu. Stan wybrania
   MUSI zostać widoczny mimo braku ramki (patrz .is-selected niżej), bo JS
   przywraca go z sessionStorage przy powrocie na stronę.                      */

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-align: left;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(28px, 3.2vw, 56px);
}
.choice:first-child { padding-left: 0; }
.choice:last-child { padding-right: 0; }

/* Linia podziału: gradient wygaszony na końcach, więc nie zamyka kolumn jak ramka.
   Pseudo-element, a nie border-left, właśnie ze względu na to wygaszenie. */
.choice + .choice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--line) 12%,
    var(--line) 88%,
    transparent
  );
}

.choice__kadr {
  position: relative;
  margin: 0 0 34px;
  overflow: hidden;
  aspect-ratio: 1200 / 470;
}

.choice__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}

/* Dwie warstwy wygaszenia: dolna sadza kadr na tle sekcji, boczna i górna
   zdejmują ostre krawędzie, żeby kadr nie czytał się jako karta. Kolor
   docelowy to --ink, czyli tło sekcji hero, w której ten blok siedzi. */
.choice__kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, 0.15) 0%,
    rgba(10, 9, 8, 0) 38%,
    rgba(10, 9, 8, 0.85) 92%,
    var(--ink) 100%
  );
}
.choice__kadr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(10, 9, 8, 0) 9%,
                    rgba(10, 9, 8, 0) 91%, var(--ink) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(10, 9, 8, 0) 14%);
}

/* Etykieta stanu — pierwszy z dwóch akcentów w kolumnie.
   Selektor .choice .choice__stan (dwie klasy) musi wygrać z .choice > p. */
.choice .choice__stan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-bright);
}
.choice .choice__stan::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.25s var(--ease);
}
.choice--first .choice__stan,
.choice--start .choice__stan { color: var(--teal-bright); }

.choice h2 {
  margin: 0;
  font-family: "Onest", sans-serif;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--cream);
  text-wrap: balance;
}
.choice h2 strong {
  display: block;
  color: rgba(241, 234, 223, 0.52);
  font-weight: 800;
}

.choice > p {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--cream-2);
  font-size: 16.5px;
  font-weight: 380;
}

/* CTA: margin-top:auto wyrównuje przyciski obu kolumn do wspólnej linii bazowej
   niezależnie od długości tekstu. align-self jest konieczny — bez niego flex-item
   rozciągnąłby się na całą szerokość kolumny. */
.choice__action {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  align-self: flex-start;
  margin-top: auto;
  padding: 34px 0 10px;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  text-decoration: none;
  transition: border-color 0.2s var(--ease);
}
.choice__action span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.choice__action strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.choice__action b {
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.2s var(--ease);
}
.choice--first .choice__action b { color: var(--teal); }

.choice__action:hover { border-bottom-color: var(--cream-2); }
.choice__action:hover span { color: var(--cream-2); }
.choice__action:hover b { transform: translate(3px, 3px); }
.choice__action:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }

/* Stan wybranej ścieżki. Bez ramki trzeba go pokazać czymś innym: kreska przy
   etykiecie wydłuża się, podkreślenie CTA przechodzi w kolor ścieżki, a kadr
   dostaje ciepły nalot. Bez tego wybór zapamiętany w sessionStorage byłby
   po powrocie na stronę niewidoczny. */
.choice.is-selected .choice__stan::before { width: 52px; opacity: 1; }
.choice--broken.is-selected .choice__action { border-bottom-color: rgba(255, 90, 31, 0.75); }
.choice--first.is-selected .choice__action { border-bottom-color: rgba(67, 215, 197, 0.7); }
.choice.is-selected .choice__kadr::after { mix-blend-mode: normal; }
.choice--broken.is-selected .choice__kadr img { filter: saturate(1.12) brightness(1.06); }
.choice--first.is-selected .choice__kadr img { filter: saturate(1.12) brightness(1.06); }

@media (max-width: 980px) {
  .choice-grid { grid-template-columns: 1fr; gap: 56px; }
  .choice, .choice:first-child, .choice:last-child { padding: 0; }
  /* w jednej kolumnie pionowa linia nie ma sensu — rozdziela pozioma */
  .choice + .choice::before {
    left: 0;
    right: 0;
    top: -28px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 12%,
                                var(--line) 88%, transparent);
  }
}

@media (max-width: 720px) {
  .choice__kadr { aspect-ratio: 1200 / 620; margin-bottom: 26px; }
  .choice .choice__stan { font-size: 12px; }
  .choice__action { padding-top: 28px; }
}

@media (max-width: 520px) {
  .choice > p { font-size: 16px; }
  .choice__action strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .choice .choice__stan::before,
  .choice__action,
  .choice__action b { transition: none; }
  .choice__action:hover b { transform: none; }
}

/* ── Miara wiersza na głównej ──────────────────────────────────────────────
   ODTWORZONE 17.08 — blok został skasowany przy przebudowie sekcji .choice
   w równoległej sesji (commit 7f00287 zabezpiecza tamtą pracę i odnotowuje utratę).
   Zmierzone po skasowaniu: 8 akapitów powyżej progu 78 znaków na 720 px,
   2 na 1024 px, 5 na 1440 px. Komfort czytania to 45–75 znaków.
   Realna szerokość znaku Onest = 0,5113 em (mierzona ukrytym alfabetem, nie
   szacowana z `ch`), więc 72 znaki ≈ 36em. min(px, em) tam, gdzie limit w px
   już istniał: sam px trzyma miarę tylko przy jednej szerokości, bo pismo
   skaluje się clampem. Blok na końcu arkusza — ostatnie słowo w kaskadzie. */
.method-krok__tresc p { max-width: 36em; }
.case-etap__opis { max-width: 36em; }
.case-jkt__lead { max-width: min(680px, 36em); }
.hero__lead { max-width: min(760px, 36em); }
.faq__items details p { max-width: 36em; }

/* — R16b · po usunięciu sekcji „positioning" —————————————————————————
   Lead pozycjonujący przeniesiony nad karty wyboru (był tytułem+leadem
   zdublowanego rozdzielacza), a listy objawów zeszły do sekcji path-kino,
   gdzie mają rozwinięcie zamiast konkurencji.                              */

.sciezki-lead {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--cream-2);
  font-size: 17px;
  font-weight: 380;
  text-wrap: pretty;
}

/* Trzeci element w gridzie `auto 1fr` — bez jawnej kolumny wskoczyłby
   pod tytuł, do lewej kolumny. */
.path-kino__objawy {
  grid-column: 2;
  justify-self: end;
  max-width: 440px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.path-kino__objawy li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.path-kino__objawy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 12px;
  height: 1px;
  background: var(--orange);
  opacity: 0.7;
}
.path-kino__objawy--first li::before { background: var(--teal); }

@media (max-width: 980px) {
  /* głowa schodzi do jednej kolumny — jawna kolumna 2 przestaje istnieć */
  .path-kino__objawy {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;
  }
}

/* ── Domknięcie po przebudowie sekcji .choice (17.08) ──────────────────────
   Te dwie poprawki stoją TUTAJ, na końcu arkusza, a nie przy swoich regułach:
   przebudowa w środku pliku skasowała je już raz. Na końcu wygrywają kaskadą
   i przeżyją kolejną zmianę tamtych bloków. */

/* .sciezki-lead miał stały limit 720px — przy 17 px to 83 znaki w wierszu.
   36em = 72 znaki przy zmierzonej szerokości znaku Onest (0,5113 em). */
.sciezki-lead { max-width: min(720px, 36em); }

/* Liczba „+237%" na jasnej karcie: var(--orange) = #ff5a1f daje 2,75:1, czyli
   PONIŻEJ progu 3:1 dla dużego tekstu. #a5441f to kanoniczny ember jasnych sekcji
   — 5,37:1. Towarzyszący znak z 1,91 na 3,39. Policzone wobec tła rgb(245,240,232). */
.case-etap--zar .case-etap__liczba { color: #a5441f; }
.case-etap--zar .case-etap__liczba i { color: rgba(165, 68, 31, 0.75); }

/* Wrapper prawej kolumny głowy path-kino (definicja + objawy razem).
   Przejmuje pozycjonowanie, które wcześniej niosło samo .path-kino__def —
   po zagnieżdżeniu w divie tamte reguły przestały działać na poziomie grida. */
.path-kino__prawa {
  justify-self: end;
  max-width: 440px;
  /* start od linii tytułu: wysokość eyebrow (18px) + margines (14px) + zapas */
  margin-top: 46px;
}
.path-kino__prawa .path-kino__def {
  max-width: 100%;
  margin-top: 0;
  justify-self: auto;
}
/* lista jest teraz dzieckiem wrappera, nie grida — jawna kolumna zbędna */
.path-kino__objawy {
  grid-column: auto;
  justify-self: auto;
  max-width: 100%;
}

@media (max-width: 980px) {
  .path-kino__prawa { justify-self: start; max-width: 100%; margin-top: 0; }
}

/* — R17 · sekcja „Dlaczego OGNIWO" bez osoby ————————————————————————
   W kolumnie stoi teraz zrzut działającego systemu klienta, nie portret.
   Filtr `grayscale(.25) contrast(1.04)` był dobierany pod fotografię —
   na interfejsie odbarwia marki i zaniża kontrast tekstu, więc znika. */
.operator__portrait img {
  /* height:auto jest konieczne — atrybuty width/height na <img> mapują się na CSS
     jako presentational hints, a gdy OBA wymiary są określone, aspect-ratio jest
     ignorowane i obraz dostaje pełne 1688 px wysokości. */
  height: auto;
  aspect-ratio: 0.84;
  object-fit: cover;
  object-position: center top;
  filter: none;
  border: 1px solid rgba(10, 9, 8, 0.14);
  border-radius: 2px;
  background: #fff;
}

/* Styk hero → pierwsza sekcja path-kino. Po usunięciu „positioning" (R16b) zetknęły
   się dwa paddingi po 128 px i odstęp urósł do 268 px, przy 223–241 px na pozostałych
   stykach strony. Zdejmujemy 36 px, żeby wrócić do rytmu — wyłącznie na tym jednym
   przejściu, bo dalsze sekcje path-kino sąsiadują ze sobą i mają własny odstęp. */
.hero + .path-kino {
  padding-top: 92px;
}

/* — R18 · para obszarów czyta się jako para ————————————————————————————
   Zasada bliskości: odstęp WEWNĄTRZ pary musi być wyraźnie mniejszy niż odstęp
   do następnej sekcji, inaczej dwie równorzędne ścieżki czytają się jak dwie
   niezwiązane sekcje. Zmierzone przed zmianą: 223 px wewnątrz pary wobec 241 px
   za nią — różnica 8%, czyli żadna.
   Po zmianie: 150 px wewnątrz wobec 241 px za parą (+61%). Druga wartość zostaje
   nietknięta — wystarczyło ścisnąć parę, żeby grupowanie stało się czytelne. */
.path-kino--first {
  padding-top: 55px;
}

/* Etykieta sekcji „Pierwszy Obieg" w kolorze swojej ścieżki.
   Reguła `.path-kino__obszar span:first-child { color: var(--orange) }` powstała, gdy
   pierwszym spanem był numer („OBSZAR 01/02") — neutralny porządkowo, więc pomarańcz
   w obu sekcjach był poprawny. Po usunięciu numerów (R18) kolor przejęła etykieta
   warunku wejścia i ścieżka B dostała pomarańcz, chociaż jej myślniki list, akcent
   w rozdzielaczu i podpis „PO — PIERWSZY OBIEG" są turkusowe. */
.path-kino--first .path-kino__obszar span:first-child {
  color: var(--teal);
}

/* Czas przejścia z systemu: reszta arkusza używa 0.2s (28 wystąpień).
   0.25s przy kresce etykiety było odpryskiem wprowadzonym w R16. */
.choice .choice__stan::before {
  transition: width 0.2s var(--ease);
}

/* — R19 · domknięcie skali ————————————————————————————————————————————
   Dwie korekty wychodzące z audytu: etykiety monospace mają jeden stopień,
   a para sekcji jest otoczona równym odstępem z obu stron. */

/* Echo przestrzenne wokół pary: odstęp PRZED parą wynosił 232 px, a ZA parą
   241 px — różnica 9 px jest za mała, żeby oko odczytało inną kategorię odstępu,
   i za duża, żeby powstało echo (echo wymaga wartości identycznej, nie zbliżonej).
   101 px daje dokładnie 241 px, czyli tyle samo co za parą: 241 / 150 / 241. */
.hero + .path-kino {
  padding-top: 101px;
}

/* 79 znaków w wierszu na 720 px. Selektor musi być DWUCZŁONOWY: równoległa sesja
   dodała `.path-kino__prawa .path-kino__def { max-width: 100% }` (0,2,0), które bije
   pojedynczą klasę. Na 1024 px rodzic i tak ma 440 px, więc 36em nic tam nie zmienia;
   na 720 px ich media query znosi limit rodzica do 100% i kolumna rośnie do 688 px. */
.path-kino__prawa .path-kino__def { max-width: 36em; }

/* — R21 · cele dotykowe w stopce na telefonie ————————————————————————
   Linki mapy serwisu miały 21 px wysokości (sam line-height) przy prześwicie 12 px
   z `gap` kolumny. WCAG 2.5.8 wymaga celu min. 24×24 px albo odstępu, który to
   rekompensuje — nie było ani jednego, ani drugiego, więc trafienie palcem w
   „Przerwane Ogniwo" zamiast w „Pierwszy Obieg" było kwestią szczęścia.
   Padding powiększa obszar kliknięcia z 21 na 33 px, a kompensujący ujemny margines
   zdejmuje większość przyrostu z układu. ZMIERZONE, nie szacowane: stopka rośnie
   o 19 px (1592 → 1611), strona o 86 px na 16 440 — ujemny margines nie kurczy
   kontenera flex przy skrajnych elementach kolumn. */
@media (max-width: 720px) {
  .footer__col a {
    padding-block: 6px;
    margin-block: -6px;
  }
}

/* ===== TELEFON OGNIWO (r21) ===== */
.footer__contact-note {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: -4px;
}

.contact__tel {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid rgba(241, 234, 223, .18);
  border-left: 3px solid var(--ember, #ff5a1f);
  border-radius: 4px;
  background: rgba(17, 16, 15, .38);
}
.contact__tel-label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__tel-num {
  display: inline-block;
  margin: 8px 0 6px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}
.contact__tel-num:hover,
.contact__tel-num:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.contact__tel-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cream-2); }

/* ── SEKCJA „ZADZWOŃ DO KSAWEREGO" (r20, 22.08.2026) ─────────────────────
   Demo asystenta głosowego jako element strony, nie pop-up: nakładka
   walczyłaby z CTA hero, a odwiedzający w sekundzie 0 nie ma motywacji.
   Numer jest jedynym CTA sekcji — bez pól formularza i bez drugiej oferty. */
.voice-demo {
  position: relative;
  padding: 120px 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.voice-demo__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.voice-demo__intro .large-copy {
  max-width: 58ch; /* wiersz ponad ~75 znaków męczy — trzymamy poniżej progu */
}

.voice-demo__akcja {
  display: flex;
  flex-direction: column;
}

.voice-demo__numer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s var(--ease);
}

.voice-demo__numer:hover,
.voice-demo__numer:focus-visible {
  background: var(--orange-bright);
}

.voice-demo__numer-etykieta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

.voice-demo__numer-cyfry {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

.voice-demo__promise {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}

.voice-demo__promise span {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  .voice-demo {
    padding: 88px 0;
  }
  .voice-demo__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── JEDNO PYTANIE PRZY WYJŚCIU (r23, 22.08.2026) ─────────────────────────
   Badanie jakościowe, nie oferta: przy naszym ruchu test A/B jest niewykonalny,
   więc to jedyny sposób, żeby dowiedzieć się, gdzie ludzie odpadają.
   Wywoływane wyłącznie z js/wyjscie.js — nigdy na wejściu. */
.wyjscie {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 9, 8, 0.72);
  animation: wyjscie-tlo 0.2s var(--ease);
}

.wyjscie__okno {
  width: min(440px, 100%);
  padding: 32px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  animation: wyjscie-okno 0.24s var(--ease);
}

.wyjscie__tytul {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cream);
}

.wyjscie__podtytul {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.wyjscie__odp {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 13px 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--cream);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.wyjscie__odp:hover,
.wyjscie__odp:focus-visible {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.wyjscie__zamknij {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.wyjscie__zamknij:hover,
.wyjscie__zamknij:focus-visible { color: var(--cream-2); }

@keyframes wyjscie-tlo { from { opacity: 0; } to { opacity: 1; } }
@keyframes wyjscie-okno {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Kto prosi o ograniczenie animacji, dostaje panel bez ruchu. */
@media (prefers-reduced-motion: reduce) {
  .wyjscie, .wyjscie__okno { animation: none; }
}