/* ==========================================================================
   fotowoltaik.pl — arkusz stylów

   Jedyne źródło klas w serwisie. W szablonach nie ma ani jednego <style>
   (wyjątek: krótki skrypt motywu w <head>, żeby nie mignęło jasne tło).

   Kierunek graficzny: „przyrząd pomiarowy". Chłodna porcelana zamiast
   ciepłego papieru, grafit modułu monokrystalicznego na płytach, petrol
   jako barwa marki. Ciepły cynamon pojawia się WYŁĄCZNIE tam, gdzie mowa
   o słońcu, nasłonecznieniu i energii — nigdy jako ozdoba.

   Zasady kreski: włosowe linie, celowniki w narożnikach, liczby i etykiety
   monospace, nagłówki w groteskowej antykwie o zmiennej wielkości optycznej.
   Cienie są minimalne — głębia bierze się z warstw i kontrastu płaszczyzn.

   Kolejność: fonty → reset → tokeny → podstawa → typografia → przyciski →
   nagłówek → hero → sekcje → komponenty → pytania → arkusz ofert →
   przygotowanie → stopka → rysunki → responsywność → druk.

   Motyw: każdy token koloru jest zdefiniowany TRZY razy — :root (jasny),
   @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
   oraz :root[data-theme="dark"]. Żaden kolor nie istnieje tylko w ciemnym.
   ========================================================================== */

/* --- Fonty (lokalne, latin + latin-ext) ----------------------------------- */
/* Pobrane skryptem nie-wgrywac/narzedzia/fonts.js. Serwis nie pobiera żadnego
   zasobu z zewnątrz — ani fontów, ani skryptów, ani obrazów.               */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-500-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-500-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/geist-normal-400-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/geist-normal-400-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/geist-mono-normal-400-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/geist-mono-normal-400-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Odsunięcie kotwic trzymamy TYLKO tutaj — bez scroll-margin na sekcjach,
   bo obie wartości by się zsumowały. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }

/* --- Tokeny: motyw jasny -------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:          #edeeec;   /* chłodna porcelana                             */
  --bg-soft:     #e5e7e4;   /* sekcje parzyste                               */
  --bg-tint:     #dcdfdb;   /* wcięcia, pola rysunków                        */
  --card:        #fbfcfa;
  --card-soft:   #f4f6f3;
  --deep:        #0d1416;   /* płyta: hero, przygotowanie, stopka            */
  --deep-soft:   #131c1f;

  --ink:         #11171a;
  --text:        #3b454a;
  --muted:       #525d63;   /* AA także na --bg-tint (≥4,5:1)                */
  --line:        #d5d8d3;
  --line-strong: #b9beb8;

  --brand:       #0e6068;   /* petrol — barwa marki, wypełnienia             */
  --brand-ink:   #0a4e55;   /* petrol jako tekst na jasnym tle               */
  --brand-soft:  #d9e8e8;
  --brand-deep:  #68c8ce;   /* petrol na ciemnej płycie                      */

  --warm:        #c4582a;   /* słońce, nasłonecznienie, energia              */
  --warm-ink:    #a8451d;
  --warm-soft:   #f5e1d6;
  --warm-deep:   #e8875a;

  /* Tekst na ciemnej płycie — te same nazwy w obu motywach. */
  --deep-ink:    #eef1ee;
  --deep-text:   #b2bbb8;
  --deep-muted:  #8a9491;
  --deep-line:   rgba(255, 255, 255, .11);
  --deep-line-2: rgba(255, 255, 255, .20);
  --deep-card:   rgba(255, 255, 255, .045);

  /* Rysunki */
  --sv-line:     #4f5a5f;   /* kreska niosąca informację, ≥3:1 wobec tła     */
  --sv-faint:    #aab1ab;   /* kreska pomocnicza, siatka, wymiary            */
  --sv-card:     #fbfcfa;
  --sv-fill:     #e0e3df;
  --sv-cell:     #16202a;   /* moduł monokrystaliczny                        */
  --sv-busbar:   rgba(255, 255, 255, .34);

  --ring:        0 0 0 3px #0e6068;   /* nieprzezroczysty: ≥3:1 na każdym tle  */
  --ring-deep:   0 0 0 3px #68c8ce;   /* pierścień focusa na ciemnych płytach   */
  --on-brand:    #ffffff;             /* napis na plamie --brand                */
  --deep-control: #8a9491;            /* obramowanie pól wyboru na płycie       */
  --shadow-md:   0 2px 4px rgba(17, 23, 26, .05), 0 26px 52px -30px rgba(17, 23, 26, .36);

  --show-sun:    none;      /* ikona w przełączniku motywu                   */
  --show-moon:   block;

  --f-display:   "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --f-body:      "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:      "Geist Mono", ui-monospace, Consolas, "Courier New", monospace;

  --r-sm: 6px;
  --r-md: 12px;

  --container: 1180px;
  --gutter:    clamp(20px, 5vw, 52px);
}

