/* HelioCore — strona produktowa
   ═══════════════════════════════════════════════════════════════════════════════════
   ⚠ WSZYSTKO PRZEZ KLASY. Strona jedzie z CSP `style-src 'self'` bez `unsafe-inline`,
   więc atrybut `style="..."` byłby po cichu ignorowany. Każdy stan ma tu swoją klasę. */

:root {
  --tlo: #0b1220;
  --tlo-2: #111a2e;
  --tlo-3: #16203a;
  --tekst: #e8eefc;
  --tekst-cichy: #9fb0cf;
  --akcent: #4a9eff;
  --akcent-2: #3ecf8e;
  --ostrzezenie: #e8b339;
  --blad: #f0616d;
  --linia: #22304a;
  --ramka-szer: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ramka { max-width: var(--ramka-szer); margin: 0 auto; padding: 0 24px; }
.ramka.waska { max-width: 720px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.02em; }
h2 { font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -.01em; }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }

.drobne { color: var(--tekst-cichy); font-size: 14px; }
.wiodacy { color: var(--tekst-cichy); font-size: 18px; max-width: 68ch; }
.nadtytul { color: var(--akcent-2); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; font-size: 13px; margin-bottom: 10px; }

/* ── GÓRA ─────────────────────────────────────────────────────────────────────────── */
.gora { position: sticky; top: 0; z-index: 50; background: rgba(11,18,32,.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); }
.gora-wnetrze { display: flex; align-items: center; gap: 18px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-weight: 700; }
.logo:hover { text-decoration: none; }
.logo-znak { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--akcent), var(--akcent-2)); color: #06101f;
  font-size: 13px; font-weight: 800; }
