/* diaform-rx.eu — arkusz silnika `nop` (29.09.2026).
   Uklad odwzorowuje makiete Krzyska: bialo-blekitna strona, czerwona marka,
   granatowe naglowki, biale karty z miekkim cieniem, czerwone pigulki CTA.
   Z makiety bierzemy WYLACZNIE uklad, kolory i rytm sekcji (pkt 212/368).
   Prefiks `nop-` sprawdzony w calej stajni — nie koliduje z zadna domena. */

:root{
  --nop-czerwien:#d21f2c;
  --nop-czerwien-ciemna:#a4141f;
  --nop-czerwien-jasna:#f7e3e5;
  --nop-granat:#17406e;
  --nop-granat-ciemny:#0f2d4f;
  --nop-tusz:#41546a;
  --nop-szary:#6b7d90;
  --nop-blekit:#eaf3fb;
  --nop-blekit-ciemny:#dceaf6;
  --nop-kreska:#dfeaf4;
  --nop-biel:#fff;
  --nop-cien:0 2px 14px rgba(23,64,110,.07);
  --nop-cien-mocny:0 8px 30px rgba(23,64,110,.13);
  --nop-promien:14px;
  --nop-szer:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nop-biel);color:var(--nop-tusz);
  font:400 1rem/1.62 "Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--nop-granat)}
h1,h2,h3,.nop-logo-n{font-family:"Sofia Sans","Fira Sans",system-ui,sans-serif;color:var(--nop-granat)}
h1{font-weight:800;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.12;margin:0 0 14px}
h2{font-weight:800;font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.2;margin:0 0 10px}
h3{font-weight:700;font-size:1.06rem;line-height:1.3;margin:0 0 6px}
p{margin:0 0 14px}
[hidden]{display:none !important}

.nop-szer{width:100%;max-width:var(--nop-szer);margin:0 auto;padding:0 16px}
.nop-mark{color:var(--nop-czerwien)}

/* ---------- naglowek ---------- */
.nop-gora{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--nop-kreska);
}
.nop-gora-w{display:flex;align-items:center;gap:18px;min-height:64px}
.nop-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.nop-logo img{width:118px;height:auto}
.nop-menu{display:flex;gap:20px;margin-left:8px;flex:1 1 auto;min-width:0}
.nop-menu a{
  text-decoration:none;color:var(--nop-tusz);font-size:.92rem;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nop-menu a:hover{color:var(--nop-czerwien);border-bottom-color:var(--nop-czerwien)}

/* ---------- przyciski ---------- */
.nop-cta,.nop-cta-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#e0303c,var(--nop-czerwien));
  color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:"Sofia Sans","Fira Sans",sans-serif;font-weight:700;
  border-radius:999px;box-shadow:0 6px 16px rgba(210,31,44,.28);
  white-space:normal;text-align:center;
}
.nop-cta{padding:16px 34px;font-size:1.16rem}
.nop-cta-mini{padding:9px 20px;font-size:.92rem}
.nop-cta:hover,.nop-cta-mini:hover{background:linear-gradient(180deg,var(--nop-czerwien),var(--nop-czerwien-ciemna))}
.nop-cta svg,.nop-cta-mini svg{flex:0 0 auto}
.nop-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--nop-granat);
  font-weight:600;text-decoration:none;font-size:.98rem;
}
.nop-link:hover{text-decoration:underline}

/* ---------- hero ---------- */
.nop-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#e6f2fb 0%,#f4f9fd 46%,#fff 100%);
}
.nop-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("/zasoby/img/wzor-heks.svg");background-size:150px 130px;
}
.nop-hero-w{
  position:relative;display:grid;gap:26px;align-items:center;padding:38px 0 44px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,.44fr);
}
.nop-hero-l{min-width:0}
.nop-hero-l p{color:var(--nop-tusz);font-size:1.04rem;max-width:36em}
.nop-hero-foto{min-width:0;text-align:center}
.nop-hero-foto img{margin:0 auto;max-height:min(480px,56vh);width:auto}