/* --- Tokeny: motyw ciemny (systemowy) ------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:          #0a0f11;
    --bg-soft:     #0f1518;
    --bg-tint:     #141b1e;
    --card:        #121a1d;
    --card-soft:   #172023;
    --deep:        #060a0c;
    --deep-soft:   #0c1315;

    --ink:         #ecefeb;
    --text:        #bcc3c0;
    --muted:       #8b9491;
    --line:        #202a2d;
    --line-strong: #33403f;

    --brand:       #3fa8b0;
    --brand-ink:   #68c8ce;
    --brand-soft:  #10282b;
    --brand-deep:  #68c8ce;

    --warm:        #d9714a;
    --warm-ink:    #e8875a;
    --warm-soft:   #2a160f;
    --warm-deep:   #e8875a;

    --deep-ink:    #ecefeb;
    --deep-text:   #aeb7b4;
    --deep-muted:  #86908d;
    --deep-line:   rgba(255, 255, 255, .09);
    --deep-line-2: rgba(255, 255, 255, .17);
    --deep-card:   rgba(255, 255, 255, .04);

    --sv-line:     #8d9995;
    --sv-faint:    #414c50;
    --sv-card:     #172023;
    --sv-fill:     #1b2427;
    --sv-cell:     #0e161d;
    --sv-busbar:   rgba(255, 255, 255, .26);

    --ring:        0 0 0 3px #68c8ce;
    --ring-deep:   0 0 0 3px #68c8ce;
    --on-brand:    #06181a;
    --deep-control: #8a9491;
    --shadow-md:   0 2px 4px rgba(0, 0, 0, .45), 0 26px 52px -30px rgba(0, 0, 0, .95);

    --show-sun:    block;
    --show-moon:   none;
  }
}

/* --- Tokeny: motyw ciemny (wybrany ręcznie) ------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0a0f11;
  --bg-soft:     #0f1518;
  --bg-tint:     #141b1e;
  --card:        #121a1d;
  --card-soft:   #172023;
  --deep:        #060a0c;
  --deep-soft:   #0c1315;

  --ink:         #ecefeb;
  --text:        #bcc3c0;
  --muted:       #8b9491;
  --line:        #202a2d;
  --line-strong: #33403f;

  --brand:       #3fa8b0;
  --brand-ink:   #68c8ce;
  --brand-soft:  #10282b;
  --brand-deep:  #68c8ce;

  --warm:        #d9714a;
  --warm-ink:    #e8875a;
  --warm-soft:   #2a160f;
  --warm-deep:   #e8875a;

  --deep-ink:    #ecefeb;
  --deep-text:   #aeb7b4;
  --deep-muted:  #86908d;
  --deep-line:   rgba(255, 255, 255, .09);
  --deep-line-2: rgba(255, 255, 255, .17);
  --deep-card:   rgba(255, 255, 255, .04);

  --sv-line:     #8d9995;
  --sv-faint:    #414c50;
  --sv-card:     #172023;
  --sv-fill:     #1b2427;
  --sv-cell:     #0e161d;
  --sv-busbar:   rgba(255, 255, 255, .26);

  --ring:        0 0 0 3px #68c8ce;
  --ring-deep:   0 0 0 3px #68c8ce;
  --on-brand:    #06181a;
  --deep-control: #8a9491;
  --shadow-md:   0 2px 4px rgba(0, 0, 0, .45), 0 26px 52px -30px rgba(0, 0, 0, .95);

  --show-sun:    block;
  --show-moon:   none;
}

/* --- Podstawa ------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Kolumna czytelna — proza nigdy nie rozciąga się na całą szerokość. */
.measure { max-width: 64ch; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--ink); color: var(--bg);
  padding: 12px 20px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 15px;
}
.skip-link:focus-visible { transform: none; outline: none; box-shadow: var(--ring); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 4px;
}
/* Na ciemnych płytach petrol z motywu jasnego ginie — tam pierścień jest jasny. */
.hero :where(a, button):focus-visible,
.section-deep :where(a, button, input):focus-visible,
.footer a:focus-visible { box-shadow: var(--ring-deep); }

