/* CleanWhale.pl /opieka — strona usługi partnerskiej (Zadbamy).
   Wartości = pomiary żywego cleanwhale.pl (getComputedStyle, 1280 px):
   futura-pt, Montserrat 700 nagłówki, płaski #2457c6, radius .3vw,
   cienie tylko aureole 0 0 N. Body 1.25vw — świadomie większe od pomiaru
   1vw żywego serwisu: landing czytany przez rodziny seniorów. Partner:
   pomarańcz Zadbamy wyłącznie w znaku serca i kickerze — nie jest kolorem UI.
   Ciemny sticky-bar = wyjątek z zatwierdzonego makietu Ivana (2026-08-14). */

@import url("https://use.typekit.net/kei7aql.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
/* Plus Jakarta Sans — WYŁĄCZNIE do wordmarku logo Zadbamy (font marki partnera). */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap");

:root {
  --cw-blue: #2457c6;
  --cw-blue-dark: #1c47a6;
  --cw-blue-tint: rgba(36, 87, 198, 0.08);
  --cw-yellow: #ffc73b;
  --cw-green-dark: #1f7a57;
  --cw-error: #e4410d;
  --cw-dark: #242424;
  --cw-card-bg: #fafafa;
  --cw-chip: #eef2fc;
  --cw-text: #000;
  --cw-muted: rgba(0, 0, 0, 0.6);
  --cw-border: rgba(0, 0, 0, 0.14);
  --zd-orange: #c86a3a;      /* pomarańcz marki Zadbamy — kolor z ich favicony */
  --zd-orange-text: #a0552c; /* pomarańcz TEKSTEM na białym (AA), znak zostaje jaśniejszy */
  --zd-peach: #faf1ea;       /* tło znaku serca — jak w logo partnera */
  --zd-ink: #2b2723;         /* wordmark „Zadbamy" */
  --r: max(4px, .3vw);       /* radius żywego serwisu z podłogą px na telefon */
  --shadow: 0 0 max(9px, 1.1vw) rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 0 max(14px, 1.8vw) rgba(0, 0, 0, 0.13);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Atrybut hidden ma wygrywać z display:flex komponentów. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: futura-pt, sans-serif;
  font-size: 1.25vw;
  color: var(--cw-text);
  background: #fff;
}

img { max-width: 100%; display: block; }
a { color: var(--cw-blue); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, .op-steps h3, .op-coord h3, .op-confirm h3, .op-panel__head h2 {
  font-family: Montserrat, futura-pt, sans-serif;
  font-weight: 700;
}

/* ---------- Nagłówek ---------- */

.op-header { padding: .55vw .5vw 0; }

.op-header__bar {
  display: flex;
  align-items: center;
  gap: 1vw;
  background: var(--cw-blue);
  border-radius: var(--r);
  padding: .7vw 1.4vw;
  color: #fff;
}

.op-header__logo img { height: 2.4vw; width: auto; }

.op-header__city {
  color: #fff;
  font-size: 1.1vw;
  opacity: .92;
  white-space: nowrap;
}

.op-header__nav {
  display: flex;
  gap: .45vw;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.op-header__nav::-webkit-scrollbar { display: none; }

.op-chip {
  display: inline-flex;
  align-items: center;
  gap: .4vw;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1.05vw;
  padding: .6vw 1.2vw;
  border-radius: var(--r);
  white-space: nowrap;
  transition: background .15s var(--ease);
}
.op-chip:hover { background: rgba(255, 255, 255, 0.14); }

.op-chip--active {
  background: #fff;
  color: var(--cw-text);
  font-weight: 500;
}
.op-chip--active .op-i { width: 1.05vw; height: 1.05vw; color: var(--zd-orange); }

.op-header__account {
  color: #fff;
  font-size: 1.1vw;
  white-space: nowrap;
}

/* Przełącznik języka (<details>, bez JS; zamykanie poza menu — lang.js) */
.op-lang { position: relative; }
.op-lang summary {
  display: flex;
  align-items: center;
  gap: .4vw;
  list-style: none;
  cursor: pointer;
  color: #fff;
  font-size: 1.05vw;
  font-weight: 500;
  padding: .5vw .9vw;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.12);
  transition: background .15s var(--ease);
  user-select: none;
}
.op-lang summary::-webkit-details-marker { display: none; }
.op-lang summary::after {
  content: "";
  width: .42vw;
  height: .42vw;
  min-width: 5px;
  min-height: 5px;
  border: solid currentColor;
  border-width: 0 max(1.5px, .13vw) max(1.5px, .13vw) 0;
  transform: rotate(45deg) translateY(-20%);
}
.op-lang summary:hover, .op-lang[open] summary { background: rgba(255, 255, 255, 0.22); }
.op-lang summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.op-lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5vw);
  z-index: 45;
  min-width: 10vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-panel);
  padding: .4vw;
}
.op-lang__menu a {
  color: var(--cw-text);
  font-size: 1.1vw;
  padding: .65vw .9vw;
  border-radius: var(--r);
  white-space: nowrap;
}
.op-lang__menu a:hover { background: var(--cw-chip); }
.op-lang__menu a[aria-current] { color: var(--cw-blue); font-weight: 500; }