.menu { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.menu a { color: var(--tekst-cichy); font-size: 15px; }
.menu a:hover { color: var(--tekst); text-decoration: none; }

/* ⚠ „START FREE" BYŁ NIECZYTELNY — I TO NIE BYŁA KWESTIA GUSTU.
   `.menu a` ma specyficzność (0,1,1), `.przycisk` tylko (0,1,0). Selektor mniej
   specyficzny PRZEGRYWA niezależnie od kolejności w pliku, więc jasnoniebieski przycisk
   dostawał wyszarzony kolor tekstu przewidziany dla zwykłych odnośników menu. Kontrast
   spadał do okolic 1,6:1 — napis był fizycznie na przycisku, ale nie dawał się przeczytać
   i użytkownik nie wiedział, do czego ten przycisk służy.
   Naprawiamy specyficznością, nie `!important`: `!important` zamiótłby też stan `:hover`. */
.menu a.przycisk        { color: #06101f; }
.menu a.przycisk:hover  { color: #06101f; }
.menu a.przycisk.pusty,
.menu a.przycisk.pusty:hover { color: var(--tekst); }
.jezyki { display: flex; gap: 4px; margin-left: 12px; }
.jezyk { background: transparent; border: 1px solid var(--linia); color: var(--tekst-cichy);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.jezyk:hover { color: var(--tekst); }
.jezyk.wybrany { background: var(--akcent); border-color: var(--akcent); color: #06101f; }

/* ── PRZYCISKI ────────────────────────────────────────────────────────────────────── */
.przycisk { display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: linear-gradient(135deg, var(--akcent), #6bb4ff); color: #06101f;
  font-weight: 700; border: 0; cursor: pointer; font-size: 15px; text-align: center; }
.przycisk:hover { text-decoration: none; filter: brightness(1.08); }
.przycisk:disabled { opacity: .55; cursor: not-allowed; }
.przycisk.pusty { background: transparent; color: var(--tekst);
  border: 1px solid var(--linia); }
.przycisk.pusty:hover { border-color: var(--akcent); }
.przycisk.maly { padding: 7px 15px; font-size: 14px; }
.przycisk.szeroki { width: 100%; }

/* ── OTWARCIE ─────────────────────────────────────────────────────────────────────── */
.hero { padding: 88px 0 72px;
  background: radial-gradient(1100px 460px at 50% -12%, rgba(74,158,255,.16), transparent 70%); }
.hero-akcje { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }

/* ── PASY I SEKCJE ────────────────────────────────────────────────────────────────── */
.pas { padding: 44px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia);
  background: var(--tlo-2); }
.sekcja { padding: 76px 0; }
.sekcja.ciemna { background: var(--tlo-2); border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia); }

.trojka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
/* ⚠ PIĘĆ OBIETNIC W SIATCE NA CZTERY ZOSTAWIA JEDNĄ SAMOTNĄ W DRUGIM RZĘDZIE.
   Filary dostają własną siatkę — najwyżej trzy w rzędzie, więc pięć układa się 3+2
   i wygląda na zamierzone, a nie na resztkę. */
.filary { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 1100px; margin-inline: auto; }
@media (min-width: 1000px) { .filary { grid-template-columns: repeat(3, 1fr); } }
.filar h3 { color: var(--akcent-2); }
.filar p { color: var(--tekst-cichy); margin: 0; }

/* ── FUNKCJE ──────────────────────────────────────────────────────────────────────── */
.siatka-funkcji { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin: 28px 0 34px; }
.funkcja { background: var(--tlo-2); border: 1px solid var(--linia); border-radius: 14px;
  padding: 18px 20px; }
.funkcja h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.funkcja p { color: var(--tekst-cichy); margin: 0; font-size: 15px; }

.plakietka { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em; }
.plakietka.bezpieczna { background: rgba(62,207,142,.16); color: var(--akcent-2); }
.plakietka.otwarta { background: rgba(232,179,57,.16); color: var(--ostrzezenie); }

/* ── KARTY ────────────────────────────────────────────────────────────────────────── */
.karta { background: var(--tlo-3); border: 1px solid var(--linia); border-radius: 14px;
  padding: 22px 24px; margin: 22px 0; }
.uwaga-karta { border-left: 3px solid var(--ostrzezenie); }
.lista-uczciwosc { margin: 10px 0 0; padding-left: 20px; color: var(--tekst-cichy); }
.lista-uczciwosc li { margin: 8px 0; }

/* ── PLANY ────────────────────────────────────────────────────────────────────────── */
.siatka-planow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin: 30px 0 18px; align-items: stretch; }
.plan { background: var(--tlo-3); border: 1px solid var(--linia); border-radius: 16px;
  padding: 24px 22px; display: flex; flex-direction: column; }
.plan.wyrozniony { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent) inset; }
.cennik { margin: 6px 0 4px; }
.cena { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.okres { color: var(--tekst-cichy); font-size: 14px; }
.wieczysta { color: var(--tekst-cichy); font-size: 14px; margin: 4px 0 0; }
.limity { color: var(--tekst-cichy); font-size: 14px; margin: 8px 0 0; }
.funkcje-planu { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
.funkcje-planu li { padding: 6px 0 6px 22px; position: relative; font-size: 15px;
  color: var(--tekst-cichy); border-bottom: 1px solid rgba(255,255,255,.04); }
.funkcje-planu li::before { content: "✓"; position: absolute; left: 0; color: var(--akcent-2);
  font-weight: 700; }

/* ── FOUNDER ──────────────────────────────────────────────────────────────────────── */
.founder-karta { border-left: 3px solid var(--akcent-2); }
.progi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 18px 0; }
.prog { background: rgba(255,255,255,.03); border-radius: 12px; padding: 16px 18px; }
.kwota { display: block; font-size: 26px; font-weight: 800; color: var(--akcent-2); }
.co { color: var(--tekst-cichy); font-size: 14px; }
.wyroznik { font-weight: 700; color: var(--akcent-2); }

/* ── FORMULARZ ────────────────────────────────────────────────────────────────────── */
.formularz { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; }
.formularz label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.formularz small { font-weight: 400; color: var(--tekst-cichy); font-size: 13px; }
/* ⚠ WYLICZANIE TYPÓW PÓL SIĘ NIE SPRAWDZIŁO. Reguła obejmowała `text`, `email` i `select`,
   więc pole HASŁA w panelu klienta wyszło BIAŁE na ciemnej stronie — obok ciemnego pola
   e-mail. Wyglądało jak usterka wyświetlania i widać to było dopiero na zrzucie.
   Teraz obejmujemy wszystkie pola tekstowe; nowy typ pola nie wypadnie już poza styl.
   Pilnuje tego `TestStylObejmujeWszystkieTypyPol`. */
.formularz input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.formularz textarea,
.formularz select {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linia);
  background: rgba(255,255,255,.04); color: var(--tekst); font-size: 15px; font-family: inherit; }
.formularz input:focus, .formularz select:focus { outline: 2px solid var(--akcent);
  outline-offset: 1px; }
.zgoda { flex-direction: row !important; align-items: flex-start; gap: 10px !important;
  font-weight: 400; font-size: 14px; color: var(--tekst-cichy); }
.zgoda input { margin-top: 4px; }

.wynik { border-radius: 12px; padding: 16px 18px; margin-top: 6px; }
.wynik.dobrze { background: rgba(62,207,142,.1); border-left: 3px solid var(--akcent-2); }
.wynik.zle { background: rgba(240,97,109,.1); border-left: 3px solid var(--blad); }
.wynik p { margin: 6px 0 0; }
.kod { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px; font-weight: 800; letter-spacing: .12em; color: var(--akcent-2);
  margin: 10px 0 4px; }
.kod-podpis { display: block; color: var(--tekst-cichy); font-size: 14px; }
.czekanie { display: block; margin-top: 10px; color: var(--ostrzezenie); font-size: 14px; }

.co-dalej ol { margin: 8px 0 0; padding-left: 22px; color: var(--tekst-cichy); }
.co-dalej li { margin: 8px 0; }

.sprawdz-status { margin-top: 20px; border: 1px solid var(--linia); border-radius: 12px;
  padding: 14px 18px; }
.sprawdz-status summary { cursor: pointer; font-weight: 600; }

/* ── STOPKA ───────────────────────────────────────────────────────────────────────── */
.stopka { border-top: 1px solid var(--linia); padding: 32px 0; background: var(--tlo-2); }
.stopka-wnetrze p { margin: 4px 0; }

/* ── PRZESKOK DO TREŚCI ───────────────────────────────────────────────────────────── */
.przeskocz { position: absolute; left: -9999px; top: 0; background: var(--akcent);
  color: #06101f; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 100; }
.przeskocz:focus { left: 0; text-decoration: none; }

/* ── SZTANDAR „ZA DARMO DO…" ──────────────────────────────────────────────────────
   To jest teraz GŁÓWNA obietnica strony, a nie przypis pod cennikiem. Datę bierzemy
   z serwera licencyjnego, więc nie ma jak obiecać czegoś innego, niż honorujemy. */
.sztandar-darmo { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 20px;
  padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(62,207,142,.34);
  background: linear-gradient(135deg, rgba(62,207,142,.14), rgba(62,207,142,.04)); }
.sztandar-znak { color: var(--akcent-2); font-size: 22px; line-height: 1.2; }
.sztandar-tresc { display: flex; flex-direction: column; gap: 3px; }
.sztandar-tresc strong { font-size: 17px; }

/* ── UKŁAD OTWARCIA Z RYSUNKIEM ───────────────────────────────────────────────────── */
.hero-uklad { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero-rysunek { margin: 0; }
.hero-rysunek figcaption { margin-top: 10px; text-align: center; }
.rys-przeplyw { width: 100%; height: auto; }

.slonce { fill: #f5c451; }
.promienie line { stroke: #f5c451; stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.siatka-panelu { stroke: rgba(6,16,31,.45); stroke-width: 1.5; }
.podpis { fill: var(--tekst-cichy); font-size: 11px; font-family: inherit; letter-spacing: .06em; }
.podpis-w { fill: var(--tekst); font-size: 13px; font-weight: 700; font-family: inherit; }
.podpis-w.mniejszy { font-size: 11px; font-weight: 500; fill: var(--tekst-cichy); }
.wezel rect { fill: var(--tlo-3); stroke: var(--linia); stroke-width: 1.5; }
.wezel.akcent rect { stroke: rgba(62,207,142,.5); }
.przewod { stroke: var(--linia); stroke-width: 2; fill: none; }
.ladunek { fill: var(--akcent); }
.ladunek.akcent-l { fill: var(--akcent-2); }

/* Pulsowanie słońca — jedyna animacja w otwarciu poza płynącymi ładunkami. */
@keyframes tetno { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.promienie { animation: tetno 3.2s ease-in-out infinite; }

/* ── PODGLĄD DZIAŁANIA ────────────────────────────────────────────────────────────── */
.siatka-podgladu { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 24px; margin-top: 30px; }
.podglad-karta { margin: 0; }
.podglad-karta figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.podglad-karta figcaption strong { font-size: 16px; }
.podglad-karta figcaption span { color: var(--tekst-cichy); font-size: 14px; }

.okno { border: 1px solid var(--linia); border-radius: 12px; overflow: hidden;
  background: var(--tlo); }
.okno-pasek { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--tlo-3); border-bottom: 1px solid var(--linia);
  color: var(--tekst-cichy); font-size: 12px; }
.okno-pasek i { width: 8px; height: 8px; border-radius: 50%; background: var(--linia); }
.okno-pasek span { margin-left: 8px; }
.okno-tresc { padding: 12px; }
.rys-wykres { width: 100%; height: auto; }

.os { stroke: var(--linia); stroke-width: 1; }
.skala { fill: var(--tekst-cichy); font-size: 9px; font-family: inherit; }
.linia-prognoza { fill: none; stroke: var(--akcent); stroke-width: 2.5; stroke-linecap: round; }
.linia-wykonanie { fill: none; stroke: var(--akcent-2); stroke-width: 2.5; stroke-linecap: round; }
.linia-soc { fill: none; stroke: var(--akcent-2); stroke-width: 2.5; stroke-linecap: round; }
.pr-a { fill: var(--akcent); } .pr-b { fill: var(--akcent-2); }
.pasmo-lad { fill: rgba(74,158,255,.12); stroke: rgba(74,158,255,.32); stroke-width: 1; }
.pasmo-rez { fill: rgba(240,97,109,.10); }
.kropka-teraz { fill: var(--akcent-2); }

/* Linie rysują się same — `stroke-dasharray` równy długości, przesuwany do zera.
   500 z zapasem pokrywa najdłuższą ścieżkę na tych wykresach. */
@keyframes rysowanie { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; } }
.rysuj { stroke-dasharray: 500; animation: rysowanie 2.6s ease-out forwards; }
.rysuj.op { animation-delay: .45s; }

/* Słupki błędu — rosną od dołu, każdy z własnym opóźnieniem. Wysokości są w CSS,
   bo atrybuty `height`/`y` w SVG i tak musiałyby tu być, a przez klasy widać sekwencję. */
.slupek { fill: rgba(232,179,57,.55); }
.slupek.dobry { fill: rgba(62,207,142,.65); }
@keyframes wyrastanie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.slupek { transform-origin: 0 122px; animation: wyrastanie .7s ease-out backwards; }
.s1 { y: 30px;  height: 92px; animation-delay: .05s; }
.s2 { y: 44px;  height: 78px; animation-delay: .15s; }
.s3 { y: 40px;  height: 82px; animation-delay: .25s; }
.s4 { y: 58px;  height: 64px; animation-delay: .35s; }
.s5 { y: 70px;  height: 52px; animation-delay: .45s; }
.s6 { y: 78px;  height: 44px; animation-delay: .55s; }
.s7 { y: 92px;  height: 30px; animation-delay: .65s; }
.s8 { y: 98px;  height: 24px; animation-delay: .75s; }

/* Szkic układu panelu — nie zrzut, tylko sylwetka: pokazuje kształt aplikacji. */
.uklad-panelu { display: grid; grid-template-columns: 56px 1fr; gap: 10px; height: 150px; }
.szkic-bok { background: var(--tlo-3); border-radius: 8px; padding: 8px 6px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; }
.szkic-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--akcent), var(--akcent-2)); color: #06101f;
  font-size: 10px; font-weight: 800; }
.szkic-poz { width: 100%; height: 8px; border-radius: 3px; background: rgba(255,255,255,.06); }
.szkic-poz.aktywna { background: rgba(74,158,255,.42); }
.szkic-glowna { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content;
  gap: 8px; align-content: start; }
.szkic-kpi { background: var(--tlo-3); border-radius: 8px; padding: 8px 10px; }
.szkic-kpi b { display: block; font-size: 14px; }
.szkic-kpi i { display: block; height: 5px; width: 60%; margin-top: 5px; border-radius: 3px;
  background: rgba(255,255,255,.08); }
.szkic-wykres { grid-column: 1 / -1; background: var(--tlo-3); border-radius: 8px; padding: 8px;
  display: flex; align-items: flex-end; gap: 4px; height: 62px; }
.szkic-wykres .sl { flex: 1; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--akcent), rgba(74,158,255,.25));
  animation: oddech 3.4s ease-in-out infinite; }