::selection { background: var(--brand); color: var(--on-brand); }

/* Celowniki w narożnikach — drobiazg rysunku technicznego. Dwa znaczniki
   po przekątnej wystarczą, żeby blok czytał się jak kadr, a nie ramka. */
.crosshair { position: relative; }
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) center / 11px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) center / 1px 11px no-repeat;
}
.crosshair::before { left: -6px; top: -6px; }
.crosshair::after { right: -6px; bottom: -6px; }

/* --- Typografia ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-ink);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 72px;
  background: var(--brand);
  opacity: .5;
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* --- Proza ---------------------------------------------------------------- */
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--text); }
.prose strong { color: var(--ink); font-weight: 600; }

/* --- Przyciski ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; background: none;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-ink); }

.btn-ghost { border-color: var(--deep-line-2); color: var(--deep-ink); }
.btn-ghost:hover { border-color: var(--brand-deep); color: var(--brand-deep); }

.btn-quiet {
  border-color: var(--line-strong); color: var(--ink);
  padding: 10px 18px; font-size: 14px;
}
.btn-quiet:hover { border-color: var(--brand); color: var(--brand-ink); }

/* --- Ikony ---------------------------------------------------------------- */
.ic {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Nagłówek ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg);                                    /* zapas dla przeglądarek bez color-mix */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner { display: flex; align-items: center; gap: 18px; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--f-display); font-size: 20px; font-weight: 600;
  color: var(--ink); letter-spacing: -.03em;
}
.brand-name b { font-weight: 600; color: var(--brand-ink); }

.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: block; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  transition: color .18s ease, background-color .18s ease;
}
.nav-link:hover { color: var(--ink); background: var(--bg-tint); }
.nav-link[aria-current="location"] { color: var(--brand-ink); background: var(--brand-soft); }

.header-tools { display: flex; align-items: center; gap: 8px; }

.theme-toggle, .nav-toggle {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--brand); color: var(--brand-ink); }
.theme-toggle .i-sun { display: var(--show-sun); }
.theme-toggle .i-moon { display: var(--show-moon); }
.nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }

.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--brand);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: var(--deep-text);
  padding: clamp(56px, 8vw, 104px) 0 clamp(60px, 8vw, 108px);
}
/* Jedno źródło światła w prawym górnym rogu — to jedyne miejsce na stronie,
   gdzie ciepła barwa rozlewa się poza kreskę. */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inset: -34% -12% auto auto; width: 78%; height: 100%;
  background: radial-gradient(52% 52% at 72% 34%, rgba(196, 88, 42, .26) 0%, transparent 68%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--deep-line) 0 1px, transparent 1px 92px);
}

.hero-grid { display: grid; gap: clamp(36px, 5vw, 60px); align-items: center; }
.hero-copy { display: grid; gap: 22px; max-width: 620px; }
.hero .eyebrow { color: var(--brand-deep); }
.hero .eyebrow::after { background: var(--brand-deep); }

.hero-title {
  font-size: clamp(40px, 6.6vw, 74px);
  line-height: 1.02; letter-spacing: -.035em;
  color: var(--deep-ink);
}
.hero-title span { color: var(--warm-deep); }

