/* /strony-internetowe (27.10.2026, ui-ux-pro-max: Swiss/minimal na tokenach daplo.eu). Oferta stron dla lokalnych firm.
   Korzysta z klas landingu (delegowanie.css: lp-hero, lp-kafel, lp-form) i daplo.css (et-lista, faq, final). Tu tylko to, czego tamte nie mają. */

/* Hero: trzy krótkie warunki pod leadem */
.st-hero .btn .ik:first-child { margin-right: 2px; }

/* Ekran przeglądarki i telefon ze zrzutem prawdziwej strony */
.st-ekran { overflow: hidden; border: 1px solid var(--szkielet); border-radius: 12px; background: #fff; box-shadow: var(--cien); }
.st-ekran__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--linia); background: var(--tlo-2); }
.st-ekran__adres { display: inline-flex; align-items: center; gap: 6px; margin-inline: auto; padding: 3px 14px; border-radius: 6px; background: #fff; color: var(--stal); font-size: .8125rem; }
.st-ekran__adres .ik { width: 13px; height: 13px; }
.st-ekran img { display: block; width: 100%; height: auto; }

/* Realizacje: trzy karty, na telefonie jedna pod drugą */
.st-real { display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
.st-real__k { display: grid; gap: 16px; align-content: start; min-width: 0; }
.st-real .st-ekran { border-radius: 10px; box-shadow: none; }
.st-real__tekst { display: grid; gap: 8px; align-content: start; }
.st-real__tekst .h3, .st-real__tekst p { margin: 0; }
.st-real__tekst p { color: var(--stal); line-height: 1.55; }
.st-real__tekst .link { justify-self: start; white-space: nowrap; }
.st-real__tekst p .link { display: flex; width: fit-content; }
@media (min-width: 768px) {
  .st-real { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-real__k--duzy { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .st-real { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: 0 56px; }
  .st-real__k--duzy { grid-column: 1; grid-row: 1 / span 2; gap: 24px; }
  .st-real__k:not(.st-real__k--duzy) { grid-template-columns: clamp(150px, calc(58 * var(--vw) - 660px), 208px) minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .st-real__k:not(.st-real__k--duzy) .st-ekran { align-self: start; }
  .st-real__k:nth-child(2) { padding-top: 0; border-bottom: 1px solid var(--szkielet); }
  .st-real__k:nth-child(3) { padding-bottom: 0; }
  .st-real__k--duzy .st-real__tekst p .link { display: inline-flex; min-height: 0; }
}
/* Dwie realizacje obok siebie w równych kolumnach, zrzut nad tekstem */
@media (min-width: 1280px) {
  .st-real--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 0 48px; }
  .st-real--dwie .st-real__k:not(.st-real__k--duzy) { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 0; border-bottom: 0; }
}

/* Co dostajesz: trzy karty 01/02/03 */
.st-co { display: grid; gap: var(--karty-odstep); margin: 0; padding: 0; list-style: none; }
.st-co__k { display: grid; gap: 12px; align-content: start; padding: 28px; border: 1px solid var(--linia); border-radius: var(--r-m); background: #fff; }
.st-co__nr { font-size: .9375rem; font-weight: 600; color: var(--stal); font-variant-numeric: tabular-nums; }
.st-co__k .h3, .st-co__k p { margin: 0; }
.st-co__k p { color: var(--stal); line-height: 1.55; }
.st-co__l { display: grid; gap: 8px; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linia); list-style: none; }
.st-co__l li { position: relative; padding-left: 18px; line-height: 1.45; }
.st-co__l li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--sygnal); }
@media (min-width: 1024px) { .st-co { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cena: strona (czarna karta) i opieka obok, pod spodem jedna linijka o asystencie */
.st-cena { display: grid; gap: var(--karty-odstep); }
.st-cena__k { display: grid; gap: 16px; align-content: start; padding: 28px; border: 1px solid var(--linia); border-radius: var(--r-m); background: #fff; }
.st-cena__k--glowna { border-color: var(--czern); background: var(--czern); color: #fff; }
.st-cena__n { margin: 0; font-weight: 600; color: var(--stal); }
.st-cena__k--glowna .st-cena__n { color: var(--mgla); }
.st-cena__c { margin: 0; font-size: clamp(2.25rem, 1.6rem + calc(1.6 * var(--vw)), 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.st-cena__c small { display: block; margin-top: 8px; font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--stal); }
.st-cena__k--glowna .st-cena__c small { color: var(--mgla); }
.st-cena__l { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--linia); list-style: none; }
.st-cena__k--glowna .st-cena__l { border-top-color: var(--obrys-ciemne); }
.st-cena__l li { display: flex; gap: 10px; line-height: 1.45; }
.st-cena__l .ik { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.st-cena__k--glowna .st-cena__l .ik { color: var(--sygnal); }
.st-cena__k .btn { justify-self: start; margin-top: 4px; }
.st-cena__dalej { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; border-radius: var(--r-m); background: var(--panel); }
.st-cena__dalej .ik { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.st-cena__dalej p { margin: 0; color: var(--stal); line-height: 1.55; }
.st-cena__dalej b { color: var(--czern); font-weight: 600; }
@media (min-width: 900px) { .st-cena { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-cena__dalej { grid-column: 1 / -1; } }

/* Formularz: podpowiedź pod polem i przyciski z ikoną telefonu przed tekstem */
.pole__pom { margin: 6px 0 0; color: var(--stal); font-size: .875rem; line-height: 1.4; }
.st-cena .btn .ik:first-child, .final .btn .ik:first-child, .lp-ok .btn .ik:first-child { margin-right: 2px; }


/* Przykładowe strony dla branż (27.10): siatka jak realizacje, nad nazwą branża */
.st-przyk { display: grid; gap: var(--karty-odstep); margin: 0; padding: 0; list-style: none; }
.st-przyk__k { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--linia); border-radius: var(--r-m); background: #fff; }
.st-przyk__obraz { padding: 24px 24px 0; background: var(--panel); border-bottom: 1px solid var(--linia); }
.st-przyk__obraz .st-ekran { border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: none; }
.st-przyk__obraz .st-ekran img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.st-przyk__tekst { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; align-content: start; padding: 24px; }
.st-przyk__wiecej { display: flex; justify-content: center; margin-top: 40px; }
.st-powrot { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 12px; }
.st-przyk__tekst .h3, .st-przyk__tekst p { margin: 0; }
.st-przyk__tekst p { color: var(--stal); line-height: 1.55; }
.st-przyk__tekst .st-przyk__br { font-size: .875rem; font-weight: 600; color: var(--stal); }
.st-przyk__tekst .link { justify-self: start; margin-top: 4px; }
.st-przyk__k--puste { border-style: dashed; border-color: var(--szkielet); }
.st-przyk__k--puste .st-przyk__obraz { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 24px; border-bottom: 1px dashed var(--szkielet); color: var(--stal); font-weight: 600; }
.st-przyk__k--puste .h3, .st-przyk__k--puste .st-przyk__br { color: var(--obrys-ui); }
@media (min-width: 768px) and (max-width: 1099px) { .st-przyk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-przyk:not(.st-przyk--wszystkie) .st-przyk__k:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .st-przyk { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-przyk__obraz { padding: 16px 16px 0; } .st-przyk__tekst { padding: 20px; } }

/* Hero jak na głównej (27.10): klasy lp-hero / hc__mk z delegowanie.css i daplo.css; pod CTA jedna linijka warunków z ptaszkami */
.st-hero__pkt { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.st-hero__pkt li { display: inline-flex; align-items: center; gap: 6px; color: var(--stal); font-size: .9375rem; line-height: 1.4; }
.st-hero__pkt .ik { flex: none; width: 16px; height: 16px; color: var(--ok); }
.st-hero__mk img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* Zrzut strony w hero pokazany w całości: bez zanikania na dole i bez przycinania wysokości, pełne okno z cieniem */
.st-hero .hc__plotno { -webkit-mask-image: none; mask-image: none; max-height: none; }
.st-hero__mk { overflow: hidden; box-shadow: 0 30px 70px rgba(11, 13, 16, .18), 0 4px 14px rgba(11, 13, 16, .08); }