@keyframes oddech { 0%,100% { height: 30%; } 50% { height: 85%; } }
.szkic-wykres .sl:nth-child(1){animation-delay:0s}    .szkic-wykres .sl:nth-child(2){animation-delay:.12s}
.szkic-wykres .sl:nth-child(3){animation-delay:.24s}  .szkic-wykres .sl:nth-child(4){animation-delay:.36s}
.szkic-wykres .sl:nth-child(5){animation-delay:.48s}  .szkic-wykres .sl:nth-child(6){animation-delay:.60s}
.szkic-wykres .sl:nth-child(7){animation-delay:.72s}  .szkic-wykres .sl:nth-child(8){animation-delay:.84s}
.szkic-wykres .sl:nth-child(9){animation-delay:.96s}  .szkic-wykres .sl:nth-child(10){animation-delay:1.08s}
.szkic-wykres .sl:nth-child(11){animation-delay:1.2s} .szkic-wykres .sl:nth-child(12){animation-delay:1.32s}

/* ── SPRZĘT I SYSTEMY ─────────────────────────────────────────────────────────────── */
.dwie-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.lista-ptaszki { list-style: none; padding: 0; margin: 12px 0 10px; }
.lista-ptaszki li { padding: 5px 0 5px 22px; position: relative; color: var(--tekst-cichy);
  font-size: 15px; }
