/* ============================================
   Strona sprzedażowa.

   Język wizualny wzięty z makiety (Figma 3:23): terakotowy akcent
   #C3937C, nagłówki Cormorant wersalikami, tekst Montserrat, zdjęcia
   z jednym wielkim zaokrąglonym rogiem i liście rysowane kreską.

   Maska zdjęcia w makiecie to zwykły prostokąt z rogiem zaokrąglonym
   na 246 px — robimy to border-radius, bez wczytywania pliku.
   ============================================ */

:root {
  --akcent: #c3937c;      /* terakota — przyciski, nagłówki, liście */
  --akcent-ciemny: #a8785f;
  --ink: #2f2a26;
  --soft: #787878;        /* tekst treści z makiety */
  --line: #e8e0d8;
  --bg: #fdfbf9;
  --panel: #fff;
  --krem: #f7f1ec;
  --radius: 14px;
  --rog: 160px;           /* wielki zaokrąglony róg zdjęć */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap { max-width: 1180px; margin-inline: auto; padding: 0 26px; }

/* === Typografia =============================================
   Cormorant wersalikami z lekkim rozstrzeleniem — tak jak w makiecie.
   Montserrat zostaje do treści, bo świetnie czyta się w małych
   rozmiarach, a Cormorant w nich się rozpada. */
h1, h2, h3, .naglowek {
  margin: 0;
  font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: .01em;
}

h1 { font-size: clamp(34px, 4.2vw, 60px); }
h2 { font-size: clamp(28px, 3.1vw, 46px); }
h3 { font-size: 21px; text-transform: none; letter-spacing: 0; }

/* Napis nad nagłówkiem: drobny, rozstrzelony, szary. */
.kicker {
  margin: 0 0 14px;
  color: var(--soft);
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.lead { color: var(--soft); font-size: 16px; line-height: 1.6; }

/* === Górny pasek === */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(253, 251, 249, .93);
  backdrop-filter: blur(10px);
}

.top__in { display: flex; gap: 20px; align-items: center; height: 78px; }

.top__brand {
  display: flex; gap: 11px; align-items: center;
  font-family: 'Cormorant', Georgia, serif;
  font-size: 21px; text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none;
}

.top__mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  color: #fff; background: var(--akcent); border-radius: 50%; font-size: 15px;
}

.top__nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; align-items: center; }

.top__nav a {
  padding: 9px 15px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; border-radius: 999px;
}

