/* Układ: jasna strona na złamanej bieli, zieleń z logo jako kolor dominujący (styl inspirowany ecoapproach.co.uk).
   Jeden jasny motyw, celowo bez trybu ciemnego. Kolory z logo i palety roboczej: /mnt/project-files/marka/paleta.md. */
/* Font Outfit (licencja SIL OFL) z własnego serwera: bez zapytań do Google, szybsze pierwsze wyświetlenie. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/outfit-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/outfit-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; }
:root {
  --bg: #f6f5f0;          /* ciepła złamana biel */
  --surface: #fcfbf8;     /* karty */
  --tint: #e9efe6;        /* jasnozielone tło sekcji */
  --ink: #2c2c2c;           /* tekst z logo */
  --muted: #525751;
  --line: #dad8d0;
  --green: #325f34;       /* zieleń z logo */
  --green-dark: #24472a;
  --green-ink: #ffffff;
  --warm: #c9731f;        /* tylko akcent ścieżki „Ciepło” */
  --warm-ink: #9a4f14;    /* tekst w kolorze ścieżki „Ciepło” (kontrast ≥ 4.5) */
  --ph-bg: #fff4c7;
  --ph-line: #c99a00;
  --ph-ink: #5b4500;
  --ok: #1f7a4a;
  --err: #b3261e;

  --f-head: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.55rem;
  --step-3: clamp(1.85rem, 1.4rem + 1.9vw, 2.5rem);
  --step-4: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);

  --wrap: 72rem;
  --radius: 14px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--green); }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.15; overflow-wrap: break-word; hyphens: manual; letter-spacing: -0.015em; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3, .h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }

.eyebrow { font-size: 0.95rem; font-weight: 600; color: var(--green-dark); }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 42rem; }
.fine { font-size: var(--step--1); color: var(--muted); }
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.section--tint { background: var(--tint); }
.section-head { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; max-width: 46rem; }

/* Pola do potwierdzenia przez właściciela */
.ph { background: var(--ph-bg); color: var(--ph-ink); outline: 1.5px dashed var(--ph-line); outline-offset: 1px; border-radius: 3px; padding-inline: 0.25em; font-style: normal; }
.ph-off .ph { background: none; outline: none; color: inherit; padding: 0; }
.ph-off .tag-check { display: none; }
.ph-off .about-photo, .ph-off .gallery figure { border-style: solid; border-color: var(--line); background: var(--tint); color: var(--muted); }