/* ---------- Układ strony ---------- */

.op-main { padding: 0 3.5vw; }

.op-crumbs {
  display: flex;
  gap: .6vw;
  align-items: baseline;
  padding: 1.4vw 0 0;
  font-size: 1.05vw;
}
.op-crumbs a { color: var(--cw-muted); }
.op-crumbs span { color: var(--cw-muted); }
.op-crumbs b { font-weight: 500; }

.op-i { width: 1.25vw; height: 1.25vw; flex: none; }

/* ---------- Hero ---------- */

/* Hero na tle zdjęcia (pełna szerokość): biel od lewej trzyma czytelność
   tekstu, fotografia wychodzi spod formularza po prawej. */
.op-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3.5vw;
  align-items: start;
  margin: 0 -3.5vw;
  padding: 2.2vw 3.5vw 2.4vw;
}
.op-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hero-opieka.jpg") right center / cover no-repeat;
  /* WebP tam, gdzie przeglądarka go zna (222 KB -> 104 KB); reszta zostaje przy JPG */
  background-image: image-set(url("assets/hero-opieka.webp") type("image/webp"), url("assets/hero-opieka.jpg") type("image/jpeg"));
}
.op-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fff 0%, #fff 34%,
    rgba(255, 255, 255, 0.93) 52%,
    rgba(255, 255, 255, 0.72) 74%,
    rgba(255, 255, 255, 0.55) 100%);
}
.op-hero > * { position: relative; z-index: 1; }

.op-hero__photo { display: none; }

.op-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: .6vw;
  background: var(--cw-card-bg);
  border-radius: 999px;
  padding: .45vw 1.1vw .45vw .5vw;
  font-size: 1.05vw;
}

.op-zmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9vw;
  height: 1.9vw;
  border-radius: 50%;
  background: var(--zd-peach);
  color: var(--zd-orange);
  flex: none;
}
.op-zmark svg { width: 72%; height: 72%; }

/* Pełny lockup logo partnera: znak + wordmark w foncie marki + tagline. */
.zd-logo { display: inline-flex; align-items: center; gap: .8vw; }
.zd-logo .op-zmark { width: 3vw; height: 3vw; }
.zd-logo__text { display: flex; flex-direction: column; }
.zd-logo__word {
  font-family: "Plus Jakarta Sans", futura-pt, sans-serif;
  font-weight: 700;
  font-size: 1.5vw;
  line-height: 1.15;
  color: var(--zd-ink);
}
.zd-logo__tag { font-size: .9vw; color: var(--cw-muted); margin-top: .15vw; }

.op-hero__copy h1 {
  font-size: 3.4vw;
  line-height: 1.08;
  margin: 1.2vw 0 1vw;
}

.op-hero__lead {
  font-size: 1.4vw;
  line-height: 1.45;
  max-width: 36vw;
}

.op-benefits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .7vw 2vw;
  margin: 1.6vw 0;
}
.op-benefits li {
  display: flex;
  align-items: center;
  gap: .55vw;
  background: var(--cw-card-bg);
  border-radius: var(--r);
  padding: .65vw 1.1vw;
  font-weight: 500;
  font-size: 1.15vw;
}
.op-i--check { color: var(--cw-green-dark); width: 1.1vw; height: 1.1vw; }

.op-trustline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7vw;
  font-size: 1.05vw;
  color: var(--cw-muted);
}
.op-trustline b { color: var(--cw-text); font-weight: 500; }
.op-trustline__sep { width: 1px; align-self: stretch; background: var(--cw-border); }

.op-stars { display: inline-flex; gap: .15vw; }
.op-stars svg { width: 1.1vw; height: 1.1vw; fill: var(--cw-yellow); }

.op-hero__copy .op-hero__mobile-cta, .op-hero__copy .op-hero__mobile-note, .op-hero__copy .op-hero__mobile-call { display: none; }

/* ---------- Panel formularza ---------- */

.op-panel__card {
  position: relative;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-panel);
  padding: 1.8vw 2vw;
}

.op-panel__close { display: none; }

.op-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1vw;
}
.op-panel__head h2 { font-size: 1.6vw; }
.op-panel__step { font-size: 1vw; color: var(--cw-muted); white-space: nowrap; }

.op-progress {
  display: flex;
  gap: .4vw;
  margin: 1vw 0 1.5vw;
}
.op-progress i {
  height: .35vw;
  flex: 1;
  border-radius: 999px;
  background: var(--cw-border);
  transition: background .2s var(--ease);
}
.op-progress i.on { background: var(--cw-blue); }
.op-progress i.done { background: var(--cw-blue); opacity: .35; }