.lista-ptaszki li::before { content: "✓"; position: absolute; left: 0; color: var(--akcent-2);
  font-weight: 700; }
.lista-systemow { list-style: none; padding: 0; margin: 12px 0 10px; }
.lista-systemow li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.sys-nazwa { font-weight: 600; }
.sys-arch { color: var(--tekst-cichy); font-size: 14px; }

/* ── PLANY: PRZYSZŁE WYSZARZONE ───────────────────────────────────────────────────
   ⚠ Plan bez funkcji, która go odróżnia, NIE MOŻE wyglądać na kupowalny. Wcześniej
   znikał ze strony całkowicie i przez to wyglądało, jakbyśmy nie mieli planów rozwoju.
   Teraz jest widoczny, ale wygaszony, bez ceny i bez przycisku — widać kierunek, a nie
   da się kliknąć czegoś, czego nie sprzedajemy. */
.plan.przyszly { opacity: .58; border-style: dashed; }
.plan.przyszly .funkcje-planu li { color: var(--tekst-cichy); }
.plan-wkrotce { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--tekst-cichy); }
.plan-blokada { margin-top: auto; padding: 10px 12px; border-radius: 9px;
  background: rgba(255,255,255,.04); color: var(--tekst-cichy); font-size: 13px; text-align: center; }