.hero-lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.64; color: var(--deep-text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 12px; padding-top: 24px;
  border-top: 1px solid var(--deep-line);
}
.hero-meta li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--deep-muted);
}
.hero-meta .ic { width: 15px; height: 15px; color: var(--brand-deep); }
/* Na stronie 404 w tym pasku stoją odnośniki — muszą wyglądać na klikalne. */
.hero-meta a {
  display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--deep-line-2);
  transition: color .18s ease, border-color .18s ease;
}
.hero-meta a:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

.hero-art svg { width: 100%; height: auto; }

/* --- Sekcje --------------------------------------------------------------- */
.section { padding: clamp(60px, 8.5vw, 116px) 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-soft); }
.section-deep {
  background: var(--deep); color: var(--deep-text);
  border-top: 1px solid var(--deep-line);
}
.section-deep h2, .section-deep h3 { color: var(--deep-ink); }
.section-deep .eyebrow { color: var(--brand-deep); }
.section-deep .eyebrow::after { background: var(--brand-deep); }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 4.5vw, 56px); max-width: 720px; }
.section-title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; }
.section-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--muted); }
.section-deep .section-lead { color: var(--deep-text); }

/* Układ: proza + kolumna z panelami. */
.split { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; }
/* Kolejny rząd akapit + panel w tej samej sekcji. */
.split-next { margin-top: clamp(40px, 5vw, 64px); }
/* Pionowy stos bloków o równym odstępie — druga kolumna sekcji. */
.stack { display: grid; gap: 20px; align-content: start; }
/* Etykieta otwierająca listę znaczników wewnątrz prozy. */
.legend-label { display: block; margin-top: 30px; }

/* --- Panel, karta, uwaga -------------------------------------------------- */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; background: var(--card-soft);
  border-bottom: 1px solid var(--line);
}
.panel-head .ic { width: 18px; height: 18px; color: var(--brand-ink); flex: none; }
.panel-label {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.panel-body { padding: 24px; }

.note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 20px 22px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: var(--r-md);
}
.note .ic { width: 20px; height: 20px; color: var(--brand-ink); margin-top: 3px; }
.note p { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.note-title {
  display: block; font-family: var(--f-mono); font-weight: 500;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 5px;
}

/* Znaczniki tematyczne. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--text);
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
}
.chips-warm li { border-color: color-mix(in srgb, var(--warm) 34%, transparent); color: var(--warm-ink); background: var(--warm-soft); }
.section-deep .chips li { border-color: var(--deep-line-2); background: var(--deep-card); color: var(--deep-text); }

/* --- Zestaw danych do zebrania (rok rachunków, doba) ---------------------- */
.dataset { display: grid; gap: 26px; }
.dataset-part { display: grid; gap: 12px; }
.dataset-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.dataset-label b { color: var(--brand-ink); font-weight: 500; }

.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.months li {
  display: grid; place-items: center; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-tint);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--muted);
}

/* Dwadzieścia cztery puste sloty — skala doby do wypełnienia własnymi
   danymi, a nie wykres. Serwis świadomie nie pokazuje żadnej krzywej
   zużycia: byłaby zmyślona. */
.hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 46px; }
.hours li { background: var(--bg-tint); border-radius: var(--r-sm) var(--r-sm) 0 0; border: 1px solid var(--line); border-bottom: none; }
.hours-scale {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--muted);
  border-top: 1px solid var(--line-strong); padding-top: 6px;
}

/* --- Pięć pytań ----------------------------------------------------------- */
.qlist { display: grid; }
.q {
  display: grid; gap: clamp(22px, 3vw, 44px);
  padding: clamp(32px, 4vw, 52px) 0;
  border-top: 1px solid var(--line);
}
.q:last-child { border-bottom: 1px solid var(--line); }

.q-mark { display: flex; align-items: baseline; gap: 16px; }
.q-num {
  font-family: var(--f-mono); font-size: clamp(30px, 4vw, 44px); font-weight: 500;
  line-height: 1; letter-spacing: -.04em;
  color: var(--brand-ink);
}
.q-rule { flex: 1 1 auto; height: 1px; background: var(--line-strong); }

.q-title { font-size: clamp(22px, 2.6vw, 31px); line-height: 1.16; margin-top: 18px; }
.q-body { margin-top: 16px; color: var(--text); font-size: 16.5px; line-height: 1.68; max-width: 54ch; }
.q-art { align-self: center; }
.q-art svg { width: 100%; height: auto; }