.op-step { border: 0; }
.op-step legend {
  font-family: Montserrat, futura-pt, sans-serif;
  font-weight: 700;
  font-size: 1.35vw;
  margin-bottom: 1vw;
}

.op-hint { font-size: .95vw; color: var(--cw-muted); margin: .45vw 0 .9vw; }
/* Оговорка о языке звонка (только en/uk/ru): решает, звонить ли вообще — не серая сноска. */
.op-hint--note { color: var(--cw-text); margin-top: -.4vw; }
/* 5) без висячих слов в коротких абзацах (прогрессивное улучшение) */
.op-hero__lead, .op-note p, .op-faq details p, .op-confirm > p, .op-review footer, .op-review p, .op-hint { text-wrap: pretty; }
/* Ciasny odstęp tylko bezpośrednio pod pytaniem kroku. */
legend + .op-hint { margin-top: -.5vw; }

.op-options { display: grid; gap: .55vw; }
.op-options--2col { grid-template-columns: 1fr 1fr; }
.op-option--wide { grid-column: 1 / -1; }

.op-option { display: block; }
.op-option input { position: absolute; opacity: 0; pointer-events: none; }
.op-option span {
  display: flex;
  align-items: center;
  gap: .6vw;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--cw-border);
  padding: .8vw 1vw;
  font-size: 1.1vw;
  transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
.op-option span::before {
  content: "";
  width: 1vw;
  height: 1vw;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--cw-border);
  background: #fff;
}
.op-option input[type="checkbox"] + span::before { border-radius: max(3px, .2vw); }
.op-option:hover span { box-shadow: inset 0 0 0 1px var(--cw-blue); }
.op-option input:checked + span {
  box-shadow: inset 0 0 0 max(1.5px, .12vw) var(--cw-blue);
  font-weight: 500;
}
.op-option input:checked + span::before {
  background: var(--cw-blue);
  box-shadow: inset 0 0 0 max(2px, .2vw) #fff, 0 0 0 1px var(--cw-blue);
}
.op-option input:focus-visible + span { outline: 2px solid var(--cw-blue); outline-offset: 2px; }

.op-option--pill span { padding: .45vw 1vw; border-radius: 999px; justify-content: center; }
.op-option--pill span::before { display: none; }
.op-option--pill input:checked + span { background: var(--cw-chip); color: var(--cw-blue); }
.op-options--pills { grid-template-columns: repeat(3, 1fr); }

.op-label {
  display: block;
  font-size: 1vw;
  font-weight: 500;
  margin: 1vw 0 .4vw;
}
.op-label__opt { font-style: normal; font-weight: 400; color: var(--cw-muted); }

.op-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.15vw;
  padding: .75vw 1vw;
  border: 1px solid var(--cw-border);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s var(--ease);
}
.op-input:focus { border-color: var(--cw-blue); }

.op-phone { display: flex; align-items: center; gap: .5vw; }
.op-phone > span {
  font-size: 1.15vw;
  font-weight: 500;
  padding: .75vw .9vw;
  border: 1px solid var(--cw-border);
  border-radius: var(--r);
  background: var(--cw-card-bg);
}

.op-select { position: relative; display: flex; align-items: center; }
.op-select > .op-i:first-child {
  position: absolute; left: .9vw; color: var(--cw-blue); pointer-events: none;
}
.op-select__chev { position: absolute; right: .9vw; pointer-events: none; color: var(--cw-muted); }
.op-select select {
  width: 100%;
  appearance: none;
  font-family: inherit;
  font-size: 1.15vw;
  padding: .75vw 2.8vw .75vw 2.8vw;
  border: 1px solid var(--cw-border);
  border-radius: var(--r);
  background: #fff;
  outline: none;
}
.op-select select:focus { border-color: var(--cw-blue); }

.op-form-nav {
  display: flex;
  gap: .8vw;
  margin-top: 1.5vw;
}
.op-form-nav .op-btn--primary { flex: 1; }

.op-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r);
  font-size: 1.2vw;
  font-weight: 700;
  padding: .95vw 1.8vw;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
.op-btn--primary { background: var(--cw-blue); color: #fff; }
.op-btn--primary:hover { background: var(--cw-blue-dark); }
.op-btn--ghost {
  background: #fff;
  color: var(--cw-text);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--cw-border);
}
.op-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--cw-blue); color: var(--cw-blue); }
.op-btn--white { background: #fff; color: var(--cw-text); }
.op-btn--white:hover { background: var(--cw-chip); }

.op-form-error {
  color: var(--cw-error);
  font-size: 1vw;
  margin-top: .8vw;
}

.op-hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }

