/* =====================================================================
   TAXIDISPLAY — system stylów
   Strona główna · /konfigurator · w przyszłości panel

   KIERUNEK: ciemny i premium. Strona jest tłem, na którym świeci ekran —
   dokładnie tak, jak produkt wygląda w rzeczywistości, w nocnym aucie.

   AKCENTEM JEST ŚWIATŁO, NIE KOLOR. Przyciski akcji są jasne na ciemnym,
   bo to najwyższy możliwy kontrast i nie wymaga żadnej barwy. Chłodny
   błękit pojawia się wyłącznie punktowo: linki, obramowanie fokusu,
   pojedyncze liczby. Nigdy jako duża plama.

   DLACZEGO JEDEN MOTYW: to świadoma decyzja, nie przeoczenie. Marka
   opiera się na ciemnym tle i świecących zdjęciach; wersja jasna byłaby
   inną marką. Wszystkie kolory są więc wypisane wprost, bez zależności
   od ustawień przeglądarki.

   Nazwy zmiennych trzymają konwencję tokenów, więc przeniesienie tego
   systemu do Reacta z shadcn/ui to zmapowanie nazw, nie przeprojektowanie.
   ===================================================================== */

:root{
  color-scheme: dark;

  /* --- powierzchnie --- */
  --tlo:          #0A0A0B;
  --tlo-2:        #0E0E11;
  --plyta:        #15151A;
  --plyta-2:      #1C1C22;
  --kreska:       #26262D;
  --kreska-jasna: #34343D;

  /* --- tekst --- */
  --atrament:     #F4F4F2;
  --atrament-2:   #A3A3AC;
  --przygaszony:  #6C6C76;

  /* --- akcenty --- */
  --swiatlo:      #F4F4F2;   /* przyciski akcji: światło zamiast koloru */
  --zimny:        #7FA8FF;   /* punktowo: linki, fokus, pojedyncze liczby */
  --zimny-cichy:  #2A3A55;
  --ok:           #4ADE80;
  --alarm:        #F87171;

  /* --- geometria --- */
  --r:            16px;
  --r-s:          10px;
  --r-pastylka:   100px;

  /* --- typografia --- */
  --tekst: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --dane:  "JetBrains Mono", ui-monospace, monospace;

  /* --- rytm --- */
  --obwoluta: 1200px;
  --gutter:   22px;
}

/* =====================================================================
   RESET
   ===================================================================== */
