/* OSTEFRIN — arkusz wlasny, pisany pod mockup zatwierdzony 10.09.2026.
   Zielony turkus + pomarancz, biale karty na jasnych mietowych blokach,
   miekkie cienie, obrazki wtopione w tlo (bez twardych ramek).
   Kroje: Poppins (naglowki), Inter (tresc), Caveat (odreczna notka). */

@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/poppins-600-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/poppins-600-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}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/kroje/poppins-700-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/kroje/poppins-700-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/kroje/inter-400-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/kroje/inter-400-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/kroje/inter-500-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/kroje/inter-500-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/inter-600-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/inter-600-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}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/caveat-600-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/kroje/caveat-600-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{
  /* turkus — ciemniejszy i bardziej zielony niz sam packshot, tak jak w mockupie */
  --morze-c:#0c4f47; --morze:#12776a; --morze-j:#1c9a89; --morze-b:#e8f4f0;
  /* pomarancz CTA */
  --ogien:#f0812c; --ogien-c:#d96a17; --ogien-j:#f79a4a; --ogien-b:#fdf0e6;
  /* tla i tekst */
  --bial:#ffffff; --mieta:#f2f9f6; --mieta-2:#e9f4ef; --piana:#f7fbf9;
  --atrament:#12211f; --szary:#5d716d; --szary-j:#7f918d; --kreska:#dfeae6;
  --zielen:#1f9d5f; --czerwien:#d4553c;
  --cien-s:0 2px 8px rgba(12,79,71,.05);
  --cien:0 8px 24px rgba(12,79,71,.08);
  --cien-d:0 18px 44px rgba(12,79,71,.12);
  --r:14px; --r-d:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--bial);color:var(--atrament);
  font:400 16px/1.62 Inter,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--morze);text-underline-offset:2px}
h1,h2,h3,h4{font-family:Poppins,'Segoe UI',system-ui,sans-serif;font-weight:700;
  line-height:1.16;margin:0 0 12px;letter-spacing:-.02em;color:var(--morze-c)}
h1{font-size:clamp(30px,4.4vw,46px)}
h2{font-size:clamp(25px,3.2vw,36px)}
h3{font-size:19px}
p{margin:0 0 14px}
.obszar{max-width:1120px;margin-inline:auto;padding:0 22px}
.obszar.waski{max-width:780px}
.lead{color:var(--szary);font-size:16.5px;margin:0}
.drobne{font-size:13px;line-height:1.5;color:var(--szary-j)}
.ikonka{flex:none}