.op-rodo {
  display: flex;
  gap: .6vw;
  align-items: flex-start;
  margin-top: 1.3vw;
  font-size: .95vw;
  color: var(--cw-muted);
}
.op-rodo .op-i { width: 1vw; height: 1vw; margin-top: .15vw; }

/* Zgoda na przekazanie danych Zadbamy (checkbox w kroku 4) */

.op-agree {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7vw;
  margin-top: 1.2vw;
  font-size: .95vw;
  line-height: 1.45;
  cursor: pointer;
}
.op-agree input { position: absolute; opacity: 0; pointer-events: none; }
.op-agree__box {
  position: relative;
  flex: none;
  width: max(18px, 1.15vw);
  height: max(18px, 1.15vw);
  margin-top: .1vw;
  border-radius: max(3px, .2vw);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--cw-border);
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.op-agree:hover .op-agree__box { box-shadow: inset 0 0 0 1px var(--cw-blue); }
.op-agree input:checked + .op-agree__box { background: var(--cw-blue); box-shadow: none; }
.op-agree input:checked + .op-agree__box::after {
  content: "";
  position: absolute;
  left: 34%; top: 14%;
  width: 28%; height: 52%;
  border: solid #fff;
  border-width: 0 max(2px, .17vw) max(2px, .17vw) 0;
  transform: rotate(45deg);
}
.op-agree input:focus-visible + .op-agree__box { outline: 2px solid var(--cw-blue); outline-offset: 2px; }
.op-agree a { font-weight: 500; }

/* Potwierdzenie */

.op-confirm { text-align: left; }
.op-confirm__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2vw;
  height: 3.2vw;
  border-radius: 50%;
  background: #e7f3ee;
  color: var(--cw-green-dark);
  margin-bottom: 1vw;
}
.op-confirm__mark svg { width: 55%; height: 55%; }
.op-confirm h3 { font-size: 1.5vw; margin-bottom: .7vw; }
.op-confirm > p { font-size: 1.15vw; line-height: 1.45; }

.op-confirm__coord {
  display: flex;
  align-items: center;
  gap: .8vw;
  background: var(--cw-card-bg);
  border-radius: var(--r);
  padding: .8vw 1vw;
  margin: 1.1vw 0;
  font-size: 1.05vw;
}


.op-confirm__row {
  background: var(--cw-card-bg);
  border-radius: var(--r);
  padding: .7vw 1vw;
  font-size: 1.05vw;
  margin-bottom: .6vw;
}
.op-confirm__back { display: inline-block; margin-top: .5vw; font-weight: 500; font-size: 1.1vw; }

/* ---------- Sekcje ---------- */

.op-section { padding: 3vw 0 0; }
.op-section h2 { font-size: 2.2vw; margin-bottom: 1.6vw; }

.op-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2vw;
}
.op-steps li {
  background: var(--cw-card-bg);
  border-radius: var(--r);
  padding: 1.4vw 1.4vw 1.6vw;
}
.op-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.05vw;
  margin-bottom: .9vw;
}
.op-steps h3 { font-size: 1.2vw; margin-bottom: .5vw; }
.op-steps p { font-size: 1.05vw; line-height: 1.45; color: var(--cw-muted); }

/* Żółty box z konkretem — jak podpowiedzi na stronie zamówień żywego serwisu. */
.op-note {
  background: #fff3cf;
  border-radius: var(--r);
  padding: 1.3vw 1.6vw;
  margin-top: 2.2vw;
}
.op-note p { font-size: 1.2vw; line-height: 1.55; max-width: 60vw; }

/* Karta podłączenia AI (wzorzec MCP, etalon 99.cleanwhale.pl) */

.op-connect {
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.8vw 2vw;
  margin-top: 2.2vw;
  text-align: center;
}
.op-connect__caption {
  font-family: Montserrat, futura-pt, sans-serif;
  font-weight: 700;
  font-size: 1.5vw;
}
.op-connect__lead { font-size: 1.05vw; color: var(--cw-muted); margin-top: .4vw; }
.op-connect__llms {
  display: flex;
  justify-content: center;
  gap: 2vw;
  margin: 1.4vw 0 1.2vw;
}
.op-connect__llm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5vw;
  color: var(--cw-text);
}
.op-connect__llm-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(44px, 3.4vw);
  height: max(44px, 3.4vw);
  border-radius: 50%;
  background: var(--cw-card-bg);
  transition: background .15s var(--ease);
}
.op-connect__llm:hover .op-connect__llm-ic { background: var(--cw-chip); }
.op-connect__llm-ic svg { width: 52%; height: 52%; }
.op-connect__llm small { font-size: .95vw; font-weight: 500; }
.op-connect__security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5vw;
  font-size: 1vw;
  color: var(--cw-muted);
}
.op-connect__security .op-i { width: 1.1vw; height: 1.1vw; color: var(--cw-green-dark); }
.op-connect__security a { font-weight: 500; }