*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important; animation:none !important }
}
body{
  margin:0;
  background:var(--tlo);
  color:var(--atrament);
  font-family:var(--tekst);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, svg, video{ max-width:100%; height:auto; display:block }
[hidden]{ display:none !important }
a{ color:inherit }
::selection{ background:var(--zimny); color:#0A0A0B }

:where(a, button, input, summary, [tabindex]):focus-visible{
  outline:2px solid var(--zimny);
  outline-offset:3px;
  border-radius:6px;
}

/* =====================================================================
   UKŁAD
   ===================================================================== */
.obwoluta{ max-width:var(--obwoluta); margin-inline:auto; padding-inline:var(--gutter) }
.sekcja{ padding-block:clamp(56px, 8vw, 116px) }
.sekcja--waska{ padding-block:clamp(40px, 5vw, 72px) }

/* Włosowa linia zamiast dawnej szachownicy. */
.linia{ height:1px; background:var(--kreska); border:none; margin:0 }

/* =====================================================================
   TYPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4{ margin:0; text-wrap:balance; font-weight:800; letter-spacing:-.035em }
h1{ font-size:clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem); line-height:1.02 }
h2{ font-size:clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); line-height:1.08 }
h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.02em }
h4{
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--przygaszony);
}
p{ margin:0 }

.etykieta{
  display:block;
  font-family:var(--dane);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--przygaszony);
}
.lid{
  font-size:clamp(1.02rem, .95rem + .4vw, 1.2rem);
  color:var(--atrament-2);
  max-width:58ch;
  font-weight:400;
}
.lid strong, .lid b{ color:var(--atrament); font-weight:600 }
.mono{ font-family:var(--dane); font-variant-numeric:tabular-nums }
.podkres{ color:var(--zimny) }

/* =====================================================================
   PRZYCISKI
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--tekst);
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  border-radius:var(--r-pastylka);
  padding:14px 26px;
  transition:background .16s, border-color .16s, color .16s, opacity .16s;
  white-space:nowrap;
}
.btn--glowny{ background:var(--swiatlo); color:#0A0A0B }
.btn--glowny:hover{ background:#FFFFFF }
.btn--obrys{ background:transparent; color:var(--atrament); border-color:var(--kreska-jasna) }
.btn--obrys:hover{ border-color:var(--atrament-2); background:var(--plyta) }
.btn--cichy{ background:var(--plyta-2); color:var(--atrament); border-color:var(--kreska) }
.btn--cichy:hover{ background:var(--kreska) }
.btn--maly{ padding:10px 18px; font-size:.87rem }
.btn[disabled]{ opacity:.4; cursor:not-allowed }
.btn-rzad{ display:flex; flex-wrap:wrap; gap:12px }

/* =====================================================================
   NAGŁÓWEK — sygnatura tekstowa, bez znaku graficznego
   ===================================================================== */
.pasek{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--kreska);
}
.pasek-w{ display:flex; align-items:center; gap:20px; padding-block:16px }

.marka{
  margin-right:auto; flex:none;
  text-decoration:none; color:var(--atrament);
  font-size:1.02rem; font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
  display:inline-flex; align-items:baseline; gap:.02em;
}
.marka span{ color:var(--przygaszony); font-weight:600 }
.marka:hover span{ color:var(--atrament-2) }

.nawigacja{ display:none }
@media (min-width:980px){
  .nawigacja{ display:flex; gap:30px; align-items:center }
  .nawigacja a{
    text-decoration:none; font-size:.92rem; font-weight:500;
    color:var(--atrament-2); transition:color .16s;
  }
  .nawigacja a:hover{ color:var(--atrament) }
  .nawigacja a[aria-current="page"]{ color:var(--atrament); font-weight:600 }
}
.pasek .btn{ flex:none }
@media (max-width:560px){ .pasek .btn{ padding:9px 15px; font-size:.83rem } }

/* =====================================================================
   ZDJĘCIA
   Ramka ma wyglądać dobrze TAKŻE bez zdjęcia: pusty kadr to ciemny
   gradient z winietą, czyli element projektu, a nie zepsuty obrazek.
   ===================================================================== */
.foto{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--kreska);
  background:
    radial-gradient(120% 90% at 30% 0%, #1E1E26 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 100%, #17222E 0%, transparent 55%),
    linear-gradient(180deg, #121217 0%, #0B0B0E 100%);
}
.foto::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 90px 10px rgba(0,0,0,.55);
}
.foto img{ width:100%; height:100%; object-fit:cover; display:block }
.foto--16-9{ aspect-ratio:16/9 }
.foto--4-3{ aspect-ratio:4/3 }
.foto--1-1{ aspect-ratio:1/1 }
.foto--3-2{ aspect-ratio:3/2 }
.foto--pion{ aspect-ratio:4/5 }

/* Przygaszenie zdjęcia, żeby tekst na nim pozostał czytelny. */
.foto--przygas img{ opacity:.62 }
.foto-nakladka{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.92) 100%);
}
.foto-tresc{ position:absolute; inset:auto 0 0 0; padding:clamp(20px, 4vw, 44px) }
.foto-podpis{
  font-family:var(--dane);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--przygaszony);
  margin-top:12px;
}

/* =====================================================================
   KARTY I SIATKI
   ===================================================================== */
