/* ============================================================
   POKAZ PRODUKTU — kalkulator + makieta panelu (2026-09-13)
   Cel: strona ma przestac OPISYWAC, a zaczac POKAZYWAC.
   Dwie sekcje, ktore sprzedaja same:
   1. Kalkulator — klient wpisuje SWOJE liczby i widzi SWOJ wynik
   2. Panel — makieta tego, co realnie dostaje po wdrozeniu
   Ladowany PO ui.css.
   ============================================================ */

/* ===================== KALKULATOR ===================== */
.kalk { background: #0b0c12; padding: var(--s-9) 0; border-top: 1px solid rgba(255,255,255,.08); }
.kalk__head { max-width: 760px; margin-bottom: var(--s-7); }
.kalk__h { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.03em;
           font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; color: #fff; margin: 0 0 var(--s-4); }
.kalk__h em { font-style: normal; color: var(--accent-2); }
.kalk__lead { color: var(--on-dark-2); font-size: var(--t-md); line-height: 1.55; max-width: 58ch; margin: 0; }

.kalk__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
              gap: var(--s-7); align-items: stretch; }
@media (max-width: 940px) { .kalk__grid { grid-template-columns: 1fr; } }

/* --- lewa: suwaki --- */
.kalk__form { background: #12131c; border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
              padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-6); }
.pole { display: grid; gap: 10px; }
.pole__gora { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.pole__nazwa { font-size: var(--t-sm); color: var(--on-dark-2); font-weight: 500; }
.pole__wartosc { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 24px;
                 letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.pole__wartosc small { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px;
                       color: var(--on-dark-3); margin-left: 5px; }
.pole input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: rgba(255,255,255,.16); border-radius: 999px; outline: none; cursor: pointer;
}
.pole input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent); border: 3px solid #12131c; cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .15s ease;
}
.pole input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.pole input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px; background: var(--accent);
  border: 3px solid #12131c; cursor: grab;
}
.pole__opis { font-size: 12.5px; color: var(--on-dark-3); line-height: 1.45; }

/* --- prawa: wynik --- */
.kalk__wynik { background: linear-gradient(158deg, #16203f 0%, #0d1020 72%);
               border: 1px solid rgba(77,116,255,.3); border-radius: 18px;
               padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.wynik__etykieta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--accent-2); }
.wynik__duza { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.035em;
               font-size: clamp(46px, 7vw, 82px); line-height: .95; color: #fff; }
.wynik__duza span { font-size: .42em; letter-spacing: -.02em; color: var(--on-dark-2); margin-left: 8px; }
.wynik__pod { color: var(--on-dark-2); font-size: var(--t-sm); line-height: 1.55; max-width: 46ch; }

.wynik__rzad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
               padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); }