/* Koordynator + opinie */

.op-social {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.2vw;
  align-items: start;
}
.op-coord {
  display: flex;
  gap: 1.2vw;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.6vw;
}
.op-kicker {
  font-size: .95vw;
  font-weight: 500;
  color: var(--zd-orange-text);
  margin-bottom: .3vw;
}
.op-coord h3 { font-size: 1.5vw; }
.op-coord__role { font-size: 1vw; color: var(--cw-muted); margin: .2vw 0 .7vw; }
.op-coord > div > p { font-size: 1.05vw; line-height: 1.5; }
.op-coord__team {
  display: flex;
  align-items: center;
  gap: .5vw;
  margin-top: .9vw;
  font-size: 1vw;
  font-weight: 500;
}
.op-coord__team .op-zmark { width: 1.6vw; height: 1.6vw; }
.op-coord__logo { margin-top: 1.1vw; }

.op-reviews {
  background: var(--cw-card-bg);
  border-radius: var(--r);
  padding: 1.6vw;
}
.op-reviews__head {
  display: flex;
  align-items: center;
  gap: .7vw;
  font-size: 1.05vw;
  color: var(--cw-muted);
  margin-bottom: 1vw;
}
.op-review {
  background: #fff;
  border-radius: var(--r);
  padding: 1.2vw 1.4vw;
}
.op-review + .op-review { margin-top: .8vw; }
.op-review p { font-size: 1.1vw; line-height: 1.5; }
.op-review footer { margin-top: .6vw; font-size: .95vw; font-weight: 500; }

/* FAQ */

.op-faq { max-width: 62vw; padding-bottom: 3.5vw; }
/* FAQ bez obwódek — powietrze i szara podkładka zamiast ramek (kanon). */
.op-faq details {
  background: var(--cw-card-bg);
  border-radius: var(--r);
  margin-bottom: .6vw;
}
.op-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  cursor: pointer;
  font-size: 1.2vw;
  font-weight: 500;
  padding: 1vw 1.4vw;
}
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary .op-i { color: var(--cw-muted); transition: transform .2s var(--ease); }
.op-faq details[open] summary .op-i { transform: rotate(45deg); }
.op-faq details p {
  padding: 0 1.4vw 1.2vw;
  font-size: 1.1vw;
  line-height: 1.5;
  max-width: 52vw;
}

/* ---------- Sticky CTA ---------- */

.op-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  background: var(--cw-dark);
  color: #fff;
  padding: .9vw 3.5vw;
  transform: translateY(100%);
  transition: transform .25s var(--ease);
}
.op-sticky.show { transform: none; }
.op-sticky p { font-size: 1.15vw; }
.op-sticky span { opacity: .75; }
.op-sticky .op-btn { font-size: 1.05vw; padding: .7vw 1.6vw; }

/* ---------- Baner RODO ---------- */

.op-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5vw;
  background: #fff;
  box-shadow: 0 0 max(14px, 1.6vw) rgba(0, 0, 0, 0.18);
  padding: 1vw 3.5vw;
}
.op-consent p { font-size: 1.05vw; line-height: 1.4; max-width: 46vw; }
.op-consent__actions { display: flex; gap: .7vw; flex: none; }
.op-consent .op-btn { font-size: 1.05vw; padding: .7vw 1.6vw; white-space: nowrap; }

/* Baner i sticky CTA razem na dole nachodziłyby na siebie — dopóki RODO
   czeka na decyzję, sticky CTA po prostu nie pokazuje się wcale. */
body.op-consent-pending .op-sticky { display: none; }

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