.karta{
  background:var(--plyta);
  border:1px solid var(--kreska);
  border-radius:var(--r);
  padding:26px;
}
.karta--cicha{ background:var(--tlo-2) }
.karta--swieci{
  background:
    radial-gradient(130% 100% at 0% 0%, #1C2433 0%, transparent 55%),
    var(--plyta);
  border-color:var(--kreska-jasna);
}

.siatka{ display:grid; gap:18px }
.siatka--2{ grid-template-columns:1fr }
.siatka--3{ grid-template-columns:1fr }
.siatka--4{ grid-template-columns:1fr 1fr }
@media (min-width:720px){
  .siatka--2{ grid-template-columns:1fr 1fr }
  .siatka--3{ grid-template-columns:repeat(3,1fr) }
  .siatka--4{ grid-template-columns:repeat(4,1fr) }
}

/* Numer kroku — tylko tam, gdzie kolejność naprawdę coś znaczy. */
.numer{
  font-family:var(--dane);
  font-size:.74rem; font-weight:500;
  color:var(--zimny);
  border:1px solid var(--zimny-cichy);
  background:rgba(127,168,255,.06);
  width:34px; height:34px;
  border-radius:9px;
  display:grid; place-items:center;
  flex:none;
}

.fakty{ display:flex; flex-wrap:wrap; gap:9px }
.fakt{
  display:inline-flex; align-items:baseline; gap:8px;
  border:1px solid var(--kreska);
  border-radius:var(--r-pastylka);
  padding:7px 16px;
  background:var(--plyta);
}
.fakt b{ font-family:var(--dane); font-size:.9rem; font-weight:500 }
.fakt i{ font-style:normal; font-size:.78rem; color:var(--przygaszony) }

.lista-ptaszki{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.lista-ptaszki li{
  display:grid; grid-template-columns:18px 1fr; gap:13px;
  font-size:.96rem; color:var(--atrament-2); align-items:start;
}
.lista-ptaszki li::before{
  content:"";
  width:18px; height:18px; margin-top:4px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.25' fill='none' stroke='%237FA8FF' stroke-width='1.2'/%3E%3Cpath d='M5.2 9.3l2.6 2.6L12.9 6.6' fill='none' stroke='%237FA8FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}

/* Tabela parametrów */
.spec-lista{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.spec-lista li{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.92rem;
  padding-block:13px;
  border-bottom:1px solid var(--kreska);
}
.spec-lista li:last-child{ border-bottom:none }
.spec-lista span{ color:var(--atrament-2) }
.spec-lista b{ font-family:var(--dane); font-weight:500; text-align:right; white-space:nowrap }

.uwaga{
  display:flex; gap:14px;
  padding:18px 20px;
  background:var(--tlo-2);
  border:1px solid var(--kreska);
  border-left:2px solid var(--zimny);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:.92rem; color:var(--atrament-2); line-height:1.6;
}
.uwaga b{ color:var(--atrament) }

/* =====================================================================
   LICZBY
   ===================================================================== */
.liczby-w{ display:grid; gap:34px }
@media (min-width:640px){ .liczby-w{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .liczby-w{ grid-template-columns:repeat(4,1fr) } }
.liczba b{
  display:block;
  font-family:var(--dane);
  font-size:clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--atrament);
}
.liczba span{
  display:block; font-size:.88rem; color:var(--przygaszony);
  margin-top:12px; line-height:1.5; max-width:26ch;
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ display:grid; gap:0; border-top:1px solid var(--kreska) }
.faq details{ border-bottom:1px solid var(--kreska) }
.faq summary{
  cursor:pointer; list-style:none;
  padding:22px 0;
  font-size:1.05rem; font-weight:600; letter-spacing:-.02em;
  display:flex; align-items:center; gap:18px;
  color:var(--atrament-2);
  transition:color .16s;
}
.faq summary:hover{ color:var(--atrament) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; margin-left:auto; flex:none;
  width:12px; height:12px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%236C6C76' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  transition:transform .2s;
}
.faq details[open] summary{ color:var(--atrament) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq-tresc{ padding:0 0 24px; font-size:.97rem; color:var(--atrament-2); max-width:72ch }

/* =====================================================================
   STOPKA
   ===================================================================== */
.stopka{ border-top:1px solid var(--kreska); background:var(--tlo-2) }
.stopka a{ color:var(--atrament-2); text-decoration:none; transition:color .16s }
.stopka a:hover{ color:var(--atrament) }
.stopka-w{ display:grid; gap:34px; padding-block:56px 40px }
@media (min-width:780px){ .stopka-w{ grid-template-columns:1.6fr 1fr 1fr } }
.stopka h4{ margin-bottom:16px }
.stopka ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:.92rem }
.stopka-dol{
  border-top:1px solid var(--kreska);
  padding-block:22px 34px;
  font-size:.8rem; color:var(--przygaszony);
  display:flex; flex-wrap:wrap; gap:10px 26px;
}

/* =====================================================================
   DOSTĘPNOŚĆ
   ===================================================================== */
.pomin{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--swiatlo); color:#0A0A0B;
  padding:14px 20px; font-weight:600;
  border-radius:0 0 var(--r-s) 0;
}
.pomin:focus{ left:0 }