/* --- Arkusz porównania ofert ---------------------------------------------- */
.sheet {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.sheet-row { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--card); }
.sheet-row.is-head { background: var(--card-soft); }
.sheet-cell {
  padding: 15px 20px; border-left: 1px solid var(--line);
  font-size: 15.5px; color: var(--text); min-height: 54px;
  display: flex; align-items: center; gap: 10px;
}
.sheet-cell:first-child { border-left: none; }
.sheet-row.is-head .sheet-cell {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.sheet-what { font-weight: 600; color: var(--ink); }
/* Puste pole do wypełnienia: kreska na wpis, a nie udawana wartość. */
.sheet-slot { flex: 1 1 auto; height: 1px; background: var(--line-strong); opacity: .7; }

/* --- Co przygotować (lista z zaznaczaniem) -------------------------------- */
.prep-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding-bottom: 26px; margin-bottom: clamp(26px, 3.5vw, 38px);
  border-bottom: 1px solid var(--deep-line);
}
.prep-meter { display: flex; align-items: center; gap: 16px; margin-right: auto; }
.prep-ring { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.prep-ring circle { fill: none; stroke-width: 4; }
.prep-ring .ring-bg { stroke: var(--deep-line-2); }
.prep-ring .ring-fg { stroke: var(--brand-deep); stroke-linecap: round; transition: stroke-dashoffset .45s cubic-bezier(.2, .7, .3, 1); }
.prep-count { font-family: var(--f-mono); font-size: 21px; color: var(--deep-ink); font-variant-numeric: tabular-nums; }
.prep-count span { color: var(--deep-muted); font-size: 14px; }
.prep-note { display: block; font-size: 13.5px; color: var(--deep-muted); margin-top: 2px; }
.prep-reset { border-color: var(--deep-line-2); color: var(--deep-text); }
.prep-reset:hover { border-color: var(--brand-deep); color: var(--brand-deep); }

.prep-items { display: grid; gap: 14px; }
.prep-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  align-items: start; cursor: pointer;
  padding: 20px 22px; border-radius: var(--r-md);
  border: 1px solid var(--deep-line); background: var(--deep-card);
  transition: border-color .2s ease;
}
.prep-item:hover { border-color: var(--deep-line-2); }
.prep-item input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 1px 0 0; flex: none;
  border: 1.5px solid var(--deep-control); border-radius: var(--r-sm);
  background: transparent; cursor: pointer; position: relative;
  transition: border-color .18s ease, background-color .18s ease;
}
.prep-item input:checked { background: var(--brand-deep); border-color: var(--brand-deep); }
.prep-item input:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 5px; height: 11px;
  border: solid #0d1416; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.prep-item input:focus-visible { outline: none; box-shadow: var(--ring-deep); }
.prep-name { display: block; color: var(--deep-ink); font-weight: 600; font-size: 16.5px; line-height: 1.34; }
.prep-desc { display: block; color: var(--deep-muted); font-size: 14.5px; line-height: 1.55; margin-top: 5px; }
.prep-item:has(input:checked) .prep-name { color: var(--brand-deep); }

/* --- Stopka --------------------------------------------------------------- */
.footer {
  background: var(--deep-soft); color: var(--deep-text);
  padding: clamp(44px, 6vw, 72px) 0 30px;
  border-top: 1px solid var(--deep-line);
}
.footer-grid { display: grid; gap: 36px; }
.footer-brand { display: grid; gap: 14px; max-width: 380px; }
.footer .brand-name { color: var(--deep-ink); }
.footer .brand-name b { color: var(--brand-deep); }
.footer-desc { font-size: 15px; line-height: 1.6; color: var(--deep-muted); }
.footer-col h2 {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brand-deep);
  margin-bottom: 14px;
}
.footer-links { display: grid; gap: 9px; }
.footer-links a { font-size: 15px; color: var(--deep-text); transition: color .18s ease; }
.footer-links a:hover { color: var(--brand-deep); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  margin-top: clamp(34px, 5vw, 52px); padding-top: 24px;
  border-top: 1px solid var(--deep-line);
  font-size: 13.5px; color: var(--deep-muted);
}
/* Stopka strony 404 — sama linia dolna, bez kolumn nad nią. */
.footer-slim .footer-bottom { margin-top: 0; padding-top: 0; border-top: none; }
.footer-bottom .mono { font-size: 12.5px; letter-spacing: .03em; }

