/* VanOrder — arkusz stylów strony.

   Kierunek: noc i poranek. Sekcja otwierająca jest ciemna jak zakład o trzeciej
   nad ranem, reszta strony jasna jak kartka wydruku. Akcent morski — ten sam,
   który niosą oba panele i aplikacja kierowcy, żeby produkt wyglądał jak jedna
   rzecz, a nie trzy różne.

   Zieleń zostaje wyłącznie znaczeniowa („w porządku"), dlatego akcent nią nie jest.
   Bez cieni i gradientów: strona ma się wczytywać natychmiast na telefonie
   z kiepskim zasięgiem, bo tam ją ludzie otworzą. */

:root{
  color-scheme: light;
  --ground:#f1f5f5;      /* szron — chłodna szarość zamiast kremowego papieru */
  --surface:#ffffff;
  --night:#0d1315;       /* grafit — czerń z odchyleniem w zieleń, nie neutralna */
  --ink:#101619;
  --ink2:#4c5b5e;
  --ink3:#7b8b8e;      /* tylko do elementów nietekstowych — na tle daje 3,2:1 */
  --line:#dbe4e4;
  --wheat:#0a5c66;       /* petrol — akcent; nazwa historyczna, kolor nowy */
  --wheat-soft:#dcedef;
  --onwheat:#f1f5f5;     /* tekst NA akcencie — token, bo akcent jaśnieje w ciemnym motywie */
  --alarm:#b8452f;       /* błąd w formularzu — jedyny czerwony na stronie */
  --alarm-soft:#fdf1ee;
  --measure:34rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0d1315;
    --surface:#141d1f;
    --night:#080f11;
    --ink:#e7eeee;
    --ink2:#a1b0b2;
    --ink3:#74858a;
    --line:#233033;
    --wheat:#4ec6d1;
    --wheat-soft:#0e2b30;
    --onwheat:#08181b;
    --alarm:#e07a63;
    --alarm-soft:#2b1512;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0d1315; --surface:#141d1f; --night:#080f11;
  --ink:#e7eeee; --ink2:#a1b0b2; --ink3:#74858a;
  --line:#233033; --wheat:#4ec6d1; --wheat-soft:#0e2b30; --onwheat:#08181b;
  --alarm:#e07a63; --alarm-soft:#2b1512;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}

/* ── nagłówek ─────────────────────────────────────────────────────────── */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px;background:var(--night);color:#eceef2}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;font-size:16px}
.brand .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--wheat);color:var(--onwheat);font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:13px;letter-spacing:0}
.lang{display:flex;gap:12px;font-size:13.5px}
.lang a{color:#a8adb9;text-decoration:none}
.lang a:hover{color:#eceef2}
.lang [aria-current]{color:var(--wheat);font-weight:600}

/* ── sekcja otwierająca ──────────────────────────────────────────────── */
.hero{background:var(--night);color:#eceef2;padding:16px 22px 76px;text-align:center}
.hero .kicker{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wheat);font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(30px,5.6vw,54px);line-height:1.1;max-width:20ch;margin:0 auto}
.hero .lede{max-width:var(--measure);margin:22px auto 0;color:#c2c7d2;font-size:17.5px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.trust{margin-top:18px;font-size:13px;color:#8a8f9b}

.btn{display:inline-block;padding:14px 24px;border-radius:11px;text-decoration:none;
  font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--wheat);color:var(--onwheat)}
.btn.ghost{border-color:#343a46;color:#eceef2}
.btn.big{padding:16px 30px;font-size:16px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--wheat);outline-offset:3px}

/* ── sekcje ───────────────────────────────────────────────────────────── */
.band{padding:64px 22px;max-width:1020px;margin:0 auto}
.band.alt{background:var(--surface);max-width:none;border-block:1px solid var(--line)}
.band.alt > *{max-width:1020px;margin-inline:auto}
.band h2{font-size:clamp(22px,3.2vw,32px);margin-bottom:28px;max-width:22ch}
.band h3{font-size:17px;margin-bottom:7px}
.band p{color:var(--ink2)}
.wide{max-width:var(--measure)}

.cols,.grid{display:grid;gap:28px}
.cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Numeracja kroków niesie informację — to jest kolejność w czasie, nie ozdoba. */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{counter-increment:s;padding-top:44px;position:relative}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--wheat-soft);color:var(--wheat)}

/* ── przypadki użycia ─────────────────────────────────────────────────────
   Kreska u góry zamiast kafelka z cieniem: strona jest płaska i tak zostaje,
   a ten sam język (włos linii) niosą już pytania niżej. Dwie kolumny, bo przy
   trzech opis schodzi do dwóch słów w wierszu i przestaje się czytać. */
.uses .wide{margin-bottom:36px}
.cases{display:grid;gap:34px 40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cases article{border-top:1px solid var(--line);padding-top:20px}
.cases h3{font-size:18px;margin-bottom:4px}
/* Profil to dane, nie zdanie — cyfry w jednej szerokości i wielkie litery
   z rozstrzeleniem, żeby czytało się jak podpis pod tabelą, a nie jak treść. */
.cases .profil{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink2);font-variant-numeric:tabular-nums;margin-bottom:12px;text-wrap:balance}
.cases p+p{margin-top:10px}
.cases .rozw b{color:var(--ink)}

.demo{text-align:center}
.demo .wide{margin:0 auto 30px}
.demo h2{margin-left:auto;margin-right:auto}

/* ── cennik ───────────────────────────────────────────────────────────── */
.price{font-family:"Bricolage Grotesque",sans-serif;margin-bottom:14px}
.price b{font-size:clamp(38px,7vw,62px);letter-spacing:-.03em;color:var(--ink)}
.price span{font-size:17px;color:var(--ink2);margin-left:8px}
h3.comp{margin:44px 0 16px;font-size:15px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--ink2)}
td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.us td{color:var(--ink);font-weight:600;background:var(--wheat-soft)}
tr:last-child td{border-bottom:0}

/* Zdanie o dzisiejszym stanie VAT. Mniejsze od reszty, bo to jest przypis
   do ceny, a nie druga cena — ale nie schowane, bo mówi, ile klient zapłaci. */
.vatnote{margin-top:12px;font-size:14px;color:var(--ink2)}

.who{max-width:62ch;color:var(--ink2);margin-top:16px;line-height:2}

/* ── pytania ──────────────────────────────────────────────────────────── */
.faq{max-width:46rem;display:grid;gap:2px}
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;padding:14px 2px;font-weight:600;font-size:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--wheat);font-weight:700}
details[open] summary::after{content:"–"}
details p{padding:0 2px 16px;max-width:var(--measure)}

/* ── zapis ────────────────────────────────────────────────────────────── */
.early{text-align:center}
.early .wide{margin:0 auto}
.early h2{margin-left:auto;margin-right:auto}
.placeholder{margin-top:24px;display:inline-block;padding:14px 20px;
  border:1px dashed var(--line);border-radius:11px;color:var(--wheat);font-weight:600;font-size:15px}

.foot{background:var(--night);color:#8a8f9b;padding:34px 22px;font-size:13.5px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot .muted{color:#767c88}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}