.op-footer { background: var(--cw-dark); color: #bdbdbd; margin-top: 1vw; }
.op-footer__inner {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 1.6vw 3.5vw;
  font-size: 1.05vw;
}
.op-footer img { height: 2.2vw; width: auto; }
.op-footer p { margin-right: auto; }
.op-footer a { color: #fff; }
/* Logo partnera na ciemnym: wordmark biały, tagline stonowany. */
.op-footer .zd-logo__word { color: #fff; }
.op-footer .zd-logo__tag { color: #bdbdbd; }

/* ---------- Zaplecze formularza mobilnego ---------- */

.op-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
}

/* ---------- ≤760: telefon ---------- */

@media (max-width: 760px) {
  body { font-size: 15px; }
  .op-i { width: 16px; height: 16px; }

  .op-header { padding: 6px 6px 0; }
  .op-header__bar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 8px; }
  .op-header__logo img { height: 26px; }
  .op-header__city, .op-header__account { font-size: 14px; }
  .op-header__account { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .op-lang summary { font-size: 13px; gap: 6px; padding: 0 12px; min-height: 44px; border-radius: 8px; }
  .op-lang summary::after { width: 6px; height: 6px; border-width: 0 2px 2px 0; }
  .op-lang__menu { top: calc(100% + 6px); min-width: 170px; padding: 6px; border-radius: 10px; }
  .op-lang__menu a { font-size: 16px; padding: 0 14px; min-height: 44px; display: flex; align-items: center; border-radius: 8px; }
  .op-header__city { margin-right: auto; }
  .op-header__nav { order: 10; width: 100%; gap: 6px; }
  /* Cel dotyku ≥44px. */
  .op-chip { font-size: 13px; padding: 14px; border-radius: 8px; gap: 6px; }
  .op-chip--active .op-i { width: 14px; height: 14px; }

  .op-main { padding: 0 16px; }
  .op-crumbs { font-size: 13px; gap: 6px; padding-top: 12px; }

  .op-hero { grid-template-columns: 1fr; gap: 0; margin: 0 -16px; padding: 16px 16px 8px; }
  /* Na telefonie zdjęcie nie jest tłem — czytelność ważniejsza; wchodzi jako kadr. */
  .op-hero::before, .op-hero::after { display: none; }
  .op-hero__copy .op-hero__photo {
    display: block;
    width: 100%;
    height: 46vw;
    max-height: 220px;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 8px;
    margin-top: 16px;
  }
  .op-partner-badge { font-size: 13px; gap: 8px; padding: 5px 12px 5px 6px; }
  .op-zmark { width: 24px; height: 24px; }
  .op-hero__copy h1 { font-size: 30px; margin: 12px 0 10px; }
  .op-hero__lead { font-size: 16px; max-width: none; }
  .op-benefits { grid-template-columns: 1fr; gap: 8px; margin: 16px 0; }
  .op-benefits li { font-size: 14px; padding: 9px 12px; gap: 8px; border-radius: 8px; }
  .op-i--check { width: 15px; height: 15px; }
  .op-trustline { font-size: 13px; gap: 8px; }
  .op-trustline__sep { display: none; }
  .op-stars svg { width: 14px; height: 14px; }
  .op-stars { gap: 2px; }

  .op-hero__copy .op-hero__mobile-cta { display: flex; width: 100%; margin-top: 18px; }
  .op-hero__copy .op-hero__mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 44px; margin-top: 8px;
    font-size: 14px; font-weight: 500; color: var(--cw-blue);
  }
  .op-hero__copy .op-hero__mobile-call .op-i { width: 16px; height: 16px; }
  .op-hero__copy .op-hero__mobile-note {
    display: block; text-align: center; font-size: 13px;
    color: var(--cw-muted); margin-top: 2px;
  }

  /* Formularz = dolny arkusz */
  .op-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    transform: translateY(105%);
    transition: transform .3s var(--ease);
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
  }
  body.op-sheet-open .op-panel { transform: none; }
  body.op-sheet-open { overflow: hidden; }
  .op-backdrop[hidden] { display: none; }

  .op-panel__card {
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
    padding: 20px 16px 24px;
  }
  .op-panel__close {
    display: flex;
    position: absolute;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--cw-card-bg);
    border: 0;
    border-radius: 50%;
    color: var(--cw-text);
  }
  .op-panel__close svg { width: 16px; height: 16px; }

  .op-panel__head { padding-right: 44px; gap: 12px; }
  .op-panel__head h2 { font-size: 18px; }
  .op-panel__step { font-size: 12px; }
  .op-progress { gap: 5px; margin: 12px 0 16px; }
  .op-progress i { height: 4px; }
  .op-step legend { font-size: 18px; margin-bottom: 12px; }
  .op-hint { font-size: 13px; margin: 6px 0 10px; }
  .op-hint--note { margin-top: -4px; }
  legend + .op-hint { margin-top: -6px; }
  .op-options { gap: 8px; }
  .op-options--2col { grid-template-columns: 1fr; }
  .op-option span { font-size: 15px; padding: 12px 14px; gap: 10px; border-radius: 8px; min-height: 48px; }
  .op-option span::before { width: 16px; height: 16px; }
  .op-option input[type="checkbox"] + span::before { border-radius: 4px; }
  .op-option input:checked + span { box-shadow: inset 0 0 0 2px var(--cw-blue); }
  .op-option input:checked + span::before { box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--cw-blue); }
  .op-options--pills { grid-template-columns: repeat(3, 1fr); }
  .op-option--pill span { min-height: 44px; padding: 8px 10px; }
  .op-label { font-size: 14px; margin: 14px 0 6px; }
  .op-input { font-size: 16px; padding: 12px 14px; border-radius: 8px; }
  .op-phone { gap: 8px; }
  .op-phone > span { font-size: 16px; padding: 12px 12px; border-radius: 8px; }
  .op-select select { font-size: 16px; padding: 12px 40px 12px 40px; border-radius: 8px; }
  .op-select > .op-i:first-child { left: 12px; }
  .op-select__chev { right: 12px; }
  .op-form-nav { gap: 10px; margin-top: 18px; }
  .op-btn { font-size: 16px; padding: 14px 20px; border-radius: 8px; }
  .op-form-error { font-size: 14px; margin-top: 10px; }
  .op-rodo { font-size: 12px; gap: 8px; margin-top: 14px; }
  .op-agree { font-size: 13px; gap: 10px; margin-top: 16px; padding: 6px 0; min-height: 44px; }
  .op-agree__box { width: 22px; height: 22px; margin-top: 1px; border-radius: 5px; }
  .op-agree input:checked + .op-agree__box::after { border-width: 0 2.5px 2.5px 0; }
  .op-rodo .op-i { width: 13px; height: 13px; margin-top: 2px; }

  .op-confirm__mark { width: 44px; height: 44px; margin-bottom: 12px; }
  .op-confirm h3 { font-size: 20px; margin-bottom: 8px; }
  .op-confirm > p { font-size: 15px; }
  .op-confirm__coord { gap: 10px; padding: 10px 12px; margin: 14px 0; font-size: 14px; border-radius: 8px; }
  .op-confirm__row { padding: 10px 12px; font-size: 14px; border-radius: 8px; margin-bottom: 8px; }
  .op-confirm__back { font-size: 15px; }

  .op-section { padding: 28px 0 0; }
  .op-section h2 { font-size: 22px; margin-bottom: 14px; }
  .op-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .op-steps li { padding: 14px; border-radius: 8px; }
  .op-steps__num { width: 26px; height: 26px; font-size: 13px; margin-bottom: 10px; }
  .op-steps h3 { font-size: 15px; margin-bottom: 4px; }
  .op-steps p { font-size: 13px; }



  .op-note { padding: 14px 16px; margin-top: 20px; border-radius: 8px; }
  .op-note p { font-size: 14px; max-width: none; }

  .op-connect { padding: 18px 14px; margin-top: 18px; border-radius: 8px; }
  .op-connect__caption { font-size: 17px; }
  .op-connect__lead { font-size: 13px; margin-top: 4px; }
  .op-connect__llms { gap: 6px; margin: 14px 0 12px; justify-content: space-between; }
  .op-connect__llm { gap: 5px; flex: 1; min-width: 0; }
  .op-connect__llm-ic { width: 44px; height: 44px; }
  .op-connect__llm small { font-size: 11px; }
  .op-connect__security { font-size: 12px; gap: 6px; }
  .op-connect__security .op-i { width: 14px; height: 14px; }

  .op-social { grid-template-columns: 1fr; gap: 10px; }
  .op-coord { padding: 16px; gap: 14px; border-radius: 8px; }
  .op-kicker { font-size: 12px; }
  .op-coord h3 { font-size: 18px; }
  .op-coord__role { font-size: 13px; }
  .op-coord > div > p { font-size: 14px; }
  .op-coord__team { font-size: 13px; }
  .op-coord__team .op-zmark { width: 20px; height: 20px; }
  .zd-logo { gap: 10px; }
  .zd-logo .op-zmark { width: 40px; height: 40px; }
  .zd-logo__word { font-size: 19px; }
  .zd-logo__tag { font-size: 12px; margin-top: 2px; }
  .op-coord__logo { margin-top: 12px; }
  .op-reviews { padding: 16px; border-radius: 8px; }
  .op-reviews__head { font-size: 13px; }
  .op-review { padding: 14px; border-radius: 8px; }
  .op-review p { font-size: 14px; }
  .op-review footer { font-size: 12px; }

  .op-faq { max-width: none; padding-bottom: 32px; }
  .op-faq details { border-radius: 8px; margin-bottom: 8px; }
  .op-faq summary { font-size: 15px; padding: 13px 14px; }
  .op-faq details p { font-size: 14px; padding: 0 14px 14px; max-width: none; }

  .op-sticky { padding: 10px 16px; }
  .op-sticky p { font-size: 13px; }
  .op-sticky span { display: none; }
  .op-sticky .op-btn { font-size: 14px; padding: 13px 18px; }

  .op-consent { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .op-consent p { font-size: 13px; max-width: none; }
  .op-consent__actions { gap: 8px; }
  .op-consent .op-btn { flex: 1; font-size: 14px; padding: 12px 14px; min-height: 44px; }

  .op-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 16px; font-size: 14px; }
  .op-footer img { height: 24px; }
  .op-footer p { margin-right: 0; }
}