.top__nav a:hover { color: var(--akcent); }
.top__nav a.is-cta { color: var(--akcent); border: 1px solid var(--akcent); }
.top__nav a.is-cta:hover { color: #fff; background: var(--akcent); }

/* === Przyciski ===
   W makiecie to obrys w kolorze akcentu, zaokrąglony na 50 px. */
.btn {
  display: inline-block; padding: 15px 34px;
  font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akcent); text-decoration: none;
  background: none; border: 1px solid var(--akcent); border-radius: 50px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.btn:hover { color: #fff; background: var(--akcent); }
.btn--pelny { color: #fff; background: var(--akcent); }
.btn--pelny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
.btn--sm { padding: 10px 22px; font-size: 11.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* === Liście =================================================
   Rysunek kreską w kolorze akcentu. Leżą pod treścią i nie łapią
   kliknięć — to ozdoba, nie element sterujący. */
.lisc {
  position: absolute;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* === Zdjęcie z zaokrąglonym rogiem === */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--rog) 0 0 0;
}

.foto--prawy { border-radius: 0 var(--rog) 0 0; }
.foto--dol { border-radius: 0 0 0 var(--rog); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* === Sekcja naprzemienna: tekst / zdjęcie ===
   overflow: hidden przycina liście wystające poza krawędź. Sam
   overflow-x na <body> tu nie wystarcza — pomiar pokazał 1567 px
   przy oknie 1440, czyli poziomy pasek przewijania na całej stronie. */
.pas {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
}

.pas--krem { background: var(--krem); }

.pas__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

.pas--odwrotnie .pas__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pas--odwrotnie .pas__tekst { order: 2; }
.pas__tekst p { margin: 18px 0 0; }
.pas__tekst .btn { margin-top: 26px; }

/* === Nagłówek strony === */
.hero { position: relative; overflow: hidden; padding: 56px 0 76px; }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero__foto { height: 470px; }
.hero p.lead { margin: 20px 0 0; max-width: 44ch; }
.hero .btn { margin-top: 28px; }

/* === Karty produktów === */
.produkty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 22px;
}

.karta {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.karta:hover { border-color: var(--akcent); box-shadow: 0 20px 50px -38px rgba(90, 60, 45, .8); }
.karta--polecany { border-color: var(--akcent); }

.karta__wstega {
  position: absolute; top: -11px; left: 26px;
  padding: 4px 13px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--akcent); border-radius: 999px;
}

.karta__ikona { font-size: 25px; line-height: 1; color: var(--akcent); }
.karta__nazwa { margin: 14px 0 6px; font-size: 24px; }
.karta__krotko { margin: 0 0 18px; color: var(--soft); font-size: 14px; line-height: 1.55; }

.karta__cena {
  margin-top: auto; padding-top: 18px;
  font-family: 'Cormorant', Georgia, serif; font-size: 34px; line-height: 1;
}
.karta__cena small { font-family: 'Montserrat', sans-serif; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }

.karta__stopka { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }

.znacznik {
  padding: 4px 11px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border-radius: 999px; background: var(--krem); color: var(--soft);
}

.znacznik--wkrotce { background: #f6ecdf; color: #9a7233; }
.znacznik--akcent { background: none; border: 1px solid var(--akcent); color: var(--akcent); }

/* === Slider stylów ==========================================
   Taśma przewijana w bok. Będzie więcej projektów niż trzy, więc
   siatka na sztywno przestałaby wystarczać — a taśma rośnie sama.
   Przewijanie działa bez JavaScriptu; strzałki są udogodnieniem. */
.styler__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.styler__strzalki { display: flex; gap: 8px; }

.styler__btn {
  width: 46px; height: 46px;
  font: 22px/1 'Cormorant', Georgia, serif;
  color: var(--akcent); background: none;
  border: 1px solid var(--akcent); border-radius: 50%; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.styler__btn:hover { color: #fff; background: var(--akcent); }
.styler__btn[disabled] { opacity: .3; cursor: default; }
.styler__btn[disabled]:hover { color: var(--akcent); background: none; }

.styler {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Przyciąganie liczy się od krawędzi kontenera, nie od wcięcia taśmy —
     bez tego przeglądarka od razu przewijała ją o szerokość wcięcia
     (zmierzone: 186 px przy oknie 1500) i pierwszy kafelek uciekał
     spod nagłówka na samą krawędź ekranu. */
  scroll-padding-left: max(26px, calc((100vw - 1180px) / 2 + 26px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.styler__pas {
  display: flex;
  gap: 26px;
  width: max-content;
  /* Wcięcie równe marginesowi kolumny tekstu, żeby pierwszy kafelek
     stał w jednej linii z nagłówkiem. */
  padding: 4px max(26px, calc((100vw - 1180px) / 2 + 26px)) 10px;
}

.styl {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  width: 430px; flex: 0 0 430px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.styl:hover { border-color: var(--akcent); box-shadow: 0 22px 54px -40px rgba(90, 60, 45, .85); }

.styl__foto { height: 320px; border-radius: 0; }
.styl__foto img { width: 100%; height: 100%; object-fit: cover; }
.styl__opis { display: flex; flex-direction: column; padding: 24px 26px 26px; }
.styl__nazwa { margin: 0 0 6px; font-size: 26px; }
.styl__tag { margin: 0 0 18px; color: var(--soft); font-size: 14px; line-height: 1.55; }
.styl__stopka { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }

.styl__palety { display: flex; gap: 5px; }
.styl__palety i { width: 22px; height: 22px; border-radius: 50%; }

.styl--wkrotce { border-style: dashed; background: none; }

/* === Galeria zdjęć === */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.galeria .foto { height: 300px; }

/* === Podstrona produktu === */
.produkt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 48px; padding-bottom: 76px; }
.produkt__opis { font-size: 16.5px; }
.produkt__opis > p { color: var(--soft); }
.produkt h2 { margin: 40px 0 14px; font-size: 26px; }

.lista { margin: 0; padding: 0; list-style: none; }
.lista li { position: relative; margin-bottom: 11px; padding-left: 28px; color: var(--soft); }
.lista li::before {
  position: absolute; left: 0; top: -1px;
  color: var(--akcent); font-size: 15px; content: '✦';
}

.boks {
  position: sticky; top: 100px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.boks__cena { font-family: 'Cormorant', Georgia, serif; font-size: 44px; line-height: 1; }
.boks__cena small { font-family: 'Montserrat', sans-serif; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.boks .btn { width: 100%; margin-top: 18px; text-align: center; }
.boks__uwaga { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--soft); }

/* === Kroki === */
.kroki3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.krok3__nr {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px;
  font-family: 'Cormorant', Georgia, serif; font-size: 20px;
  color: var(--akcent); border: 1px solid var(--akcent); border-radius: 50%;
}
.krok3 h3 { margin: 0 0 7px; }
.krok3 p { margin: 0; color: var(--soft); font-size: 14.5px; }

/* === Formularze ===
   Podkreślenie zamiast ramki — tak wygląda formularz w makiecie. */
.pole { margin-bottom: 24px; }
.pole label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
}
.pole input, .pole select, .pole textarea {
  width: 100%; padding: 10px 2px; font: inherit; font-size: 15.5px;
  color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 0; border-bottom-color: var(--akcent);
}
.pole textarea { resize: vertical; }

.komunikat { padding: 14px 18px; margin-bottom: 22px; font-size: 14.5px; border-radius: 10px; }
.komunikat--ok { background: #eef4ea; color: #375c2c; }
.komunikat--err { background: #fbeee9; color: #8a3c22; }

/* === Stopka === */
.stopka { padding: 56px 0; color: var(--soft); font-size: 13.5px; background: var(--krem); }
.stopka__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: start; }
.stopka h2 { margin-bottom: 16px; font-size: 32px; color: var(--ink); }
.stopka a { text-decoration: none; }
.stopka a:hover { color: var(--akcent); }
.stopka__mapa { display: grid; gap: 7px; text-align: right; }

/* === Demo planera ============================================
   Panel pokazujemy w prawdziwej szerokości 1440 px i pomniejszamy
   w całości. Zwężenie okna dałoby układ na wąski ekran, a kupujący
   ma zobaczyć to, co zobaczy na swoim monitorze. */
.zakladki { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.zakladka {
  padding: 9px 17px; font-size: 13px; text-decoration: none;
  color: var(--soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.zakladka:hover { color: var(--akcent); border-color: var(--akcent); }
.zakladka[aria-current] { color: #fff; background: var(--akcent); border-color: var(--akcent); }

.monitor { width: 100%; }

.monitor__ekran {
  aspect-ratio: 1440 / 900;
  padding: 12px 12px 0;
  overflow: hidden;
  background: linear-gradient(150deg, #3a3531, #1b1917 60%, #322d29);
  border-radius: 16px 16px 3px 3px;
  box-shadow: 0 40px 80px -30px rgba(90, 60, 45, .5);
}

.monitor__ekran > div { height: 100%; overflow: hidden; background: #fff; border-radius: 4px; }

.monitor__ekran iframe {
  display: block; width: 1440px; height: 900px; border: 0;
  transform: scale(.82); transform-origin: top left;
}

.monitor__noga { width: 150px; height: 16px; margin: 0 auto; background: #2b2622; }
.monitor__baza { width: 260px; height: 9px; margin: 0 auto; background: #3a3531; border-radius: 999px; }

/* Obudowa laptopa dla demo planera. Klapa dostaje dolną listwę, a pod nią
   staje podstawa szersza od ekranu — to ta różnica szerokości czyta się
   jako laptop, a nie monitor. Wcięcie na środku to miejsce, za które
   podnosi się klapę. */
.monitor--laptop .monitor__ekran { padding: 13px 13px 17px; border-radius: 14px 14px 4px 4px; }

.monitor__spod {
  position: relative;
  /* Ledwie szersza od klapy: tyle wystarczy, żeby czytało się jako laptop.
     Przy 112% pasek dobiegał do krawędzi okna i wyglądał jak tło, a nie
     jak część obudowy. */
  width: 105%;
  height: 12px;
  margin-left: -2.5%;
  /* Ten sam odcień co klapa — jaśniejszy zlewał się z kremowym tłem strony. */
  background: linear-gradient(#453e39, #2a2622 55%, #17150f);
  border-radius: 0 0 11px 11px;
  box-shadow: 0 18px 30px -20px rgba(45, 35, 28, .85);
}

/* Wcięcie, za które podnosi się klapę. */
.monitor__spod::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 92px;
  height: 5px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .13);
  border-radius: 0 0 8px 8px;
}

.hint { margin: 16px 0 0; font-size: 13px; color: var(--soft); }

/* Ekran narzędzia przy jego opisie. Bez pomniejszania — panel układa się
   w ramce sam, a napisy zostają w rozmiarze, w jakim para je czyta.
   Ramka ma najwyżej 1126 px (1180 kolumny minus marginesy i obramowanie),
   więc poniżej ~1152 px okna wchodzi w wąski układ panelu. Tam pasek
   boczny chowa się za guzikiem — robi to nav.js wpięty w ekran demo —
   i w ramce zostaje narzędzie, a nie menu. Gdyby ktoś kiedyś ten skrypt
   stąd wyjął, sekcje znów pokażą sam pasek. */
.okno {
  overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -46px rgba(90, 60, 45, .9);
}

.okno__pasek {
  display: flex; gap: 7px; align-items: center;
  padding: 11px 16px; font-size: 12px; color: var(--soft);
  background: var(--krem); border-bottom: 1px solid var(--line);
}

.okno__pasek i { width: 9px; height: 9px; border-radius: 50%; background: #ddd2c7; }
.okno__pasek span { margin-left: 8px; letter-spacing: .04em; }
.okno__pasek a { margin-left: auto; text-decoration: none; }
.okno__pasek a:hover { color: var(--akcent); }

.okno iframe { display: block; width: 100%; height: 620px; border: 0; }

/* Dwa przyciski w karcie porównania: zamówienie i szczegóły. */
.karta__akcje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }

@media (max-width: 900px) {
  .okno iframe { height: 520px; }
  :root { --rog: 96px; }
  .styl { width: 300px; flex-basis: 300px; }
  .styl__foto { height: 220px; }
  .styler__pas { padding-inline: 26px; }
  .styler { scroll-padding-left: 26px; }
  .hero__in, .pas__in, .pas--odwrotnie .pas__in, .produkt { grid-template-columns: minmax(0, 1fr); }
  .pas--odwrotnie .pas__tekst { order: 0; }
  .hero__foto { height: 320px; }
  .boks { position: static; }
  .lisc { display: none; }
  .stopka__in { grid-template-columns: minmax(0, 1fr); }
  .stopka__mapa { text-align: left; }
  .top__in { height: 62px; }
  .top__nav a { padding: 7px 9px; font-size: 11.5px; letter-spacing: .05em; }
}

/* === Demo aparatu ===========================================
   Planer pokazujemy żywym panelem w ramce monitora, aparat —
   zrzutami, bo stoi na osobnym serwerze i nie da się go tu
   osadzić. Stąd dwie ramki, których wcześniej nie było:
   telefon (ekrany gościa i panelu) i ekran na ścianie (widok
   na rzutnik). Ramka nie jest ozdobą — bez niej zrzut telefonu
   czyta się jak wąski obrazek, a nie jak ekran w czyjejś ręce.
   ============================================ */

.fony {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px 26px;
  align-items: start;
}

.fon__ramka {
  position: relative;
  padding: 11px;
  background: #2b2622;
  border-radius: 32px;
  box-shadow: 0 26px 60px -36px rgba(45, 35, 28, .95);
}

/* Wcięcie na głośnik. Rysowane, a nie wklejone jako plik —
   to trzy linijki i jeden element mniej do wczytania. */
.fon__ramka::before {
  content: "";
  position: absolute;
  top: 17px; left: 50%;
  width: 44px; height: 5px;
  background: #4a423b;
  border-radius: 999px;
  transform: translateX(-50%);
  z-index: 1;
}

/* Proporcja siedzi w klasie, nie w pliku: rząd telefonów jest
   równy, zanim zrzuty się wczytają, więc strona nie skacze.
   Dwie wysokości, bo kadry ekranów gościa i panelu się różnią.

   `height: auto` nie jest ozdobnikiem. Atrybuty width/height w
   znaczniku <img> działają jak styl o najniższym pierwszeństwie:
   `width: 100%` je nadpisuje, ale wysokość zostaje wtedy sztywna
   (1387 px), a `aspect-ratio` przestaje cokolwiek znaczyć, bo oba
   wymiary są już znane. Efekt: telefon długi na pół strony ze
   zrzutem powiększonym przez `cover`. */
.fon__ekran {
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1690;
  object-fit: cover;
  object-position: top;
  background: #efe9e0;
  border-radius: 23px;
}

.fon__ekran--panel { aspect-ratio: 780 / 1328; }

.fon__podpis { margin: 15px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.fon__podpis b {
  display: block; margin-bottom: 5px;
  font-family: 'Cormorant', Georgia, serif; font-size: 20px; font-weight: 500;
  color: var(--ink);
}

/* Ekran na sali. Ta sama noga i podstawa co przy monitorze
   planera (.monitor__noga / .monitor__baza) — obudowa różni się
   tylko proporcją, więc nie ma po co dublować tych dwóch kresek. */
.telewizor__ramka {
  padding: 12px;
  background: #2b2622;
  border-radius: 14px;
  box-shadow: 0 26px 60px -38px rgba(45, 35, 28, .95);
}
/* `height: auto` z tego samego powodu co przy .fon__ekran — bez
   niego wysokość z atrybutu zostaje sztywna i obraz się rozjeżdża. */
.telewizor__ramka img { width: 100%; height: auto; border-radius: 4px; }

/* Dwa mniejsze ekrany obok siebie — układy ekranu na sali. */
.dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

/* Taśma zestawów stylu. Sześć kadrów tego samego ekranu, więc
   liczy się równa siatka, a nie wielkość pojedynczego obrazka. */
.motywy { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.motyw { margin: 0; }
.motyw img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.motyw figcaption { margin-top: 11px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.motyw figcaption b {
  display: block;
  font-family: 'Cormorant', Georgia, serif; font-size: 19px; font-weight: 500;
  color: var(--ink);
}

@media (max-width: 900px) {
  /* Na telefonie jeden zrzut w rzędzie czyta się lepiej niż cztery
     paznokcie — a szerokość i tak ogranicza .fon z góry. */
  .fony { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .motywy { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}