/* --- Do góry -------------------------------------------------------------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s,
              border-color .18s ease, color .18s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--brand); color: var(--brand-ink); }

/* --- Rysunki -------------------------------------------------------------- */
.art { width: 100%; height: auto; }
.sv-card    { fill: var(--sv-card); }
.sv-fill    { fill: var(--sv-fill); }
.sv-cell    { fill: var(--sv-cell); }
.sv-brand   { fill: var(--brand); }
.sv-warm    { fill: var(--warm); }
.sv-line    { stroke: var(--sv-line); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-faint   { stroke: var(--sv-faint); fill: none; stroke-width: 1; stroke-linecap: round; }
.sv-edge    { stroke: var(--line-strong); fill: none; stroke-width: 1; }
.sv-busbar  { stroke: var(--sv-busbar); fill: none; stroke-width: 1; }
.sv-brand-s { stroke: var(--brand); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-warm-s  { stroke: var(--warm); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-text    { fill: var(--muted); font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; }
/* Etykieta pytania otwartego — wszystko, co dopiero trzeba ustalić. */
.sv-text-warm { fill: var(--warm-ink); font-family: var(--f-mono); font-size: 9px; letter-spacing: .06em; }
.sv-label   { fill: var(--ink); font-family: var(--f-body); font-size: 12px; font-weight: 500; }
.sv-dot     { fill: var(--sv-faint); }
/* Kreskowanie cienia — konwencja rysunku technicznego; czyta się na każdym tle. */
.sv-hatch   { stroke: var(--ink); stroke-width: 1.2; }

/* Rysunek hero leży na ciemnej płycie w obu motywach — własny zestaw barw. */
/* Bryła domu na planie jest jaśniejsza niż płyta — inaczej cały „dzień”
   rozgrywał się w czerni i rysunek czytał się jak noc, nie jak rysunek. */
.hero-art .sv-card  { fill: #26343b; }
.hero-art .sv-fill  { fill: #1e2a30; }
.hero-art .sv-cell  { fill: #0b1318; }
.hero-art .sv-line  { stroke: #6b7a7d; }
.hero-art .sv-faint { stroke: #38464a; }
.hero-art .sv-edge  { stroke: rgba(255, 255, 255, .16); }
/* Plan ma 600 jednostek, a kolumna ~600 px — etykiety w 9 j. wychodziły
   na 7 px. 12 j. daje ok. 11 px na szerokim ekranie. */
.hero-art .sv-text  { fill: #8a9491; font-size: 12px; }
.hero-art .sv-label { fill: #eef1ee; }
.hero-art .sv-brand { fill: var(--brand-deep); }
.hero-art .sv-brand-s { stroke: var(--brand-deep); }
.hero-art .sv-warm  { fill: var(--warm-deep); }
.hero-art .sv-warm-s { stroke: var(--warm-deep); }
.hero-art .sv-dot   { fill: #38464a; }
.hero-art .sv-hatch { stroke: rgba(255, 255, 255, .40); }
.hero-art .sv-busbar { stroke: rgba(255, 255, 255, .28); }

/* Słońce pulsuje raz na kilka sekund — jedyna animacja dekoracyjna. */
/* Poświata wokół słońca. `transform-box: fill-box` jest tu obowiązkowe:
   domyślną wartością dla elementów SVG jest `view-box`, więc bez tego
   `transform-origin: center` oznaczałoby środek CAŁEGO rysunku i poświata
   odjeżdżałaby w bok zamiast pulsować wokół tarczy. */
/* --- Doba na planie dachu (rysunek hero) ---------------------------------- */
/* Rysunek hero to PLAN DACHU z góry w konwencji mapy: północ u góry, wschód
   po PRAWEJ. Słońce nie jest „na niebie” — jego znacznik krąży dookoła planu
   po stronie południowej (E → S → W), obracając się wokół środka domu
   (300,190). Cienie komina i drzewa obracają się w tym samym rytmie, jak
   wskazówka zegara słonecznego: zawsze w stronę przeciwną do słońca, rano
   ku NW, w południe ku N (najkrótsze), wieczorem ku NE.

   Ten widok zastąpił dwa ujęcia z boku, bo w rzucie bocznym nie da się
   pokazać naraz południowej połaci i słońca nad domem — kto widzi połać
   południową, ma słońce za plecami. Klatki policzył
   nie-wgrywac/narzedzia/dzien.js — nie poprawiać ręcznie, tylko przeliczyć.

   Pozy bazowe (poza @keyframes) to kadr z połowy poranka. Ten sam kadr widzi
   czytelnik z włączonym prefers-reduced-motion — animacja jest wtedy
   wyłączona i wszystko stoi w miejscu.

   Znacznik słońca obraca się wokół środka domu: transform-box view-box
   (domyślny) i transform-origin w jednostkach viewBox. Cień komina obraca się
   wokół własnej podstawy: transform-box fill-box, origin na dole prostokąta. */
.hero-sun {
  transform-origin: 300px 190px;
  transform: rotate(-42deg);
  animation: dzien-slonce 26s linear infinite;
}
.hero-shade-komin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(-42deg) scaleY(.437);
  animation: dzien-cien-komina 26s linear infinite;
}
.hero-shade-drzewo {
  transform: translate(-32.5px, -36.1px);
  animation: dzien-cien-drzewa 26s linear infinite;
}
@keyframes dzien-slonce {
  0%    { transform: rotate(-105deg);  opacity: 0; }
  5%    { transform: rotate(-94.5deg); opacity: 1; }
  12.5% { transform: rotate(-78.8deg); opacity: 1; }
  25%   { transform: rotate(-52.5deg); opacity: 1; }
  37.5% { transform: rotate(-26.3deg); opacity: 1; }
  50%   { transform: rotate(0deg);     opacity: 1; }
  62.5% { transform: rotate(26.3deg);  opacity: 1; }
  75%   { transform: rotate(52.5deg);  opacity: 1; }
  87.5% { transform: rotate(78.8deg);  opacity: 1; }
  95%   { transform: rotate(94.5deg);  opacity: 1; }
  100%  { transform: rotate(105deg);   opacity: 0; }
}
@keyframes dzien-cien-komina {
  0%    { transform: rotate(-105deg)  scaleY(1.063); opacity: 0; }
  5%    { transform: rotate(-94.5deg) scaleY(.924);  opacity: 1; }
  12.5% { transform: rotate(-78.8deg) scaleY(.712);  opacity: 1; }
  25%   { transform: rotate(-52.5deg) scaleY(.496);  opacity: 1; }
  37.5% { transform: rotate(-26.3deg) scaleY(.372);  opacity: 1; }
  50%   { transform: rotate(0deg)     scaleY(.329);  opacity: 1; }
  62.5% { transform: rotate(26.3deg)  scaleY(.372);  opacity: 1; }
  75%   { transform: rotate(52.5deg)  scaleY(.496);  opacity: 1; }
  87.5% { transform: rotate(78.8deg)  scaleY(.712);  opacity: 1; }
  95%   { transform: rotate(94.5deg)  scaleY(.924);  opacity: 1; }
  100%  { transform: rotate(105deg)   scaleY(1.063); opacity: 0; }
}
@keyframes dzien-cien-drzewa {
  0%    { transform: translate(-144.9px, 38.8px);  opacity: 0; }
  5%    { transform: translate(-149.5px, 11.8px);  opacity: 1; }
  12.5% { transform: translate(-127.3px, -25.3px); opacity: 1; }
  25%   { transform: translate(-47.7px, -36.6px);  opacity: 1; }
  37.5% { transform: translate(-16.8px, -34px);    opacity: 1; }
  50%   { transform: translate(0px, -31.8px);      opacity: 1; }
  62.5% { transform: translate(16.8px, -34px);     opacity: 1; }
  75%   { transform: translate(47.7px, -36.6px);   opacity: 1; }
  87.5% { transform: translate(127.3px, -25.3px);  opacity: 1; }
  95%   { transform: translate(149.5px, 11.8px);   opacity: 1; }
  100%  { transform: translate(144.9px, 38.8px);   opacity: 0; }
}

/* --- Pojawianie się sekcji ------------------------------------------------ */
/* Ukrywamy TYLKO gdy działa JS — bez skryptów cała treść jest widoczna. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* --- Responsywność -------------------------------------------------------- */
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
  .sheet-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .prep-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .q { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1060px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

@media (max-width: 959.98px) {
  .nav-toggle { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 14px var(--gutter) 22px; display: none;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 12px 14px; font-size: 16px; }
}

@media (max-width: 719.98px) {
  body { font-size: 16.5px; }
  /* Plan dachu w hero ma 600 jednostek szerokości, a na telefonie dostaje
     ~335 px — etykiety w 9 jednostkach miałyby 5 px. Powiększone do 14. */
  .hero-art .sv-text { font-size: 14px; }
  .panel-body { padding: 20px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sheet-cell { padding: 13px 16px; min-height: 48px; border-left: none; }
  /* W jednej kolumnie nagłówki „Oferta A/B” z wiersza tytułowego nie mają
     do czego się odnosić — każda komórka dostaje własny podpis. */
  .sheet-row.is-head .sheet-cell:not(:first-child) { display: none; }
  .sheet-cell[data-kolumna]::before {
    content: attr(data-kolumna); flex: none; width: 72px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  .crosshair::before, .crosshair::after { display: none; }
}

@media (max-width: 479.98px) {
  .to-top { right: 14px; bottom: 14px; }
  .prep-item { padding: 18px; }
}

/* Mniej ruchu. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* Słońce i cień zostają w pozie bazowej (kadr z połowy poranka) — bez
     `animation: none` zerowy czas trwania przewinąłby je na klatkę końcową,
     czyli poza rysunek. */
  .hero-sun, .hero-shade-komin, .hero-shade-drzewo { animation: none; }
}

/* --- Druk ----------------------------------------------------------------- */
@media print {
  /* Druk zawsze na jasnych tokenach — :root[data-theme="dark"] to selektor
     atrybutowy, więc bez tego działałby także na papierze. */
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --bg-soft: #fff; --bg-tint: #f2f2f2; --card: #fff; --card-soft: #fff;
    --deep: #fff; --deep-soft: #fff;
    --ink: #000; --text: #222; --muted: #444; --line: #bbb; --line-strong: #888;
    --brand: #0a4e55; --brand-ink: #0a4e55; --brand-soft: #eee; --brand-deep: #0a4e55;
    --warm: #8f3f25; --warm-ink: #8f3f25; --warm-soft: #f4f4f4; --warm-deep: #8f3f25;
    --deep-ink: #000; --deep-text: #222; --deep-muted: #444;
    --deep-line: #bbb; --deep-line-2: #888; --deep-card: #fff; --deep-control: #666;
    --sv-line: #333; --sv-faint: #999; --sv-card: #fff; --sv-fill: #eee; --sv-cell: #333;
    --sv-busbar: rgba(255, 255, 255, .6);
  }
  .site-header, .to-top, .hero-art, .nav, .theme-toggle, .prep-reset, .progress { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Bez tego bloki, których czytelnik nie zdążył przewinąć, drukują się puste. */
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hero, .section-deep, .footer { background: #fff !important; color: #000 !important; }
  .hero-title, .section-title, .q-title, h2, h3 { color: #000 !important; }
  .hero-lead, .section-lead, .q-body, p, li { color: #222 !important; }
  .prep-name, .prep-count, .footer .brand-name, .footer-links a { color: #000 !important; }
  .prep-desc, .prep-note, .footer-desc, .footer-bottom { color: #333 !important; }
  .prep-item input { border-color: #666 !important; }
  .section { padding: 16pt 0; break-inside: avoid; }
  .panel, .sheet, .prep-item { border-color: #bbb; box-shadow: none; }
  .q { break-inside: avoid; }
}