/* pasek mikro-faktow pod leadem */
.nop-fakty{list-style:none;display:flex;flex-wrap:wrap;gap:14px 22px;margin:18px 0 22px;padding:0}
.nop-fakty > li{display:flex;align-items:center;gap:9px;min-width:0;font-size:.88rem;line-height:1.25}
.nop-fakty b{display:block;color:var(--nop-granat);font-weight:700;font-size:.92rem}
.nop-ikonka{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--nop-blekit);
  display:grid;place-items:center;color:var(--nop-granat);
}
.nop-ikonka svg{width:19px;height:19px}
.nop-hero-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* kolumna cech po prawej */
.nop-cechy{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.nop-cechy > li{display:flex;align-items:center;gap:12px;min-width:0}
.nop-cechy span{
  font-family:"Ubuntu","Fira Sans",sans-serif;font-weight:700;font-size:.79rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nop-granat);line-height:1.28;
}
.nop-kwadrat{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--nop-biel);
  box-shadow:var(--nop-cien);display:grid;place-items:center;color:#2f7ec4;
}
.nop-kwadrat svg{width:24px;height:24px}

/* ---------- sekcje ---------- */
.nop-sek{padding:46px 0}
.nop-sek--blekit{background:var(--nop-blekit)}
.nop-sek--pas{background:linear-gradient(180deg,#f2f8fd,#fff)}
.nop-naglowek{text-align:center;max-width:56em;margin:0 auto 26px}
.nop-naglowek p{color:var(--nop-szary);margin:0}
.nop-nad{
  font-family:"Ubuntu","Fira Sans",sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--nop-czerwien);margin:0 0 6px;
}

/* siatki — liczba kolumn KLASA, nie atrybut style (pkt 354) */
.nop-siatka{display:grid;gap:18px}
.nop-k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nop-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nop-k4{grid-template-columns:repeat(4,minmax(0,1fr))}

.nop-karta{
  background:var(--nop-biel);border:1px solid var(--nop-kreska);
  border-radius:var(--nop-promien);box-shadow:var(--nop-cien);padding:22px 20px;min-width:0;
}
.nop-karta p{margin:0;font-size:.93rem;color:var(--nop-szary)}
.nop-kolo{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;
}
.nop-kolo svg{width:26px;height:26px}
.nop-kolo--czerw{background:#fdeaec;color:var(--nop-czerwien)}
.nop-kolo--blekit{background:#e7f1fb;color:#2f7ec4}
.nop-kolo--ziel{background:#e8f5ec;color:#2e8b57}
.nop-kolo--piasek{background:#fdf2e4;color:#c9791f}

/* skladniki */
.nop-skl{text-align:center}
.nop-skl img{margin:0 auto 12px;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.nop-skl picture{display:block}
.nop-skl b{display:block;color:var(--nop-granat);font-family:"Sofia Sans",sans-serif;font-size:1.02rem;margin-bottom:5px}
.nop-skl em{display:block;font-style:italic;color:var(--nop-szary);font-size:.82rem;margin-bottom:6px}
.nop-formula{display:grid;gap:22px;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);align-items:center}
.nop-lab{position:relative;border-radius:var(--nop-promien);overflow:hidden;box-shadow:var(--nop-cien)}
.nop-lab img{width:100%;height:100%;object-fit:cover;display:block}
.nop-plaster{
  position:absolute;right:12px;bottom:12px;width:126px;height:112px;
  display:grid;place-items:center;text-align:center;padding:0 12px;
  font-family:"Ubuntu","Fira Sans",sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--nop-granat);line-height:1.22;
  background:url("/zasoby/img/plaster.svg") center/contain no-repeat;
}

/* tabela skladu */
.nop-tabela-w{overflow-x:auto;border-radius:var(--nop-promien);border:1px solid var(--nop-kreska);background:#fff}
table.nop-tabela{width:100%;border-collapse:collapse;font-size:.94rem;table-layout:fixed}
.nop-tabela th,.nop-tabela td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--nop-kreska);vertical-align:top}
.nop-tabela th{background:var(--nop-blekit);color:var(--nop-granat);font-weight:700;font-size:.86rem}
.nop-tabela tr:last-child td{border-bottom:0}
.nop-tabela td:last-child,.nop-tabela th:last-child{text-align:right;white-space:nowrap}

/* dla kogo */
.nop-osoba{position:relative;padding-top:0;overflow:hidden}
.nop-osoba img{width:100%;height:132px;object-fit:cover;display:block}
.nop-osoba picture{display:block}
.nop-osoba-t{padding:18px 18px 20px;position:relative}
.nop-osoba-t .nop-kolo{position:absolute;top:-26px;left:18px;box-shadow:var(--nop-cien);background:#fff}
.nop-osoba-t h3{margin-top:30px}
.nop-osoba{background:#fff;border:1px solid var(--nop-kreska);border-radius:var(--nop-promien);box-shadow:var(--nop-cien);min-width:0}

/* cena + kroki */
.nop-oferta{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.nop-cena-k{
  background:linear-gradient(170deg,#fff,#f4f9fd);border:1px solid var(--nop-kreska);
  border-radius:var(--nop-promien);box-shadow:var(--nop-cien-mocny);padding:24px;text-align:center;
}
.nop-kwota{
  display:block;font-family:"Sofia Sans",sans-serif;font-weight:800;
  font-size:clamp(2.1rem,5vw,2.9rem);color:var(--nop-czerwien);line-height:1;margin:6px 0 4px;
}
.nop-kroki{counter-reset:nop-krok;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nop-kroki > li{position:relative;padding-left:52px;min-width:0}
.nop-kroki > li::before{
  counter-increment:nop-krok;content:counter(nop-krok);
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--nop-granat);color:#fff;display:grid;place-items:center;
  font-family:"Sofia Sans",sans-serif;font-weight:800;font-size:1.05rem;
}
.nop-kroki b{display:block;color:var(--nop-granat)}

/* formularz */
.nop-form-w{display:grid;gap:22px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.nop-form{
  background:#fff;border:1px solid var(--nop-kreska);border-radius:var(--nop-promien);
  box-shadow:var(--nop-cien-mocny);padding:24px;
}
.nop-pole{display:block;margin-bottom:14px}
.nop-pole span{display:block;font-weight:600;color:var(--nop-granat);font-size:.9rem;margin-bottom:5px}
.nop-pole input{
  width:100%;padding:13px 14px;border:1px solid #cfdded;border-radius:10px;
  font:inherit;color:var(--nop-tusz);background:#fbfdfe;
}
.nop-pole input:focus{outline:2px solid var(--nop-granat);outline-offset:1px;background:#fff}
.nop-form .nop-cta{width:100%}
.nop-zgoda{font-size:.79rem;color:var(--nop-szary);margin:12px 0 0;line-height:1.5}
.nop-blad{color:var(--nop-czerwien-ciemna);font-weight:600;font-size:.9rem;margin:0 0 10px}
.nop-sukces{background:#e8f5ec;border:1px solid #bfe2c9;border-radius:10px;padding:16px;margin-top:14px}
.nop-sukces p{margin:0;color:#1d5c32}
/* pulapka na boty — poza ekranem, nigdy display:none (pkt 34) */
.nop-putapka{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* opinie */
.nop-opinia{background:#fff;border:1px solid var(--nop-kreska);border-radius:var(--nop-promien);box-shadow:var(--nop-cien);padding:20px;min-width:0}
.nop-opinia p{font-size:.94rem;margin:0 0 10px}

/* FAQ */
.nop-faq-w{display:grid;gap:22px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.nop-faq{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.nop-faq details{background:#fff;border:1px solid var(--nop-kreska);border-radius:10px;box-shadow:var(--nop-cien)}
.nop-faq summary{
  cursor:pointer;padding:14px 40px 14px 16px;position:relative;list-style:none;
  font-weight:600;color:var(--nop-granat);font-size:.95rem;
}
.nop-faq summary::-webkit-details-marker{display:none}
.nop-faq summary::after{
  content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--nop-szary);line-height:1;
}
.nop-faq details[open] summary::after{content:"\2013"}
.nop-faq div{padding:0 16px 16px;font-size:.93rem;color:var(--nop-szary)}
.nop-pomoc{background:linear-gradient(170deg,#eef6fd,#fff);border:1px solid var(--nop-kreska);border-radius:var(--nop-promien);padding:22px;text-align:center}
.nop-pomoc-i{margin:0 auto 10px;width:70px;height:70px;border-radius:50%;
  background:#e7f1fb;color:var(--nop-granat);display:grid;place-items:center}
.nop-pomoc-i svg{width:38px;height:38px}

/* rozdzialy zwiniete — domyslnie zamkniete takze na desktopie (pkt 240c) */
.nop-rozdzial{background:#fff;border:1px solid var(--nop-kreska);border-radius:var(--nop-promien);margin-bottom:12px;box-shadow:var(--nop-cien)}
.nop-rozdzial > summary{cursor:pointer;padding:16px 18px;list-style:none;position:relative}
.nop-rozdzial > summary::-webkit-details-marker{display:none}
.nop-rozdzial > summary h2{margin:0;font-size:1.2rem}
.nop-rozdzial > summary::after{content:"+";position:absolute;right:18px;top:16px;font-size:1.5rem;color:var(--nop-szary)}
.nop-rozdzial[open] > summary::after{content:"\2013"}
.nop-rozdzial-t{padding:0 18px 18px}

/* koncowy pas */
.nop-koniec{background:linear-gradient(120deg,#e9f3fb,#fdf0f1 60%,#fff);padding:40px 0}
.nop-koniec-w{display:grid;gap:22px;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) minmax(0,.9fr);align-items:center}
.nop-koniec-w img{max-height:190px;width:auto;margin:0 auto}

/* noty i stopka */
.nop-noty{background:#f7fafd;border-top:1px solid var(--nop-kreska);padding:30px 0;font-size:.88rem;color:var(--nop-szary)}
.nop-stopka{background:var(--nop-granat-ciemny);color:#c9d9ea;padding:30px 0;font-size:.87rem}
.nop-stopka a{color:#fff}
.nop-stopka p{margin:0 0 8px}
.nop-stopka-s{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nop-stopka b{color:#fff;display:block;margin-bottom:6px}
.nop-kraje-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.nop-kraje-l a{text-decoration:none}

/* wybor kraju (korzen) */
.nop-wybor{max-width:760px;margin:0 auto;padding:40px 16px;text-align:center}
.nop-wybor-foto{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 18px}
.nop-wybor-l{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.nop-wybor-l a{
  display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;
  border:1px solid var(--nop-kreska);border-radius:10px;text-decoration:none;
  color:var(--nop-granat);font-weight:600;box-shadow:var(--nop-cien);
}
.nop-wybor-l img{width:26px;height:18px;flex:0 0 auto;border-radius:2px}

/* tekst podstron */
.nop-tekst{max-width:760px;margin:0 auto;padding:34px 16px}
.nop-tekst h2{margin-top:26px}
.nop-tekst ol,.nop-tekst ul{padding-left:20px}
.nop-tekst li{margin-bottom:6px}
.nop-zrodla{font-size:.86rem;color:var(--nop-szary)}
.nop-zrodla li{word-break:break-word}

/* ---------- telefon ---------- */
@media (max-width:980px){
  .nop-hero-w{grid-template-columns:1fr;gap:20px}
  .nop-hero-foto{order:-1}
  .nop-cechy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nop-formula,.nop-oferta,.nop-form-w,.nop-faq-w,.nop-koniec-w{grid-template-columns:1fr}
  .nop-koniec-w img{max-height:150px}
  .nop-k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nop-menu{display:none}
}
@media (max-width:640px){
  .nop-sek{padding:34px 0}
  .nop-k2,.nop-k3,.nop-k4,.nop-faq,.nop-stopka-s,.nop-wybor-l{grid-template-columns:1fr}
  .nop-cechy{grid-template-columns:1fr}
  .nop-cta{width:100%;padding:15px 20px;font-size:1.04rem}
  .nop-hero-akcje{gap:12px}
  .nop-plaster{width:100px;height:90px;font-size:.6rem;right:8px;bottom:8px}
  .nop-fakty{gap:12px 16px}
}