/* Strony sprzedazowe nowej strony, czesc 2 (pakiet P6, 2026-10-10, prefiks .n2p-s2-, bo .n2p-sp- ma P5): hosting, hosting-ssh,
   dla-programistow, katalog-aplikacji, karta aplikacji. Klasy z prefiksem .n2p-s2-.
   Wspolne klocki: hero z ilustracja 3D, pas faktow, karty z ikonami 3D, kroki, dla kogo, plany. */

/* Hero: tekst z lewej, ilustracja 3D z prawej, pas faktow pod spodem */
.n2p-s2-hero{padding-bottom:calc(40*var(--u))}
.n2p-s2-hero-uklad{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:calc(40*var(--u));align-items:center}
.n2p-hero.n2p-s2-hero h1{margin-top:calc(18*var(--u));max-width:none;font-size:max(38px,calc(54*var(--u)));font-weight:600;line-height:1.04;text-align:left}
.n2p-s2-hero-tekst > p{margin-top:calc(20*var(--u));max-width:34em;color:#c9d0e2;font-size:max(16px,calc(10*var(--u)));line-height:1.6;text-align:left}
.n2p-s2-hero .n2p-ap-okruszki{justify-content:flex-start}
.n2p-s2-plakietka{display:inline-flex;padding:7px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#ffd6bf;font-size:13.5px;font-weight:600}
.n2p-s2-przyciski{display:flex;flex-wrap:wrap;gap:14px;margin-top:calc(28*var(--u))}
.n2p-s2-hero .n2-cta-obrys{color:#fff;border-color:rgba(255,255,255,.35)}
.n2p-s2-hero-obraz img{display:block;width:100%;max-width:calc(540*var(--u));margin-left:auto;height:auto;filter:drop-shadow(0 30px 50px rgba(255,106,26,.25))}
.n2p-s2-fakty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(16*var(--u));margin-top:calc(34*var(--u));padding:calc(22*var(--u)) calc(24*var(--u));
  border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.n2p-s2-fakty li{display:flex;align-items:center;gap:16px;padding:6px 4px;color:#c9d0e2;font-size:14px;line-height:1.4}
/* Poprawka #97 pkt 2: ikona 3D jak na makiecie, ok. 56 px, fakt w dwoch liniach: teza + opis */
.n2p-s2-fakty img{flex:none;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.n2p-s2-fakty b{display:block;margin-bottom:3px;color:#fff;font-size:max(17px,calc(10.5*var(--u)));font-weight:700;line-height:1.2}

/* Ikona 3D w kartach */
.n2p-s2-ikona{display:inline-grid;place-items:center;width:92px;height:92px;border-radius:22px;background:linear-gradient(160deg,#fff6ef,#f6efe8)}
.n2p-s2-ikona img{width:84px!important;height:84px!important}
.n2p-s2-ikona img,.n2p-s2-dla-karta > img,.n2p-s2-krok-ikona img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(22,33,62,.22))}

.n2p-s2-ikona--mala{width:64px;height:64px;border-radius:16px}
.n2p-s2-ikona--mala img{width:56px!important;height:56px!important}
.n2p-dev-bezpiecznie > img{flex:none;width:44px;height:44px;object-fit:contain}

/* Siatka cech */
.n2p-s2-cechy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16*var(--u))}
.n2p-s2-cecha{padding:calc(26*var(--u))}
.n2p-s2-cecha h3{margin-top:16px;font-size:max(17px,calc(11*var(--u)));font-weight:700}
.n2p-s2-cecha p{margin-top:8px;color:var(--tekst-2);font-size:max(14px,calc(8.8*var(--u)));line-height:1.6}
.n2p-s2-cecha p a{color:var(--pomarancz-2)}

/* Os czasu: trzy lata tej samej ceny */
/* Poprawka #97 pkt 3: kompaktowe kafle (rok, plan, cena), kropki na linii przerywanej zostaja */
.n2p-s2-os{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:calc(16*var(--u));align-items:center}
.n2p-s2-os::before{content:"";position:absolute;left:4%;right:30%;top:50%;border-top:2px dashed rgba(255,106,26,.55)}
.n2p-s2-os-rok{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:2px;padding:16px 20px 16px 50px;
  border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(17,22,42,.05),0 16px 32px -24px rgba(17,22,42,.35)}
.n2p-s2-os-kropka{position:absolute;top:50%;left:18px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--pomarancz);box-shadow:0 0 0 5px #ffe9dc}
.n2p-s2-os-rok small,.n2p-s2-os-suma small{color:var(--szary);font-size:13px;font-weight:600;text-transform:none}
.n2p-s2-os-rok small{grid-column:1 / -1;color:var(--tekst);font-size:14px;font-weight:700}
.n2p-s2-os-rok b{font-size:max(24px,calc(17*var(--u)));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.n2p-s2-os-rok span{color:var(--szary);font-size:13px}
.n2p-s2-os-suma{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:2px;padding:16px 20px;border-radius:16px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,106,26,.3),transparent 55%),#0f1730}
.n2p-s2-os-suma img{grid-row:1 / 3;width:56px;height:56px;object-fit:contain}
.n2p-s2-os-suma span{grid-column:1 / -1}
.n2p-s2-os-suma small{color:#c9d0e2}
.n2p-s2-os-suma b{color:var(--pomarancz);font-size:max(28px,calc(20*var(--u)));line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.n2p-s2-os-suma span{color:#c9d0e2;font-size:13px;line-height:1.5}

/* Plany */
.n2p-s2-plany{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(12*var(--u));align-items:stretch}
.n2p-s2-plan{position:relative;display:flex;flex-direction:column;padding:calc(24*var(--u)) calc(20*var(--u));color:var(--tekst);text-decoration:none;transition:transform .2s,box-shadow .2s}
.n2p-s2-plan:hover{transform:translateY(-3px)}
.n2p-s2-plan--wyr{outline:2px solid var(--pomarancz);background:#fff8f3}
.n2p-s2-plan--niedost{opacity:.6}
.n2p-s2-plan-znak{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--pomarancz);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
/* Poprawka #97 pkt 1: miniatura kostki z warstw strony glownej, tyle warstw, ile wynosi pozycja planu.
   Pokrywa (warstwa-1) na gorze, kolejne plastry pod nia; wysokosc pola stala, kostki stoja na jednej linii. */
.n2p-s2-kostka{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100px;margin:0 auto 14px}
.n2p-s2-kostka img{position:relative;display:block;width:72px;height:auto;filter:drop-shadow(0 4px 5px rgba(22,33,62,.18))}
.n2p-s2-kostka img + img{margin-top:-26px}
.n2p-s2-plan-nazwa{font-size:max(18px,calc(11.5*var(--u)));font-weight:700}
.n2p-s2-plan-opis{margin-top:4px;color:var(--szary);font-size:13px;min-height:2.6em}
.n2p-s2-plan-cena{margin-top:14px;font-size:max(28px,calc(20*var(--u)));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.n2p-s2-plan-okres{color:var(--szary);font-size:12.5px}
.n2p-s2-plan-cechy{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #eee7e0;font-size:13.5px;color:var(--tekst-2)}
.n2p-s2-plan-cechy li{position:relative;padding-left:22px}
.n2p-s2-plan-cechy li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#e9f7ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2321a35a' stroke-width='2'/%3E%3C/svg%3E") center/10px no-repeat}
.n2p-s2-plan-cechy li.nie::before{background:#f1efec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%239aa1b2' stroke-width='2'/%3E%3C/svg%3E") center/10px no-repeat}

/* Dla kogo */
.n2p-s2-dla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16*var(--u))}
.n2p-s2-dla-karta{display:flex;flex-direction:column;padding:calc(26*var(--u))}
.n2p-s2-dla-karta > img{width:96px;height:96px;margin:-8px}
.n2p-s2-dla-karta h3{margin-top:14px;font-size:max(18px,calc(11.5*var(--u)));font-weight:700}
.n2p-s2-dla-karta p{margin-top:8px;color:var(--tekst-2);font-size:max(14px,calc(8.8*var(--u)));line-height:1.6}
.n2p-s2-dla-plan{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:12px 14px;border-radius:12px;
  background:#fbf7f3;color:var(--tekst);text-decoration:none;font-size:14px;transition:background .2s}
.n2p-s2-dla-karta p + .n2p-s2-dla-plan{margin-top:18px}
.n2p-s2-dla-plan:hover{background:#fff0e6}
.n2p-s2-dla-plan > b{color:var(--pomarancz-2)}

/* Kroki z przerywana linia */
.n2p-s2-kroki{display:grid;grid-template-columns:repeat(var(--kroki,3),minmax(0,1fr));gap:calc(20*var(--u));counter-reset:none}
.n2p-s2-krok{position:relative;text-align:center;padding:0 calc(10*var(--u))}
.n2p-s2-krok + .n2p-s2-krok::before{content:"";position:absolute;top:52px;right:calc(50% + 64px);width:calc(100% - 128px + 20*var(--u));border-top:2px dashed rgba(255,106,26,.55)}
.n2p-s2-krok-ikona{position:relative;display:inline-flex;width:104px;height:104px}
.n2p-s2-krok-ikona i{position:absolute;right:-6px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pomarancz);color:#fff;font-style:normal;font-weight:700;font-size:14px}
.n2p-s2-krok h3{margin-top:14px;font-size:max(17px,calc(11*var(--u)));font-weight:700}
.n2p-s2-krok p{margin-top:6px;color:var(--tekst-2);font-size:max(14px,calc(8.6*var(--u)));line-height:1.55}
.n2p-s2-krok code{display:inline-block;margin-top:10px;padding:5px 10px;border-radius:8px;background:#0f1730;color:#ffd6bf;font-size:12.5px}

/* Dwie listy: w cenie / osobno */
.n2p-s2-cena-uklad{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(16*var(--u))}
.n2p-s2-lista{padding:calc(26*var(--u))}
.n2p-s2-lista h3{display:flex;align-items:center;gap:12px;font-size:max(17px,calc(11*var(--u)));font-weight:700}
.n2p-s2-lista h3 img{width:44px;height:44px;object-fit:contain}
.n2p-s2-lista ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.n2p-s2-lista li{position:relative;padding-left:26px;color:var(--tekst-2);font-size:max(14px,calc(8.8*var(--u)));line-height:1.55}
.n2p-s2-lista li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff0e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%23ff6a1a' stroke-width='2'/%3E%3C/svg%3E") center/10px no-repeat}
.n2p-s2-lista--tak li::before{background:#e9f7ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2321a35a' stroke-width='2'/%3E%3C/svg%3E") center/11px no-repeat}
.n2p-s2-lista b{color:var(--tekst)}
.n2p-s2-lista a{color:var(--pomarancz-2)}

/* Porownanie w trzech kolumnach (kartach) */
.n2p-s2-por{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16*var(--u));align-items:stretch}
.n2p-s2-por-kol{display:flex;flex-direction:column;padding:calc(26*var(--u))}
.n2p-s2-por-kol--nasz{outline:2px solid var(--pomarancz);background:#fff8f3}
.n2p-s2-por-kol h3{display:flex;align-items:center;gap:12px;font-size:max(18px,calc(11.5*var(--u)));font-weight:700}
.n2p-s2-por-kol h3 img{width:48px;height:48px;object-fit:contain}
.n2p-s2-por-kol > p{margin-top:6px;color:var(--szary);font-size:13.5px}
.n2p-s2-por-kol ul{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.n2p-s2-por-kol li{position:relative;padding-left:26px;color:var(--tekst-2);font-size:14px;line-height:1.5}
.n2p-s2-por-kol li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:#e9f7ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2321a35a' stroke-width='2'/%3E%3C/svg%3E") center/11px no-repeat}
.n2p-s2-por-kol li.nie::before{background:#fdecec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23d64545' stroke-width='2'/%3E%3C/svg%3E") center/10px no-repeat}

.n2p-s2-por-kol{position:relative}
.n2p-s2-por-kol li .n2p-s2-czesciowo{color:var(--tekst-2)}
.n2p-s2-por-kol li:has(.n2p-s2-czesciowo)::before{background:#fff4e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%23e09a1a' stroke-width='2'/%3E%3C/svg%3E") center/10px no-repeat}
.n2p-s2-terminal{margin:calc(24*var(--u)) 0 0;max-width:520px;text-align:left}

/* Stepper z kodem (pierwsze minuty, dzien pracy) */
.n2p-s2-schody{display:flex;flex-direction:column;gap:calc(14*var(--u));max-width:calc(940*var(--u));margin:0 auto}
.n2p-s2-schodek{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr);gap:calc(22*var(--u));align-items:center;padding:calc(20*var(--u)) calc(24*var(--u))}
.n2p-s2-schodek > img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(22,33,62,.22))}
.n2p-s2-schodek small{color:var(--pomarancz-2);font-size:12.5px;font-weight:700}
.n2p-s2-schodek h3{margin-top:2px;font-size:max(17px,calc(11*var(--u)));font-weight:700}
.n2p-s2-schodek p{margin-top:4px;color:var(--tekst-2);font-size:14px;line-height:1.55}
.n2p-s2-schodek pre{margin:0;padding:14px 16px;border-radius:12px;background:#0f1730;color:#e6e9f2;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre}
.n2p-s2-schodek pre span{color:#ff9a5c}

/* Zestawy (katalog) i kafle logotypow */
.n2p-s2-zestawy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14*var(--u))}
.n2p-s2-zestaw{display:flex;flex-direction:column;padding:calc(22*var(--u));color:var(--tekst);text-decoration:none}
.n2p-s2-zestaw > img{width:96px;height:96px;margin:-6px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(22,33,62,.22))}
.n2p-s2-zestaw h3{margin-top:12px;font-size:max(17px,calc(11*var(--u)));font-weight:700}
.n2p-s2-zestaw p{margin-top:6px;color:var(--tekst-2);font-size:13.5px;line-height:1.55}
.n2p-s2-zestaw-apki{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
.n2p-s2-zestaw-apki a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #eee7e0;border-radius:999px;background:#fff;color:var(--tekst);font-size:12.5px;font-weight:600;text-decoration:none}
.n2p-s2-zestaw-apki a:hover{border-color:var(--pomarancz)}
.n2p-s2-zestaw-apki img{width:18px;height:18px;object-fit:contain}

/* Katalog: szukajka i liczby w hero, karta brak z ikona 3D */
.n2p-s2-szukaj{display:flex;gap:10px;max-width:560px;margin-top:calc(26*var(--u));padding:6px;border-radius:999px;background:#fff}
.n2p-s2-szukaj input{flex:1;min-width:0;padding:0 16px;border:0;background:transparent;font:inherit;font-size:15px;color:var(--tekst);outline:none}
.n2p-s2-szukaj .n2-btn{white-space:nowrap}
.n2p-s2-staty{display:flex;gap:calc(34*var(--u));margin-top:calc(26*var(--u))}
.n2p-s2-staty li{display:flex;flex-direction:column;color:#c9d0e2;font-size:13.5px}
.n2p-s2-staty li + li{padding-left:calc(34*var(--u));border-left:1px solid rgba(255,255,255,.15)}
.n2p-s2-staty b{color:#fff;font-size:max(24px,calc(18*var(--u)));font-weight:700}
.n2p-s2-brak-ikona{flex:none;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(22,33,62,.25))}

/* Karta aplikacji: logo aplikacji na bialym kaflu w hero */
.n2p-s2-ap-logo{display:inline-grid;place-items:center;width:72px;height:72px;margin-top:calc(18*var(--u));border-radius:20px;background:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.n2p-s2-ap-logo img{width:44px;height:44px;object-fit:contain}
.n2p-s2-ap-hero h1{margin-top:calc(14*var(--u))}

@media (max-width:1100px){
  .n2p-s2-plany{grid-template-columns:repeat(3,minmax(0,1fr))}
  .n2p-s2-zestawy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .n2p-s2-hero-uklad,.n2p-s2-cena-uklad{grid-template-columns:1fr}
  .n2p-s2-hero-obraz img{max-width:340px;margin:0 auto}
  .n2p-s2-fakty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n2p-s2-cechy,.n2p-s2-dla,.n2p-s2-por{grid-template-columns:1fr 1fr}
  .n2p-s2-os{grid-template-columns:repeat(3,minmax(0,1fr))}
  .n2p-s2-os-suma{grid-column:1 / -1}
  .n2p-s2-os::before{display:none}
  .n2p-s2-kroki{grid-template-columns:1fr}
  .n2p-s2-krok + .n2p-s2-krok::before{display:none}
  .n2p-s2-schodek{grid-template-columns:56px minmax(0,1fr)}
  .n2p-s2-schodek > img{width:52px;height:52px}
  .n2p-s2-schodek pre{grid-column:1 / -1}
}
@media (max-width:640px){
  .n2p-s2-fakty{padding:14px;gap:12px 10px}
  .n2p-s2-fakty li{flex-direction:column;align-items:flex-start;padding:6px 4px;gap:8px;font-size:12.5px}
  .n2p-s2-fakty img{width:48px;height:48px}
  .n2p-s2-cechy,.n2p-s2-dla,.n2p-s2-por,.n2p-s2-zestawy{grid-template-columns:1fr}
  .n2p-s2-plany{grid-template-columns:1fr 1fr;gap:10px}
  .n2p-s2-plan{padding:18px 14px}
  .n2p-s2-plan-cechy{font-size:12.5px}
  .n2p-s2-os{grid-template-columns:1fr}
  .n2p-s2-os::before{display:none}
  .n2p-s2-plan-opis{min-height:0}
  .n2p-s2-szukaj{flex-direction:column;border-radius:18px}
  .n2p-s2-szukaj input{padding:12px}
  .n2p-s2-staty{gap:14px}
  .n2p-s2-staty li + li{padding-left:14px}
  .n2p-s2-brak-ikona{width:96px;height:96px}
}

/* Uwaga Grzegorza #65/#66 (koordynator #76): nadtytuly zdaniowo, bez rozstrzelonych wersalikow.
   Ten plik laduja tylko strony P6, wiec regula nie dotyka innych podstron. */
.n2p .n2-etykieta{text-transform:none;letter-spacing:0;font-size:max(14px,calc(9*var(--u)));font-weight:700}