/* DREFIKS — landing (F3). Szata: mockup Agnieszki 2026-09-10 (nadrzędny) + paleta INBOX/2026-08-20_LOGO. */
/* Manrope hostowana lokalnie (OFL, assets/fonts/OFL.txt) — zero żądań do Google przed zgodą (pomiar-zgoda 2026-10-02) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope-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{
  --czern:#0D1417;
  --rdza:#7C4426;
  --rdza-jasna:#A85B32;
  --tytul-karty:#FFFFFF; /* audyt Agnieszki 25.09: naglowki kart biale, nie pomaranczowe */
  --brzoskwinia:#EDB08C;
  --biel:#F6F6F5;
  --szary:#5A5F63;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px} /* fallback; JS ustawia dokładnie wg realnej wysokości headera */
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--biel);color:var(--czern);line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ===== HEADER (mockup: czarny pasek, logo, adres, menu z rdzawymi kreskami) ===== */
.top{background:var(--czern);color:#fff;position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:.14em;text-decoration:none;color:#fff;display:flex;align-items:center}
.logo b{font-weight:800}
.logo img{display:block;height:23px;width:auto}
.adres{font-size:.8rem;color:#c9cdd0;border-left:1px solid #3a4145;padding-left:18px;letter-spacing:.02em}
.tel-top{font-size:.95rem;font-weight:800;color:#fff;text-decoration:none;border-left:1px solid #3a4145;padding-left:18px;white-space:nowrap}
.tel-top:hover{color:var(--brzoskwinia)}
nav.menu{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
nav.menu a{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 0}
nav.menu a::before{content:"";width:14px;height:3px;background:var(--rdza-jasna);flex:none}
nav.menu a:hover{color:var(--brzoskwinia)}

/* ===== HERO (rozdzielacz) ===== */
.hero{padding:64px 20px 40px;text-align:center}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.hero p{margin-top:14px;color:var(--szary);font-size:1.02rem}

/* ===== KARTY (3 drzwi) ===== */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:26px 0 54px}
.karta{background:var(--czern);border-radius:8px;overflow:hidden;box-shadow:0 8px 26px rgba(13,20,23,.14);text-decoration:none;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.karta:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,20,23,.22)}
.karta img{aspect-ratio:4/3;object-fit:cover;width:100%}
.karta .dol{padding:18px 16px 20px;text-align:center}
.karta h2,.karta .k-t{font-size:.95rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tytul-karty)}
.karta .wejdz{display:inline-block;margin-top:12px;background:var(--brzoskwinia);color:var(--czern);font-weight:700;font-size:.85rem;padding:8px 30px;border-radius:4px}
.karta:hover .wejdz{background:#f2c4a4}

/* ===== PASEK BENEFITÓW (brzoskwiniowy, ikony) ===== */
.benefity{background:var(--brzoskwinia)}
.benefity .wrap{display:flex;justify-content:center;align-items:stretch;gap:0;padding:16px 20px;flex-wrap:wrap}
.benefit{display:flex;align-items:center;gap:12px;font-weight:800;font-size:.98rem;padding:6px 34px}
.benefit+.benefit{border-left:1px solid rgba(13,20,23,.35)}
.benefit svg{width:28px;height:28px;flex:none}

/* ===== SEKCJE OGÓLNE ===== */
section.blok{padding:58px 0}
section.blok.ciemna{background:#fff}
.blok h2{font-size:1.55rem;font-weight:800;margin-bottom:8px}
.blok .pod{color:var(--szary);margin-bottom:28px}
.kol3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kol3 .box{background:#fff;border:1px solid #e6e4e1;border-radius:8px;padding:22px}
.ciemna .kol3 .box{background:var(--biel);border-color:#e6e4e1}
.box h3{font-size:1.02rem;font-weight:800;margin-bottom:8px}
.box p{font-size:.92rem;color:#3c4247}
.znacznik{display:inline-block;width:26px;height:4px;background:var(--rdza-jasna);margin-bottom:12px}

/* ===== PODSTRONY: hero z obrazem ===== */
.phero{position:relative;color:#fff;background:var(--czern)}
.phero img{width:100%;height:min(46vh,430px);object-fit:cover;opacity:.55}
.phero .tekst{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:var(--max);margin:0 auto;padding:0 20px}
.phero h1{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;line-height:1.15;max-width:640px}
.phero p{margin-top:10px;font-size:1.05rem;max-width:560px;color:#e8e6e3}
.przyciski{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 26px;border-radius:5px;font-weight:800;font-size:.95rem;text-decoration:none}
.btn.pelny{background:var(--brzoskwinia);color:var(--czern)}
.btn.pelny:hover{background:#f2c4a4}
.btn.ramka{border:2px solid var(--brzoskwinia);color:var(--brzoskwinia)}
.btn.ramka:hover{background:var(--brzoskwinia);color:var(--czern)}
.tresc{max-width:900px;margin:0 auto;padding:0 20px}
.tresc ul.lista{list-style:none;margin:18px 0}
.tresc ul.lista li{padding:10px 0 10px 30px;position:relative;font-size:1rem}
.tresc ul.lista li::before{content:"";position:absolute;left:0;top:18px;width:16px;height:4px;background:var(--rdza-jasna)}
.dwie{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:22px 0}
.dwie .box{background:#fff;border:1px solid #e6e4e1;border-radius:8px;padding:24px}

/* realizacje grid */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.galeria img{aspect-ratio:4/3;object-fit:cover;border-radius:6px;width:100%}

/* FAQ */
.faq details{background:#fff;border:1px solid #e6e4e1;border-radius:8px;padding:16px 20px;margin-bottom:12px}
.faq summary{font-weight:800;cursor:pointer;font-size:.98rem}
.faq p{margin-top:10px;color:#3c4247;font-size:.95rem}

/* ===== PELLET: cennik ===== */
.cennik{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0}
/* pellet: produkt (worek + mocny blok cenowy) i certyfikat — audyt Agnieszki 25.09 */
.produkt{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;margin:26px 0}
.produkt .worek{width:100%;height:auto;border-radius:8px;background:#fff;border:1px solid #e4e2df}
.cena .marka{font-weight:800;letter-spacing:.06em;margin-top:14px}
.cena .parametry{font-size:.82rem;color:#c9cdd0;margin-top:10px;line-height:1.55}
.cert-box{display:flex;gap:26px;align-items:flex-start;margin-top:22px}
.cert-box img{width:190px;height:auto;border:1px solid #e4e2df;border-radius:6px;flex:none}
.ts-partner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.ts-partner img{height:34px;width:auto}
.ts-partner span{font-size:.9rem;color:var(--szary)}
.cena{background:var(--czern);color:#fff;border-radius:8px;padding:24px;text-align:center}
.cena .ile{font-size:1.9rem;font-weight:800;color:var(--brzoskwinia);margin:8px 0 2px}
.cena .za{font-size:.9rem;color:#c9cdd0}
.cena .opis{font-size:.85rem;margin-top:10px;color:#e8e6e3}

/* ===== FORMULARZ ===== */
.formularz{background:#fff;border:1px solid #e6e4e1;border-radius:8px;padding:26px;max-width:640px}
.formularz label{display:block;font-size:.85rem;font-weight:700;margin:14px 0 5px}
.formularz input,.formularz textarea{width:100%;padding:11px 12px;border:1px solid #cfcac4;border-radius:5px;font:inherit;font-size:.95rem;background:var(--biel)}
.formularz .zgoda{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:.8rem;color:#3c4247}
.formularz .zgoda input{width:auto;margin-top:3px}
.formularz button{background:var(--czern);color:#fff;font-weight:800;font-size:1rem;padding:13px 34px;border:0;border-radius:5px;cursor:pointer}
.formularz button:hover{background:var(--rdza)}
.formularz .pulapka{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formularz .info-rodo{font-size:.8rem;color:#3c4247;margin:14px 0}
.formularz .cf-turnstile-miejsce{margin-top:14px;min-height:0}
.formularz button[disabled]{opacity:.6;cursor:wait}
.form-info.ok{background:#eef7ee;border-color:#7fb07f}
.kopiuj-btn{margin-left:6px;padding:1px 8px;font:600 .75rem/1.6 inherit;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;cursor:pointer;vertical-align:middle}
.form-info{margin-top:14px;padding:12px 14px;border-radius:6px;background:#fdf3e7;border:1px solid var(--brzoskwinia);font-size:.9rem}
.form-info:empty{margin:0;padding:0;border:0}

/* ===== STOPKA ===== */
footer{background:var(--czern);color:#c9cdd0;margin-top:70px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px;padding:46px 20px 26px}
footer .f-h{color:#fff;font-size:1rem;font-weight:800;margin-bottom:12px;letter-spacing:.05em}
footer a{color:var(--brzoskwinia);text-decoration:none}
footer a:hover{text-decoration:underline}
footer p,footer li{font-size:.88rem;line-height:1.7}
footer ul{list-style:none}
.f-logo{font-weight:800;font-size:1.35rem;letter-spacing:.14em;color:#fff}
.f-logo img{display:block;height:21px;width:auto}
.f-tel{font-size:1.25rem;font-weight:800;color:var(--brzoskwinia)}
.rodo{grid-column:1/-1;border-top:1px solid #2a3237;padding-top:18px;font-size:.74rem;color:#8b9297;line-height:1.6}

/* skok kotwiczny: gdy sekcja jest za nisko, by dojechać do góry ekranu (koniec strony),
   błysk obwódki pokazuje cel — tytuł sekcji dostaje .flash z JS */
.flash{animation:anchorFlash 1.5s ease-out 1;border-radius:4px}
@keyframes anchorFlash{0%,35%{box-shadow:0 0 0 6px var(--brzoskwinia)}100%{box-shadow:0 0 0 6px rgba(237,176,140,0)}}

/* ===== RESPONSYWNOŚĆ ===== */
@media(max-width:900px){
  .karty,.kol3,.cennik{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  html{scroll-padding-top:124px} /* fallback; header z zawiniętym menu jest wyższy — JS mierzy dokładnie */
  .top .wrap{gap:10px}
  .adres{display:none}
  .tel-top{border-left:none;padding-left:0}
  .produkt{grid-template-columns:1fr}
  .produkt .worek{max-width:320px;margin:0 auto}
  .cert-box{flex-direction:column}
  nav.menu{gap:12px;margin-left:0}
  .karty,.kol3,.cennik,.dwie,.galeria{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .benefit{padding:6px 16px}
  .hero{padding-top:44px}
  /* hero podstron: na wąskim ekranie tekst NIE nakłada się na obraz (zrzut Agnieszki: przycięty tytuł) */
  .phero{display:flex;flex-direction:column-reverse;background:var(--czern)}
  .phero img{height:230px;opacity:.9}
  .phero .tekst{position:static;padding:26px 20px 30px}
  .phero h1{font-size:1.6rem}
}

footer p a,.rodo a{text-decoration:underline} /* a11y: link nie tylko kolorem */

/* ===== ZGODA NA POMIAR (pomiar-zgoda 2026-10-02; kontrakt _KONFIG.md §4) =====
   pasek pod sticky headerem (z-index 50), oba przyciski IDENTYCZNA klasa (EDPB: odmowa równie łatwa) */
.zgoda-pasek{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--czern);color:#e6e4e1;border-top:2px solid var(--brzoskwinia);box-shadow:0 -6px 20px rgba(13,20,23,.25)}
.zgoda-pasek .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.zgoda-pasek p{font-size:.86rem;line-height:1.55}
.zgoda-pasek a{color:var(--brzoskwinia);text-decoration:underline}
.zgoda-przyciski{display:flex;gap:10px;flex:none}
.zgoda-btn{flex:1 1 0;min-width:0;padding:10px 20px;border:2px solid var(--brzoskwinia);border-radius:5px;background:transparent;color:var(--brzoskwinia);font:inherit;font-size:.9rem;font-weight:800;cursor:pointer;white-space:nowrap}
.zgoda-btn:focus-visible{background:var(--brzoskwinia);color:var(--czern)}
@media(hover:hover){.zgoda-btn:hover{background:var(--brzoskwinia);color:var(--czern)}} /* na dotyku :hover zostaje po stuknięciu (L4 F10) */
.zgoda-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zgoda-pasek{max-height:100dvh;overflow-y:auto} /* 320 px / powiększony tekst: „Zapisz wybór” zawsze osiągalne (L4 F10) */
.zgoda-tresc{min-width:0}
.zgoda-wybor{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:10px}
.zgoda-wybor[hidden]{display:none}
.zgoda-wybor label{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;line-height:1.4;cursor:pointer}
.zgoda-wybor input{width:18px;height:18px;margin-top:1px;accent-color:var(--brzoskwinia);flex:none}
.zgoda-wybor .zgoda-btn{flex:none}
.zgoda-przyciski .zgoda-btn{flex:1 1 auto;padding:10px 16px} /* 3 przyciski (meta-pixel): szerokość wg treści, ten sam wygląd — równorzędność = klasa i styl, nie piksel szerokości */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--brzoskwinia);text-decoration:underline;cursor:pointer}
.link-btn:focus-visible{outline:2px solid var(--brzoskwinia);outline-offset:2px}
@media(max-width:620px){
  .zgoda-pasek .wrap{flex-direction:column;align-items:stretch;gap:12px}
  .zgoda-pasek p{font-size:.8rem}
  .zgoda-przyciski{flex-wrap:wrap}
  .zgoda-przyciski .zgoda-btn{flex:1 1 30%;padding:10px 8px;white-space:normal}
  .zgoda-wybor{flex-direction:column;align-items:stretch}
}

/* ===== POLITYKA PRYWATNOŚCI ===== */
.polityka h2{font-size:1.15rem;margin:30px 0 8px;scroll-margin-top:90px}
.polityka p{margin-bottom:10px}
.polityka .spis{font-size:.9rem;margin:-8px 0 8px;color:var(--szary)}
.polityka .ramka-info{background:#fff;border:1px solid #e6e4e1;border-left:4px solid var(--rdza-jasna);border-radius:6px;padding:14px 16px;margin:14px 0}
.polityka .ramka-info .link-btn{color:var(--rdza);font-weight:700;margin-left:4px}
.polityka code{font-size:.88em;background:#fff;border:1px solid #e6e4e1;border-radius:4px;padding:1px 5px}