/* NoMachine demo - uklad wg szablonu Lattis, kolory z logo NoMachine */
:root {
  --ink: #111113;
  --ink-2: #3b3b40;
  --muted: #6b6b72;
  --line: #e6e4e1;
  --bg: #ffffff;
  --soft: #f4f3f2;
  --soft-2: #ecebe9;
  --red: #e00000;
  --red-ink: #c40008;
  --red-soft: #fdecea;
  --dark: #0f0f11;
  --dark-2: #18181b;
  --dark-line: #2a2a2e;
  --radius: 18px;
  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 24px);
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.red { color: var(--red); }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
.label { font-size: 13px; color: var(--muted); }

/* ramka z pionowymi liniami jak w Lattis */
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; position: relative; }
.rama { border-inline: 1px solid var(--line); }
.sekcja { border-top: 1px solid var(--line); }
.sekcja > .wrap { padding-block: clamp(64px, 9vw, 112px); }
.wnetrze { padding-inline: clamp(0px, 2vw, 24px); }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font: 500 15px/1 var(--font); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--czarny { background: var(--ink); color: #fff; }
.btn--czarny:hover { background: #26262a; }
.btn--czerwony { background: var(--red); color: #fff; }
.btn--czerwony:hover { background: var(--red-ink); }
.btn--jasny { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.btn--jasny:hover { border-color: #cfccc8; }
.btn--maly { height: 36px; padding: 0 16px; font-size: 13.5px; }
.btn--ciemny-obrys { background: transparent; color: #fff; border-color: #3a3a40; }
.btn--ciemny-obrys:hover { border-color: #6a6a72; }

/* ---------- naglowek ---------- */
.gora { position: sticky; top: 0; z-index: 50; padding: 10px var(--pad); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gora__pill {
  max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 6px 6px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -16px rgba(0,0,0,.12);
}
.marka { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.marka img.znak { width: 22px; height: 22px; border-radius: 4px; }
.marka img.slowo { height: 13px; width: auto; }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { font-size: 14px; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); }
.menu a:hover, .menu a[aria-current="page"] { background: var(--soft); color: var(--ink); }
.gora__akcje { display: flex; gap: 6px; margin-left: 8px; }
.burger { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--ink); transform: translateX(-50%); transition: .25s; content: ""; }
.burger span { top: 50%; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.otwarte .burger span { background: transparent; }
.otwarte .burger span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.otwarte .burger span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

.gora__panel { display: contents; }
.menu .mono { display: none; }
.menu-tlo { display: none; }

@media (max-width: 900px) {
  .burger { display: block; }
  .gora__pill { position: relative; }
  .gora__panel {
    display: block; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 8px 8px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 30px 60px -24px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top center;
    transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s;
    max-height: calc(100dvh - 96px); overflow-y: auto;
  }
  .otwarte .gora__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .menu { display: flex; flex-direction: column; margin: 0; gap: 0; }
  .menu a {
    display: flex; align-items: center; gap: 14px; font-size: 21px; letter-spacing: -0.02em; color: var(--ink);
    padding: 15px 14px; border-radius: 14px; position: relative;
    opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), background .2s;
  }
  .menu a + a { border-top: 1px solid var(--line); border-radius: 0; }
  .menu a::after { content: "→"; margin-left: auto; font-size: 16px; color: var(--muted); transition: transform .2s, color .2s; }
  .menu a:hover::after, .menu a[aria-current="page"]::after { color: var(--red); transform: translateX(3px); }
  .menu a[aria-current="page"] { background: transparent; color: var(--red-ink); }
  .menu .mono { display: inline; color: var(--red-ink); font-size: 10.5px; letter-spacing: .08em; min-width: 18px; }
  .otwarte .menu a { opacity: 1; transform: none; }
  .otwarte .menu a:nth-child(1) { transition-delay: .06s; }
  .otwarte .menu a:nth-child(2) { transition-delay: .1s; }
  .otwarte .menu a:nth-child(3) { transition-delay: .14s; }
  .otwarte .menu a:nth-child(4) { transition-delay: .18s; }
  .otwarte .menu a:nth-child(5) { transition-delay: .22s; }
  .gora__akcje { display: flex; gap: 8px; margin: 8px 6px 2px; opacity: 0; transition: opacity .3s ease .2s; }
  .otwarte .gora__akcje { opacity: 1; }
  .gora__akcje .btn { flex: 1; height: 48px; font-size: 15px; }
  .menu-tlo { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15,15,17,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  html.menu-otwarte .menu-tlo { opacity: 1; pointer-events: auto; }
  html.menu-otwarte body { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .gora__panel, .menu a, .gora__akcje { transition: none; transform: none; }
}

/* ---------- hero ---------- */
.hero { text-align: center; padding-top: clamp(56px, 8vw, 96px); }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -0.04em; line-height: 1.02; }
.hero__lead { max-width: 560px; margin: 22px auto 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-2); }
.hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero__notka { margin-top: 14px; font-size: 13px; color: var(--muted); }
.hero__notka a { text-decoration: underline; text-underline-offset: 3px; }

.hero-kafle { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 12px; align-items: end; margin-top: clamp(48px, 7vw, 72px); }
.kafel-m { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.kafel-m > img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-kafle .boczny { aspect-ratio: 4 / 4.9; }
.hero-kafle .srodek { aspect-ratio: 4 / 4.4; background: var(--soft-2); display: grid; place-items: center; }

.karta-ui {
  position: relative; background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -18px rgba(0,0,0,.25); text-align: left;
}
.karta-stat { position: absolute; left: 14px; bottom: 14px; padding: 14px 16px; min-width: 190px; }
.karta-stat .wart { font-size: 30px; letter-spacing: -0.03em; margin-top: 6px; display: flex; align-items: baseline; gap: 10px; }
.karta-stat .wart small { font: 11px var(--mono); color: var(--red-ink); letter-spacing: .04em; }

.okno { width: 82%; padding: 0; overflow: hidden; }
.okno__pasek { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.okno__pasek i { width: 8px; height: 8px; border-radius: 50%; background: #e3e1de; display: inline-block; }
.okno__pasek i:first-child { background: var(--red); }
.okno__pasek span { margin-left: 8px; font-family: var(--mono); font-size: 11px; }
.okno__ekran { aspect-ratio: 16 / 10; position: relative; background: #f3efe9; overflow: hidden; }
.okno__ekran img { width: 100%; height: 100%; object-fit: cover; }
.okno__ikony { position: absolute; left: 10px; top: 10px; display: grid; gap: 8px; }
.okno__ikony b { width: 22px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.85); display: block; }
.okno__app { position: absolute; right: 9%; top: 16%; width: 58%; height: 60%; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 8px 20px -10px rgba(0,0,0,.3); padding: 10px; display: grid; gap: 6px; align-content: start; }
.okno__app b { height: 6px; border-radius: 3px; background: #e9e6e2; display: block; }
.okno__app b:nth-child(1) { width: 40%; background: #d8d4cf; }
.okno__app b:nth-child(3) { width: 80%; }
.okno__app b:nth-child(4) { width: 65%; }
.okno__app b:nth-child(5) { width: 72%; }
.okno__dock { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 5px 7px; background: rgba(255,255,255,.7); border-radius: 8px; }
.okno__dock b { width: 12px; height: 12px; border-radius: 3px; background: #d7d2cc; display: block; }
.okno__dock b:first-child { background: var(--red); }

.pigulka-status {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 8px 14px 8px 12px;
  font-size: 13px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -14px rgba(0,0,0,.3);
}
.pigulka-status .fala { display: flex; gap: 2px; align-items: center; }
.pigulka-status .fala i { width: 3px; border-radius: 2px; background: var(--red); display: block; animation: fala 1.2s ease-in-out infinite; }
.pigulka-status .fala i:nth-child(1) { height: 8px; }
.pigulka-status .fala i:nth-child(2) { height: 14px; animation-delay: .15s; }
.pigulka-status .fala i:nth-child(3) { height: 10px; animation-delay: .3s; }
.pigulka-status .fala i:nth-child(4) { height: 16px; animation-delay: .45s; }
.pigulka-status .fala i:nth-child(5) { height: 9px; animation-delay: .6s; }
.pigulka-status .czas { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@keyframes fala { 50% { transform: scaleY(.45); } }

.karta-lista { position: absolute; right: 14px; left: 14px; top: 50%; transform: translateY(-50%); padding: 14px; }
.karta-lista__gora { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.karta-lista__gora .mono { color: var(--red-ink); font-size: 10px; }
.wiersz-check { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--soft); font-size: 13px; }
.wiersz-check + .wiersz-check { margin-top: 6px; }
.wiersz-check .box { width: 14px; height: 14px; border-radius: 4px; background: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.wiersz-check .box svg { width: 9px; height: 9px; }
.wiersz-check .box--pusty { background: #fff; border: 1.5px solid #cfccc8; }
.wiersz-check .w { margin-left: auto; font: 11px var(--mono); color: var(--muted); }

/* ---------- pas systemow ---------- */
.pas-logo { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(48px, 7vw, 64px); }
.pas-logo .wrap { display: grid; grid-template-columns: 1.4fr repeat(6, 1fr); }
.pas-logo .opis { padding: 22px 16px; font-size: 13px; color: var(--muted); display: flex; align-items: center; }
.pas-logo .poz { border-left: 1px solid var(--line); padding: 22px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.pas-logo .poz svg { width: 18px; height: 18px; color: var(--ink); }

/* ---------- dlaczego (duzy tekst) ---------- */
.dlaczego .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.dlaczego p.duzy { font-size: clamp(24px, 3vw, 34px); line-height: 1.22; letter-spacing: -0.02em; }
.dlaczego p.duzy .szary { color: #8d8d94; }

/* ---------- naglowek sekcji ---------- */
.sek-glowa { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(32px, 5vw, 48px); flex-wrap: wrap; }
.sek-glowa h2, .h2 { font-size: clamp(32px, 4.2vw, 48px); }
.sek-glowa p { max-width: 360px; color: var(--ink-2); font-size: 15px; }

/* ---------- konsola ---------- */
.konsola { border: 1px solid var(--line); border-radius: 22px; background: var(--soft); overflow: hidden; }
.konsola__scena { display: grid; grid-template-columns: 2.1fr 1fr; gap: 16px; padding: 22px 22px 0; }
.app { background: #fff; border-radius: 14px 14px 0 0; border: 1px solid rgba(0,0,0,.07); border-bottom: 0; display: grid; grid-template-columns: 170px 1fr; min-height: 330px; overflow: hidden; }
.app__bok { border-right: 1px solid var(--line); padding: 14px 10px; }
.app__bok .marka { padding: 0 6px 12px; }
.app__bok .marka img.slowo { height: 10px; }
.app__bok .marka img.znak { width: 18px; height: 18px; }
.app__konto { font-size: 11px; background: var(--soft); border-radius: 8px; padding: 6px 8px; margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.app__konto i { width: 6px; height: 6px; border-radius: 50%; background: #20a35a; display: block; }
.app__nav a { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 8px; border-radius: 7px; color: var(--ink-2); }
.app__nav a.akt { background: var(--soft); color: var(--ink); font-weight: 500; }
.app__nav svg { width: 13px; height: 13px; }
.app__glowna { padding: 16px; }
.app__tytul { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.app__tytul h4 { font-size: 16px; }
.app__tytul .pig { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.metryki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.metryka { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.metryka .label { font-size: 11px; }
.metryka b { display: block; font-size: 16px; font-weight: 500; margin-top: 4px; }
.metryka b small { font-size: 10px; color: var(--red-ink); font-weight: 400; margin-left: 4px; }
.tabela { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12px; }
.tabela .r { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; padding: 9px 12px; gap: 8px; align-items: center; }
.tabela .r + .r { border-top: 1px solid var(--line); }
.tabela .r.nag { color: var(--muted); font-size: 11px; background: #fbfaf9; }
.tabela .mono { text-transform: none; letter-spacing: 0; font-size: 11px; }
.kropka { display: inline-flex; align-items: center; gap: 6px; }
.kropka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #20a35a; }
.kropka--czer::before { background: var(--red); }
.kropka--szara::before { background: #b9b6b1; }

.prosba { background: #fff; border-radius: 14px 14px 0 0; border: 1px solid rgba(0,0,0,.07); border-bottom: 0; padding: 16px; align-self: end; }
.prosba__gora { display: flex; justify-content: space-between; align-items: start; }
.prosba__gora h4 { font-size: 14px; }
.prosba__gora p { font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.prosba__kroki { margin-top: 12px; display: grid; gap: 6px; }
.prosba__kroki div { display: flex; justify-content: space-between; align-items: center; font: 12px var(--mono); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.prosba__kroki div span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 8px; vertical-align: 1px; }
.prosba__kroki div.czeka span:first-child::before { background: var(--red); }
.prosba__kroki div .w { color: var(--muted); font-size: 11px; }
.prosba__kroki div.czeka .w { color: var(--red-ink); }
.prosba__akcja { margin-top: 12px; background: var(--red-soft); border-radius: 10px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prosba__akcja b { font-size: 13px; font-weight: 500; display: block; }
.prosba__akcja span { font-size: 11px; color: var(--ink-2); }

.konsola__dol { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: #fff; }
.konsola__dol a { padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.konsola__dol a + a { border-left: 1px solid var(--line); }
.konsola__dol a:hover h3 { color: var(--red-ink); }
.ikona { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ikona svg { width: 16px; height: 16px; color: var(--ink); }
.ikona svg .a { color: var(--red); }
.konsola__dol h3 { font-size: 15px; transition: color .2s; }
.konsola__dol p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- produkt: tekst + mozaiki ---------- */
.produkt { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.produkt--odwr { grid-template-columns: 1.45fr 1fr; }
.produkt--odwr .produkt__tekst { order: 2; }
.produkt__tekst h2 { font-size: clamp(32px, 4vw, 46px); margin-top: 14px; }
.produkt__tekst > p { margin-top: 18px; color: var(--ink-2); font-size: 16.5px; max-width: 440px; }
.produkt__tekst .btn { margin-top: 26px; }
.cechy { margin-top: 30px; border-top: 1px solid var(--line); }
.cecha { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cecha h3 { font-size: 15px; }
.cecha p { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.cecha--fakt .ikona { background: var(--red-soft); border-color: transparent; }
.produkt__media { display: grid; gap: 12px; }
.mkafel { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: var(--soft); }
.mkafel > img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkafel .podpis { position: relative; max-width: 300px; }
.mkafel .podpis .label { color: var(--ink-2); }
.mkafel .podpis p { font-size: 15px; margin-top: 4px; }
.mkafel .karta-ui { position: relative; margin: 0 auto 28px; width: min(320px, 92%); padding: 14px; }
.pasek-wiersz { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 10px; }
.pasek-wiersz:first-of-type { margin-top: 0; }
.pasek { height: 4px; border-radius: 4px; background: var(--soft-2); margin-top: 6px; overflow: hidden; }
.pasek i { display: block; height: 100%; background: var(--red); border-radius: 4px; }

/* siatka pikseli (rysunek z kwadratow) */
.piksele { position: relative; margin: 0 auto 26px; display: grid; gap: 4px; grid-template-columns: repeat(var(--k, 18), 8px); }
.piksele i { width: 8px; height: 8px; background: transparent; display: block; }
.piksele i.c { background: var(--ink); }
.piksele i.r { background: var(--red); }
.piksele i.s { background: #d9d6d2; }
.piksele i.p { background: #f2b8ad; }

/* ---------- ciemna sekcja ---------- */
.ciemna { background: var(--dark); color: #f3f2f0; border-top: 0; }
.ciemna .rama { border-color: var(--dark-line); }
.ciemna .red { color: #ff5a4a; }
.ciemna .sek-glowa { margin-bottom: 0; }
.ciemna__gora { padding-block: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 56px); border-bottom: 1px solid var(--dark-line); }
.ciemna__srodek { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; padding-block: 28px clamp(56px, 7vw, 80px); }
.terminal { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 14px; overflow: hidden; font-family: var(--mono); font-size: 13px; }
.terminal__zakladki { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--dark-line); align-items: center; }
.terminal__zakladki button { background: none; border: 0; color: #9a9aa2; font: 12px var(--font); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.terminal__zakladki button[aria-selected="true"] { background: #2a2a2f; color: #fff; }
.terminal__zakladki .plik { margin-left: auto; color: #77777f; font-size: 11px; }
.terminal pre { margin: 0; padding: 18px 18px 22px; overflow-x: auto; line-height: 1.75; color: #d9d8d5; }
.terminal .n { color: #55555c; user-select: none; display: inline-block; width: 22px; }
.terminal .p { color: #ff6b5c; }
.terminal .k { color: #9ec1ff; }
.terminal .g { color: #7fd69b; }
.terminal .m { color: #8a8a92; }
.terminal [hidden] { display: none; }
.api-lista a { display: flex; gap: 14px; align-items: center; padding: 16px 8px; border-bottom: 1px solid var(--dark-line); }
.api-lista a:first-child { border-top: 1px solid var(--dark-line); }
.api-lista .ikona { background: #1c1c20; border-color: var(--dark-line); }
.api-lista .ikona svg { color: #fff; }
.api-lista h3 { font-size: 15px; }
.api-lista p { font-size: 13px; color: #a3a3ab; margin-top: 2px; }
.api-lista .strz { margin-left: auto; color: #8a8a92; }
.integracje { border: 1px solid var(--dark-line); border-radius: 14px; padding: 16px; margin-top: 16px; }
.integracje > p { font-size: 13.5px; margin-bottom: 12px; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dark-line); background: #18181c; border-radius: 999px; padding: 7px 12px; font-size: 12.5px; }
.chip::before { content: ""; width: 6px; height: 6px; background: #ff5a4a; display: block; }
.liczby { border-top: 1px solid var(--dark-line); }
.liczby .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.liczba { padding: 36px 16px 40px; }
.liczba + .liczba { border-left: 1px solid var(--dark-line); }
.liczba b { display: block; font-size: clamp(40px, 5.4vw, 64px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.liczba span { display: block; margin-top: 12px; font-size: 13.5px; color: #a3a3ab; }

/* ---------- historie / fakty ---------- */
.historie { display: grid; grid-template-columns: 1.85fr 1fr; gap: 12px; }
.historia-duza { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 380px; display: flex; align-items: flex-end; padding: 18px; }
.historia-duza img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia-duza .karta-ui { padding: 22px; max-width: 470px; width: 100%; }
.historia-duza .karta-ui .gora-k { font-size: 13px; display: flex; gap: 8px; }
.historia-duza .karta-ui .gora-k span { color: var(--muted); }
.historia-duza blockquote { margin: 14px 0 18px; font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.015em; line-height: 1.3; }
.trzy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trzy b { display: block; color: var(--red-ink); font-weight: 500; font-size: 17px; }
.trzy span { font-size: 12px; color: var(--muted); }
.historie__bok { display: grid; gap: 12px; }
.historia-mala { border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; }
.historia-mala .gora-k { display: flex; justify-content: space-between; font-size: 13px; }
.historia-mala .gora-k .mono { color: var(--muted); font-size: 10px; }
.historia-mala b { font-size: clamp(42px, 5vw, 58px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; margin-top: 22px; display: block; }
.historia-mala p { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.historia-mala a { margin-top: auto; padding-top: 18px; font-size: 13px; }
.historia-mala a:hover { color: var(--red-ink); }

/* ---------- bezpieczenstwo ---------- */
.bezp { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.bezp__tekst p { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 340px; }
.odznaki { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; }
.odznaka { font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 7px; }
.odznaka::before { content: ""; width: 6px; height: 6px; background: var(--red); display: block; }
.siatka-bezp { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.siatka-bezp > div { display: flex; gap: 14px; padding: 22px 20px; }
.siatka-bezp > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.siatka-bezp h3 { font-size: 15px; }
.siatka-bezp p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ---------- cennik ---------- */
.cennik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan { border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; }
.plan--wyr { background: #fff; border: 1.5px solid var(--ink); }
.plan__gora { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 500; }
.plan__tag { font-size: 11.5px; font-weight: 400; background: var(--red-soft); color: var(--red-ink); padding: 4px 10px; border-radius: 999px; }
.plan__cena { margin-top: 26px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__cena b { font-size: clamp(40px, 4.8vw, 58px); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.plan__cena span { font-size: 13px; color: var(--muted); }
.plan__dla { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan ul { margin: 20px 0 26px; display: grid; gap: 10px; font-size: 13.5px; }
.plan li { display: flex; gap: 10px; align-items: baseline; }
.plan li::before { content: ""; width: 6px; height: 6px; background: var(--red); flex-shrink: 0; transform: translateY(-2px); }
.plan .btn { margin-top: auto; width: 100%; }
.przypis { margin-top: 22px; font-size: 13px; color: var(--muted); }
.przypis a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nowosci ---------- */
.nowosci { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px); }
.lista-zmian a { display: grid; grid-template-columns: 74px 1fr 20px; gap: 12px; padding: 20px 8px; border-bottom: 1px solid var(--line); align-items: center; }
.lista-zmian a:first-child { border-top: 1px solid var(--line); }
.lista-zmian a:hover h3 { color: var(--red-ink); }
.lista-zmian .data { font: 11px var(--mono); color: var(--muted); letter-spacing: .05em; }
.lista-zmian .eyebrow { font-size: 10px; }
.lista-zmian h3 { font-size: 15px; margin-top: 4px; transition: color .2s; }
.lista-zmian .strz { color: var(--muted); }
.wpisy { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpis { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.wpis img { aspect-ratio: 1 / .9; object-fit: cover; width: 100%; }
.wpis div { padding: 14px; }
.wpis .mono { color: var(--muted); font-size: 10px; }
.wpis h3 { font-size: 14px; margin-top: 8px; line-height: 1.35; letter-spacing: -0.01em; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(28px, 4vw, 56px); }
.faq__tekst p { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 280px; }
.faq__tekst .btn { margin-top: 22px; }
.pytania details { border-bottom: 1px solid var(--line); }
.pytania details:first-child { border-top: 1px solid var(--line); }
.pytania summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 15.5px; font-weight: 500; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-weight: 400; flex-shrink: 0; transition: transform .25s; }
.pytania details[open] summary::after { transform: rotate(45deg); }
.pytania details p { padding: 0 48px 22px 0; color: var(--ink-2); font-size: 14.5px; }

/* ---------- pas CTA ---------- */
.cta-pas { position: relative; overflow: hidden; min-height: 400px; display: grid; place-items: center; text-align: center; color: #fff; padding: 72px var(--pad); }
.cta-pas img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-pas .tresc { position: relative; max-width: 620px; }
.cta-pas h2 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -0.035em; text-shadow: 0 2px 30px rgba(120,0,0,.35); }
.cta-pas p { margin-top: 16px; font-size: 16.5px; text-shadow: 0 1px 14px rgba(120,0,0,.5); }
.cta-pas .hero__cta { margin-top: 26px; }
.cta-pas .btn--jasny { border-color: transparent; }
.cta-pas .btn--ciemny-obrys { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }

/* ---------- stopka ---------- */
.stopka { padding-top: clamp(56px, 7vw, 80px); }
.stopka__siatka { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 24px; }
.stopka__marka p { margin-top: 14px; color: var(--ink-2); font-size: 14.5px; max-width: 260px; }
.stopka__news { margin-top: 22px; }
.stopka__news .mono { color: var(--muted); font-size: 10.5px; }
.stopka__news form { margin-top: 10px; display: flex; gap: 6px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 5px; max-width: 320px; }
.stopka__news input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 10px; font: 14px var(--font); color: var(--ink); }
.stopka__news input:focus { outline: none; }
.stopka h4 { font: 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.stopka ul { display: grid; gap: 9px; font-size: 14px; }
.stopka ul a:hover { color: var(--red-ink); }
.stopka__dol { margin-top: 52px; padding: 22px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 11px var(--mono); color: var(--muted); }
.tworcy-wiersz { max-width: none; width: 100%; text-align: center; border-top: 1px solid var(--line); padding: 18px 0 26px; font-size: 13px; color: var(--muted); }
.tworcy-wiersz a { display: inline-flex; align-items: center; gap: 8px; }
.tworcy-wiersz a:hover b { color: var(--red-ink); }
.tworcy-wiersz b { color: var(--ink); font-weight: 500; }
.tworcy-wiersz img { width: 20px; height: 20px; }

/* ---------- podstrony ---------- */
.okruszki { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.okruszki a:hover { color: var(--red-ink); }
.hero--podstr { padding-bottom: clamp(48px, 6vw, 72px); }
.hero--podstr .okruszki { margin-bottom: 22px; }
.rodziny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rodzina { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.rodzina__media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.rodzina__media img { width: 100%; height: 100%; object-fit: cover; }
.rodzina__media .num { position: absolute; left: 14px; top: 12px; font: 11px var(--mono); color: var(--ink); background: rgba(255,255,255,.8); border-radius: 999px; padding: 4px 9px; }
.rodzina__tresc { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.rodzina h3 { font-size: 22px; }
.rodzina p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.rodzina ul { margin: 18px 0 22px; border-top: 1px solid var(--line); }
.rodzina li { border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.rodzina li span { color: var(--muted); font-size: 12px; text-align: right; }
.rodzina .btn { margin-top: auto; align-self: flex-start; }
.siatka-cech { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.siatka-cech > div { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.siatka-cech > div:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
.siatka-cech > div:nth-child(n+4) { border-top: 1px solid var(--line); }
.siatka-cech h3 { font-size: 15.5px; }
.siatka-cech p { font-size: 13.5px; color: var(--ink-2); }
.kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: k; }
.krok { border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); padding: 24px; }
.krok::before { counter-increment: k; content: "0" counter(k); font: 12px var(--mono); color: var(--red-ink); display: block; margin-bottom: 40px; }
.krok h3 { font-size: 19px; }
.krok p { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.machine-id { font: 500 15px var(--mono); background: #fff; border: 1px dashed #d4d0cb; border-radius: 10px; padding: 10px 12px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.machine-id span { color: var(--muted); font-size: 11px; }

.przelacznik { display: inline-flex; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; }
.przelacznik button { border: 0; background: transparent; font: 500 13.5px var(--font); padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.przelacznik button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.plany-net { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.plany-net .plan { padding: 20px; }
.plany-net .plan__cena b { font-size: clamp(32px, 3vw, 40px); }
.plany-net .polacz { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.plany-net .polacz b { font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: -0.03em; margin-right: 4px; }
.plany-net .plan__dla { border: 0; padding-bottom: 14px; }

/* ---------- animacja wejscia ---------- */
.wjazd { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.wjazd.widac { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wjazd { opacity: 1; transform: none; transition: none; }
  .pigulka-status .fala i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsywnosc ---------- */
@media (max-width: 1080px) {
  .plany-net { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .hero-kafle { grid-template-columns: 1fr 1fr; }
  .hero-kafle .srodek { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 11; }
  .pas-logo .wrap { grid-template-columns: repeat(3, 1fr); }
  .pas-logo .opis { grid-column: 1 / -1; justify-content: center; border-bottom: 1px solid var(--line); }
  .pas-logo .poz:nth-child(2), .pas-logo .poz:nth-child(5) { border-left: 0; }
  .pas-logo .poz:nth-child(n+5) { border-top: 1px solid var(--line); }
  .dlaczego .wrap { grid-template-columns: 1fr; }
  .konsola__scena { grid-template-columns: 1fr; }
  .konsola .prosba { display: none; }
  .produkt, .produkt--odwr { grid-template-columns: 1fr; }
  .produkt--odwr .produkt__tekst { order: 0; }
  .ciemna__srodek { grid-template-columns: 1fr; }
  .historie { grid-template-columns: 1fr; }
  .historie__bok { grid-template-columns: 1fr 1fr; }
  .bezp, .faq, .nowosci { grid-template-columns: 1fr; }
  .cennik { grid-template-columns: 1fr; max-width: 520px; }
  .stopka__siatka { grid-template-columns: repeat(2, 1fr); }
  .stopka__marka { grid-column: 1 / -1; }
  .rodziny { grid-template-columns: 1fr; max-width: 560px; }
  .siatka-cech { grid-template-columns: 1fr 1fr; }
  .siatka-cech > div:not(:nth-child(3n+1)) { border-left: 0; }
  .siatka-cech > div:nth-child(even) { border-left: 1px solid var(--line); }
  .siatka-cech > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kroki { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .rama { border-inline: 0; }
  .app { grid-template-columns: 1fr; }
  .app__bok { display: none; }
  .metryki { grid-template-columns: 1fr 1fr; }
  .tabela .r { grid-template-columns: 1.3fr 1fr .9fr; }
  .tabela .r > :nth-child(2) { display: none; }
  .konsola__scena { padding: 14px 14px 0; }
  .konsola__dol { grid-template-columns: 1fr; }
  .konsola__dol a + a { border-left: 0; border-top: 1px solid var(--line); }
  .liczby .wrap { grid-template-columns: 1fr; }
  .liczba + .liczba { border-left: 0; border-top: 1px solid var(--dark-line); }
  .historie__bok { grid-template-columns: 1fr; }
  .trzy { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .siatka-bezp { grid-template-columns: 1fr; }
  .siatka-bezp > div:nth-child(n+2) { border-top: 1px solid var(--line); }
  .wpisy { grid-template-columns: 1fr 1fr; }
  .siatka-cech { grid-template-columns: 1fr; }
  .siatka-cech > div:nth-child(even) { border-left: 0; }
  .siatka-cech > div:nth-child(n+2) { border-top: 1px solid var(--line); }
  .plany-net { grid-template-columns: 1fr; }
  .lista-zmian a { grid-template-columns: 62px 1fr 16px; }
  .pytania details p { padding-right: 0; }
}
@media (max-width: 520px) {
  .hero-kafle { grid-template-columns: 1fr; }
  .hero-kafle .boczny { aspect-ratio: 4 / 3.6; }
  .karta-lista { top: auto; transform: none; bottom: 14px; }
  .stopka__siatka { grid-template-columns: 1fr 1fr; }
  .wpisy { grid-template-columns: 1fr; }
  .mkafel { min-height: 260px; }
}

/* ---------- poprawki po pierwszym renderze ---------- */
.prosba__akcja .btn { color: #fff; font-size: 12.5px; }
.mkafel .podpis { background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ciemna > .wrap { padding-block: 0; }
.ciemna__srodek { align-items: start; padding-top: clamp(32px, 4vw, 48px); }
.plany-net .plan__cena { margin-top: auto; }
.plany-net .plan__dla { margin-bottom: 18px; }
.hero-kafle--dwa { grid-template-columns: 1fr 1fr; }
.hero-kafle--dwa .boczny { aspect-ratio: 16 / 11; }
@media (max-width: 960px) { .hero-kafle--dwa .boczny { aspect-ratio: 4 / 3.6; } }
@media (max-width: 700px) {
  .hero-kafle--dwa { grid-template-columns: 1fr; }
  .terminal__zakladki .plik { display: none; }
  .liczba { padding: 26px 16px 28px; }
}


/* ---------- prawdziwe ekrany programu ---------- */
.ui-foto { margin: 0; padding: 10px; background: #fff; border-radius: 14px; position: relative; }
.ui-foto img { width: 100%; height: auto; display: block; border-radius: 6px; }
.ui-foto figcaption { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 10px 4px 2px; color: var(--ink-2); }
.ui-foto figcaption .mono { color: var(--red-ink); font-size: 10px; }
.ui-foto--hero { width: min(86%, 440px); }
.kafel-m.boczny { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; }
.kafel-m .ui-foto--kafel, .mkafel .ui-foto--kafel { width: min(92%, 400px); }
.kafel-m .podpis { position: relative; align-self: stretch; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 12px; padding: 12px 14px; }
.kafel-m .podpis p { font-size: 14.5px; margin-top: 3px; }
.mkafel { justify-content: center; gap: 18px; }
.mkafel .ui-foto--kafel { margin: 0 auto; }
.mkafel .podpis { align-self: flex-start; }
.konsola__scena--foto { grid-template-columns: 1.35fr 1fr; padding: 22px; align-items: stretch; }
.ui-foto--duze { display: flex; flex-direction: column; justify-content: center; }
.ui-foto--duze img { max-height: 440px; object-fit: contain; }
.konsola__bok { display: grid; gap: 16px; align-content: center; }
.rodzina__media { background: var(--soft); display: grid; place-items: center; }
.rodzina__media img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-foto--rodzina { width: 74%; padding: 7px; box-shadow: 0 14px 30px -16px rgba(0,0,0,.35); }
.rodzina__media .num { z-index: 2; }
.fakt-duzy { margin: 14px 0 18px; font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.015em; line-height: 1.3; }
.stopka__news .btn { margin-top: 10px; }

/* ---------- karuzele na telefonie ---------- */
.karuzela-nav { display: none; }
@media (max-width: 700px) {
  [data-karuzela] {
    --kk: 84vw;
    display: flex !important; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; position: relative;
    width: 100vw; margin-inline: calc(50% - 50vw) !important;
    padding: 6px calc((100vw - var(--kk)) / 2) 16px !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; max-width: none !important;
  }
  [data-karuzela]::-webkit-scrollbar { display: none; }
  [data-karuzela] > * { flex: 0 0 var(--kk); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  [data-karuzela] .wjazd, [data-karuzela] > .wjazd { opacity: 1; transform: none; }
  .karuzela-nav { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
  .karuzela-nav button {
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: opacity .2s, background .2s, border-color .2s;
  }
  .karuzela-nav button:not(:disabled):active { background: var(--soft); }
  .karuzela-nav button:disabled { opacity: .35; cursor: default; }
  .karuzela-nav svg { width: 18px; height: 18px; }

  /* pojedyncze karty zamiast siatki z liniami */
  .siatka-cech[data-karuzela] > div, .siatka-bezp[data-karuzela] > div { border: 1px solid var(--line) !important; border-radius: 18px; background: #fff; }
  .siatka-bezp[data-karuzela] > div { background: var(--soft); }
  .hero-kafle[data-karuzela] > * { aspect-ratio: 4 / 4.4 !important; }
  .historie[data-karuzela] .historie__bok { display: contents; }
  .historie[data-karuzela] .historie__bok > * { flex: 0 0 var(--kk); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .historie[data-karuzela] .historia-duza { min-height: 0; }
  .historie[data-karuzela] .historia-duza .karta-ui { padding: 18px; }
  .cennik[data-karuzela] { --kk: 86vw; }
  .plany-net[data-karuzela] { --kk: 74vw; }
  .wpisy[data-karuzela] { --kk: 72vw; }
  .produkt__media[data-karuzela] .mkafel { min-height: 0; }
  .kroki[data-karuzela] .krok { display: flex; flex-direction: column; }
}

@media (max-width: 960px) { .konsola__scena--foto { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .konsola { border: 0; background: none; border-radius: 0; overflow: visible; }
  .konsola__scena--foto[data-karuzela] .konsola__bok { display: contents; }
  .konsola__scena--foto[data-karuzela] .konsola__bok > * { flex: 0 0 var(--kk); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .konsola__scena--foto .ui-foto { border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(0,0,0,.3); display: flex; flex-direction: column; justify-content: center; }
  .konsola__scena--foto .ui-foto--duze img { max-height: 260px; }
  .konsola__dol { border: 1px solid var(--line); border-radius: 18px; margin-top: 8px; overflow: hidden; }
}

/* ---------- runda 3: bez linii ramki, opinie ---------- */
.rama { border-inline: 0 !important; }
.sekcja { border-top: 0; }
.pas-logo { border: 0; }
.pas-logo .poz, .pas-logo .opis { border: 0 !important; }
.pas-logo .wrap { background: var(--soft); border-radius: 18px; }
.ciemna__gora { border-bottom: 0; }
.opinie { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 12px; align-items: stretch; }
.opinia { margin: 0; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.gwiazdki { color: var(--red); letter-spacing: 3px; font-size: 15px; }
.opinia blockquote { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); flex: 1; }
.opinia figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.opinia figcaption span { color: var(--muted); font-size: 13px; }
.opinia--duza { padding: 18px; border: 0; justify-content: flex-end; min-height: 340px; }
.opinia--duza img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opinia__karta { position: relative; background: #fff; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.3); }
.opinia__karta blockquote { font-size: 16px; }
@media (max-width: 960px) { .opinie { grid-template-columns: 1fr 1fr; } .opinia--duza { grid-column: 1 / -1; } }
@media (max-width: 700px) { .opinie[data-karuzela] { --kk: 86vw; } .opinia--duza { min-height: 0; } }
@media (max-width: 700px) { .opinie[data-karuzela] { align-items: center; } .opinia blockquote { flex: 0 0 auto; } }

/* ---------- runda 4: lekkie animacje ---------- */
.wjazd {
  opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease, translate .35s ease, box-shadow .35s ease;
}
.wjazd.widac { opacity: 1; transform: none; filter: none; }

/* karty w hero lekko unosza sie */
@keyframes unos { 50% { translate: 0 -7px; } }
.karta-stat, .karta-lista { animation: unos 7s ease-in-out infinite; }
.karta-lista { animation-delay: -3.5s; }
.ui-foto--hero { animation: unos 8s ease-in-out infinite; animation-delay: -2s; }

/* mozaiki powoli dryfuja */
@keyframes dryf { from { scale: 1.04; translate: 0 0; } to { scale: 1.12; translate: -2.5% 1.5%; } }
.kafel-m > img.tlo, .mkafel > img.tlo, .historia-duza img.tlo, .opinia--duza img.tlo, .rodzina__media img.tlo, .cta-pas img.tlo {
  animation: dryf 22s ease-in-out infinite alternate;
}
.mkafel:nth-child(2) > img.tlo, .kafel-m:nth-child(3) > img.tlo { animation-delay: -9s; }
.cta-pas img.tlo { animation-duration: 16s; }

/* uniesienie kart po najechaniu */
@media (hover: hover) {
  .opinia, .plan, .rodzina, .historia-mala, .krok, .wpis, .konsola__scena--foto .ui-foto, .mkafel, .siatka-cech > div {
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease, translate .35s ease, box-shadow .35s ease, background .3s ease;
  }
  .opinia:hover, .plan:hover, .rodzina:hover, .historia-mala:hover, .krok:hover, .wpis:hover, .konsola__scena--foto .ui-foto:hover, .mkafel:hover {
    translate: 0 -5px; box-shadow: 0 22px 44px -26px rgba(0,0,0,.35);
  }
  .siatka-cech > div:hover { background: var(--soft); }
  .siatka-cech > div:hover .ikona, .siatka-bezp > div:hover .ikona, .cecha:hover .ikona { translate: 0 -2px; box-shadow: 0 6px 14px -8px rgba(224,0,0,.45); }
  .ikona { transition: translate .3s ease, box-shadow .3s ease; }
  .wpis img { transition: scale .6s ease; }
  .wpis:hover img { scale: 1.05; }
  .konsola__dol a .ikona, .api-lista .strz { transition: translate .3s ease; }
  .konsola__dol a:hover .ikona { translate: 0 -2px; }
  .api-lista a:hover .strz, .lista-zmian a:hover .strz { translate: 4px 0; }
  .lista-zmian .strz { transition: translate .3s ease; }
}

/* migajacy kursor w terminalu */
@keyframes miga { 50% { opacity: 0; } }
.kursor { animation: miga 1.1s steps(1) infinite; color: #ff6b5c; }

/* czerwone slowa w naglowkach wjezdzaja chwile po reszcie */
.wjazd .red { display: inline-block; opacity: 0; translate: 0 10px; transition: opacity .7s ease .25s, translate .8s cubic-bezier(.2,.8,.2,1) .25s; }
.wjazd.widac .red { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .wjazd, .wjazd .red { opacity: 1 !important; transform: none !important; filter: none !important; translate: none !important; transition: none !important; }
  .karta-stat, .karta-lista, .ui-foto--hero, .kafel-m > img.tlo, .mkafel > img.tlo, .historia-duza img.tlo, .opinia--duza img.tlo, .rodzina__media img.tlo, .cta-pas img.tlo, .kursor { animation: none !important; }
}
@media (max-width: 700px) {
  [data-karuzela] .wjazd, [data-karuzela] > .wjazd { filter: none; }
  [data-karuzela] .wjazd .red { opacity: 1; translate: none; }
}

/* ---------- runda 5 ---------- */
.pas-logo .poz { white-space: nowrap; }
@media (max-width: 960px) { .pas-logo .poz { font-size: 14px; gap: 6px; padding-inline: 4px; } .pas-logo .poz svg { width: 16px; height: 16px; } }
@media (max-width: 380px) { .pas-logo .poz { font-size: 13px; } }

/* opinie: kazda w tej samej otoczce z mozaika, rowne kafle */
.opinie { grid-template-columns: repeat(3, 1fr); }
.opinia { padding: 18px; border: 0; justify-content: flex-end; min-height: 340px; background: var(--soft); }
.opinia > img.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: dryf 22s ease-in-out infinite alternate; }
.opinia:nth-child(2) > img.tlo { animation-delay: -8s; }
.opinia:nth-child(3) > img.tlo { animation-delay: -15s; }
.opinia__karta { flex: 1; }
.opinia__karta blockquote { font-size: 16px; flex: 0 0 auto; }
.opinia__karta figcaption { margin-top: auto; }
.opinia__tekst { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.opinia.rozwinieta .opinia__tekst { -webkit-line-clamp: unset; display: block; }
.rozwin { align-self: flex-start; background: none; border: 0; padding: 0; font: 500 13px var(--font); color: var(--red-ink); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rozwin::after { content: "↓"; transition: transform .25s; }
.opinia.rozwinieta .rozwin::after { transform: rotate(180deg); }
@media (max-width: 960px) { .opinie { grid-template-columns: 1fr 1fr; } .opinia--duza { grid-column: auto; } }
@media (max-width: 700px) { .opinie[data-karuzela] { align-items: stretch; } .opinia { min-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .opinia > img.tlo { animation: none !important; } }
.rozwin[hidden] { display: none; }
.opinia { min-height: 360px; }
.opinia__karta { flex: 0 0 auto; }
.opinia__tekst { min-height: calc(1.45em * 4); }
.opinia.rozwinieta .opinia__tekst { min-height: 0; }
.opinia__karta .rozwin { margin-top: -4px; }
.opinia__karta:has(.rozwin[hidden]) blockquote { margin-bottom: 27px; }