/* Nagłówek w stylu apple.com: cienki, półprzezroczysty pasek, rozwijane panele (flyout) */
:root { --bar-h: 3.25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { position: sticky; top: 0; z-index: 40; }
.gnav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 245, 240, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(44, 44, 44, 0.08); }
.gnav-bar { display: flex; align-items: center; gap: 1.5rem; height: var(--bar-h); }
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-mark { width: 1.6rem; height: auto; color: var(--green); flex-shrink: 0; }
.brand-name { display: grid; font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; line-height: 1; letter-spacing: 0.01em; color: var(--ink); }
.brand-name span { font-weight: 400; font-size: 0.62em; letter-spacing: 0.14em; margin-top: 0.1rem; }
.gnav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 0.5rem; }
.gnav-link { display: inline-flex; align-items: center; height: var(--bar-h); padding: 0 0.15rem; font: inherit; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.005em; color: rgba(44, 44, 44, 0.85); background: none; border: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .2s ease; }
.gnav-link:hover, .has-flyout:hover > .gnav-link, .is-open > .gnav-link { color: var(--ink); }
.gnav-link[aria-current="page"] { color: var(--green); }
.has-flyout > .gnav-link::after { content: ""; width: 0.36rem; height: 0.36rem; margin-left: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform .2s ease; }
.has-flyout:hover > .gnav-link::after, .has-flyout.is-open > .gnav-link::after { transform: translateY(0.1rem) rotate(-135deg); }
.gnav-cta { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.3rem 0.95rem; border-radius: 999px; background: var(--green); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.gnav-cta:hover { background: var(--green-dark); }
.gnav-toggle { display: none; }

.flyout { position: absolute; left: 0; right: 0; top: 100%; background: rgba(246, 245, 240, 0.97); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(44, 44, 44, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s; }
.flyout-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; padding-block: 2.5rem 3.25rem; }
.flyout-head { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--muted); }
.flyout-big, .flyout-small { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.flyout-big a { font-family: var(--f-head); font-size: 1.55rem; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.flyout-small, .flyout-small a { font-size: 0.88rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.flyout-big a:hover, .flyout-small a:hover { color: var(--green); }
.flyout-small .ph { color: var(--ph-ink); }

.site-header::after { content: ""; position: fixed; inset: var(--bar-h) 0 0 0; z-index: -2; background: rgba(44, 44, 44, 0.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s linear .24s; pointer-events: none; }

@media (min-width: 68.8125em) {
  .gnav-item--cta { margin-left: 0.5rem; }
  .gnav-list { margin-left: 2rem; }
  .has-flyout.is-open > .flyout { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-header:has(.has-flyout.is-open)::after { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (min-width: 68.8125em) and (hover: hover) {
  .has-flyout:hover > .flyout { opacity: 1; visibility: visible; transform: none; transition-delay: .08s; }
  .site-header:has(.has-flyout:hover)::after { opacity: 1; visibility: visible; transition-delay: .08s; }
}

@media (max-width: 68.75em) {
  .gnav-bar { justify-content: space-between; }
  .js .gnav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -0.6rem; background: none; border: 0; color: var(--ink); cursor: pointer; }
  .gnav-burger, .gnav-burger::before { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .25s ease; }
  .gnav-burger { position: relative; transform: translateY(-3px); }
  .gnav-burger::before { content: ""; position: absolute; left: 0; top: 7px; }
  .gnav-toggle[aria-expanded="true"] .gnav-burger { transform: translateY(0) rotate(45deg); }
  .gnav-toggle[aria-expanded="true"] .gnav-burger::before { top: 0; transform: rotate(-90deg); }
  .js .gnav-list { position: fixed; inset: var(--bar-h) 0 0 0; display: block; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 1rem max(1.5rem, env(safe-area-inset-left, 0px)) 2.5rem; }
  .js .gnav-list:not(.is-open) { display: none; }
  .gnav-item { border-bottom: 1px solid var(--line); }
  .gnav-link { height: auto; width: 100%; justify-content: space-between; padding: 0.85rem 0; font-family: var(--f-head); font-size: 1.5rem; font-weight: 600; color: var(--ink); text-align: left; }
  .has-flyout > .gnav-link::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin-right: 0.3rem; }
  .has-flyout.is-open > .gnav-link::after { transform: rotate(-135deg); }
  .flyout { position: static; display: none; opacity: 1; visibility: visible; transform: none; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .has-flyout.is-open > .flyout { display: block; }
  .flyout .wrap { padding-inline: 0; }
  .flyout-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 0.25rem 1.25rem; }
  .flyout-big a { font-size: 1.15rem; }
  .gnav-item--cta { border-bottom: 0; padding-top: 1.5rem; }
  .gnav-cta { justify-content: center; width: 100%; min-height: 3rem; font-size: 1rem; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .gnav-bar { height: auto; flex-wrap: wrap; padding-block: 0.6rem; }
  html:not(.js) .gnav-list { flex-basis: 100%; display: block; }
  html:not(.js) .flyout { display: block; }
  html.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .flyout, .site-header::after, .gnav-burger, .gnav-burger::before { transition: none; } }

.btn { display: inline-block; font-family: var(--f-body); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px; padding: 0.8rem 1.4rem; border: 2px solid var(--green); background: var(--green); color: var(--green-ink); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn--ghost { background: transparent; color: var(--green-dark); border-color: var(--green); }
.btn--ghost:hover { background: var(--tint); color: var(--green-dark); }
.btn--light { background: var(--surface); color: var(--green-dark); border-color: var(--surface); }
.btn--light:hover { background: var(--tint); border-color: var(--tint); }

/* Hero */
.hero { background: var(--tint); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { display: grid; gap: 1.25rem; min-width: 0; }
.hero-phone { font-size: var(--step-1); }
.hero-phone strong { font-weight: 800; }

.paths { display: grid; gap: 1rem; min-width: 0; }
.path { display: grid; gap: 0.4rem; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; border-left: 6px solid var(--green); box-shadow: 0 1px 2px rgba(23, 38, 29, 0.06); transition: transform .15s ease, box-shadow .15s ease; }
.path--heat { border-left-color: var(--warm); }
.path:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23, 38, 29, 0.10); }
.path-kicker { font-size: 0.9rem; font-weight: 600; color: var(--green-dark); }
.path--heat .path-kicker { color: var(--warm-ink); }
.path-title { font-family: var(--f-head); font-weight: 700; font-size: var(--step-2); line-height: 1.15; }
.path-text { color: var(--muted); }
.path-go { font-weight: 700; color: var(--green-dark); }

/* Liczby i pasek uprawnień */
.proof { background: var(--green); color: var(--green-ink); }
.proof-list { margin: 0; padding-block: 1.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.proof-list div { display: grid; gap: 0.1rem; align-content: start; }
.proof-list dt { order: 2; font-size: var(--step--1); opacity: 0.9; }
.proof-list dd { order: 1; margin: 0; font-weight: 800; font-size: 1.35rem; overflow-wrap: anywhere; }
.ph-off .proof .ph { color: var(--green-ink); }

.trust { border-bottom: 1px solid var(--line); background: var(--surface); }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block: 1.1rem; }
.trust-label { font-size: var(--step--1); font-weight: 700; color: var(--muted); }
.trust-certs, .trust-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.trust-certs { gap: 0.5rem; }
.trust-certs li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.trust-certs svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Logotypy producentów: na razie napisy w szarości w miejscu prawdziwych plików logo */
.trust-logos { gap: 0.75rem 2.25rem; width: 100%; color: var(--muted); }
.trust-logos-label { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.trust-logos li { line-height: 1; white-space: nowrap; transition: color 0.2s ease; }
.trust-logos li:hover { color: var(--ink); }
.logo-longi { font: 800 1.35rem/1 var(--f-head); letter-spacing: -0.01em; }
.logo-deye { font: 900 1.3rem/1 var(--f-body); letter-spacing: 0.08em; }
.logo-eenovance { font: 600 1rem/1 var(--f-body); letter-spacing: 0.22em; }
.logo-dedietrich { font: italic 600 1.3rem/1 Georgia, "Times New Roman", serif; }

/* Usługi */
.split { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.services { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.services--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-bottom: 1.5rem; }
.service { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: 0.55rem; align-content: start; }
.section--alt .service { background: var(--bg); }
.service p { color: var(--muted); }
.service-icon { width: 2.6rem; height: 2.6rem; color: var(--green); background: var(--tint); border-radius: 50%; padding: 0.45rem; }
.tag-check { justify-self: start; font-size: 0.78rem; }

.grant-card { background: var(--tint); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1rem; min-width: 0; }
.grant-date { font-weight: 700; }
.grant-facts { margin: 0; display: grid; gap: 0.7rem; }
.grant-facts div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.grant-facts dt { font-size: 0.9rem; font-weight: 700; color: var(--green-dark); padding-top: 0.15rem; }
.grant-facts dd { margin: 0; }
.grant-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Ciepło */
.deadline { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.deadline .eyebrow { color: var(--warm-ink); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.timeline li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; }
@media (max-width: 480px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }
.timeline .when { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1.1rem; min-width: 0; }
.cp-card header { display: grid; gap: 0.35rem; }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.levels { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 30rem; }
.levels th, .levels td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.levels th { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.levels .pct { font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--green-dark); }
.levels tr:last-child td { border-bottom: 0; }
.cp-note { font-size: 0.92rem; color: var(--muted); }
.cp-points, .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cp-points li, .ticks li { padding-left: 1.6rem; position: relative; }
.cp-points li::before, .ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.cp-points li::before { content: ""; left: 0.1rem; top: 0.62em; width: 0.45rem; height: 0.45rem; border-radius: 1px; background: var(--green-dark); }

/* Kroki */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.5rem; align-content: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: var(--green-ink); font-weight: 800; font-size: 0.95rem; }
.steps p { color: var(--muted); font-size: 0.97rem; }

/* O nas */
.about { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about-text { display: grid; gap: 1rem; }
.about-photo { margin: 0; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); border: 1.5px dashed var(--ph-line); background: var(--ph-bg); color: var(--ph-ink); display: grid; place-items: center; text-align: center; padding: 1rem; }

/* Realizacje i opinie */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.gallery figure { margin: 0; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); border: 1.5px dashed var(--ph-line); background: var(--ph-bg); color: var(--ph-ink); display: grid; place-items: center; text-align: center; font-size: 0.85rem; padding: 0.75rem; }
.reviews { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 1rem 0 0; }
.review { margin: 0; padding: 1rem 1.1rem; border-radius: var(--radius); min-height: 5rem; }

/* FAQ */
.faq { display: grid; gap: 0.6rem; max-width: 50rem; }
.faq-group { font-size: 1rem; font-weight: 700; color: var(--green); margin-top: 1rem; }
.faq-group:first-child { margin-top: 0; }
.faq details { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1.25rem; }
.faq summary { cursor: pointer; font-weight: 700; padding-block: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.3rem; line-height: 1; font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1rem; color: var(--muted); }

/* Pas CTA */
.cta-band { background: var(--green); color: var(--green-ink); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.cta-band .wrap { display: grid; gap: 0.8rem; justify-items: start; }
.cta-band h2 { color: var(--green-ink); }
.cta-band p { max-width: 40rem; opacity: 0.95; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.5rem; }
.cta-phone { font-weight: 800; font-size: var(--step-1); }
.ph-off .cta-band .ph { color: var(--green-ink); }

/* Kontakt */
.contact { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact-info { display: grid; gap: 1.25rem; }
.contact-list { margin: 0; display: grid; gap: 0.9rem; }
.contact-list div { display: grid; gap: 0.1rem; }
.contact-list dt { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.contact-list dd { margin: 0; font-weight: 600; font-size: 1.08rem; overflow-wrap: anywhere; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 2rem); display: grid; gap: 1rem; box-shadow: 0 8px 24px rgba(23, 38, 29, 0.06); }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 0.35rem; align-content: start; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; }
.field input, .field textarea, .field select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem 0.75rem; width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.field select { min-height: calc(1.6em + 1.3rem + 2px); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; font-weight: 500; font-size: 0.92rem; cursor: pointer; background: var(--bg); }
.chips input { accent-color: var(--green); width: auto; margin: 0; }
.chips label:has(input:checked) { border-color: var(--green); background: var(--tint); }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); }
.consent input { margin-top: 0.3rem; accent-color: var(--green); flex-shrink: 0; }
.form-msg { border-radius: 10px; padding: 0.8rem 1rem; font-weight: 600; }
.form-msg.ok { background: var(--tint); color: var(--ink); border: 1px solid var(--ok); }
.form-msg.err { border: 1px solid var(--err); color: var(--err); }
.hidden-field { display: none; }

/* Stopka */
.site-footer { background-color: var(--green-dark); background-image: linear-gradient(180deg, rgba(14, 30, 18, 0.72) 0%, rgba(14, 30, 18, 0.84) 45%, rgba(12, 24, 15, 0.95) 100%), url("img/stopka/stopka-c-1600.webp"); background-size: cover; background-position: center 55%; color: #dbe7d9; font-size: 0.92rem; padding-block: 3rem 1.5rem; }
@media (max-width: 760px) { .site-footer { background-image: linear-gradient(180deg, rgba(14, 30, 18, 0.74) 0%, rgba(12, 24, 15, 0.95) 100%), url("img/stopka/stopka-c-900.webp"); } }
.site-footer a { color: #dbe7d9; }
.site-footer .ph { color: var(--ph-ink); }
.ph-off .site-footer .ph { color: #dbe7d9; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(219, 231, 217, 0.25); }
.brand--light, .brand--light .brand-name { color: #ffffff; }
.brand--light .brand-mark { color: #ffffff; width: 2rem; }
.brand--light .brand-name { font-size: 1.3rem; }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
.footer-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(219, 231, 217, 0.35); color: #ffffff; transition: background-color .15s ease, border-color .15s ease; }
.footer-social a:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; }
.footer-social svg { width: 1.25rem; height: 1.25rem; }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 2rem; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-head { font-family: var(--f-body); font-size: 1rem; letter-spacing: 0; font-weight: 700; color: #ffffff; margin-bottom: 0.7rem; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; justify-content: space-between; border-top: 1px solid rgba(219, 231, 217, 0.25); margin-top: 2.5rem; padding-top: 1.25rem; font-size: 0.85rem; }
.footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer-company { flex-basis: 100%; margin: 0; color: rgba(219, 231, 217, 0.75); font-size: 0.8rem; line-height: 1.6; }

/* Pasek „Zadzwoń / Wycena” na telefonie */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .mobile-cta .btn { text-align: center; padding-block: 0.7rem; padding-inline: 0.5rem; white-space: nowrap; }
  .site-footer { padding-bottom: 5.5rem; }
}

/* Wytyczne Vercel Web Interface Guidelines (audit-suite), 20.10.2026 */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--green); color: var(--green-ink); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }
a, button, .btn, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(50, 95, 52, 0.15); }
.proof-list dd, .levels td, .grant-facts dd, .deadline { font-variant-numeric: tabular-nums; }

/* Podstrony (od 20.10.2026 strona ma osobne adresy dla usług) */
.page-head { background: var(--tint); padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; gap: 0.9rem; justify-items: start; }
.page-head h1 { max-width: 52rem; }
.page-head .lead { max-width: 44rem; }
.page-head--heat { border-bottom: 4px solid var(--warm); }
.services--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.service--link { text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.service--link:hover { border-color: var(--green); transform: translateY(-2px); }
.service-go { font-weight: 700; color: var(--green-dark); margin-top: 0.3rem; }
.service--heat .service-icon { color: var(--warm-ink); }

/* Usługi na stronie głównej: numerowane karty ze zdjęciem urządzenia wychodzącym poza kartę (styl Good Master / Columbus). */
/* Usługi: telefon 2 × 3 (obraz pod tytułem), tablet 2 kolumny, komputer 3 × 2 (obraz w prawym dolnym rogu).
   Obrazy stoją w pudełku o stałej wysokości, wyrównane do dołu, żeby żaden nie był ucięty. */
.offer { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.offer-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 1.1rem 1rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(23, 38, 29, 0.05); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.offer-card > :not(.offer-img) { position: relative; z-index: 1; }
.offer-card h3 { font-size: clamp(1rem, 4.4vw, 1.12rem); font-weight: 750; line-height: 1.15; margin: 0; }
.offer-sub { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--green-dark); }
.offer-text { display: none; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.offer-img { order: 1; align-self: center; width: 100%; height: 6.5rem; margin-top: auto; padding-top: 0.75rem; pointer-events: none; }
.offer-go { order: 2; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--green-dark); }
.offer-go svg { width: 1.1rem; height: 1.1rem; transition: transform .2s ease; }
.offer-img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 16px rgba(23, 38, 29, 0.16)); transform-origin: 70% 90%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.offer-card--accent { background: var(--green); border-color: var(--green); color: #fff; }
.offer-card--accent h3 { color: #fff; }
.offer-card--accent .offer-sub, .offer-card--accent .offer-go { color: #fff; }
.offer-card--accent .offer-text { color: rgba(255, 255, 255, 0.86); }
.offer-card--accent .offer-img img { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.32)); }
.offer-card:hover { border-color: var(--green); box-shadow: 0 14px 34px -18px rgba(23, 38, 29, 0.35); transform: translateY(-3px); }
.offer-card:hover .offer-img img { transform: scale(1.05) rotate(-1.5deg); }
.offer-card:hover .offer-go svg { transform: translateX(3px); }
.offer-card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.offer-card--accent:focus-visible { outline-color: var(--green-dark); }
@media (min-width: 760px) {
  .offer { gap: 1.25rem; }
  .offer-card { min-height: 16rem; gap: 0.45rem; padding: 1.6rem 1.5rem 1.5rem; border-radius: 20px; }
  .offer-card > :not(.offer-img) { max-width: 58%; }
  .offer-card h3 { font-size: var(--step-2); }
  .offer-sub { font-size: 1rem; }
  .offer-text { display: block; }
  .offer-go { margin-top: auto; padding-top: 0.6rem; }
  .offer-img { position: absolute; z-index: 0; right: 1.25rem; bottom: 1.25rem; width: 38%; height: 10rem; margin: 0; padding: 0; }
  .offer-img img { object-position: right bottom; }
}
@media (min-width: 1080px) {
  .offer { grid-template-columns: repeat(3, 1fr); }
  .offer-card { min-height: 17rem; }
  .offer-img { height: 11rem; }
}
@media (hover: none) { .offer-card:hover { transform: none; } .offer-card:hover .offer-img img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .offer-card:hover, .offer-card:hover .offer-img img { transform: none; } }
.note-card { margin-top: 1.5rem; background: var(--tint); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: grid; gap: 0.55rem; max-width: 46rem; }
.note-card a, .more-link a { font-weight: 700; color: var(--green-dark); }
.more-link { margin-top: 1.5rem; }
.ph-block { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--radius); display: block; }
.contact-list--inline { margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.deadline h2.eyebrow { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.contact h1 { font-size: var(--step-4); }
#formularz { scroll-margin-top: 6rem; margin-bottom: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .service--link:hover { transform: none; } }
.ph-off .ph-block { display: none; }

/* Pomysły z projektu Claude Design (2026-10-20) */
.btn--big { font-size: 1.1rem; padding: 0.95rem 1.8rem; }
.btn--warm { background: transparent; color: var(--warm-ink); border-color: var(--warm-ink); }
.btn--warm:hover { background: #f6e8da; border-color: var(--warm-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-phone { display: grid; line-height: 1.25; font-size: 1rem; margin: 0; }
.hero-phone > span { color: var(--muted); font-size: 0.95rem; }
.hero-phone > a { font-size: 1.6rem; font-weight: 800; color: var(--green-dark); text-decoration: none; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.hero-phone > a:hover { text-decoration: underline; }

.gallery figure strong, .about-photo strong { display: block; margin-bottom: 0.2rem; }
.gallery figure span, .about-photo span { max-width: 26rem; }

.grant-card:has(.grant-nums) { background: var(--green); color: #fff; }
.grant-card:has(.grant-nums) .eyebrow, .grant-card:has(.grant-nums) .grant-date { color: #e1eadf; }
.grant-card:has(.grant-nums) h2 { color: #fff; }
.grant-card:has(.grant-nums) .grant-facts div { border-color: rgba(255,255,255,.25); }
.grant-card:has(.grant-nums) .grant-facts dt { color: #d3e0d0; }
.grant-card:has(.grant-nums) .fine, .grant-card:has(.grant-nums) .fine a { color: #e1eadf; }
.grant-card:has(.grant-nums) .btn { background: var(--surface); border-color: var(--surface); color: var(--green-dark); }
.grant-card:has(.grant-nums) .btn:hover { background: var(--tint); border-color: var(--tint); }
.grant-card:has(.grant-nums) .btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.grant-card:has(.grant-nums) .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.grant-card a:focus-visible { outline-color: #fff; }
.grant-nums { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.22); border-radius: 14px; overflow: hidden; }
.grant-nums div { background: var(--green-dark); padding: 0.9rem 1rem; min-width: 0; }
.grant-nums dt { font-size: 0.85rem; color: #d3e0d0; }
.grant-nums dd { margin: 0.15rem 0 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }

.deadline .timeline { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-top: 2rem; }
.deadline .timeline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 4px; border-radius: 2px; background: #e2dcd2; }
.deadline .timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; align-content: start; }
.deadline .timeline li::before { content: ""; position: absolute; top: -2rem; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); border: 4px solid var(--surface); box-shadow: 0 0 0 1.5px var(--muted); }
.deadline .timeline .when { font-size: 1.35rem; }
.timeline .t-past .when { color: var(--muted); }
.deadline .timeline .t-now::before { background: var(--green); box-shadow: 0 0 0 1.5px var(--green); }
.timeline .t-now .when { color: var(--green); }
.deadline .timeline .t-next::before { background: var(--warm); box-shadow: 0 0 0 1.5px var(--warm); }
.timeline .t-next .when { color: var(--warm-ink); }
@media (max-width: 640px) {
  .deadline .timeline { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 2rem; }
  .deadline .timeline::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; }
  .deadline .timeline li::before { top: 0.2rem; left: -2rem; }
}

.cp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.cp-bars li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.75rem; }
.cp-bars strong { color: var(--warm-ink); font-variant-numeric: tabular-nums; text-align: right; }
.cp-bar { height: 12px; border-radius: 6px; background: #f1e4d6; overflow: hidden; }
.cp-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--warm); }
@media (max-width: 420px) { .cp-bars li { grid-template-columns: minmax(0, 1fr) auto; } .cp-bar { grid-column: 1 / -1; grid-row: 2; } }

.hint { font-size: 0.88rem; color: var(--muted); margin: 0.3rem 0 0; }

/* Poprawki z audytów (dostępność) */
.field input, .field select { border-color: #7d8079; }
.proof :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .grant-card :focus-visible { outline-color: #fff; }
.chips label { min-height: 44px; }
@media (max-width: 760px) { html { scroll-padding-bottom: 5.5rem; } }

/* Poprawki z audytów skilli (ZMIANY.md, 2026-10-20) */
p, li, dd { text-wrap: pretty; }
.wrap { padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
@media (min-width: 640px) { .wrap { padding-inline: max(1.5rem, env(safe-area-inset-left, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)); } }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.7; cursor: progress; }
@media (hover: none) { .path:hover, .service--link:hover { transform: none; box-shadow: none; } }
.faq details p, .cp-points, .cp-note, .fine { max-width: 70ch; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--err); outline: 2px solid var(--err); outline-offset: 0; }
.draft-note { display: inline-block; justify-self: start; padding: 0.35rem 0.6rem; }
.ph-off .draft-note { display: none; }
@media (max-width: 900px) { .is-typing .mobile-cta { display: none; } }
.form-msg:empty { display: none; }
.ph-toggle { font: inherit; font-size: var(--step--1); min-height: 44px; background: none; border: 1px solid rgba(255,255,255,.5); color: #dbe7d9; border-radius: 999px; padding: 0.2rem 0.9rem; cursor: pointer; }
.ph-toggle:hover { background: rgba(255,255,255,.1); }

/* Nowe podstrony: dotacje, dla biznesu, kalkulatory */
.grants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .grants { grid-template-columns: minmax(0, 1fr); } }
.grant-tile { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 0.8rem; align-content: start; }
.grant-tile--heat { border-top-color: var(--warm); }
.grant-tile--heat .eyebrow, .eyebrow--heat { color: var(--warm-ink); }
.grant-big { margin: 0; font-family: var(--f-head); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); font-weight: 700; line-height: 1.1; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.grant-tile--heat .grant-big { color: var(--warm-ink); }
.more { font-weight: 700; color: var(--green-dark); }
.calc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 760px) { .calc-list { grid-template-columns: minmax(0, 1fr); } }
.calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: grid; gap: 0.9rem; align-content: start; justify-items: start; }
.calc-card--soon { background: transparent; border-style: dashed; }

/* Opinie z Google (/realizacje/, dane z /api/opinie) */
.gr-summary { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0 1.25rem; }
.gr-score { font-family: var(--f-head); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--green); }
.gr-summary > div { display: grid; gap: 0.15rem; }
.gr-count { color: var(--muted); font-size: var(--step--1); }
a.gr-count { color: var(--green-dark); }
.gr-stars { color: var(--warm); letter-spacing: 0.08em; font-size: 1.05rem; line-height: 1; }
.gr-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.gr-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.55rem; }
.gr-head { display: flex; align-items: center; gap: 0.7rem; }
.gr-head > div { display: grid; justify-items: start; gap: 0.2rem; min-width: 0; }
.gr-photo { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--tint); }
.gr-author { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.gr-author:hover { text-decoration: underline; }
.gr-when { color: var(--muted); font-size: var(--step--1); }
.gr-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.gr-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.gr-more { justify-self: start; background: none; border: 0; padding: 0.4rem 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--green-dark); text-decoration: underline; cursor: pointer; }
.gr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.gr-source { color: var(--muted); font-size: var(--step--1); }
/* Telefon: opinie przewijane w bok, karta po karcie */
@media (max-width: 640px) {
  .gr-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; overscroll-behavior-x: contain; }
  .gr-card { scroll-snap-align: start; }
}

/* Jak pracujemy (strona główna): wersja A3 z Claude Design, "przewód z gniazdami" */
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.how-head .section-head { margin-bottom: 0; max-width: 40rem; }
.how-track { position: relative; }
.how-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.how-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding-inline: 0.75rem; }
.how-node { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.how-mid { width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; }
.how-core { width: 74px; height: 74px; border-radius: 50%; background: var(--surface); border: 2px solid var(--green); display: grid; place-items: center; }
.how-core svg { width: 36px; height: 36px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.how-step:nth-child(1) .how-node { background: #eef2eb; } .how-step:nth-child(1) .how-mid { background: #e3eadf; }
.how-step:nth-child(2) .how-node { background: #eaf0e7; } .how-step:nth-child(2) .how-mid { background: #dde7d9; }
.how-step:nth-child(3) .how-node { background: #e5ece1; } .how-step:nth-child(3) .how-mid { background: #d5e2d0; }
.how-step:nth-child(4) .how-node { background: #dfe8db; } .how-step:nth-child(4) .how-mid { background: #cadbc5; }
.how-step:nth-child(5) .how-node { background: #d8e4d4; } .how-step:nth-child(5) .how-mid { background: #bfd3ba; }
.how-step:nth-child(6) .how-node { background: #d2e0cd; } .how-step:nth-child(6) .how-mid { background: #b5cdb0; }
.how-step:nth-child(6) .how-core { background: var(--green); }
.how-step:nth-child(6) .how-core svg { stroke: #fff; stroke-width: 1.9; }
.how-body { display: grid; gap: 0.4rem; justify-items: center; }
.how-no { margin: 0.6rem 0 0; font-size: 1.85rem; font-weight: 200; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.how-body h3 { margin: 0; font-size: 1.3rem; }
.how-body p:last-child { margin: 0; color: var(--muted); max-width: 15em; }
.how-wire { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.how-wire path { fill: none; stroke: var(--green-dark); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.how-plug, .how-bolt { position: absolute; top: 60px; transform: translateY(-50%); }
.how-plug { left: -4px; width: 22px; height: 32px; transform: translateY(-50%) rotate(-90deg); }
.how-plug rect { fill: #6e6e68; } .how-plug .how-plug-body { fill: var(--green-dark); }
.how-bolt { right: -4px; width: 32px; height: 32px; }
.how-bolt circle { fill: var(--green); } .how-bolt path { fill: var(--surface); }
.how-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.how-foot p { margin: 0; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .how-node { transition: transform 0.25s ease; }
  .how-step:hover .how-node { transform: scale(1.06); }
}
/* Telefon i tablet: kroki jeden pod drugim, kabel pionowo po lewej */
@media (max-width: 1060px) {
  .how-track { padding: 44px 0 52px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .how-step { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; align-items: start; text-align: left; padding: 0; }
  .how-node { width: 80px; height: 80px; }
  .how-mid { width: 66px; height: 66px; }
  .how-core { width: 50px; height: 50px; }
  .how-core svg { width: 26px; height: 26px; }
  .how-body { justify-items: start; padding-top: 0.35rem; }
  .how-no { margin: 0; font-size: 1.5rem; }
  .how-body h3 { font-size: 1.2rem; }
  .how-body p:last-child { max-width: none; }
  .how-wire { display: none; }
  .how-track::before { content: ""; position: absolute; left: 37.5px; top: 34px; bottom: 30px; width: 5px; border-radius: 3px; background: var(--green-dark); }
  .how-plug { top: 0; left: 26px; width: 28px; height: 40px; transform: none; }
  .how-bolt { top: auto; bottom: 0; right: auto; left: 22px; width: 36px; height: 36px; transform: none; }
  .how-cta { width: 100%; }
  .how-foot .btn { width: 100%; }
}

/* Hero: dom dzień/wieczór, tekst leży na obrazie (na komputerze po lewej, na telefonie nad domem), linie prądu z kodu.
   Obraz i linie leżą w .house-canvas o stałych proporcjach 1344×752, więc etykiety i linie zawsze trafiają w urządzenia.
   Przejście dzień/wieczór: przenikanie dwóch obrazów i dwóch warstw fade (gradientów nie da się płynnie animować). */
.hero--house { --flow: #ffc93c; --flow-glow: rgba(255, 190, 40, 0.85); --swap: 1.6s ease-in-out; position: relative; display: grid; padding: 0; background: #f6f5f0; overflow: hidden; transition: background-color var(--swap); }
.hero--house.is-night { --flow: #5ee08a; --flow-glow: rgba(70, 220, 130, 0.8); background: #1e1e3a; }
.hero--house .wrap { display: block; }
.house-stage { --cw: 150vw; position: relative; overflow: hidden; height: calc(var(--cw) * 0.48); margin-top: -3.5rem; } /* dół trawnika przycięty, góra wchodzi pod tekst */
.house-canvas { position: absolute; top: 0; right: 0; width: var(--cw); aspect-ratio: 1344 / 752; }
.house-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.house-img--night { opacity: 0; transition: opacity var(--swap); }
.is-night .house-img--night { opacity: 1; }
.house-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-track, .flow-dots { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 1s ease-in-out, stroke var(--swap); }
.flow-track { stroke: var(--flow); stroke-opacity: 0.35; stroke-width: 4; }
.flow-dots { stroke: var(--flow); stroke-width: 7; stroke-dasharray: 1 22; filter: drop-shadow(0 0 4px var(--flow-glow)); }
.hero--house [data-on] { transition: opacity 1s ease-in-out; }
.hero--house:not(.is-night) [data-on="night"], .hero--house.is-night [data-on="day"] { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .flow-dots { animation: house-flow 1s linear infinite; }
  .house-paused .flow-dots { animation-play-state: paused; }
}
@keyframes house-flow { to { stroke-dashoffset: -46; } }

.house-tag { position: absolute; transform: translate(-50%, -50%); display: grid; gap: 0.1rem; justify-items: center; padding: 0.3rem 0.55rem; border: 0; border-radius: 9px; background: rgba(20, 22, 20, 0.86); color: #fff; font: 600 0.7rem/1.2 var(--f-body); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); transition: background-color 0.2s ease; }
.house-tag-name { font-weight: 400; opacity: 0.8; }
.house-tag [data-day] { transition: opacity 0.4s ease; }
.is-swapping .house-tag [data-day] { opacity: 0; }
.house-tag:hover, .house-tag[aria-expanded="true"] { background: var(--green); }
.house-tag:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.house-tag--end { transform: translate(-100%, -50%); }
.has-pop .house-tag:not([aria-expanded="true"]) { opacity: 0.55; }
.house-tag { transition: background-color 0.2s ease, opacity 0.25s ease; }
/* Etykiety pulsują dwa razy po wejściu na stronę, żeby było widać, że da się je kliknąć */
@media (prefers-reduced-motion: no-preference) {
  .house-tag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: house-ping 1.6s ease-out 1.2s 2; pointer-events: none; }
  .house-tag--end::after { inset: 0; }
}
@keyframes house-ping { to { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

/* Oznaczenie obrazu AI: zawsze widoczne w rogu obrazu */
.house-ai { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 3; }
/* Dymek z opisem urządzenia: przy etykiecie na obrazie, na telefonie od dołu ekranu */
.house-pop { position: absolute; z-index: 3; width: min(20rem, calc(100% - 24px)); padding: 1rem 2.6rem 1.1rem 1.1rem; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.house-pop[hidden] { display: none; }
.house-pop-body > * { margin: 0; }
.house-pop-body > * + * { margin-top: 0.4rem; }
.house-pop .house-info-title { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; color: var(--green-dark); }
.house-pop-body a { display: inline-block; font-weight: 700; color: var(--green-dark); }
.house-pop-x { position: absolute; top: 0.4rem; right: 0.4rem; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.house-pop-x:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.house-pop-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.house-pop-x:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .house-pop:not([hidden]) { animation: house-pop-in 0.2s ease-out; }
}
@keyframes house-pop-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 699px) {
  .house-pop { position: fixed; z-index: 35; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); width: auto; padding: 1.1rem 3rem 1.25rem 1.2rem; border-radius: 20px; }
  @media (prefers-reduced-motion: no-preference) {
    .house-pop:not([hidden]) { animation: house-sheet-in 0.25s ease-out; }
  }
}
@keyframes house-sheet-in { from { transform: translateY(110%); } }
.house-bar { display: block; width: 100%; min-width: 3.5rem; height: 4px; margin-top: 0.2rem; border-radius: 2px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.house-bar i { display: block; height: 100%; width: var(--bat, 64%); background: #5ee08a; transition: width 0.6s ease; }

.house-fade { display: none; }
.house-copy { order: -1; position: relative; z-index: 1; padding-block: 1.75rem 0; }
.house-panel { padding-block: 0.9rem 1.75rem; }
.house-box { display: grid; gap: 0.6rem; }
.house-controls { display: flex; align-items: center; gap: 0.5rem; }
.house-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(20, 22, 20, 0.86); transition: background-color var(--swap); }
.house-seg button, .house-pause { font: 600 0.9rem/1 var(--f-body); border: 0; cursor: pointer; min-height: 40px; }
.house-seg button { padding: 0 1rem; border-radius: 9px; background: transparent; color: #fff; transition: background-color 0.4s ease, color 0.4s ease; }
.house-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.house-seg button { position: relative; overflow: hidden; }
.house-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.is-night .house-timer { background: #2e8a4c; }
.is-auto .house-seg button[aria-pressed="true"] .house-timer { animation: house-timer 20s linear forwards; }
.house-paused .house-timer { animation-play-state: paused !important; }
@keyframes house-timer { to { transform: scaleX(1); } }
.house-pause { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(20, 22, 20, 0.86); color: #fff; transition: background-color var(--swap); }
.house-pause svg { width: 18px; height: 18px; fill: currentColor; }
.house-pause .i-play, .house-pause[aria-pressed="true"] .i-pause { display: none; }
.house-pause[aria-pressed="true"] .i-play { display: inline; }
.house-seg button:focus-visible, .house-pause:focus-visible { outline: 3px solid var(--flow); outline-offset: 2px; }
.house-info { min-height: 3.2rem; }
.house-info > * + * { margin-top: 0.3rem; }
.house-info-title { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: var(--green-dark); }
.house-info a { display: inline-block; font-weight: 700; color: var(--green-dark); }
.house-note { font-size: var(--step--1); color: var(--muted); }
html:not(.js) .house-controls { display: none; }

/* Wieczór: jasny tekst na ciemnym tle (na każdym ekranie) */
.house-copy h1, .house-copy .lead, .hero--house .hero-phone > span, .hero--house .hero-phone > a, .house-info, .house-info-title, .house-info a, .house-note { transition: color var(--swap), background-color var(--swap); }
.is-night .house-copy h1, .is-night .house-copy .lead, .is-night .house-info, .is-night .house-note, .is-night .hero-phone > span { color: #f2f1ec; }
.is-night .house-info-title, .is-night .house-info a { color: #b9e8c2; }
.is-night .house-pop .house-info-title, .is-night .house-pop-body a { color: var(--green-dark); }
.is-night .hero-phone > a { color: #fff; }
html:not(.ph-off) .is-night .hero-phone a.ph, html:not(.ph-off) .is-night .hero-phone span.ph { color: var(--ph-ink); }
.is-night .house-seg, .is-night .house-pause { background: rgba(255, 255, 255, 0.16); }

/* Telefon: najpierw dom (jak na komputerze), pod nim tekst na zaokrąglonej karcie.
   Przełącznik dnia leży na niebie w lewym górnym rogu obrazu, a numer telefonu jest w dolnym pasku, więc w hero go nie powtarzamy. */
@media (max-width: 699px) {
  /* Na telefonie zdjęcie jest kwadratowe (dorobione niebo i trawnik), a .house-canvas nadal obejmuje tylko część z domem,
     więc etykiety i linie stoją tam, gdzie na komputerze. --sky i --lawn mówią, ile nieba i trawnika widać. */
  .hero--house { --cw: 135vw; }
  .house-stage { order: -2; --cw: 135vw; --sky: 12vw; --lawn: 9vw; height: calc(var(--cw) * 0.5595 + var(--sky) + var(--lawn)); margin-top: 0; }
  .house-canvas { top: var(--sky); right: -2vw; }
  .house-img { top: -38.6%; height: 178.7%; -webkit-mask-image: none; mask-image: none; }
  .house-tag[data-info="info-dom"], .house-tag[data-info="info-siec"] { display: none; }
  .house-ai { bottom: 2rem; }
  .house-copy { order: 0; margin-top: -1.4rem; padding-block: 1.4rem 1.75rem; border-radius: 22px 22px 0 0; background-color: inherit; }
  .house-copy h1 { font-size: clamp(1.7rem, 1.1rem + 3vw, 2.1rem); }
  .house-copy .lead { font-size: 1rem; line-height: 1.5; }
  .house-copy .hero-copy { gap: 0.85rem; }
  .house-copy .btn--big { padding: 0.8rem 1.5rem; font-size: 1.05rem; }
  .hero--house .hero-phone { display: none; }
  .house-panel { position: absolute; z-index: 4; left: 0; top: 0.6rem; padding: 0; }
  .house-panel .wrap { padding-inline: 0.6rem; }
  .house-info, .house-note { display: none; }
  .house-seg button { min-height: 40px; padding: 0 0.85rem; font-size: 0.85rem; }
  .house-pause { width: 40px; height: 40px; }
}
@media (min-width: 700px) { .house-stage { --cw: 112vw; margin-top: 0; } }

/* Duży ekran: obraz na całą szerokość, tekst i panel leżą na nim po lewej */
@media (min-width: 1200px) {
  .hero--house > * { grid-area: 1 / 1; }
  /* Cały obraz bez przybliżania: szerokość dopasowana do wysokości okna, pusty pas po lewej przykrywa fade */
  .house-stage { --cw: clamp(62rem, min(100vw, calc((100svh - var(--bar-h)) * 1.7872)), 100vw); height: calc(var(--cw) * 0.5595); margin-top: 0; }
  .house-img { -webkit-mask-image: none; mask-image: none; }
  .house-canvas { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
  /* Dwie warstwy fade (dzień, wieczór) przenikają się; wiele punktów w gradiencie daje miękkie przejście bez widocznej krawędzi */
  .house-fade, .house-fade::before, .house-fade::after { display: block; position: absolute; inset: 0; pointer-events: none; }
  .house-fade::before, .house-fade::after { content: ""; transition: opacity var(--swap); }
  .house-fade::before { background: linear-gradient(90deg, rgba(246, 245, 240, 0.9) 0%, rgba(246, 245, 240, 0.86) 12%, rgba(246, 245, 240, 0.74) 24%, rgba(246, 245, 240, 0.55) 32%, rgba(246, 245, 240, 0.3) 40%, rgba(246, 245, 240, 0.12) 47%, rgba(246, 245, 240, 0) 55%); }
  .house-fade::after { opacity: 0; background: linear-gradient(90deg, rgba(30, 30, 58, 0.8) 0%, rgba(30, 30, 58, 0.75) 12%, rgba(30, 30, 58, 0.64) 24%, rgba(30, 30, 58, 0.48) 32%, rgba(30, 30, 58, 0.27) 40%, rgba(30, 30, 58, 0.1) 47%, rgba(30, 30, 58, 0) 55%); }
  .is-night .house-fade::before { opacity: 0; }
  .is-night .house-fade::after { opacity: 1; }
  .house-copy, .house-panel { position: relative; z-index: 1; pointer-events: none; }
  .house-copy { order: 0; align-self: start; padding-block: clamp(2rem, 6vh, 5rem) 0; }
  .house-panel { align-self: end; padding-block: 0 1.5rem; }
  .house-copy .wrap, .house-panel .wrap { max-width: none; padding-inline: clamp(2rem, 4vw, 4rem); }
  .house-copy .hero-copy, .house-box { max-width: min(30rem, 34vw); pointer-events: auto; }
  .house-copy h1 { font-size: clamp(2.3rem, 0.9rem + 2.1vw, 2.8rem); }
  .house-copy .lead { font-size: 1.1rem; }
  .house-copy .hero-copy { gap: 1rem; }
  .house-tag { font-size: 0.8rem; padding: 0.4rem 0.7rem; }
}

.nowrap { white-space: nowrap; }
/* Słowa z łącznikiem i półpauzą trzymane razem (build.py, keep_joined) */
gss-nw { white-space: nowrap; }
.ks-a[hidden], .sym-slides[hidden] { display: none; }

/* Realizacje: zdjęcia z podpisem */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 980px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .works { grid-template-columns: minmax(0, 1fr); } }
.work { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.work figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 0.85rem; background: linear-gradient(180deg, rgba(12, 24, 15, 0) 0%, rgba(12, 24, 15, 0.78) 100%); color: #fff; line-height: 1.3; }
.work figcaption strong { display: block; font-size: 1.05rem; }
.work figcaption span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .work:hover img { transform: scale(1.04); } }

/* Sekcja kontaktu nad stopką (warianty A/B/C) */
.cta { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.cta h2 { margin: 0; text-wrap: balance; }
.cta-b .ph, .cta-c .ph { background: rgba(255, 224, 130, 0.16); color: #fff; outline-color: #f3d36b; }
/* A: karta z dwoma kafelkami akcji */
.cta-a { background: var(--tint); }
.cta-a-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.cta-a-text { display: grid; gap: 0.8rem; justify-items: start; }
.cta-a-text > p:not(.eyebrow) { max-width: 34rem; font-size: 1.08rem; }
.cta-checks { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 600; color: var(--green-dark); }
.cta-checks li { display: flex; align-items: center; gap: 0.4rem; }
.cta-checks svg { width: 1.1rem; height: 1.1rem; color: var(--green); }
.cta-a-tiles { display: grid; gap: 0.75rem; }
.cta-tile { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cta-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 71, 42, 0.12); }
.cta-tile-icon { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--tint); color: var(--green); }
.cta-tile-icon svg { width: 1.4rem; height: 1.4rem; }
.cta-tile-body { display: grid; gap: 0.1rem; }
.cta-tile-label { font-size: 0.88rem; color: var(--muted); }
.cta-tile strong { font-family: var(--f-head); font-size: var(--step-2); line-height: 1.15; color: var(--green-dark); }
.cta-tile-note { font-size: 0.82rem; color: var(--muted); }
.cta-tile--green { background: var(--green); border-color: var(--green); }
.cta-tile--green .cta-tile-icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cta-tile--green strong { color: #fff; }
.cta-tile--green .cta-tile-label, .cta-tile--green .cta-tile-note { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 860px) { .cta-a-grid { grid-template-columns: minmax(0, 1fr); } }
/* B: zdjęcie realizacji obok zielonego panelu */
.cta-b-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 24px; overflow: hidden; background: var(--green); color: #fff; }
.cta-b-photo { position: relative; margin: 0; min-height: 20rem; }
.cta-b-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.cta-b-photo .ai-tag { position: absolute; right: 0.75rem; bottom: 0.75rem; }
.cta-b-body { display: grid; align-content: center; gap: 0.9rem; justify-items: start; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.cta-b-body h2 { color: #fff; }
.cta-b-body p { color: rgba(255, 255, 255, 0.9); max-width: 30rem; }
.cta-b .cta-phone { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; }
.cta-b .cta-phone svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 860px) { .cta-b-card { grid-template-columns: minmax(0, 1fr); } .cta-b-photo { min-height: 0; aspect-ratio: 16 / 10; } }
/* C: wybór tematu kafelkami */
.cta-c { background: var(--green); color: #fff; }
.cta-c-head { display: grid; gap: 0.6rem; max-width: 40rem; }
.cta-c-head h2 { color: #fff; }
.cta-c-head p { color: rgba(255, 255, 255, 0.9); }
.cta-c-topics { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cta-c-topics a { position: relative; display: grid; grid-template-rows: 7.5rem auto; gap: 0.75rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: background-color .2s ease, transform .2s ease; }
.cta-c-topics a:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.cta-c-topics img { width: auto; height: 100%; max-width: 100%; object-fit: contain; justify-self: center; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25)); }
.cta-c-q { justify-self: center; align-self: center; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.5); font-family: var(--f-head); font-size: 2.4rem; font-weight: 700; }
.cta-c-topics a > svg { position: absolute; right: 1rem; bottom: 1.2rem; width: 1.2rem; height: 1.2rem; transition: transform .2s ease; }
.cta-c-topics a:hover > svg { transform: translateX(3px); }
.cta-c-phone { margin-top: 1.25rem; color: rgba(255, 255, 255, 0.9); }
.cta-c-phone a { color: #fff; font-weight: 800; }
@media (max-width: 860px) { .cta-c-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-c-topics a { grid-template-rows: 5.5rem auto; } }
@media (prefers-reduced-motion: reduce) { .cta-tile, .cta-c-topics a, .cta-c-topics a > svg { transition: none; } }
.cta-b :focus-visible, .cta-c :focus-visible { outline-color: #fff; }
.cta-c-topics a > span:not(.cta-c-q) { padding-right: 1.8rem; }
@media (max-width: 480px) { .cta-c-topics a { font-size: 0.95rem; padding: 0.9rem 0.9rem 1rem; } .cta-c-topics a > svg { right: 0.8rem; bottom: 1.05rem; } }

/* Oznaczenie obrazów AI (AI Act art. 50): plakietka "AI" zawsze widoczna, pełny opis po najechaniu albo kliknięciu */
.ai-tag { margin: 0; }
/* Mały i stonowany, ale zawsze widoczny i czytelny (AI Act art. 50); ciemnieje po najechaniu */
.ai-tag-btn { display: inline-flex; align-items: center; gap: 0.18rem; min-height: 1.15rem; padding: 0 0.34rem 0 0.24rem; border: 0; border-radius: 999px; background: rgba(20, 22, 20, 0.42); color: #fff; font: inherit; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .15s ease; }
.ai-tag-btn:hover, .ai-tag.is-open .ai-tag-btn { background: rgba(20, 22, 20, 0.78); }
.ai-tag-btn svg { width: 0.72rem; height: 0.72rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ai-tag-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ai-tag-pop { position: absolute; right: 0; bottom: calc(100% + 0.4rem); width: max-content; max-width: min(16rem, 70vw); margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(20, 22, 20, 0.9); color: #fff; font-size: 0.78rem; line-height: 1.4; visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.ai-tag.is-open .ai-tag-pop, .ai-tag-btn:focus-visible + .ai-tag-pop { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) { .ai-tag:hover .ai-tag-pop { visibility: visible; opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-tag-pop { transition: none; } }

/* Treść podstron (artykuły pod SEO): spis treści z boku, czytelna kolumna tekstu, kafelki z liczbami, ramki, listy. */
.article { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .article { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; } }
.toc { align-self: start; font-size: 0.95rem; }
@media (min-width: 980px) { .toc { position: sticky; top: 5.5rem; } }
.toc p { font-weight: 700; margin: 0 0 0.6rem; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--line); display: grid; gap: 0.45rem; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--green-dark); text-decoration: underline; }
.prose { max-width: 46rem; min-width: 0; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: var(--step-3); margin-top: 3rem; scroll-margin-top: 5.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose p, .prose li { color: #3d413c; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose a:not(.btn) { color: var(--green-dark); font-weight: 600; }
.prose .steps { padding-left: 0; }
.prose .steps h3, .steps h3 { margin-top: 0; }
.prose .btn { margin-top: 0.5rem; }
.prose strong { color: var(--ink); }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before { content: ""; position: absolute; left: 0.1rem; top: 0.3rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23325f34' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.facts { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); margin-block: 1.5rem; }
.facts > div { border: 1.5px solid var(--green-dark); border-radius: 6px; padding: 0.9rem 1rem; display: grid; gap: 0.2rem; align-content: start; }
.facts strong { font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem); font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; line-height: 1.15; }
.facts span { color: var(--muted); font-size: 0.93rem; line-height: 1.4; }
/* Boksy: cienka ramka, tytuł wpisany w górną krawędź jak na rysunku technicznym, bez tła (wersja B, Kuba 27.10).
   Tło tytułu = tło sekcji (--box-bg), więc ramka „przerywa się” pod napisem. */
:root { --box-bg: var(--bg); }
.section--alt, .lp-ch--alt, .lp-calc-box, .cp-card, .form, .calc-card { --box-bg: var(--surface); }
.callout, .compare > div { --plate: var(--green-dark); border: 1.5px solid var(--plate); border-radius: 6px; padding: 1.1rem 1.2rem 1.1rem; display: grid; align-content: start; }
.callout, .compare { margin-top: 0.7rem; }
* + .callout, * + .compare { margin-top: 1.9rem; }
.lp-aside > .callout, .lp-aside > .compare { margin-top: 0.7rem; }
.callout--warm { --plate: var(--warm-ink); }
.compare .no { --plate: #57564f; }
.callout > *, .compare > div > * { margin: 0; }
.callout > :first-child, .compare h3 { width: fit-content; max-width: calc(100% + 0.9rem); margin: calc(-1.1rem - 0.75px - 0.65em) 0 0 -0.45rem; padding-inline: 0.45rem; background: var(--box-bg); color: var(--plate); font-size: 0.98rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.callout > :nth-child(2), .compare > div > :nth-child(2) { margin-top: 0.7rem; }
.callout > * + :not(:nth-child(2)) { margin-top: 0.6rem; }
.compare ul { padding-left: 1.2rem; }
.compare .checklist li { padding-left: 1.75rem; }
.callout > p:has(.btn) { margin-top: 0.9rem; }
.faq + .callout { margin-top: 2.5rem; }
.compare { display: grid; gap: 1.6rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.source { font-size: var(--step--1); color: var(--muted); }
.prose .levels { min-width: 32rem; }
.prose .faq { margin-top: 1.25rem; }

/* Zapowiedź kalkulatora magazynu na stronie głównej: ciemna sekcja jak slajd. */
.sym { --s-pv: #e3ad35; --s-mag: #325f34; --s-grid: #a3a69f; --s-chg: #8fbf92; --s-exp: #f1d68e; --s-line: #b77a06; background: var(--green-dark); color: #fff; }
.sym-head { display: grid; gap: 0.75rem; max-width: 50rem; margin-bottom: 2rem; }
.sym-kicker { margin: 0; font-weight: 700; color: #bfe0c1; letter-spacing: 0.02em; }
.sym-head h1, .sym-head h2 { color: #fff; font-size: var(--step-3); }
.sym-teaser .sym-head { margin-bottom: 0; }
.sym-teaser .btn { justify-self: start; margin-top: 0.5rem; }
.sym-lead { margin: 0; color: #dbe8dc; font-size: var(--step-1); max-width: 44rem; }
/* Symulator, wersja B: dwa statyczne wykresy z opisem zamiast interakcji */
.sym-tabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; margin-bottom: 1.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
.sym-tabs button { font: inherit; font-weight: 600; font-size: 0.95rem; min-height: 44px; padding: 0.55rem 1.15rem; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.sym-tabs button[aria-selected="true"] { background: var(--surface); color: var(--green-dark); }
.sym-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sym-slides { display: grid; gap: 1.5rem; }
.sym-slide { background: var(--surface); color: var(--ink); border-radius: 22px; padding: clamp(1.1rem, 0.7rem + 2vw, 2.2rem); display: grid; gap: 1.1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.sym-slide-no { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.sym-slide h3 { font-size: var(--step-2); max-width: 30ch; }
.sym-slide-sub { margin: -0.4rem 0 0; color: var(--muted); max-width: 62ch; }
.sl-fig { margin: 0; display: grid; gap: 0.5rem; }
.sl-plot { position: relative; height: clamp(11rem, 8rem + 14vw, 17rem); margin-left: 3.4rem; }
.sl-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-pv { fill: var(--s-exp); }
.sl-price { fill: none; stroke: var(--green-dark); stroke-width: 3; stroke-linejoin: round; }
.sl-y { position: absolute; left: -3.4rem; top: 0; bottom: 0; width: 3rem; }
.sl-y span { position: absolute; right: 0; transform: translateY(50%); font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, 50%); border: 3px solid var(--surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.sl-dot.is-lo { background: var(--green); }
.sl-dot.is-hi { background: #a8430f; }
.sl-x { position: relative; height: 1.1rem; margin-left: 3.4rem; font-size: 0.75rem; color: var(--muted); }
.sl-x span { position: absolute; transform: translateX(-50%); }
.sl-x span:nth-child(1) { left: 0; transform: none; }
.sl-x span:nth-child(2) { left: 25%; }
.sl-x span:nth-child(3) { left: 50%; }
.sl-x span:nth-child(4) { left: 75%; }
.sl-x span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.sl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.85rem; color: var(--muted); }
.sl-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sl-legend i { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; }
.sl-legend .k-price { height: 3px; width: 1.1rem; border-radius: 2px; background: var(--green-dark); }
.sl-legend .k-pvarea { background: var(--s-exp); }
.sl-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.sl-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-nums p { margin: 0; display: grid; align-content: start; gap: 0.1rem; padding: 0.85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; font-size: 0.85rem; color: var(--muted); }
.sl-nums strong { font-size: var(--step-2); line-height: 1.15; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.sl-nums p.sl-x2 { border: 0; align-content: center; justify-items: center; text-align: center; padding-inline: 0.25rem; }
.sl-nums p.sl-x2 strong { color: #a8430f; }
.sl-nums:not(.sl-nums--3) p:last-child { background: var(--green-dark); border-color: var(--green-dark); color: #dbe8dc; }
.sl-nums:not(.sl-nums--3) p:last-child strong { color: #fff; }
.sl-what { display: grid; gap: 0.5rem; max-width: 66ch; }
.sl-what h4 { margin: 0; font-size: var(--step-0); }
.sl-what p { margin: 0; }
.sl-src { margin: 0; font-size: 0.8rem; color: var(--muted); max-width: 80ch; }
.sl-rows { display: grid; gap: 1rem; }
.sl-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: end; gap: 0.75rem; }
.sl-row p { margin: 0; font-weight: 600; font-size: 0.9rem; }
.sl-bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: clamp(5.5rem, 4rem + 6vw, 8rem); align-items: end; border-bottom: 1px solid var(--line); }
.sl-bars span { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.sl-bars i { display: block; width: 100%; }
.sl-bars i:first-child { border-radius: 2px 2px 0 0; }
.sl-bars .b-pv { background: var(--s-pv); }
.sl-bars .b-mag { background: var(--s-mag); }
.sl-bars .b-grid { background: var(--s-grid); }
.sl-x--bars { margin-left: calc(9rem + 0.75rem); }
@media (max-width: 700px) {
  .sym-tabs { display: flex; }
  .sym-tabs button { flex: 1; padding-inline: 0.6rem; }
  .sl-nums, .sl-nums--3 { grid-template-columns: minmax(0, 1fr); }
  .sl-nums p.sl-x2 { justify-items: start; text-align: left; padding: 0 1rem; }
  .sl-row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .sl-x--bars { margin-left: 0; }
  .sl-plot, .sl-x { margin-left: 2.9rem; }
  .sl-y { left: -2.9rem; width: 2.6rem; }
}

/* ---------- Podstrony usług (lp-): zdjęcie z realizacji w hero, kalkulator mocy, rozdziały bez kart ---------- */
.lp-hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.25rem, 1rem + 3vw, 3.75rem); }
.lp-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4.5rem); } }
.lp-hero h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.03em; max-width: 15ch; }
.lp-hero .lead { margin: 1.1rem 0 0; font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 34rem; text-wrap: pretty; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.lp-hero-note { margin: 1rem 0 0; font-size: var(--step--1); color: var(--muted); }
.lp-photo { position: relative; margin: 0; }
.lp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; outline: 1px solid rgba(23, 38, 29, 0.08); outline-offset: -1px; }
.lp-photo figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(20, 36, 24, 0.72); color: #fff; font-size: 0.875rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.lp-chapters { border-block: 1px solid var(--line); background: var(--surface); }
.lp-chapters ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 1.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lp-chapters ul::-webkit-scrollbar { display: none; }
.lp-chapters li { flex: none; }
.lp-chapters a { display: block; padding: 0.95rem 0; color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.lp-chapters a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 1080px) { .lp-chapters ul { flex-wrap: wrap; overflow: visible; } }

.lp-calc { background: var(--green-dark); color: #fff; padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.75rem); }
.lp-calc-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .lp-calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.lp-calc h2 { color: #fff; font-size: var(--step-3); letter-spacing: -0.02em; }
.lp-calc-text p { margin: 1rem 0 0; color: #d5e4d6; font-size: var(--step-0); line-height: 1.6; max-width: 34rem; }
.lp-calc-box { background: var(--surface); color: var(--ink); border-radius: 24px; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 24px 48px -24px rgba(0, 0, 0, 0.45); }
.lp-calc-box label { font-weight: 700; }
.lp-calc-in { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; border-bottom: 2px solid var(--green); }
.lp-calc-in input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--green-dark); font: 800 clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem)/1.15 var(--f-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; padding: 0.2rem 0; -moz-appearance: textfield; appearance: textfield; }
.lp-calc-in input::-webkit-outer-spin-button, .lp-calc-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lp-calc-in input:focus-visible { outline: none; }
.lp-calc-in:focus-within { border-bottom-color: var(--green-dark); box-shadow: 0 2px 0 var(--green-dark); }
.lp-calc-in span { font-weight: 700; font-size: var(--step-1); color: var(--muted); }
.lp-calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 1rem 1.5rem; margin: 1.4rem 0 0; }
.lp-calc-out dt { font-size: var(--step--1); color: var(--muted); }
.lp-calc-out dd { margin: 0.15rem 0 0; font-weight: 800; font-size: var(--step-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-calc-note { margin: 1.25rem 0 0; font-size: var(--step--1); color: var(--muted); line-height: 1.5; }

.lp-ch { padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem); scroll-margin-top: 4rem; }
.lp-ch--alt { background: var(--surface); border-block: 1px solid var(--line); }
.lp-ch .prose h2 { scroll-margin-top: 5rem; letter-spacing: -0.02em; }
.lp-after { margin-top: 2rem; }
.lp-aside { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.lp-aside .lp-figs { margin: 0; }
.lp-aside .table-scroll { margin: 0; }
.lp-aside .levels { min-width: 0; }
.lp-aside .levels td { white-space: nowrap; }
.lp-aside .levels th { vertical-align: bottom; }
@media (max-width: 559px) { .lp-aside .levels th, .lp-aside .levels td { padding-inline: 0.35rem; } .lp-aside .levels th:first-child, .lp-aside .levels td:first-child { padding-left: 0; } }
.lp-aside .levels td:first-child { white-space: normal; }
.lp-case { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
@media (min-width: 980px) { .lp-aside { padding-top: 0.6rem; } }

.lp-figs { display: grid; margin-block: 1.5rem; border-top: 1px solid var(--line); }
.lp-figs > div { display: grid; gap: 0.2rem 1.5rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .lp-figs > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
.lp-figs strong { font-size: var(--step-2); font-weight: 800; color: var(--green-dark); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-figs span { color: var(--muted); }

.ref { margin-left: 0.15em; font-size: 0.7em; font-weight: 700; vertical-align: super; line-height: 0; color: var(--green); text-decoration: none; }
.ref:hover { text-decoration: underline; }

.lp-split { display: grid; gap: 2.5rem; }
@media (min-width: 980px) { .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.lp-flow { list-style: none; margin: 0; padding: 0; counter-reset: lp-flow; }
.lp-flow li { position: relative; counter-increment: lp-flow; padding: 0 0 1.6rem 3rem; }
.lp-flow li::before { content: counter(lp-flow); position: absolute; left: 0; top: -0.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 0.95rem; display: grid; place-items: center; }
.lp-flow li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.1rem; bottom: 0.2rem; width: 2px; background: var(--line); }
.lp-flow h3 { font-size: var(--step-1); margin: 0; }
.lp-flow p { margin: 0.35rem 0 0; color: var(--muted); max-width: 36rem; }

.lp-mounts { display: grid; gap: 1.75rem; margin-top: 2rem; }
@media (min-width: 820px) { .lp-mounts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); } }
.lp-mounts img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; outline: 1px solid rgba(23, 38, 29, 0.08); outline-offset: -1px; }
.lp-mounts h3 { margin: 1rem 0 0; font-size: var(--step-2); }
.lp-mounts p { margin: 0.5rem 0 0; color: var(--muted); }
.lp-mounts strong { color: var(--ink); }

.lp-steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: lp-step; display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.lp-steps li { counter-increment: lp-step; border-top: 2px solid var(--green); padding-top: 0.9rem; }
.lp-steps li::before { content: counter(lp-step); display: block; font-size: var(--step-3); font-weight: 800; line-height: 1; color: #9fbe9f; font-variant-numeric: tabular-nums; }
.lp-steps h3 { margin: 0.6rem 0 0; font-size: var(--step-1); }
.lp-steps p { margin: 0.4rem 0 0; color: var(--muted); }

@media (min-width: 760px) { .prose .lp-cols { display: block; columns: 2; column-gap: 2.5rem; } .prose .lp-cols li { break-inside: avoid; margin-bottom: 0.5rem; } }

.lp-band { background: var(--green); color: #fff; }
.lp-band-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.lp-band img { width: clamp(6.5rem, 4rem + 8vw, 11rem); height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.3)); }
.lp-band h2 { color: #fff; font-size: var(--step-3); }
.lp-band p { margin: 0.6rem 0 1.25rem; color: #e1ece1; max-width: 38rem; }

.prose h2.lp-sources-h { font-size: var(--step-1); margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.prose .lp-sources { font-size: var(--step--1); gap: 0.5rem; padding-left: 1.4rem; }
.prose .lp-sources li { color: var(--muted); scroll-margin-top: 5rem; }
.prose .lp-sources li:target { background: var(--ph-bg); border-radius: 6px; }

.lp-contact { display: grid; gap: 0.9rem; justify-items: start; align-self: start; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: 24px; background: var(--tint); }
@media (min-width: 980px) { .lp-contact { position: sticky; top: 5.5rem; } }
.lp-contact h2 { font-size: var(--step-2); letter-spacing: -0.01em; }
.lp-contact p { margin: 0; color: var(--muted); }
.lp-contact-tel { font-size: var(--step--1); }
.lp-contact-tel a { color: var(--green-dark); font-weight: 700; }
@media (min-width: 980px) { .lp-split--faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.lp-split--faq .faq { margin-top: 0; }
@media (min-width: 980px) { .lp-split--faq > :first-child { position: sticky; top: 5.5rem; align-self: start; } }

/* Magazyny energii: przełączniki w kalkulatorze opłacalności, szeroka tabela, zdjęcie urządzenia */
.lp-seg { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lp-seg legend { width: 100%; padding: 0; margin-bottom: 0.5rem; font-weight: 700; }
.lp-seg label { position: relative; display: inline-flex; }
.lp-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lp-seg span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.45rem 0.95rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--ink); background: var(--surface); transition-property: background-color, border-color, color; transition-duration: .15s; }
.lp-seg label:hover span { border-color: var(--green); }
.lp-seg input:checked + span { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.lp-seg input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.lp-seg:disabled { opacity: 0.45; }
.lp-seg:disabled input { cursor: not-allowed; }
.lp-calc-box[data-mag] .lp-calc-out { margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ref--light { color: #cfe3cf; }
.lp-wide { min-width: 40rem; }
.lp-vs th[scope="row"] { font-weight: 700; color: var(--ink); white-space: nowrap; }
.lp-table-note { margin: 0.9rem 0 0; font-size: var(--step--1); color: var(--muted); }
.lp-narrow { max-width: 46rem; }
.lp-device { margin: 0; display: grid; place-items: center; }
.lp-device img { width: clamp(9rem, 6rem + 10vw, 15rem); height: auto; filter: drop-shadow(0 22px 28px rgba(23, 38, 29, 0.18)); }
.lp-hero .grant-card { border-radius: 24px; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.lp-device--hero img { width: min(100%, 30rem); }
.lp-count { margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.lp-count-big { margin: 0; font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.lp-count-big.is-late { color: var(--err); }
.lp-count-sub { margin: 0.35rem 0 0; font-weight: 600; }
.lp-cost td:not(:first-child) { text-align: right; }
.lp-cost th:not(:first-child) { text-align: right; }
.lp-aside .lp-cp td:last-child { white-space: normal; min-width: 11rem; }
@media (max-width: 559px) { .lp-vs th[scope="row"] { white-space: normal; min-width: 7rem; } }
.lp-seg--list { flex-direction: column; }
.lp-seg--list label, .lp-seg--list span { width: 100%; }
.lp-seg--list span { border-radius: 12px; }
.lp-diag { margin: 0.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: 0.9rem; }
.lp-diag dt { font-size: var(--step--1); color: var(--muted); }
.lp-diag dd { margin: 0.15rem 0 0; font-weight: 600; line-height: 1.45; }
@media (min-width: 980px) { .lp-aside--sticky { position: sticky; top: 5.5rem; } .lp-aside--sticky .lp-contact { position: static; } }
.prose .lp-flow { margin-top: 1.5rem; }
.lp-aside .lp-device img { width: clamp(7rem, 5rem + 5vw, 10rem); }
.lp-band img.lp-band-tall { width: clamp(4.5rem, 3rem + 4vw, 7rem); }
/* Dla biznesu: wykres profilu zużycia w ciągu doby. */
.lp-prof { margin: 0.4rem 0 1rem; }
.lp-prof svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-prof .g { stroke: var(--line); stroke-width: 1; }
.lp-prof .ax { stroke: var(--muted); stroke-width: 1; }
.lp-prof text { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.lp-prof .out { fill: #f1d68e; }
.lp-prof .own { fill: #8fbf92; }
.lp-prof .load { fill: none; stroke: var(--green-dark); stroke-width: 2.5; stroke-linejoin: round; }
.lp-prof-key { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; font-size: var(--step--1); color: var(--muted); }
.lp-prof-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lp-prof-key span::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--c); }
.lp-prof-key .k-own { --c: #8fbf92; }
.lp-prof-key .k-out { --c: #f1d68e; }
.lp-prof-key .k-load::before { height: 3px; border-radius: 2px; background: var(--green-dark); }
.lp-table-cap { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 0.6rem; color: var(--ink); }
@media (min-width: 1100px) { .lp-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Dotacje: lista naborów w nagłówku i wynik doboru programów. */
.lp-terms { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); min-width: 0; }
.lp-terms h2 { font-size: var(--step-1); }
.lp-terms ul { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.lp-terms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; padding-block: 0.7rem; border-top: 1px solid var(--line); }
.lp-terms-name { font-weight: 700; color: var(--ink); }
.lp-terms-amt { grid-column: 1; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-terms-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-terms-st.is-open { color: var(--green-dark); padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--tint); }
.lp-match { list-style: none; margin: 0.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.lp-match li { display: grid; gap: 0.15rem; padding-block: 0.85rem; border-bottom: 1px solid var(--line); line-height: 1.45; }
.lp-match strong { color: var(--green-dark); }
.lp-match span { color: var(--ink); }
.lp-match em { font-style: normal; font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.lp-match em.is-before { color: var(--warm-ink); }
.lp-match li.is-closed strong, .lp-match li.is-closed span { color: var(--muted); }
.lp-aside .lp-case-h { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .lp-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-calc { scroll-margin-top: 4rem; }
/* Kalkulatory: dotacja PME2, lista narzędzi w nagłówku. */
.lp-pme-in { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin-bottom: 1.1rem; align-items: end; }
.lp-pme-in > :last-child { grid-column: 1 / -1; }
.lp-pme-in label { display: block; font-size: 0.95rem; line-height: 1.3; }
.lp-pme-msg { margin: 0.9rem 0 0; font-weight: 600; color: var(--green-dark); }
.lp-pme-msg.is-late { color: var(--err); }
.lp-tools li { display: block; padding: 0; }
.lp-tools a { display: grid; gap: 0.1rem; padding: 0.7rem 2rem 0.7rem 0; text-decoration: none; position: relative; }
.lp-tools a::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.55rem; height: 0.55rem; border-top: 2px solid var(--green-dark); border-right: 2px solid var(--green-dark); transform: translateY(-50%) rotate(45deg); transition: transform .15s ease; }
.lp-tools a:hover .lp-terms-name { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-tools a:hover::after { transform: translate(3px, -50%) rotate(45deg); }
.lp-tools a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 8px; }
.lp-pme .lp-calc-in input { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.lp-pme .lp-calc-in span { font-size: var(--step-0); }
.lp-pme .lp-calc-out { padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* O nas: zasady na ciemnym pasie, karta „Sprawdź nas”. */
.lp-promise { background: var(--green-dark); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); scroll-margin-top: 4rem; }
.lp-promise-head { max-width: 46rem; }
.lp-promise h2 { color: #fff; font-size: var(--step-4); letter-spacing: -0.02em; }
.lp-promise-head p { margin: 1rem 0 0; color: #d5e4d6; }
.lp-promise-cols { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
@media (min-width: 900px) { .lp-promise-cols { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); } }
.lp-promise h3 { color: #fff; font-size: var(--step-1); padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.lp-promise ul { list-style: none; margin: 0; padding: 0; }
.lp-promise li { position: relative; padding: 0.95rem 0 0.95rem 2.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--step-1); line-height: 1.4; color: #fff; text-wrap: pretty; }
.lp-promise li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.lp-promise-yes li::before { background: #8fbf92 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23244a2b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat; }
.lp-promise-no li::before { border: 2px solid rgba(255, 255, 255, 0.55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.lp-promise-foot { margin: 2rem 0 0; max-width: 46rem; color: #d5e4d6; font-size: var(--step--1); line-height: 1.6; }
.lp-promise-foot a:not(.ref) { color: #fff; font-weight: 600; }
.lp-promise .ph { color: var(--ph-ink); }
.lp-verify a.lp-terms-st { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lp-verify a.lp-terms-st:hover { text-decoration-thickness: 2px; }
.lp-aside .trust-certs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
/* Realizacje: nagłówek bez zdjęcia i galeria z filtrem. */
.lp-hero--text .lead { max-width: 44rem; }
.lp-gallery { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.lp-gallery .works { margin-top: 0.5rem; }
.lp-gallery .work[hidden] { display: none; }
.lp-seg legend.sr-only { width: 1px; margin: -1px; }
.lp-ch > .wrap > p.lp-after { color: var(--muted); }
.lp-verify h2 { overflow-wrap: anywhere; }

/* Telefon: szerokie tabele (.lp-wide) jako karty, jeden wiersz pod drugim; nazwy kolumn dokłada build.py w data-label */
@media (max-width: 699px) {
  .levels.lp-wide, .prose .levels.lp-wide { min-width: 0; }
  .levels.lp-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .levels.lp-wide tbody, .levels.lp-wide tr, .levels.lp-wide th, .levels.lp-wide td { display: block; }
  .levels.lp-wide tr { display: grid; gap: 0.45rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line); }
  .levels.lp-wide tbody tr:last-child { border-bottom: 0; }
  .levels.lp-wide th, .levels.lp-wide td { padding: 0; border: 0; white-space: normal; min-width: 0; }
  .levels.lp-wide tr > :first-child { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
  .levels.lp-wide td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.1rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
  .levels.lp-wide tr > td:first-child::before { content: none; }
  .levels.lp-wide .pct { font-size: 1.15rem; }
}

/* Telefon: większe pola do trafienia palcem */
.ref { position: relative; }
.ref::after { content: ""; position: absolute; inset: -0.9rem -0.6rem; }
.lp-terms-st, .ai-tag-btn { position: relative; }
.lp-terms-st::after { content: ""; position: absolute; inset: -0.6rem -0.4rem; }
.ai-tag-btn::after { content: ""; position: absolute; inset: -0.8rem -0.55rem; }
a.gr-count, .ks-aside a { position: relative; }
a.gr-count::after, .ks-aside a::after { content: ""; position: absolute; inset: -0.35rem -0.2rem; }
form input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--green); flex: none; }
@media (max-width: 699px) {
  .lp-pme .lp-calc-out > div:last-child { grid-column: 1 / -1; }
  .lp-cp th, .lp-cp td { padding-inline: 0.4rem; }
  .lp-cp .pct { font-size: 1.15rem; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .chips label { border-radius: 12px; padding-inline: 0.65rem; line-height: 1.25; }
}
@media (max-width: 359px) {
  .house-canvas { right: 0; }
  .house-panel { top: 0.4rem; }
  .house-seg button { min-height: 34px; padding: 0 0.6rem; font-size: 0.8rem; }
  .house-pause { width: 34px; height: 34px; }
  /* Najwęższe telefony: długie polskie słowa w nagłówkach muszą się mieścić w całości */
  :root { --step-3: 1.6rem; }
  .lp-terms li { grid-template-columns: minmax(0, 1fr); }
  .lp-terms-st { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Kalkulator magazynu (/symulator/): układ Kuby z 28.10.2026 (jasne karty, ciemnozielony panel roku), liczby z modelu godzinowego. */
.ks { --ks-sl: #718e48; --ks-mag: var(--green); --ks-siec: #7b8b8e; --ks-pv: #b47a13; --ks-blady: #e9efe6; --ks-jasny: #d6e3cf;
  --s-pv: #e3ad35; --s-mag: #325f34; --s-grid: #a3a69f; --s-exp: #f1d68e; padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ks-ik { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ks-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; margin-bottom: 1.5rem; }
.ks-intro h1 { font-size: var(--step-4); max-width: 14ch; }
.ks-intro h1 span { color: var(--green); }
.ks-lead { margin-top: 0.9rem; color: var(--muted); font-size: var(--step-1); max-width: 38rem; }
.ks-aside { display: grid; justify-items: end; gap: 0.3rem; font-size: 0.875rem; color: var(--muted); text-align: right; padding-bottom: 0.3rem; }
.ks-miejsce { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font-weight: 600; }
.ks-aside a { margin-top: 0.3rem; text-underline-offset: 4px; }
.ks .sym-tabs { background: var(--ks-blady); border-color: var(--line); }
.ks .sym-tabs button { color: var(--green-dark); }
.ks .sym-tabs button[aria-selected="true"] { background: var(--green); color: #fff; }
.ks .sym-tabs button:focus-visible { outline: 3px solid var(--green); }
.ks .sym-slide { border: 1px solid var(--line); box-shadow: none; }
.ks-noscript { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; }

.ks-set, .ks-doba, .ks-mies-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.ks-set { padding: 1.4rem 1.6rem 0; margin-bottom: 1.4rem; }
.ks-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ks-top h2, .ks-doba-top h2, .ks-mies-box h2 { font-size: var(--step-1); }
.ks-tekst { font: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: none; padding: 0.5rem 0; min-height: 44px; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.ks-tekst:hover { color: var(--green); }
.ks-blad { color: var(--err); font-size: 0.9rem; }
.ks-blad:empty { display: none; }
.ks-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 2.5rem; padding: 1.3rem 0 1.1rem; }
.ks-pole { border: 0; margin: 0; padding: 0; min-width: 0; }
.ks-pole > label, .ks-pole legend { font-size: 0.9rem; color: var(--muted); padding: 0; }
.ks-liczba { display: flex; align-items: baseline; gap: 0.45rem; }
.ks-liczba input { font: inherit; font-size: 2rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); width: 4.6ch; max-width: 100%; padding: 0.1rem 0; border: 0; border-bottom: 1px dashed transparent; background: none; -moz-appearance: textfield; appearance: textfield; }
.ks-liczba input:hover { border-bottom-color: var(--line); }
.ks-liczba input::-webkit-inner-spin-button, .ks-liczba input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ks-liczba span { color: var(--muted); }
.ks-zakres { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }
.ks input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0.2rem 0 0; background: transparent; cursor: pointer; --ks-p: 20%; }
.ks input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--green) var(--ks-p), #e2e6dd var(--ks-p)); }
.ks input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); margin-top: -7px; }
.ks input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #e2e6dd; }
.ks input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
.ks input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); }
.ks-kafle { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; }
.ks-kafle label { position: relative; flex: 1; max-width: 4rem; cursor: pointer; }
.ks-kafle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ks-kafle label span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; font-size: 1.25rem; background: #fff; transition: background-color .15s ease, border-color .15s ease; }
.ks-kafle label:hover span { border-color: var(--green); }
.ks-kafle input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.ks-kafle input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.ks-jedn { font-size: 0.9rem; color: var(--muted); }
.ks-pod { display: grid; gap: 0.1rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.ks-pod #ks-pme { color: var(--green-dark); }
.ks-dol { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ks-dodaj { display: flex; align-items: center; gap: 0.5rem 1.6rem; border: 0; margin: 0; padding: 0; flex-wrap: wrap; }
.ks-dodaj legend { float: left; font-size: 0.9rem; color: var(--muted); margin-right: 0.4rem; }
.ks-check { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; cursor: pointer; font-size: 0.95rem; }
.ks-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.ks-check span { display: grid; line-height: 1.3; }
.ks-check small { font-size: 0.8rem; color: var(--muted); }
.ks-select { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--muted); }
.ks select { font: inherit; font-size: 0.9rem; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0.55rem 0.7rem; min-height: 44px; max-width: 100%; cursor: pointer; }
.ks-ceny { border-top: 1px solid var(--line); }
.ks-ceny > summary, .ks-tab > summary, .ks-akord summary { list-style: none; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.ks-ceny > summary::-webkit-details-marker, .ks-tab > summary::-webkit-details-marker, .ks-akord summary::-webkit-details-marker { display: none; }
.ks-ceny > summary { min-height: 52px; font-size: 0.95rem; color: var(--green); font-weight: 600; }
.ks-ceny-sum { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
details[open] > summary > .ks-ik { transform: rotate(180deg); }
.ks-ceny > summary .ks-ik, .ks-tab > summary .ks-ik, .ks-akord summary .ks-ik { transition: transform .18s ease; }
.ks-ceny-in { display: grid; gap: 1rem; padding-bottom: 1.3rem; }
.ks-falownik { display: flex; flex-wrap: wrap; gap: 0 1.6rem; border: 0; margin: 0; padding: 0; }
.ks-falownik legend { font-size: 0.9rem; color: var(--muted); padding: 0; }
.ks-ceny-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.ks-ceny-grid > label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.ks-jednostka { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding-right: 0.7rem; }
.ks-jednostka input { font: inherit; width: 100%; min-width: 0; border: 0; background: none; padding: 0.55rem 0.7rem; min-height: 44px; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.ks-jednostka input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ks [aria-invalid] { outline: 2px solid var(--err); outline-offset: 2px; }
.ks-ceny-in .fine { max-width: 75ch; }
.ks-skok { display: none; }

.ks-wyniki { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.4rem; align-items: start; }
.ks-rok { grid-column: 2; grid-row: 1; background: var(--green-dark); color: #fff; border-radius: 16px; overflow: hidden; }
.ks-rok-in { padding: 1.5rem 1.5rem 1.3rem; }
.ks-rok-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.ks-rok-top h2 { color: #fff; font-size: var(--step-2); }
.ks-rok-top span { font-size: 0.75rem; color: var(--ks-jasny); border: 1px solid #6c8b69; border-radius: 6px; padding: 0.15rem 0.45rem; white-space: nowrap; }
.ks-rok-lab { margin-top: 1.5rem; font-size: 0.9rem; color: var(--ks-jasny); }
.ks-rok-kw { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; line-height: 1.05; }
.ks-rok-kw strong { font-size: clamp(3rem, 2.4rem + 2vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #e4efba; }
.ks-rok-kw span { color: var(--ks-jasny); }
.ks-rok-opis { margin-top: 0.4rem; font-size: 0.875rem; color: var(--ks-jasny); }
.ks-rach { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid #527451; }
.ks-rach h3 { font-size: 0.875rem; font-weight: 400; color: var(--ks-jasny); margin-bottom: 0.7rem; letter-spacing: 0; }
.ks-rach-w + .ks-rach-w { margin-top: 0.75rem; }
.ks-rach-w > div:first-child { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.ks-rach-w strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.ks-pas { height: 7px; border-radius: 4px; background: #3f623f; margin-top: 0.4rem; overflow: hidden; }
.ks-pas i { display: block; height: 100%; border-radius: 4px; background: #9cb498; transition: width .25s ease; }
.ks-rach-z .ks-pas i { background: #d5e8a3; }
.ks-rok dl { margin: 0; }
.ks-rok dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ks-rok dt { font-size: 0.875rem; color: var(--ks-jasny); }
.ks-rok dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.ks-fakty { display: grid; gap: 0.55rem; padding: 1.1rem 0; margin-top: 1.1rem !important; border-top: 1px solid #527451; }
.ks-koszt { display: grid; gap: 0.45rem; padding: 1.1rem 0; border-top: 1px solid #527451; }
.ks-koszt dt small { display: block; font-size: 0.75rem; color: #b9cdb2; }
.ks-koszt-suma { padding-top: 0.45rem; border-top: 1px dashed #527451; }
.ks-koszt-suma dt { color: #fff; }
.ks-zwrot { padding-top: 1.1rem; border-top: 1px solid #527451; }
.ks-zwrot > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.ks-zwrot strong { font-size: var(--step-2); font-weight: 500; text-align: right; }
.ks-zwrot p { margin-top: 0.4rem; font-size: 0.85rem; color: var(--ks-jasny); }
.ks-tekst--jasny { color: #e4efba; text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; }
.ks-tekst--jasny:hover { color: #fff; }
.ks-tekst--jasny:focus-visible { outline-color: #e4efba; }
.ks-rok-przyp { margin-top: 0.8rem; font-size: 0.75rem; color: #c8d9bf; }
.ks-rok-cta { background: #e6edd9; color: var(--green-dark); padding: 1.2rem 1.5rem 1.4rem; display: grid; gap: 0.75rem; }
.ks-rok-cta .btn { justify-self: start; }

.ks-doba { grid-column: 1; grid-row: 1; padding: 1.5rem 1.6rem 0; min-width: 0; overflow: hidden; }
.ks-doba-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ks-doba-top p { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }
.ks-pasek { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1rem; }
.ks-seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--bg); border-radius: 10px; }
.ks-seg button { font: inherit; font-size: 0.875rem; border: 0; border-radius: 7px; min-height: 40px; padding: 0.35rem 0.85rem; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ks-seg button:hover:not([aria-pressed="true"]) { background: var(--ks-blady); }
.ks-seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
.ks-leg { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.8rem; color: var(--muted); }
.ks-leg span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ks-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ks-k-sl { background: var(--ks-sl); } .ks-k-mag { background: var(--ks-mag); } .ks-k-siec { background: var(--ks-siec); }
.ks-leg .ks-k-pv { width: 16px; height: 3px; border-radius: 2px; background: var(--ks-pv); }
.ks-wykres-box { margin-top: 0.4rem; }
.ks-wykres-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.ks-wykres-box text { font-family: var(--f-body); font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ks-siatka { stroke: #e6e9e1; stroke-width: 1; }
.ks-zazn { fill: #f7edcf; }
.ks-c-sl { fill: var(--ks-sl); } .ks-c-mag { fill: var(--ks-mag); } .ks-c-siec { fill: var(--ks-siec); }
.ks-c-sl, .ks-c-mag, .ks-c-siec { stroke: #fff; stroke-width: 1; }
.ks-c-pv { fill: none; stroke: var(--ks-pv); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ks-c-pkt { fill: var(--ks-pv); stroke: #fff; stroke-width: 2; }
.ks-traf { fill: transparent; cursor: pointer; }
.ks-traf:hover { fill: rgba(50, 95, 52, 0.06); }
.ks-czas { display: flex; align-items: center; gap: 1rem; padding: 0.3rem 0 0.8rem; }
.ks-czas label { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.ks-czas output { font-weight: 600; color: var(--ink); margin-left: -0.6rem; font-variant-numeric: tabular-nums; }
.ks-czas input { flex: 1; min-width: 4rem; }
.ks-czas .ks-tekst { color: var(--green-dark); white-space: nowrap; }
.ks-czas .ks-tekst[aria-pressed="true"] { color: var(--green); }
.ks-godzina { background: var(--ks-blady); margin: 0 -1.6rem; padding: 1.1rem 1.6rem 1rem; }
.ks-godzina-top { display: flex; align-items: baseline; gap: 0.75rem; }
.ks-godzina-top h3 { font-size: 1rem; font-weight: 600; }
.ks-godzina-top span { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ks-godzina > p { font-size: 0.9rem; color: var(--muted); margin: 0.35rem 0 0.8rem; min-height: 2.9em; }
.ks-przeplyw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.ks-przeplyw dt { font-size: 0.75rem; color: var(--muted); }
.ks-przeplyw dd { margin: 0; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-soc { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid #cdd9c6; font-size: 0.8rem; color: var(--muted); }
.ks-soc > span:first-child { white-space: nowrap; }
.ks-soc strong { color: var(--ink); font-weight: 500; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.ks-soc-pas { flex: 1; height: 6px; border-radius: 6px; background: #d4dfce; overflow: hidden; }
.ks-soc-pas i { display: block; height: 100%; background: var(--green); transition: width .2s ease; }
.ks-soc > span:last-child { min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.ks-dzien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 1.3rem 0 0.9rem; }
.ks-dzien dt { font-size: 0.8rem; color: var(--muted); }
.ks-dzien dd { margin: 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-dzien dd.ks-roznica { font-size: 0.8rem; letter-spacing: 0; color: var(--green); white-space: normal; }
.ks-uwaga { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.9rem; }
.ks-tab { border-top: 1px solid var(--line); }
.ks-tab > summary { min-height: 50px; font-size: 0.9rem; color: var(--green); }
.ks-tab > summary .ks-ik { margin-left: auto; }
.ks-tab-scroll { overflow-x: auto; padding-bottom: 1rem; }
.ks-tab table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.ks-tab caption { text-align: left; color: var(--muted); padding: 0.4rem 0; }
.ks-tab th, .ks-tab td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ks-tab th { font-weight: 600; }
.ks-tab th:first-child, .ks-tab td:first-child { text-align: left; }

.ks-mies-box { margin-top: 1.4rem; padding: 1.5rem 1.6rem 1.3rem; }
.ks-mies-box > p { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; max-width: 60ch; }
.ks-mies { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.3rem; }
.ks-mies button { font: inherit; border: 0; background: transparent; padding: 0.3rem 0.15rem 0.4rem; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; justify-items: center; gap: 0.25rem; min-width: 0; }
.ks-mies button:hover { background: var(--bg); }
.ks-mies button[aria-pressed="true"] { background: var(--ks-blady); color: var(--green-dark); }
.ks-m-pct { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ks-m-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 70px; width: 100%; border-bottom: 1px solid var(--line); }
.ks-m-bars i { width: 34%; max-width: 15px; border-radius: 2px 2px 0 0; background: var(--ks-siec); min-height: 1px; }
.ks-m-bars i + i { background: var(--ks-mag); }
.ks-m-name { font-size: 0.8rem; }
.ks-leg--mies { margin-top: 0.9rem; justify-content: center; }

.ks-metoda { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 1.5rem 3rem; }
.ks-metoda-in h2 { font-size: var(--step-2); }
.ks-metoda-in p { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.ks-akord details { border-bottom: 1px solid var(--line); }
.ks-akord summary { min-height: 54px; font-weight: 600; padding: 0.5rem 0; }
.ks-akord summary .ks-ik { margin-left: auto; }
.ks-akord details > div { display: grid; gap: 0.75rem; padding-bottom: 1.2rem; color: var(--muted); font-size: 0.95rem; max-width: 72ch; }

.ks-q006-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ks-q006-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; }
.ks-q006-lista strong { white-space: nowrap; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.ks-q006 .btn { justify-self: start; }

.ks:not(.ks-gotowe) .ks-wyniki, .ks:not(.ks-gotowe) .ks-mies-box { opacity: 0.55; }

@media (max-width: 1080px) {
  .ks-wyniki { grid-template-columns: minmax(0, 1fr) 19rem; }
  .ks-grid { gap: 1.6rem; }
  .ks-ceny-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ks-intro { flex-direction: column; align-items: flex-start; }
  .ks-aside { justify-items: start; text-align: left; }
  .ks-wyniki { grid-template-columns: minmax(0, 1fr); }
  .ks-rok, .ks-doba { grid-column: auto; grid-row: auto; }
  .ks-grid { grid-template-columns: 1fr 1fr; }
  .ks-poj { grid-column: 1 / -1; }
  .ks-metoda { grid-template-columns: minmax(0, 1fr); }
  .ks-metoda-in p { max-width: 60ch; }
}
@media (max-width: 600px) {
  .ks-set { padding: 1.1rem 1rem 0; }
  .ks-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .ks-kafle label { max-width: none; }
  .ks-dol { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; }
  .ks-dodaj { flex-direction: column; align-items: flex-start; gap: 0; }
  .ks-dodaj legend { float: none; margin-bottom: 0.1rem; }
  .ks-select { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .ks-ceny-grid { grid-template-columns: minmax(0, 1fr); }
  .ks-ceny > summary { flex-wrap: wrap; gap: 0 0.75rem; }
  .ks-skok { display: block; padding: 0.9rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: var(--ks-blady); color: var(--green-dark); text-decoration: none; font-size: 0.9rem; }
  .ks-skok strong { font-size: 1.1rem; white-space: nowrap; color: var(--green); }
  .ks-rok-in { padding: 1.2rem 1.1rem 1.1rem; }
  .ks-rok-cta { padding: 1.1rem; }
  .ks-doba { padding: 1.1rem 1rem 0; }
  .ks-godzina { margin-inline: -1rem; padding-inline: 1rem; }
  .ks-pasek { flex-direction: column; }
  .ks-seg { display: flex; }
  .ks-seg button { flex: 1; padding-inline: 0.4rem; }
  .ks-przeplyw { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.6rem; }
  .ks-dzien { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .ks-dzien > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 0.75rem; }
  .ks-dzien dd { font-size: 1.3rem; text-align: right; }
  .ks-dzien dd.ks-roznica { grid-column: 1 / -1; text-align: left; }
  .ks-czas { flex-wrap: wrap; gap: 0 0.75rem; }
  .ks-czas input { order: 3; flex-basis: 100%; }
  .ks-czas .ks-tekst { margin-left: auto; }
  .ks-mies-box { padding: 1.1rem 1rem; }
  .ks-mies { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1rem; }
  .ks-q006-lista li { flex-direction: column; gap: 0.1rem; }
}

/* Strona 404 */
.nf { padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.nf-photo { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--tint); }
.nf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-body { display: grid; gap: 1rem; justify-items: start; }
.nf-kod { font-weight: 600; color: var(--green); margin: 0; }
.nf-body h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
.nf-body .lead { max-width: 30rem; margin: 0; }
.nf-akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.nf-linki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.nf-linki a { display: grid; gap: 0.2rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.nf-linki a:hover { border-color: var(--green); background: var(--tint); }
.nf-linki strong { font-family: var(--f-head); font-size: 1.15rem; font-weight: 600; color: var(--green-dark); }
.nf-linki span { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 860px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); }
  .nf-linki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .nf-linki { grid-template-columns: minmax(0, 1fr); } }