.plan-darmowy { border-color: rgba(62,207,142,.45); }
.plan-wstega { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgba(62,207,142,.16); color: var(--akcent-2); }

/* ── POBRANIE ─────────────────────────────────────────────────────────────────────── */
.karta-github { border-left: 3px solid var(--akcent); }
.znak-gh { color: var(--akcent); }
.kroki { margin: 10px 0 0; padding-left: 22px; color: var(--tekst-cichy); }
.kroki li { margin: 8px 0; }

/* ── POWRÓT NA GÓRĘ ───────────────────────────────────────────────────────────────── */
.do-gory { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px;
  display: none; place-items: center; border-radius: 50%; background: var(--tlo-3);
  border: 1px solid var(--linia); color: var(--tekst); font-size: 20px; z-index: 60; }
.do-gory:hover { border-color: var(--akcent); text-decoration: none; }
.do-gory.widoczny { display: grid; }

/* ── TELEFON ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-uklad { grid-template-columns: 1fr; }
  .hero-rysunek { max-width: 420px; }
}
@media (max-width: 720px) {
  .menu a:not(.przycisk) { display: none; }
  .hero { padding: 56px 0 44px; }
  .sekcja { padding: 52px 0; }
  .gora-wnetrze { gap: 10px; }
  .do-gory { right: 14px; bottom: 14px; }
}

/* ⚠ SZANUJEMY USTAWIENIE „OGRANICZ RUCH". Animowane tła przy zaburzeniach przedsionkowych
   powodują realny dyskomfort; strona handlowa nie ma prawa go wywoływać. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── BANER REDAKCYJNY ─────────────────────────────────────────────────────────────
   Promocja albo komunikat, ustawiany lokalnie w /redakcja. Siedzi NAD treścią, ale
   pod nagłówkiem — ma być zauważony, a nie zasłaniać nawigację. */
.baner-promo { background: linear-gradient(90deg, rgba(74,158,255,.16), rgba(62,207,142,.12));
  border-bottom: 1px solid var(--linia); }
.baner-wnetrze { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 24px; }
.baner-wnetrze strong { font-size: 15px; }
.baner-wnetrze span { color: var(--tekst-cichy); font-size: 14px; }
.baner-wnetrze .przycisk { margin-left: auto; }

/* ── PRAWDZIWY ZRZUT EKRANU ───────────────────────────────────────────────────────
   Obraz jest szeroki (1200 px) i na telefonie musi się zmieścić bez rozjeżdżania
   strony w poziomie — stąd `max-width:100%` i `height:auto`. */