/* ---------- 761–1025: tablet ---------- */

@media (min-width: 761px) and (max-width: 1025px) {
  body { font-size: 1.55vw; }
  .op-hero { grid-template-columns: 1fr; gap: 2.5vw; }
  .op-hero::before, .op-hero::after { display: none; }
  .op-hero__copy .op-hero__photo {
    display: block;
    width: 100%;
    height: 30vw;
    object-fit: cover;
    object-position: center 35%;
    border-radius: var(--r);
    margin-top: 2vw;
  }
  .op-hero__copy h1 { font-size: 4.4vw; }
  .op-hero__lead { font-size: 1.9vw; max-width: 60vw; }
  .op-benefits li { font-size: 1.5vw; }
  .op-partner-badge { font-size: 1.4vw; }
  .op-zmark { width: 2.6vw; height: 2.6vw; }
  .op-trustline { font-size: 1.4vw; }
  .op-stars svg { width: 1.5vw; height: 1.5vw; }
  .op-i { width: 1.7vw; height: 1.7vw; }
  .op-i--check { width: 1.5vw; height: 1.5vw; }
  .op-chip { font-size: 1.45vw; padding: .9vw 1.6vw; }
  .op-chip--active .op-i { width: 1.45vw; height: 1.45vw; }
  .op-header__logo img { height: 3.2vw; }
  .op-header__city, .op-header__account { font-size: 1.5vw; }
  .op-lang summary { font-size: 1.45vw; padding: .8vw 1.4vw; }
  .op-lang__menu { min-width: 16vw; top: calc(100% + .8vw); }
  .op-lang__menu a { font-size: 1.6vw; padding: 1vw 1.4vw; }
  .op-crumbs { font-size: 1.4vw; }

  .op-panel__card { padding: 2.6vw 2.8vw; }
  .op-panel__head h2 { font-size: 2.3vw; }
  .op-panel__step { font-size: 1.4vw; }
  .op-step legend { font-size: 1.9vw; }
  .op-hint { font-size: 1.35vw; }
  .op-option span { font-size: 1.55vw; padding: 1.2vw 1.4vw; }
  .op-option span::before { width: 1.4vw; height: 1.4vw; }
  .op-label { font-size: 1.4vw; }
  .op-input, .op-phone > span, .op-select select { font-size: 1.6vw; }
  .op-btn { font-size: 1.7vw; padding: 1.3vw 2.2vw; }
  .op-form-error { font-size: 1.4vw; }
  .op-rodo { font-size: 1.3vw; }
  .op-agree { font-size: 1.35vw; gap: 1vw; margin-top: 1.8vw; }
  .op-agree__box { width: 1.8vw; height: 1.8vw; }
  .op-rodo .op-i { width: 1.4vw; height: 1.4vw; }
  .op-confirm h3 { font-size: 2vw; }
  .op-confirm > p { font-size: 1.55vw; }
  .op-confirm__coord, .op-confirm__row { font-size: 1.45vw; }
  .op-confirm__back { font-size: 1.5vw; }
  .op-confirm__mark { width: 4.4vw; height: 4.4vw; }
  .op-progress i { height: .5vw; }

  .op-section h2 { font-size: 3vw; }
  .op-steps { grid-template-columns: 1fr 1fr; gap: 1.6vw; }
  .op-steps h3 { font-size: 1.7vw; }
  .op-steps p { font-size: 1.45vw; }
  .op-steps__num { width: 2.8vw; height: 2.8vw; font-size: 1.45vw; }
  .op-note p { font-size: 1.6vw; max-width: none; }
  .op-connect__caption { font-size: 2.2vw; }
  .op-connect__lead { font-size: 1.5vw; }
  .op-connect__llm small { font-size: 1.35vw; }
  .op-connect__security { font-size: 1.4vw; }
  .op-connect__security .op-i { width: 1.5vw; height: 1.5vw; }
  .op-social { grid-template-columns: 1fr; gap: 1.6vw; }
  .op-kicker { font-size: 1.3vw; }
  .op-coord h3 { font-size: 2vw; }
  .op-coord__role, .op-coord__team { font-size: 1.4vw; }
  .op-coord > div > p { font-size: 1.45vw; }
  .op-coord__team .op-zmark { width: 2.2vw; height: 2.2vw; }
  .zd-logo .op-zmark { width: 4vw; height: 4vw; }
  .zd-logo__word { font-size: 2vw; }
  .zd-logo__tag { font-size: 1.25vw; }
  .op-reviews__head { font-size: 1.45vw; }
  .op-review p { font-size: 1.5vw; }
  .op-review footer { font-size: 1.3vw; }
  .op-faq { max-width: none; }
  .op-faq summary { font-size: 1.65vw; padding: 1.4vw 1.8vw; }
  .op-faq details p { font-size: 1.5vw; max-width: none; padding: 0 1.8vw 1.6vw; }
  .op-sticky p { font-size: 1.55vw; }
  .op-sticky .op-btn { font-size: 1.5vw; padding: 1vw 2vw; }
  .op-consent p { font-size: 1.55vw; max-width: 42vw; }
  .op-consent .op-btn { font-size: 1.5vw; padding: 1vw 2vw; }
  .op-footer__inner { font-size: 1.45vw; }
  .op-footer img { height: 3vw; }
}