/* ═══════════════ pas gorny ═══════════════ */
.pas{background:var(--morze-c);color:#dff0ea}
.pas .obszar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 46px;padding-block:11px}
.pas-poz{display:flex;align-items:center;gap:11px}
.pas-poz .ikonka{color:#8fc9bd}
.pas-poz b{display:block;font:600 13.5px Inter,sans-serif;color:#fff;letter-spacing:.005em}
.pas-poz span{display:block;font-size:12px;color:#9dc4bc;line-height:1.35}

/* ═══════════════ szyld ═══════════════ */
.szyld{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--kreska)}
.szyld .obszar{display:flex;align-items:center;gap:20px;padding-block:14px}
.znak{font:700 27px Poppins,sans-serif;letter-spacing:-.03em;color:var(--morze);
  text-decoration:none;display:inline-flex;align-items:flex-start;line-height:1}
.znak sup{font-size:.42em;font-weight:600;margin-top:.15em;margin-left:1px}
.menu{display:none;margin-inline:auto;gap:34px}
.menu a{color:#33463f;text-decoration:none;font-size:15px;font-weight:500;padding:4px 0}
.menu a:hover{color:var(--morze)}
@media(min-width:920px){.menu{display:flex}}
.szyld .guzik{margin-left:auto}
@media(min-width:920px){.szyld .guzik{margin-left:0}}

/* ═══════════════ guziki ═══════════════ */
.guzik{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--ogien-j),var(--ogien));color:#fff;border:0;
  border-radius:999px;padding:14px 30px;font:600 15.5px Poppins,sans-serif;
  text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(240,129,44,.30);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.guzik:hover{filter:brightness(1.04);transform:translateY(-2px);box-shadow:0 12px 26px rgba(240,129,44,.38)}
.guzik:active{transform:translateY(0)}
.guzik-maly{padding:11px 22px;font-size:14.5px}
.guzik-szeroki{width:100%}

/* ═══════════════ hero ═══════════════ */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(155deg,#f4fbf7 0%,#eaf6f0 48%,#e2f2ea 100%)}
/* miekkie plamy zieleni zamiast zdjecia tla — nie obciazaja LCP */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);
  opacity:.55;pointer-events:none}
.hero::before{width:520px;height:520px;right:-90px;top:-140px;
  background:radial-gradient(circle,#bfe6d5,transparent 70%)}
.hero::after{width:420px;height:420px;right:180px;bottom:-180px;
  background:radial-gradient(circle,#cfead9,transparent 70%)}
.hero-siatka{position:relative;display:grid;gap:30px;align-items:center;padding-block:40px 46px}
@media(min-width:960px){.hero-siatka{grid-template-columns:1.02fr .98fr;padding-block:54px 60px;gap:44px}}
.plakietka{display:inline-block;background:var(--morze-b);color:var(--morze);
  border-radius:999px;padding:7px 16px;font:600 13px Inter,sans-serif;margin-bottom:16px}
.hero h1{margin-bottom:14px}
.hero .lead{max-width:34em;margin-bottom:22px}
.atuty{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:14px}
@media(min-width:560px){.atuty{grid-template-columns:repeat(3,auto);justify-content:start;gap:26px}}
.atuty li{display:flex;align-items:center;gap:10px;font-size:14px;color:#3c4f4b;line-height:1.3}
.atuty .ikonka{color:var(--morze)}
.karta-cena{display:grid;gap:14px;align-items:center;background:var(--bial);
  border:1px solid var(--kreska);border-radius:var(--r-d);padding:18px;box-shadow:var(--cien)}
@media(min-width:520px){.karta-cena{grid-template-columns:auto 1fr}}
.cena{display:block;font:700 clamp(30px,4vw,36px) Poppins,sans-serif;color:var(--ogien);
  letter-spacing:-.02em;line-height:1.05}
.cena-nota{display:block;font-size:13.5px;color:var(--szary);margin-top:3px;line-height:1.4}
.cena-nota b{color:var(--atrament);font-weight:600}
.karta-cena .guzik{width:100%}
.telefon-nota{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0;
  font-size:12.5px;color:var(--szary-j)}
.telefon-nota .ikonka{color:var(--morze-j)}
@media(min-width:520px){.telefon-nota{grid-column:2}}
.zastrzezenie{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;max-width:56ch}
.zastrzezenie .ikonka{color:var(--szary-j);margin-top:1px}

/* Scena z produktem. Zdjecie tla nie ma ramki ani rogow — wygaszamy je maska
   radialna, wiec krawedzie rozplywaja sie w tle sekcji. Packshot stoi przed nim,
   z wlasnym cieniem odrysowanym po ksztalcie (drop-shadow, nie box-shadow) i
   miekkim podestem, zeby nie wisial w powietrzu. */
.hero-foto{position:relative;margin:0;display:grid;place-items:center;
  min-height:clamp(320px,44vw,470px);padding:6px 0 18px}
.hero-tlo{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(126%,700px);height:auto;opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 66%,transparent 92%);
  mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 66%,transparent 92%)}
.hero-foto::before{content:"";position:absolute;left:50%;bottom:16px;translate:-50% 0;
  width:min(76%,360px);height:44px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(12,79,71,.26),transparent 70%)}
.hero-pack{position:relative;width:auto;max-height:min(56vh,400px);
  filter:drop-shadow(0 22px 30px rgba(12,79,71,.26))}
.odreczne{position:absolute;right:0;top:3%;max-width:160px;text-align:center;
  font:600 24px/1.15 Caveat,'Segoe Script',cursive;color:var(--morze);
  transform:rotate(-6deg);pointer-events:none}
@media(min-width:960px){.hero-pack{margin-right:64px}.odreczne{right:-14px;top:2%}}
@media(max-width:700px){.odreczne{position:static;transform:none;margin:6px auto 0;max-width:100%}}

/* ═══════════════ bloki ═══════════════ */
.blok{padding:62px 0}
.blok-mieta{background:var(--mieta)}
.blok-piana{background:var(--piana)}
.naglowek{display:grid;gap:8px;margin-bottom:30px}
@media(min-width:860px){.naglowek{grid-template-columns:auto 1fr;align-items:end;gap:44px}}
.naglowek h2{margin:0}
.naglowek .lead{max-width:46ch}

/* ═══════════════ skladniki ═══════════════ */
.skladniki{list-style:none;padding:0;margin:0;display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.skladniki{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.skladniki{grid-template-columns:repeat(6,1fr)}}
.skladnik{background:var(--bial);border:1px solid var(--kreska);border-radius:var(--r);
  padding:16px 12px 15px;text-align:center;box-shadow:var(--cien-s);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.skladnik:hover{transform:translateY(-3px);box-shadow:var(--cien);border-color:#bfded4}
.skladnik.wyroznik{border-color:var(--morze-j);box-shadow:0 6px 20px rgba(28,154,137,.14)}
.skladnik figure{margin:0 0 10px;display:grid;place-items:center;height:96px;overflow:hidden}
.skladnik figure img{width:112px;height:112px;object-fit:cover;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 70%)}
.skladnik b{display:block;font:600 13px Inter,sans-serif;color:var(--morze-c);line-height:1.3}
.skladnik span{display:block;font-size:12.5px;color:var(--szary);margin-top:4px}

/* ═══════════════ kroki ═══════════════ */
.kroki{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media(min-width:720px){.kroki{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kroki{grid-template-columns:repeat(4,1fr)}}
.krok{position:relative;display:flex;align-items:center;gap:14px;background:var(--mieta);
  border:1px solid var(--kreska);border-radius:var(--r);padding:16px}
.krok-nr{position:absolute;left:12px;top:12px;z-index:2;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:var(--morze);color:#fff;
  font:600 14px Poppins,sans-serif;box-shadow:0 4px 10px rgba(12,79,71,.25)}
.krok figure{margin:0;flex:none;width:104px;height:92px;border-radius:12px;overflow:hidden;
  background:var(--bial);box-shadow:var(--cien-s)}
.krok figure img{width:100%;height:100%;object-fit:cover}
.krok p{margin:0;font-size:14px;color:#3c4f4b;line-height:1.45}
.krok-uwaga{display:grid;place-items:center;text-align:center;gap:9px;
  background:var(--ogien-b);border-color:#f6ddc7}
.krok-uwaga .znaczek{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--ogien-c);box-shadow:0 3px 10px rgba(240,129,44,.20)}
.krok-uwaga p{color:#a4571c;font-weight:500}

/* ═══════════════ dwie kolumny: sklad + ocena ═══════════════ */
.dwie{display:grid;gap:34px}
@media(min-width:960px){.dwie{grid-template-columns:1fr 1fr;gap:44px}}
.dwie .lead{margin-bottom:18px}
.rozwijak{background:var(--bial);border:1px solid var(--kreska);border-radius:var(--r);
  box-shadow:var(--cien-s);overflow:hidden}
.rozwijak summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;padding:16px 18px;font:600 15px Inter,sans-serif;color:var(--morze-c)}
.rozwijak summary::-webkit-details-marker{display:none}
.rozwijak summary .strzalka{transition:transform .2s ease;color:var(--morze-j)}
.rozwijak[open] summary .strzalka{transform:rotate(180deg)}
.rozwijak[open] summary{border-bottom:1px solid var(--kreska)}
.rozwijak .inci{margin:0;padding:16px 18px 18px;font-size:13.5px;line-height:1.75;
  color:var(--szary);word-break:break-word}
/* Blok oceny stoi teraz w pelnej szerokosci, tuz nad formularzem — dwie karty obok siebie. */
.ocena{display:grid;gap:14px}
@media(min-width:720px){.ocena{grid-template-columns:1fr 1fr}}
.ocena-karta{border-radius:var(--r);padding:18px 20px;border:1px solid transparent}
.ocena-karta h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 12px}
.ocena-karta ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ocena-karta li{position:relative;padding-left:22px;font-size:14px;color:#3c4f4b;line-height:1.45}
.ocena-karta li::before{content:"";position:absolute;left:6px;top:.62em;width:6px;height:6px;
  border-radius:50%}
.plus{background:#edf8f1;border-color:#cfe9db}
.plus h3{color:#15764a}
.plus li::before{background:var(--zielen)}
.minus{background:#fdf1ee;border-color:#f6d8d0}
.minus h3{color:#a8402b}
.minus li::before{background:var(--czerwien)}
.znak-ocena{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;flex:none}
.plus .znak-ocena{background:var(--zielen)}
.minus .znak-ocena{background:var(--czerwien)}

/* ═══════════════ spis, rozdzialy, pytania ═══════════════ */
.spis{background:var(--morze-b);border-block:1px solid var(--kreska);padding:24px 0}
.spis ul{list-style:none;padding:0;margin:0;display:grid;gap:6px 30px}
@media(min-width:760px){.spis ul{grid-template-columns:1fr 1fr}}
.spis a{display:block;padding:6px 0;border-bottom:1px solid rgba(12,79,71,.08);
  color:var(--morze-c);text-decoration:none;font-size:14.5px}
.spis a:hover{color:var(--ogien-c)}
.rozdzial{padding:40px 0}
.rozdzial:nth-of-type(even){background:var(--piana)}
.rozdzial h2{position:relative;padding-left:16px;font-size:clamp(22px,2.6vw,29px)}
.rozdzial h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;
  border-radius:2px;background:var(--ogien)}
.rozdzial p,.rozdzial li{color:var(--szary)}
.rozdzial ul{padding-left:20px}
.rozdzial-uwaga{background:var(--ogien-b)}
.rozdzial-uwaga h2::before{background:var(--ogien-c)}
.uwaga,.rzetelnosc{border-radius:var(--r);padding:18px 20px;margin:18px 0}
.uwaga{background:var(--bial);border:1px solid var(--kreska);border-left:4px solid var(--ogien)}
.uwaga b{display:block;margin-bottom:7px;font:600 16px Poppins,sans-serif;color:var(--ogien-c)}
.rzetelnosc{background:#edf8f1;border:1px solid #cfe9db}
.rzetelnosc b{display:block;margin-bottom:7px;font:600 16px Poppins,sans-serif;color:#15764a}
.uwaga p:last-child,.rzetelnosc p:last-child{margin-bottom:0}
.pytania{display:grid;gap:11px}
@media(min-width:880px){.pytania{grid-template-columns:1fr 1fr}}
.pytanie{background:var(--bial);border:1px solid var(--kreska);border-radius:var(--r);
  padding:15px 18px;box-shadow:var(--cien-s)}
.pytanie summary{display:flex;gap:10px;align-items:flex-start;cursor:pointer;list-style:none;
  font:600 15.5px Poppins,sans-serif;color:var(--morze-c)}
.pytanie summary::-webkit-details-marker{display:none}
.pytanie summary .ikonka{color:var(--ogien);margin-top:3px}
.pytanie[open] summary{margin-bottom:9px}
.pytanie div{font-size:14.5px;color:var(--szary)}
.zrodla-lista{font-size:14px;color:var(--szary);padding-left:20px}
.zrodla-lista li{margin-bottom:6px}

/* ═══════════════ zamowienie ═══════════════ */
.zamowienie{position:relative;overflow:hidden;padding:58px 0;
  background:linear-gradient(150deg,#e9f5ee,#dff0e7 55%,#d6ebe0)}
.zamowienie::before{content:"";position:absolute;width:520px;height:520px;left:-140px;bottom:-220px;
  border-radius:50%;filter:blur(60px);opacity:.6;
  background:radial-gradient(circle,#bfe6d5,transparent 70%);pointer-events:none}
.zamowienie .naglowek-srodek{position:relative;text-align:center;max-width:60ch;margin:0 auto 28px}
.zamowienie .naglowek-srodek .lead{margin-inline:auto}
.zamowienie-siatka{position:relative;display:grid;gap:22px;align-items:center}
@media(min-width:940px){.zamowienie-siatka{grid-template-columns:1.55fr 1fr;gap:34px}}
.formularz{display:grid;gap:14px;background:var(--bial);border:1px solid var(--kreska);
  border-radius:var(--r-d);padding:22px;box-shadow:var(--cien-d)}
.pola{display:grid;gap:14px}
@media(min-width:560px){.pola{grid-template-columns:1fr 1fr}}
.pole label{display:block;font:600 13.5px Inter,sans-serif;margin-bottom:6px;color:var(--morze-c)}
.pole input{width:100%;padding:13px 15px;border:1.5px solid var(--kreska);border-radius:11px;
  font:400 15.5px Inter,sans-serif;background:#fbfdfc;color:var(--atrament)}
.pole input::placeholder{color:#9fb0ac}
.pole input:focus{outline:0;border-color:var(--morze-j);background:#fff;
  box-shadow:0 0 0 4px rgba(28,154,137,.13)}
.pole.zle input{border-color:var(--czerwien);box-shadow:0 0 0 4px rgba(212,85,60,.10)}
.pulapka{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.wiersz-zamow{display:grid;gap:14px;align-items:center;padding-top:2px}
@media(min-width:560px){.wiersz-zamow{grid-template-columns:auto 1fr}}
.formularz.wyslane{text-align:center;place-items:center;padding:34px 22px}
.formularz.wyslane .lead{color:var(--morze-c);font-weight:500}
.zaufanie{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.zaufanie li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#33463f;line-height:1.35}
.zaufanie .ikonka{color:var(--morze)}

/* ═══════════════ rozdroze ═══════════════ */
.rozdroze{padding:64px 0 56px;text-align:center;
  background:linear-gradient(155deg,#f4fbf7,#e6f4ee)}
.rozdroze h1{font-size:clamp(36px,6vw,58px);margin-bottom:10px}
.rozdroze .lead{max-width:52ch;margin:0 auto 30px}
.kraje{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:13px;text-align:left}
@media(min-width:700px){.kraje{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.kraje{grid-template-columns:repeat(3,1fr)}}
.kraje a{display:grid;grid-template-columns:auto 1fr auto;gap:3px 14px;align-items:center;
  background:var(--bial);border:1px solid var(--kreska);border-radius:var(--r);
  padding:17px 19px;text-decoration:none;box-shadow:var(--cien-s);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.kraje a:hover{transform:translateY(-3px);box-shadow:var(--cien);border-color:#bfded4}
.kraj-kod{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--morze);color:#fff;font:600 14px Inter,sans-serif;letter-spacing:.04em}
.kraj-nazwa{font:600 17px Poppins,sans-serif;color:var(--morze-c)}
.kraj-cena{grid-row:1/3;font:700 17px Poppins,sans-serif;color:var(--ogien);white-space:nowrap}
.kraj-podpis{grid-column:2;font-size:13px;color:var(--szary)}

/* ═══════════════ podstrona ═══════════════ */
.podstrona{padding:48px 0 56px}
.podstrona h2{font-size:22px;margin-top:28px}
.podstrona p,.podstrona li{color:var(--szary)}
.powrot{margin-top:32px}

/* ═══════════════ stopka ═══════════════ */
.stopka{background:var(--bial);border-top:1px solid var(--kreska);padding:30px 0 34px}
.stopka .obszar{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.stopka .obszar{grid-template-columns:auto 1fr auto}}
.stopka .znak{font-size:24px}
.stopka-haslo{font-size:13px;color:var(--szary-j);margin:3px 0 0}
.stopka-menu{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.stopka-menu a{color:#33463f;text-decoration:none;font-size:14px}
.stopka-menu a:hover{color:var(--morze)}
.stopka-prawa{font-size:12.5px;color:var(--szary-j);line-height:1.5}
@media(min-width:900px){.stopka-prawa{text-align:right}}
.jezyki{list-style:none;padding:0;margin:0;display:flex;gap:7px;flex-wrap:wrap}
.jezyki a{display:inline-block;border:1px solid var(--kreska);border-radius:999px;
  padding:4px 12px;font-size:12.5px;text-decoration:none;color:var(--szary);letter-spacing:.05em}
.jezyki a[aria-current]{background:var(--morze);color:#fff;border-color:var(--morze)}
.stopka .obszar.stopka-nota{display:block;margin:18px auto 0;padding-top:16px;
  border-top:1px solid var(--kreska)}

/* Drobne odstepy jako klasy, nie atrybut style — patrz CSP w .htaccess. */
.odstep-g{margin-top:12px}
.odstep-d{margin-bottom:14px}
.pusta{padding:90px 22px;text-align:center}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .guzik,.kraje a,.skladnik{transition:none}
}


/* ═══════════════════ packshot: ma stac w kadrze, nie lezec na nim ═══════════════════
   Zmierzone: butelka wystawala 38 px ponad zdjecie tla i 25 px pod nie, a cien
   kontaktowy stal na 50% szerokosci, podczas gdy butelka — przez margin-right —
   na 43,7%. Cien lezal obok butelki. Stad wrazenie wklejki. */
.hero-tlo{
  /* bez tego globalne img{max-width:100%} przycina zdjecie do 506 px i butelka
     (400 px wysokosci) wystaje poza kadr gora i dolem */
  max-width:none;
  width:min(152%,840px);
  -webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 54%,transparent 88%);
          mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 54%,transparent 88%);
}
/* miekka poswiata pod produktem — krawedz wycinka przestaje byc twarda */
.hero-foto::after{
  content:"";position:absolute;left:50%;top:47%;translate:-50% -50%;
  width:min(82%,420px);aspect-ratio:1/.92;border-radius:50%;
  background:radial-gradient(circle,rgba(28,154,137,.15) 0%,rgba(28,154,137,0) 66%);
  pointer-events:none;z-index:0;
}
/* cien kontaktowy: wezszy i faktycznie pod butelka */
.hero-foto::before{
  width:min(52%,240px);height:30px;bottom:22px;
  background:radial-gradient(ellipse at center,rgba(12,79,71,.34) 0%,
             rgba(12,79,71,.14) 44%,rgba(12,79,71,0) 72%);
  filter:blur(5px);z-index:0;
}
/* cien stykowy + otoczeniowy zamiast jednego przesunietego o 22 px */
.hero-pack{
  position:relative;z-index:1;
  filter:drop-shadow(0 2px 3px rgba(12,79,71,.20))
         drop-shadow(0 16px 28px rgba(12,79,71,.22));
}
/* przy >=960px butelka jedzie 64 px w lewo — cien i poswiata musza jechac z nia */
@media(min-width:960px){
  .hero-foto::before{translate:calc(-50% - 32px) 0}
  .hero-foto::after{translate:calc(-50% - 32px) -50%}
}

/* ═══════════════════ ozdoby przy rozdzialach ═══════════════════
   Rozdzialy byly plaskimi prostokatami. Trzy warstwy dekoracji, wszystkie
   pseudo-elementami — zadnych nowych plikow i zadnej zmiany w tresci. */
.rozdzial{position:relative;overflow:hidden}
.rozdzial > .obszar{position:relative;z-index:1}
/* listek-znak wodny w rogu; parzyste rozdzialy dostaja go z drugiej strony */
.rozdzial::before{
  content:"";position:absolute;right:-34px;top:-30px;width:196px;height:196px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6C86 24 102 48 102 72c0 24-19 42-42 42S18 96 18 72C18 48 34 24 60 6z' fill='%2312776a'/%3E%3Cpath d='M60 22v78M60 46l22-16M60 70l24-18M60 92l22-18M60 46L38 30M60 70L36 52M60 92l-22-18' stroke='%23ffffff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.055;transform:rotate(14deg);pointer-events:none;z-index:0;
}
.rozdzial:nth-of-type(even)::before{
  right:auto;left:-38px;top:auto;bottom:-34px;transform:rotate(-160deg);opacity:.05;
}
/* delikatna poswiata u gory, zeby bloki nie stykaly sie plaska krecha */
.rozdzial::after{
  content:"";position:absolute;left:0;right:0;top:0;height:130px;
  background:linear-gradient(180deg,rgba(28,154,137,.055),rgba(28,154,137,0));
  pointer-events:none;z-index:0;
}
/* galazka pod naglowkiem — pasek przy H2 zostaje, dochodzi drugi akcent */
.rozdzial h2{padding-bottom:15px}
.rozdzial h2::after{
  content:"";position:absolute;left:16px;bottom:0;width:66px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M4 8h112' stroke='%23cfe3dc' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%2312776a'%3E%3Cellipse cx='18' cy='8' rx='10' ry='5'/%3E%3Cellipse cx='40' cy='8' rx='7.5' ry='4'/%3E%3Ccircle cx='57' cy='8' r='3'/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat;opacity:.9;
}
.rozdzial-uwaga::before{opacity:.05}
@media(max-width:700px){
  .rozdzial::before{width:132px;height:132px;right:-26px;top:-22px}
  .rozdzial:nth-of-type(even)::before{left:-28px;bottom:-26px}
}

/* telefon: tlo musi objac packshot, ktory ma sztywne 400 px wysokosci.
   Nadmiar przycina overflow:hidden sekcji hero — sprawdzone, ze nie powstaje
   poziome przewijanie. */
@media(max-width:700px){
  .hero-tlo{width:min(212%,700px)}
  .hero-foto::before{width:min(60%,200px);height:24px;bottom:26px}
  .hero-foto::after{width:min(96%,340px)}
}


/* ── formularz w karcie ceny (hero) ──
   Karta ceny sama jest biala karta z ramka i cieniem, a `.formularz` tez.
   Zagniezdzony formularz zdejmuje wiec wlasna oprawe, zeby nie bylo karty
   w karcie, i rozciaga sie na obie kolumny pod cena. */
.karta-cena .formularz{
  grid-column:1/-1;background:none;border:0;box-shadow:none;padding:0;gap:12px}
.karta-cena .pola{gap:12px}
.karta-cena .wiersz-zamow{padding-top:0}
.karta-cena .formularz .guzik{width:100%}
@media(max-width:519px){
  .karta-cena{gap:12px}
}

/* Karta ceny ma juz cene i notke telefoniczna, a formularz renderuje wlasne —
   w hero chowamy te z formularza, zeby nie bylo dwoch cen pod soba.
   Formularza na dole strony to nie dotyczy (tam nie ma karty ceny). */
.karta-cena .formularz .wiersz-zamow > div{display:none}
.karta-cena .formularz .telefon-nota{display:none}
.karta-cena .formularz .wiersz-zamow{grid-template-columns:1fr}

/* ── telefon: formularz blizej gory ──
   Pasek u gory powtarzal obietnice z listy .atuty i zabieral ~150 px nad
   zagieciem. Na telefonie zostaje jedna z tych dwoch list, a karta z cena
   i formularzem idzie przed nia. Na desktopie bez zmian. */
@media(max-width:760px){
  .pas{display:none}
  .hero-tresc{display:flex;flex-direction:column}
  .hero-tresc .plakietka{order:1}
  .hero-tresc h1{order:2}
  .hero-tresc .lead{order:3}
  .hero-tresc .karta-cena{order:4;margin-top:4px}
  .hero-tresc .atuty{order:5}
  .hero-tresc .zastrzezenie{order:6}
}

/* ── zdjecie w hero: wtopione w strone, poza formularzem ──
   Bylo: 769 px szerokosci, lewa krawedz na 613 px, a karta z formularzem konczy
   sie na 701 px — zdjecie wchodzilo na nia o 87 px. Do tego `mix-blend-mode:
   normal` zostawial prawie biale tlo zdjecia jako jasna plame na mietowej sekcji;
   maska tego nie ratuje, bo wygasza krycie, a nie roznice kolorow.
   Teraz: multiply (biel znika w tle, zostaja liscie, papryka i lod — tak samo
   jak zdjecia skladnikow nizej), wezsze i przesuniete w prawo. */
.hero-tlo{
  mix-blend-mode:multiply;
  width:min(136%,700px);
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 40%,transparent 84%);
          mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 40%,transparent 84%);
}
@media(min-width:960px){
  /* w ukladzie dwukolumnowym zdjecie odsuwa sie od kolumny z tekstem,
     zeby zaczynalo sie dopiero ZA karta ceny */
  .hero-tlo{left:61%}
}
@media(max-width:700px){
  /* na telefonie hero jest jednokolumnowe — zdjecie zostaje wysrodkowane
     i wieksze, bo packshot ma tam sztywne 400 px wysokosci */
  .hero-tlo{left:50%;width:min(212%,700px)}
}

/* Po samym multiply scena byla za blada — packshot stal na pustym tle.
   Podbicie dotyczy WYLACZNIE zdjecia tla; packshot to osobny element
   i pozostaje nietkniety. */
.hero-tlo{
  filter:saturate(1.28) contrast(1.08);
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 48%,transparent 86%);
          mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 48%,transparent 86%);
}

/* Biala poswiata pod zdjeciem: w srodku multiply pokazuje scene w pelni,
   na brzegach zdjecie mnozy sie do miety i znika bez krawedzi.
   Tlo .hero-foto lezy pod obrazkami z samej definicji. */
.hero-foto{
  background:radial-gradient(ellipse 56% 54% at 61% 49%,
             #ffffff 0%,rgba(255,255,255,.92) 40%,rgba(255,255,255,.55) 62%,
             rgba(255,255,255,0) 80%);
}
@media(max-width:700px){
  .hero-foto{background:radial-gradient(ellipse 62% 58% at 50% 49%,
             #ffffff 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,0) 80%)}
}
/* przy bieli pod spodem zdjecie nie potrzebuje juz mocnego podbicia */
.hero-tlo{filter:saturate(1.12) contrast(1.03)}

/* Notka „to kosmetyk, nie lek" na koncu strony — wysrodkowana i oddzielona,
   zeby nie wygladala jak doklejona do ostatniego rozdzialu. */
.zastrzezenie-stopka{
  max-width:70ch;margin:0 auto;padding:26px 22px 34px;
  justify-content:center;text-align:left;color:var(--szary-j)}