.ekran-ramka { margin: 28px 0 0; }
.ekran-ramka .okno { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.ekran-ramka img { display: block; width: 100%; max-width: 100%; height: auto; }
.ekran-ramka figcaption { margin-top: 12px; text-align: center; }
.ekran-punkty { margin-top: 34px; }

/* ── SPIS WYDAŃ ───────────────────────────────────────────────────────────────────
   Najnowsze wydanie rozwinięte, starsze zwinięte — kto wchodzi po aktualizację,
   chce wiedzieć, co dostanie TERAZ, a nie czytać historii od początku. */
.naglowek-wydan { margin-top: 44px; }
.spis-wydan { margin-top: 18px; }
.wydanie { border: 1px solid var(--linia); border-radius: 14px; background: var(--tlo-3);
  padding: 18px 20px; margin-bottom: 14px; }
.wydanie.najnowsze { border-color: rgba(74,158,255,.45); }
.wydanie-glowa { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wydanie-nr { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.wydanie-data { color: var(--tekst-cichy); font-size: 14px; }
.wydanie-plakietka { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  background: rgba(74,158,255,.16); color: var(--akcent); }
.wydanie h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tekst-cichy); }
.wydanie ul { margin: 0; padding-left: 20px; color: var(--tekst-cichy); font-size: 15px; }
.wydanie li { margin: 6px 0; }
.wydanie .dodane li::marker { color: var(--akcent-2); }
.wydanie .naprawione li::marker { color: var(--ostrzezenie); }

/* ═══════════════════════════════════════════════════════════════════════════════════
   PODŚWIETLENIE AKTYWNEJ POZYCJI MENU
   ═══════════════════════════════════════════════════════════════════════════════════
   ⚠ Zgłoszenie: „zmiana zakładki nie jest odzwierciedlona podświetleniem — nie wiem,
   gdzie jestem". Na stronie przewijanej to gorsze niż na wielostronicowej, bo adres
   w pasku też się nie zmienia. Podkreślenie rośnie od środka, żeby zmiana była widoczna
   kątem oka, a nie dopiero po wpatrzeniu się. */
.menu a{position:relative}
.menu a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:2px;
  background:var(--akcent,#5ba8ff);border-radius:2px;
  transition:left .22s ease,right .22s ease,opacity .22s ease;opacity:0}
.menu a.aktywna::after{left:0;right:0;opacity:1}
.menu a.aktywna{color:var(--tekst,#eaf1ff)}
/* Przycisków (Start free, Zaloguj) nie podkreślamy — mają własne tło i podkreślenie
   robiłoby z nich dwa stany naraz. */
.menu a.przycisk::after,.menu .konto-przycisk::after{display:none}

/* ═══ ANIMACJE WEJŚCIA ═══════════════════════════════════════════════════════════════
   Tylko `opacity` i `transform` — wszystko inne wymusza przeliczenie układu w każdej
   klatce i widać to na słabszym sprzęcie. */
/* ⚠ UKRYCIE OBOWIĄZUJE WYŁĄCZNIE, GDY SKRYPT DZIAŁA (klasa `anim` na <html>).
   Bez tego warunku każda awaria JavaScriptu chowała CAŁĄ stronę, a wyglądałaby ona
   na pustą, nie na zepsutą — dokładnie ten tryb awarii już raz nas kosztował wydanie. */
.anim .wjezdza{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.anim .wjezdza.widac{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .anim .wjezdza,.anim .wjezdza.widac{opacity:1;transform:none;transition:none}
}
/* Delikatne uniesienie kafelków pod kursorem — to jedyna animacja, którą uruchamia
   użytkownik, więc może być wyraźniejsza. */
.plan,.kafel,.filar,.karta{transition:transform .25s ease,box-shadow .25s ease}
.plan:hover,.kafel:hover,.filar:hover{transform:translateY(-4px)}

/* ═══ GALERIA ZRZUTÓW ════════════════════════════════════════════════════════════════ */
.okno-plotno{position:relative;width:100%;aspect-ratio:1200/958;overflow:hidden}
.okno-plotno .zrzut{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity .7s ease,transform .7s ease}
.okno-plotno .zrzut.widoczny{opacity:1;transform:none}
.zrzut-sterowanie{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.zrzut-sterowanie .strzalka{
  background:rgba(120,160,255,.10);border:1px solid rgba(140,180,255,.22);color:inherit;
  border-radius:50%;width:34px;height:34px;font-size:19px;line-height:1;cursor:pointer;
  transition:background .2s ease,transform .2s ease}
.zrzut-sterowanie .strzalka:hover{background:rgba(120,160,255,.22);transform:scale(1.1)}
.kropki{display:flex;gap:9px}
.kropki .kropka{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(150,185,255,.28);border:none;transition:background .25s ease,width .25s ease}
.kropki .kropka.aktywna{background:var(--akcent,#5ba8ff);width:26px;border-radius:5px}

/* ═══ PRÓG PRZYSZŁY W PROGRAMIE FOUNDER ══════════════════════════════════════════════
   Pro+ nie ma jeszcze funkcji, która go odróżnia. Widać kierunek, nie da się kupić. */
.prog-przyszly{opacity:.45;filter:grayscale(1);border-style:dashed;position:relative}
.prog-przyszly .prog-plakietka{
  display:block;margin-top:6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--przygaszony,#8fa4c8)}
.prog-przyszly:hover{transform:none}

/* ═══════════════════════════════════════════════════════════════════════════════════
   PANEL KLIENTA
   ═══════════════════════════════════════════════════════════════════════════════════ */
#konto{display:none}
body.tryb-konta #konto{display:block}
/* Reszta witryny znika, ale pasek i stopka zostają — klient ma jak wrócić. */
body.tryb-konta main > section:not(#konto),
body.tryb-konta .hero,
body.tryb-konta .pas,
body.tryb-konta .baner-promo{display:none}

.konto-przycisk{margin-left:6px}
.konto-przycisk.zalogowany{
  border-color:rgba(110,220,160,.5);color:#9ff0c4}
.konto-przycisk.zalogowany::before{content:"● ";color:#5fd8a0;font-size:11px}

.konto-pasek{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:22px}
.konto-naglowek{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:20px}
.konto-naglowek h2{margin:2px 0}

.konto-karta{
  background:rgba(20,30,54,.55);border:1px solid rgba(140,180,255,.14);
  border-radius:14px;padding:22px;margin-bottom:18px}
.konto-waska{max-width:460px;margin-left:auto;margin-right:auto}
.srodek{text-align:center}

/* Zakładki numerowane — ten sam język wizualny co panel HelioCore i portal licencyjny. */
.konto-zakladki{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
  border-bottom:1px solid rgba(140,180,255,.14);padding-bottom:10px}
.konto-zakladka{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:9px;
  background:transparent;border:1px solid transparent;color:var(--przygaszony,#8fa4c8);
  cursor:pointer;font:inherit;transition:background .2s ease,color .2s ease,border-color .2s ease}
.konto-zakladka .numer{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(120,160,255,.16);font-size:12px;font-weight:700}
.konto-zakladka:hover{color:var(--tekst,#eaf1ff);background:rgba(120,160,255,.08)}
.konto-zakladka.aktywna{
  color:var(--tekst,#eaf1ff);background:rgba(120,160,255,.14);
  border-color:rgba(140,180,255,.30)}
.konto-zakladka.aktywna .numer{background:var(--akcent,#5ba8ff);color:#08101f}

.kafle-kpi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:18px}
.kafle-kpi .kafel{
  background:rgba(20,30,54,.55);border:1px solid rgba(140,180,255,.14);
  border-radius:14px;padding:18px;text-align:center}
.kafle-kpi .liczba{display:block;font-size:30px;font-weight:700;line-height:1.15}
.kafle-kpi .liczba.dobra{color:#6fe0a8;font-size:20px}
.kafle-kpi .liczba.uwaga{color:#ffc978;font-size:20px}
.kafle-kpi .opis{display:block;margin-top:6px;font-size:13px;color:var(--przygaszony,#8fa4c8)}

.kroki{margin:0 0 16px;padding-left:22px;line-height:1.75}
.kod-parowania{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kod-parowania .kod{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;letter-spacing:.16em;
  background:rgba(120,160,255,.12);border:1px dashed rgba(140,180,255,.4);
  border-radius:10px;padding:10px 16px}

.instalacja-gora{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.pary{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 0}
.pary dt{color:var(--przygaszony,#8fa4c8)}
.pary dd{margin:0}
.dobra{color:#6fe0a8}
.uwaga{color:#ffc978}
.pusto{color:var(--przygaszony,#8fa4c8);padding:18px 0}

.plakietka{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  font-size:12px;background:rgba(150,185,255,.14);color:var(--przygaszony,#8fa4c8)}
.plakietka.dobra{background:rgba(110,220,160,.16);color:#6fe0a8}

.dwa-skladniki{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-top:16px}
.qr-miejsce{background:#fff;padding:10px;border-radius:12px;line-height:0}
.sekret{display:inline-block;margin:6px 0 14px;padding:8px 12px;border-radius:8px;
  background:rgba(120,160,255,.12);font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.08em;word-break:break-all}
.kody-zapasowe ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;list-style:none;padding:0;margin:14px 0}
.kody-zapasowe code{display:block;padding:8px;text-align:center;border-radius:8px;
  background:rgba(120,160,255,.12);font-size:15px;letter-spacing:.06em}
.ostrzezenie{color:#ffc978}

/* Strefa nieodwracalna — czerwień pojawia się na stronie WYŁĄCZNIE tutaj, żeby nie
   spowszedniała. Gdyby ostrzegawcze kolory były wszędzie, nie znaczyłyby nic. */
.strefa-niebezpieczna{border-color:rgba(255,120,120,.35)}
.strefa-niebezpieczna h3{color:#ff9c9c}
.przycisk.ostrzegawczy{
  background:rgba(255,90,90,.16);border-color:rgba(255,120,120,.5);color:#ffbdbd}
.przycisk.ostrzegawczy:hover{background:rgba(255,90,90,.26)}
.ostrzezenie-blok{margin-top:16px;padding:18px;border-radius:12px;
  background:rgba(255,90,90,.08);border:1px solid rgba(255,120,120,.32)}
.ostrzezenie-blok.drugie{background:rgba(255,90,90,.14);border-color:rgba(255,120,120,.5)}
.ostrzezenie-blok h4{margin:0 0 10px;color:#ff9c9c;font-size:17px}
.ostrzezenie-blok .mocne{font-weight:600;color:#ffd0d0}
.co-zniknie{margin:12px 0;padding-left:20px;line-height:1.8}
.rzad{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.formularz.w-linii{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}

.wynik.dobrze{color:#6fe0a8}
.wynik.info{color:#9ec8ff}
.wynik.blad{color:#ff9c9c}

@media (max-width:620px){
  .konto-zakladka{flex:1 1 auto;justify-content:center}
  .dwa-skladniki{flex-direction:column}
}

/* ═══ EKRAN AKTYWACJI ═════════════════════════════════════════════════════════════════
   Pole na kod jest krótkie i przepisywane z wiadomości — dajemy mu wyraźny, rozstrzelony
   krój, żeby pomyłka przy przepisywaniu była widoczna od razu. */
.pole-kod-akt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;letter-spacing:.28em;text-align:center;text-transform:uppercase}

/* ⚠ BEZ TEJ REGUŁY ATRYBUT `hidden` NIE DZIAŁA NA NICZYM STYLOWANYM.
   Reguła przeglądarki `[hidden]{display:none}` przegrywa z KAŻDYM selektorem klasy,
   który ustawia `display` — a `.przycisk` ustawia `inline-block`. Skutek: `x.hidden = true`
   w skrypcie wykonuje się bez błędu i NIE UKRYWA NICZEGO.
   Złapane na przycisku „Włącz 2FA", który zostawał nad kodem QR: jego ponowne naciśnięcie
   wystawia nowy sekret i unieważnia ten właśnie zeskanowany. W skryptach witryny jest
   szesnaście miejsc opartych na tym atrybucie — wszystkie zależały od tej jednej linijki.
   Pilnuje jej `TestAtrybutHiddenFaktycznieUkrywa`. */
[hidden] { display: none !important; }

/* Poziom wsparcia przy modelu inwertera. Klient decydujący o zakupie musi widzieć różnicę
   między mapą sprawdzoną na naszym sprzęcie a mapą z dokumentacji albo od społeczności —
   inaczej trzynaście nazw wygląda jak trzynaście równorzędnych obietnic. */
.inv-poziom{font-size:.78em;color:var(--drobne,#8fa8c8);white-space:nowrap}
.lista-ptaszki li.inv-sprawdzony .inv-poziom{color:#7ad39a}


/* ── LISTA LICENCJI KLIENTA ────────────────────────────────────────────────────────────
   Klient widzi WSZYSTKIE swoje licencje: rodzaj, datę końca i stan. Bez wyboru obowiązuje
   najnowsza; wiersz obowiązującej jest wyróżniony, a przy pozostałych stoi przycisk. */
.licencje{margin-top:12px}
.licencje h4{margin:0 0 6px;font-size:13px}
.tabela-licencji{width:100%;border-collapse:collapse;font-size:13px}
.tabela-licencji td{padding:6px 8px;border-top:1px solid var(--linia)}
.tabela-licencji tr.czynna td{background:rgba(80,200,140,.08)}
.tabela-licencji td:first-child{white-space:nowrap}
.plakietka{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;
  border:1px solid var(--linia)}
.plakietka.aktywna,.plakietka.bezterminowa{color:#7ad9a8;border-color:rgba(122,217,168,.4)}
.plakietka.konczy_sie{color:#ffc46b;border-color:rgba(255,196,107,.4)}
.plakietka.wygasla,.plakietka.cofnieta{color:#ff9b9b;border-color:rgba(255,155,155,.4)}
.plakietka.zastapiona{color:#9fb0c9}
@media (max-width:640px){
  .tabela-licencji,.tabela-licencji tbody,.tabela-licencji tr,.tabela-licencji td{display:block}
  .tabela-licencji tr{border-top:1px solid var(--linia);padding:6px 0}
  .tabela-licencji td{border:0;padding:2px 0}
}


/* Karta wsparcia — jedyna droga do licencji wieczystej w fazie otwartej. */
.wsparcie{margin-top:14px;padding:12px 14px;border:1px solid rgba(122,217,168,.35);
  border-radius:12px;background:rgba(122,217,168,.06)}
.wsparcie h4{margin:0 0 4px;font-size:13px;color:#7ad9a8}
.wsparcie p.drobne{margin:0 0 10px}