.wynik__poz b { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 28px;
                letter-spacing: -.025em; color: #fff; line-height: 1; }
.wynik__poz span { display: block; margin-top: 6px; font-size: 13px; color: var(--on-dark-3); line-height: 1.4; }

.wynik__domkniecie { margin-top: auto; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12);
                     display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.wynik__domkniecie p { margin: 0; font-size: var(--t-sm); color: var(--on-dark-2); max-width: 34ch; }
.wynik__domkniecie b { color: #fff; }
.kalk__nota { margin-top: var(--s-5); font-size: 12.5px; color: var(--on-dark-3); max-width: 74ch; line-height: 1.5; }

/* ===================== MAKIETA PANELU ===================== */
.panel-pokaz { background: #0e0e10; padding: var(--s-9) 0; }
.panel-pokaz__head { max-width: 720px; margin-bottom: var(--s-7); }

.okno-panel {
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden;
  background: #0f1018; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.okno-panel__pasek { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
                     background: #16171f; border-bottom: 1px solid rgba(255,255,255,.08); }
.okno-panel__kropki { display: flex; gap: 6px; }
.okno-panel__kropki i { width: 10px; height: 10px; border-radius: 999px; background: #3a3b46; }
.okno-panel__kropki i:first-child { background: #ff5f57; }
.okno-panel__kropki i:nth-child(2) { background: #febc2e; }
.okno-panel__kropki i:nth-child(3) { background: #28c840; }
.okno-panel__adres { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--on-dark-3);
                     background: #0f1018; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
                     padding: 5px 12px; margin-left: 8px; }
.okno-panel__zywe { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
                    font-size: 11.5px; color: #7ee2a8; font-family: 'JetBrains Mono', monospace; }
.okno-panel__zywe i { width: 7px; height: 7px; border-radius: 999px; background: #7ee2a8;
                      animation: zywePuls 1.8s ease-in-out infinite; }
@keyframes zywePuls { 50% { opacity: .3; } }

/* pasek liczb u gory panelu */
.panel-liczby { display: grid; grid-template-columns: repeat(4, 1fr);
                border-bottom: 1px solid rgba(255,255,255,.08); }
.panel-liczby > div { padding: var(--s-5); border-right: 1px solid rgba(255,255,255,.08); }
.panel-liczby > div:last-child { border-right: 0; }
.panel-liczby b { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 30px;
                  letter-spacing: -.03em; color: #fff; line-height: 1; }
.panel-liczby b i { font-style: normal; font-size: .5em; color: var(--on-dark-3); margin-left: 4px; }
.panel-liczby span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--on-dark-3); }
.panel-liczby .rosnie { color: #7ee2a8; }
@media (max-width: 800px) { .panel-liczby { grid-template-columns: 1fr 1fr; }
  .panel-liczby > div:nth-child(2) { border-right: 0; }
  .panel-liczby > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); } }

/* dwie kolumny: lista rozmow + podglad */
.panel-tresc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); min-height: 420px; }
@media (max-width: 880px) { .panel-tresc { grid-template-columns: 1fr; }
  .panel-lista { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08); max-height: 280px; } }

.panel-lista { border-right: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.panel-lista__tytul { padding: 14px var(--s-5); font-family: 'JetBrains Mono', monospace; font-size: 11px;
                      letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3);
                      border-bottom: 1px solid rgba(255,255,255,.06); }
.rozmowa { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
           padding: 14px var(--s-5); border-bottom: 1px solid rgba(255,255,255,.06);
           transition: background .25s ease; }
.rozmowa--aktywna { background: rgba(77,116,255,.1); box-shadow: inset 3px 0 0 var(--accent); }
.rozmowa--nowa { animation: nowaRozmowa .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes nowaRozmowa { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.rozmowa__ikona { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
                  background: rgba(255,255,255,.07); }
.rozmowa__ikona img { width: 15px; height: 15px; opacity: .85; }
.rozmowa__kto { display: block; font-size: 14px; color: #fff; font-weight: 500; }
.rozmowa__co { display: block; font-size: 12.5px; color: var(--on-dark-3); margin-top: 2px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plakietka { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em;
             padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.plakietka--umowione { background: rgba(126,226,168,.14); color: #7ee2a8; border: 1px solid rgba(126,226,168,.3); }
.plakietka--trwa { background: rgba(77,116,255,.16); color: #9db4ff; border: 1px solid rgba(77,116,255,.34); }
.plakietka--ty { background: rgba(255,190,70,.14); color: #ffc95c; border: 1px solid rgba(255,190,70,.3); }

/* prawa kolumna: podglad rozmowy */
.panel-podglad { display: flex; flex-direction: column; }
.panel-podglad__gora { padding: 14px var(--s-5); border-bottom: 1px solid rgba(255,255,255,.06);
                       display: flex; align-items: center; gap: 10px; }
.panel-podglad__gora b { font-size: 14px; color: #fff; font-weight: 600; }
.panel-podglad__gora span { font-size: 12px; color: var(--on-dark-3); }
.panel-podglad__ciało { flex: 1; padding: var(--s-5); display: flex; flex-direction: column; gap: 10px;
                        overflow: hidden; }
/* STAN PODSTAWOWY = WIDOCZNY. Animacja jest ozdoba doklejana klasa,
   nigdy warunkiem zobaczenia tresci. Wersja z opacity:0 w stanie
   podstawowym zostawila pusty panel wszedzie, gdzie animacje CSS nie
   postepuja (karta w tle, tryb bezglowy, oszczedzanie energii). */
.dymek { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.45; }
.dymek--wjazd { animation: dymekIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes dymekIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dymek--klient { align-self: flex-end; background: rgba(255,255,255,.09); color: #eef0f6;
                 border: 1px solid rgba(255,255,255,.11); border-bottom-right-radius: 4px; }
.dymek--bot { align-self: flex-start; background: rgba(77,116,255,.18); color: #e6ecff;
              border: 1px solid rgba(77,116,255,.3); border-bottom-left-radius: 4px; }
.dymek b { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
           opacity: .6; margin-bottom: 3px; font-weight: 600; }
.dymek .znacznik { display: inline-block; margin-top: 7px; font-size: 11.5px; padding: 3px 9px;
                   border-radius: 999px; background: rgba(126,226,168,.16); color: #7ee2a8;
                   border: 1px solid rgba(126,226,168,.34); }
.panel-podglad__stopka { padding: 12px var(--s-5); border-top: 1px solid rgba(255,255,255,.06);
                         display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--on-dark-3); }
.panel-podglad__stopka i { width: 5px; height: 5px; border-radius: 999px; background: var(--accent-2);
                           animation: zywePuls 1.3s ease-in-out infinite; }
.panel-podglad__stopka i:nth-child(2) { animation-delay: .2s; }
.panel-podglad__stopka i:nth-child(3) { animation-delay: .4s; }

.panel-pod { margin-top: var(--s-5); display: flex; align-items: center; justify-content: space-between;
             gap: var(--s-5); flex-wrap: wrap; }
.panel-pod p { margin: 0; color: var(--on-dark-3); font-size: 13px; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .okno-panel__zywe i, .panel-podglad__stopka i { animation: none; }
  .dymek--wjazd { animation: none; }
  .rozmowa--nowa { animation: none; }
}

/* ============================================================
   HERO Z PANELEM (2026-09-13)
   Produkt ma byc widoczny na PIERWSZYM ekranie, obok naglowka,
   a nie dopiero w polowie strony. Lewa kolumna sprzedaje slowem,
   prawa POKAZUJE makiete panelu.
   UWAGA: panel w hero NIE MOZE miec klasy .reveal — tresc ukryta
   w oczekiwaniu na IntersectionObserver juz raz zniknela na stale.
   Dozwolona jest wylacznie .fade, ktora odslania sie po zaladowaniu.
   ============================================================ */
.hero__body--split {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: 48px;
  align-items: center;
  padding-top: 44px !important;
  padding-bottom: 72px !important;
}
.hero__body--split .hero__title { font-size: clamp(38px, 4.2vw, 58px); max-width: none; }
.hero__body--split .hero__lead { font-size: clamp(16px, 1.35vw, 19px); max-width: 52ch; }

/* Wiersz dowodow: liczby zmierzone na produkcji, bez ozdobnikow.
   styles.css daje tu monospace i letter-spacing .06em — dla zdan
   opisowych czytelniejszy jest Manrope, wiec nadpisujemy. */
.hero__body--split .hero__stats {
  margin-top: 34px; padding-top: 22px; gap: 18px 30px;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px; letter-spacing: .01em; text-transform: none;
  color: var(--on-dark-3, #8b8fa3);
}
.hero__body--split .hero__stats b {
  display: block; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: -.02em; color: #fff; margin-bottom: 3px;
}

.hero__pokaz { position: relative; min-width: 0; }
.hero .okno-panel { box-shadow: 0 50px 100px -40px rgba(0,0,0,.9); }

/* Kompakt: panel w hero musi zmiescic sie obok naglowka */
.hero .panel-liczby b { font-size: 24px; }
.hero .panel-liczby > div { padding: 16px 18px; }
.hero .panel-liczby span { font-size: 12px; }
.hero .panel-tresc { min-height: 320px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero .rozmowa { padding: 10px 14px; }
.hero .rozmowa__kto { font-size: 13.5px; }
.hero .dymek { font-size: 13px; }
/* Kolumna rozmow jest w hero wezsza niz w starej sekcji, wiec srodkowy
   element musi miec prawo sie kurczyc (domyslne min-width:auto w gridzie
   wypychalo plakietki poza panel i ucinalo je). */
.hero .rozmowa { grid-template-columns: auto minmax(0, 1fr) auto; }
.hero .rozmowa > span { min-width: 0; }
.hero .rozmowa__kto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero .panel-podglad__ciało { padding: 16px; }

.hero__pokaz-nota { margin: 14px 4px 0; font-size: 13px; line-height: 1.5; color: var(--on-dark-3, #8b8fa3); }

@media (max-width: 1000px) {
  .hero__body--split { grid-template-columns: 1fr; gap: 36px; }
  .hero__body--split .hero__title { font-size: clamp(36px, 7vw, 52px); }
}

/* Bez tego panel w hero zostalby dwukolumnowy na telefonie: regula
   .hero .panel-tresc ma wyzsza specyficznosc niz ogolny breakpoint 880px
   z sekcji MAKIETA PANELU i wygrywa z nim niezaleznie od kolejnosci. */
@media (max-width: 880px) {
  .hero .panel-tresc { grid-template-columns: 1fr; }
}