/* GLUCADIN.EU — jeden arkusz, bez bibliotek.
   Paleta wyjęta z opakowania: czerwień i pomarańcz z logo, złoto ze spodu
   pudełka, zieleń listka, do tego biel i ciepły krem jak w mockupie.
   Czerwień wyłącznie jako akcent konwersyjny — nigdy jako tło sekcji. */

:root{
  --czer:#d81f26; --czer-c:#b3161d; --pom:#f2691f; --zloto:#f5b324;
  --ziel:#4e8f3e;
  --biel:#fff; --krem:#fdf6ec; --krem-m:#fffaf3; --bez:#f3e7d6;
  --graf:#1b1a19; --szary:#56524d; --szary-j:#8a847c;
  --kre:#efe4d4;
  --r:18px; --r-s:12px; --r-l:26px;
  --cien:0 2px 4px rgba(27,26,25,.04), 0 10px 26px rgba(27,26,25,.06);
  --cien-m:0 6px 14px rgba(27,26,25,.07), 0 22px 48px rgba(27,26,25,.09);
  --cien-cta:0 6px 16px rgba(216,31,38,.28);
  --szer:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--biel);color:var(--szary);font-family:var(--font);
  font-size:17px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--czer);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--graf);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
h1{font-size:clamp(31px,4.4vw,50px);font-weight:800}
h2{font-size:clamp(29px,3.4vw,44px);font-weight:800}
h3{font-size:19px;font-weight:700;line-height:1.3}
p{margin:0 0 15px}
ul,ol{margin:0;padding:0;list-style:none}
.gl-szer{width:100%;max-width:var(--szer);margin:0 auto;padding:0 24px}
.gl-ik{flex:0 0 auto}

/* ——— nagłówki sekcji */
.gl-nad{margin:0 0 9px;color:var(--czer);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.gl-srodek{max-width:760px;text-align:center;margin-bottom:46px}
.gl-srodek h2{margin-bottom:0}
.gl-waski{max-width:820px}

/* ——— sekcje i rytm */
.gl-sek{padding:86px 0}
.gl-krem{background:var(--krem)}
.gl-sek+.gl-sek{border-top:1px solid transparent}

/* ——— przycisk: jeden system na całej stronie */
.gl-btn{display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#e8342c,var(--czer));color:#fff;
  font-weight:700;font-size:17px;line-height:1;padding:17px 30px;
  border:0;border-radius:16px;cursor:pointer;box-shadow:var(--cien-cta);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.gl-btn:hover{background:linear-gradient(180deg,var(--czer),var(--czer-c));
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(216,31,38,.36);
  text-decoration:none}
.gl-btn:active{transform:translateY(0)}
.gl-btn-pelny{width:100%;justify-content:center;padding:18px 24px}

/* ——— header */
.gl-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid #f0eae1}
.gl-head-w{display:flex;align-items:center;gap:26px;min-height:68px}
.gl-logo{display:flex;align-items:center;gap:9px;color:var(--graf);
  font-weight:800;font-size:19px;letter-spacing:.02em}
.gl-logo:hover{text-decoration:none}
.gl-logo-z{width:24px;height:24px;border-radius:50% 50% 50% 8px;
  background:linear-gradient(145deg,var(--zloto),var(--czer))}
.gl-nav{display:flex;gap:22px;margin-left:8px}
.gl-nav a{color:var(--szary);font-size:15px;font-weight:600}
.gl-nav a:hover{color:var(--czer);text-decoration:none}
.gl-head-t{display:flex;gap:20px;margin-left:auto}
.gl-head-t li{display:flex;align-items:center;gap:7px;color:var(--szary);
  font-size:13px;font-weight:600}
.gl-head-t .gl-ik{color:var(--czer)}

/* ——— hero */
.gl-hero{position:relative;overflow:hidden;
  background:
   radial-gradient(1100px 440px at 78% 18%,rgba(245,179,36,.20),transparent 62%),
   radial-gradient(760px 420px at 12% 86%,rgba(78,143,62,.10),transparent 60%),
   linear-gradient(180deg,var(--krem-m),var(--krem) 58%,#fdf2e2)}
.gl-hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:60px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85))}
.gl-hero-w{display:grid;grid-template-columns:45fr 55fr;gap:40px;
  align-items:center;padding-top:62px;padding-bottom:62px;position:relative;z-index:2}
.gl-eyebrow{display:inline-block;margin:0 0 15px;padding:7px 15px;
  background:rgba(216,31,38,.09);color:var(--czer);border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gl-hero-t h1{margin-bottom:16px}
.gl-lead{font-size:18.5px;color:#403c37;margin-bottom:22px;max-width:30em}
.gl-hero-p{margin-bottom:26px;display:grid;gap:11px}
.gl-hero-p li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px}
.gl-hero-p .gl-ik{color:var(--czer);margin-top:2px}
.gl-hero-a{margin:0 0 13px}
.gl-hero-n{font-size:13.5px;color:var(--szary-j);margin:0;max-width:34em}
.gl-hero-f{position:relative;display:flex;justify-content:center}
.gl-hero-f img{width:100%;max-width:600px;
  filter:drop-shadow(0 26px 44px rgba(90,60,20,.22))}

/* okrągły badge z ceną — jak w mockupie */
.gl-badge{position:absolute;top:-6px;right:4px;z-index:3;width:124px;height:124px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;background:radial-gradient(circle at 36% 30%,#ef3a32,var(--czer));
  color:#fff;text-align:center;box-shadow:0 14px 30px rgba(216,31,38,.34);
  transform:rotate(-7deg)}
.gl-badge span{font-size:11.5px;font-weight:600;opacity:.92;letter-spacing:.06em;
  text-transform:uppercase}
.gl-badge strong{font-size:26px;font-weight:800;line-height:1.1;margin:2px 0}

/* ——— pas zaufania */
.gl-pas{background:var(--biel);border-bottom:1px solid #f2ece3}
.gl-pas-l{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-top:28px;padding-bottom:28px}
.gl-pas-l li{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.gl-pas-i{flex:0 0 auto;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:var(--czer);
  background:linear-gradient(145deg,#fff2e4,#fde6d6)}
.gl-pas-l b{display:block;color:var(--graf);font-size:15.5px;line-height:1.25}
.gl-pas-l span:not(.gl-pas-i){display:block;font-size:13.5px;color:var(--szary-j)}
.gl-pas-l li>b,.gl-pas-l li>span:not(.gl-pas-i){flex:1 1 100%;margin-left:61px;margin-top:-4px}
.gl-pas-l li>b{margin-top:0}

/* ——— karty 4 / 3 */
.gl-siatka4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gl-siatka3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gl-karta{background:var(--biel);border:1px solid #f0e8dc;border-radius:var(--r);
  padding:30px 26px;box-shadow:var(--cien);transition:transform .18s,box-shadow .18s}
.gl-karta:hover{transform:translateY(-4px);box-shadow:var(--cien-m)}
.gl-karta-i{display:grid;place-items:center;width:54px;height:54px;margin-bottom:17px;
  border-radius:15px;color:var(--czer);background:linear-gradient(145deg,#fff1e6,#fde3d2)}
.gl-karta p{margin:0;font-size:15.5px}
.gl-karta-tak .gl-karta-i{color:var(--ziel);background:linear-gradient(145deg,#eef7ea,#e1f0da)}
.gl-karta-nie .gl-karta-i{color:var(--szary-j);background:linear-gradient(145deg,#f4f1ec,#ebe6de)}

/* ——— split */
.gl-split{display:grid;grid-template-columns:48fr 52fr;gap:54px;align-items:center}
.gl-split-t p{font-size:16.5px}
.gl-liczby{display:grid;grid-template-columns:repeat(3,auto);gap:30px;
  margin-top:26px;justify-content:start}
.gl-liczby strong{display:block;color:var(--czer);font-size:34px;font-weight:800;
  line-height:1.05;letter-spacing:-.02em}
.gl-liczby span{display:block;font-size:13px;color:var(--szary-j);max-width:14em;
  margin-top:5px}
.gl-split-f{position:relative}
.gl-split-f img{border-radius:var(--r-l);box-shadow:var(--cien-m);width:100%}
.gl-notka{position:absolute;top:-26px;right:-6px;z-index:2;
  font-family:'Segoe Script','Bradley Hand',cursive;color:var(--czer);
  font-size:21px;line-height:1.25;max-width:9em;transform:rotate(-6deg)}
.gl-notka-p{top:auto;bottom:16px;right:18px}

/* ——— składniki */
.gl-skl{background:var(--biel);border:1px solid #f0e8dc;border-radius:var(--r);
  padding:30px 26px;box-shadow:var(--cien);transition:transform .18s,box-shadow .18s}
.gl-skl:hover{transform:translateY(-4px);box-shadow:var(--cien-m)}
.gl-skl-moc{border-color:rgba(216,31,38,.26);
  background:linear-gradient(180deg,#fffaf6,var(--biel))}
.gl-skl-i{display:grid;place-items:center;width:66px;height:66px;margin-bottom:16px;
  border-radius:50%;color:var(--ziel);background:linear-gradient(145deg,#f2f8ee,#e6f1df)}
.gl-skl-moc .gl-skl-i{color:var(--czer);background:linear-gradient(145deg,#fff0e6,#fde0ce)}
.gl-skl h3{margin-bottom:5px}
.gl-skl-e{display:inline-block;margin:0 0 11px;padding:4px 11px;border-radius:999px;
  background:rgba(216,31,38,.08);color:var(--czer);font-size:12.5px;font-weight:700;
  letter-spacing:.04em}
.gl-skl p:last-child{margin:0;font-size:15.5px}
.gl-zrodlo{margin-top:26px;font-size:13.5px;color:var(--szary-j);max-width:62em}

/* ——— tabela */
.gl-tab-w{border-radius:var(--r);overflow:hidden;border:1px solid #efe6d9;
  box-shadow:var(--cien);background:var(--biel)}
.gl-tab{width:100%;border-collapse:collapse;font-size:16px}
.gl-tab th{background:linear-gradient(180deg,#fff4e8,#fdeada);color:var(--graf);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-align:left;padding:16px 22px}
.gl-tab td{padding:16px 22px;border-top:1px solid #f4ece1;color:var(--graf)}
.gl-tab tbody tr:nth-child(even){background:#fffcf8}
.gl-tab td span{display:block;color:var(--szary-j);font-size:13.5px;font-style:italic}
.gl-tab .gl-l{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  white-space:nowrap}
.gl-tab tbody tr:nth-last-child(-n+2) .gl-l{color:var(--czer)}
.gl-pelny{margin-top:24px;font-size:15.5px;max-width:58em}
.gl-uwaga{padding:14px 18px;border-left:3px solid var(--zloto);
  background:#fffaf0;border-radius:0 var(--r-s) var(--r-s) 0}

/* ——— panele */
.gl-panele{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gl-panel{border-radius:var(--r);padding:30px 28px;border:1px solid #f0e8dc;
  background:var(--biel);box-shadow:var(--cien)}
.gl-panel h3{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.gl-panel-a h3{color:var(--ziel)} .gl-panel-b h3{color:var(--czer)}
.gl-panel li{position:relative;padding-left:20px;margin-bottom:10px;font-size:15.5px}
.gl-panel li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--bez)}
.gl-panel-a li::before{background:var(--ziel)} .gl-panel-b li::before{background:var(--czer)}
.gl-po{margin-top:26px;max-width:58em;font-size:15.5px}
.gl-po-r{color:var(--szary-j);font-size:14.5px}
.gl-wniosek{margin:16px auto 0;max-width:46em;font-size:17px}

/* ——— dla kogo */
.gl-siatka5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.gl-siatka5 li{background:var(--biel);border:1px solid #f0e8dc;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--cien);transition:transform .18s}
.gl-siatka5 li:hover{transform:translateY(-4px)}
.gl-dk-f{display:block;height:116px}
.gl-dk-1{background:linear-gradient(145deg,#ffe9d2,#ffd2ae)}
.gl-dk-2{background:linear-gradient(145deg,#eaf4e4,#d3e9c8)}
.gl-dk-3{background:linear-gradient(145deg,#fdf0d8,#f8ddab)}
.gl-dk-4{background:linear-gradient(145deg,#ffe3e0,#ffc8c3)}
.gl-dk-5{background:linear-gradient(145deg,#e9eef5,#d4dde9)}
.gl-siatka5 p{margin:0;padding:17px 18px 20px;font-size:14.5px;color:var(--graf)}

/* ——— kroki */
.gl-kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:k}
.gl-kroki li{position:relative;padding-top:8px}
.gl-nr{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;
  border-radius:50%;background:linear-gradient(145deg,#e8342c,var(--czer));
  color:#fff;font-size:21px;font-weight:800;box-shadow:var(--cien-cta)}
.gl-kroki p{margin:0;font-size:15.5px}

/* ——— separator z kapsułką */
.gl-sep{position:relative;background:
  radial-gradient(760px 320px at 20% 30%,rgba(245,179,36,.16),transparent 60%),
  linear-gradient(180deg,#fffaf2,#fdf4e8)}
.gl-sep-w{display:grid;grid-template-columns:38fr 62fr;gap:44px;align-items:center;
  position:relative}
.gl-sep-f img{border-radius:var(--r-l);width:100%;box-shadow:var(--cien-m)}
.gl-sep-u{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.gl-sep-u li{text-align:center;background:rgba(255,255,255,.72);border-radius:var(--r);
  padding:22px 16px;border:1px solid #f3e9db}
.gl-sep-u .gl-ik{color:var(--czer);margin:0 auto 10px}
.gl-sep-u b{display:block;color:var(--graf);font-size:15.5px}
.gl-sep-u span{display:block;font-size:13.5px;color:var(--szary-j);margin-top:3px}

/* ——— pas cech */
.gl-cechy{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gl-cechy li{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;background:var(--biel);border:1px solid #f0e8dc;
  border-radius:var(--r-s);padding:20px 12px;box-shadow:var(--cien)}
.gl-cechy .gl-ik{color:var(--czer)}
.gl-cechy span{font-size:14px;font-weight:600;color:var(--graf);line-height:1.3}

/* ——— cena + formularz */
.gl-cena-w{display:grid;grid-template-columns:1fr 440px;gap:46px;align-items:start}
.gl-cena-t p{font-size:16.5px}
.gl-form{background:var(--biel);border:1px solid #f0e3d2;border-radius:var(--r-l);
  padding:30px 28px;box-shadow:var(--cien-m);position:relative}
.gl-form-nad{margin:0 0 4px;color:var(--czer);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.gl-form-cena{margin:0 0 20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gl-form-cena strong{color:var(--graf);font-size:34px;font-weight:800;letter-spacing:-.02em}
.gl-form-cena span{font-size:13.5px;color:var(--szary-j)}
.gl-pole{display:block;margin-bottom:14px}
.gl-pole span{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;
  color:var(--graf)}
.gl-pole input{width:100%;padding:14px 16px;border:1px solid #e6dccd;
  border-radius:var(--r-s);font:inherit;font-size:16px;color:var(--graf);
  background:#fffdfa;transition:border-color .15s,box-shadow .15s}
.gl-pole input:focus{outline:0;border-color:var(--czer);
  box-shadow:0 0 0 3px rgba(216,31,38,.14)}
.gl-form-nota{margin:14px 0 0;font-size:13px;color:var(--szary-j);line-height:1.5}
.gl-ukryte{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ——— zamówienie */
.gl-zam-w{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}
.gl-zam{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gl-zam li{position:relative;background:var(--biel);border:1px solid #f0e8dc;
  border-radius:var(--r);padding:24px 18px;box-shadow:var(--cien);text-align:center}
.gl-zam li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-11px;
  width:10px;height:10px;border-top:2px solid var(--bez);border-right:2px solid var(--bez);
  transform:translateY(-50%) rotate(45deg)}
.gl-zam-i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 13px;
  border-radius:50%;color:var(--czer);background:linear-gradient(145deg,#fff1e6,#fde3d2)}
.gl-zam b{display:block;color:var(--graf);font-size:15.5px;margin-bottom:5px}
.gl-zam span:not(.gl-zam-i){display:block;font-size:13.5px;color:var(--szary)}
.gl-dost{background:linear-gradient(180deg,#fffaf3,var(--biel));border:1px solid #f0e3d2;
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--cien)}
.gl-dost h3{margin-bottom:16px}
.gl-dost li{display:grid;grid-template-columns:24px 1fr;gap:11px;margin-bottom:14px}
.gl-dost .gl-ik{color:var(--czer);grid-row:span 2;margin-top:2px}
.gl-dost b{color:var(--graf);font-size:15px}
.gl-dost span{font-size:13.5px;color:var(--szary-j);grid-column:2}

/* ——— FAQ */
.gl-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.gl-faq-p{background:var(--biel);border:1px solid #f0e8dc;border-radius:14px;
  box-shadow:var(--cien);overflow:hidden}
.gl-faq-p summary{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:19px 22px;cursor:pointer;font-weight:600;font-size:16px;
  color:var(--graf);list-style:none}
.gl-faq-p summary::-webkit-details-marker{display:none}
.gl-faq-p summary i{flex:0 0 auto;position:relative;width:18px;height:18px}
.gl-faq-p summary i::before,.gl-faq-p summary i::after{content:"";position:absolute;
  background:var(--czer);border-radius:2px;transition:transform .2s ease}
.gl-faq-p summary i::before{top:8px;left:0;width:18px;height:2px}
.gl-faq-p summary i::after{top:0;left:8px;width:2px;height:18px}
.gl-faq-p[open] summary i::after{transform:rotate(90deg)}
.gl-faq-p div{padding:0 22px 20px}
.gl-faq-p p{margin:0;font-size:15.5px}

/* ——— finalne CTA */
.gl-final{position:relative;overflow:hidden;padding:76px 0;
  background:
   radial-gradient(880px 380px at 14% 30%,rgba(245,179,36,.22),transparent 62%),
   linear-gradient(180deg,#fdf4e6,#fbeeda)}
.gl-final-w{display:grid;grid-template-columns:300px 1fr 150px;gap:36px;
  align-items:center}
.gl-final-f img{filter:drop-shadow(0 20px 34px rgba(90,60,20,.22))}
.gl-final-t h2{font-size:clamp(27px,3vw,38px);margin-bottom:12px}
.gl-final-t p{font-size:16.5px;max-width:34em}
.gl-badge-s{position:static;justify-self:center;width:134px;height:134px}

/* ——— stopka */
.gl-stopa{background:#1b1a19;color:#b7b1a8;padding:56px 0 46px;font-size:14px}
.gl-stopa h2,.gl-stopa h3{color:#fff}
.gl-stopa-h{font-size:19px;margin-bottom:18px}
.gl-stopa h3{font-size:16px;margin:26px 0 12px}
.gl-punkty li{position:relative;padding-left:17px;margin-bottom:9px;line-height:1.55}
.gl-punkty li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:#59534b}
.gl-punkty-m li{font-size:13px;color:#8e887f}
.gl-stopa a{color:#d9d3ca;text-decoration:underline}
.gl-stopa-n{margin:26px 0 0;font-size:12.5px;color:#7d776f}

/* ——— pasek mobilny i okno */
.gl-pasek{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.97);
  border-top:1px solid #efe7db;box-shadow:0 -6px 20px rgba(27,26,25,.1)}
.gl-pasek span{flex:1;font-size:14px;color:var(--graf);line-height:1.3}
.gl-pasek .gl-btn{padding:13px 20px;font-size:15px}
/* ⚠ `display` ZAWSZE po regule dla [hidden], inaczej `display:grid` wygrywa
   z atrybutem i okno stoi otwarte od wejscia na strone — tak bylo przy
   pierwszym wdrozeniu. To samo dotyczy paska na telefonie. */
[hidden]{display:none!important}
.gl-okno{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:18px;background:rgba(27,26,25,.56);animation:gl-poj .22s ease}
@keyframes gl-poj{from{opacity:0}to{opacity:1}}
.gl-okno-w{position:relative;width:100%;max-width:430px;max-height:92vh;overflow:auto}
.gl-okno-x{position:absolute;top:10px;right:12px;z-index:2;width:36px;height:36px;
  border:0;border-radius:50%;background:#f4ece1;color:var(--graf);font-size:22px;
  line-height:1;cursor:pointer}
.gl-okno-x:hover{background:var(--bez)}

/* ——— 1024 */
@media (max-width:1024px){
  .gl-sek{padding:64px 0}
  .gl-nav{display:none}
  .gl-head-t li:nth-child(n+3){display:none}
  .gl-siatka4{grid-template-columns:repeat(2,1fr)}
  .gl-siatka3{grid-template-columns:1fr}
  .gl-siatka5{grid-template-columns:repeat(3,1fr)}
  .gl-cechy{grid-template-columns:repeat(3,1fr)}
  .gl-cena-w{grid-template-columns:1fr;gap:32px}
  .gl-zam-w{grid-template-columns:1fr}
  .gl-zam{grid-template-columns:repeat(2,1fr)}
  .gl-zam li::after{display:none}
  .gl-final-w{grid-template-columns:220px 1fr;gap:26px}
  .gl-badge-s{grid-column:1/-1;justify-self:start}
}

/* ——— 860 */
@media (max-width:860px){
  body{font-size:16px}
  .gl-hero-w{grid-template-columns:1fr;gap:26px;padding-top:36px;padding-bottom:46px}
  .gl-hero-f{order:-1}
  .gl-hero-f img{max-width:400px}
  .gl-badge{width:98px;height:98px;top:-4px;right:0}
  .gl-badge strong{font-size:21px}
  .gl-split,.gl-sep-w{grid-template-columns:1fr;gap:28px}
  .gl-split-f,.gl-sep-f{order:-1}
  .gl-notka{top:-18px;right:4px;font-size:18px}
  .gl-notka-p{display:none}
  .gl-panele,.gl-faq{grid-template-columns:1fr}
  .gl-kroki{grid-template-columns:1fr;gap:20px}
  .gl-pas-l{grid-template-columns:repeat(2,1fr);gap:16px}
  .gl-sep-u{grid-template-columns:1fr}
  .gl-pasek{display:flex}
  body{padding-bottom:68px}
}

/* ——— 560 */
@media (max-width:560px){
  .gl-szer{padding:0 16px}
  .gl-sek{padding:52px 0}
  .gl-srodek{margin-bottom:32px;text-align:left}
  .gl-siatka4,.gl-siatka5,.gl-zam{grid-template-columns:1fr}
  .gl-cechy{grid-template-columns:repeat(2,1fr)}
  .gl-liczby{grid-template-columns:1fr;gap:16px}
  .gl-liczby li{display:flex;align-items:baseline;gap:12px}
  .gl-liczby strong{font-size:27px}
  .gl-liczby span{margin-top:0;max-width:none}
  .gl-karta,.gl-skl,.gl-panel,.gl-form{padding:24px 20px}
  .gl-btn{width:100%;justify-content:center;padding:17px 20px}
  .gl-head-t{display:none}
  .gl-logo{margin-right:auto}
  .gl-tab th,.gl-tab td{padding:13px 14px;font-size:14.5px}
  .gl-tab-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gl-tab{min-width:460px}
  .gl-final-w{grid-template-columns:1fr;text-align:center}
  .gl-final-f img{max-width:240px;margin:0 auto}
  .gl-badge-s{justify-self:center}
  .gl-dk-f{height:92px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ——— dokumenty prawne i stopka wspólna ——————————————————— */
.gl-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--czer);color:#fff;border-radius:0 0 var(--r-s) 0;font-weight:600}
.gl-skip:focus{left:0;text-decoration:none}
.gl-head-z{margin:0 0 0 auto}
.gl-head-z .gl-btn{padding:11px 20px;font-size:15px}
.gl-pismo{max-width:760px}
.gl-pismo h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:22px}
.gl-pismo h3{margin:28px 0 12px}
.gl-pismo p{font-size:16.5px}
.gl-pismo .gl-wzor{padding:22px 24px;border:1px dashed #e0d3bf;border-radius:var(--r);
  background:var(--krem-m);font-size:15.5px;line-height:1.85}
.gl-pismo-d{margin-top:32px;padding-top:18px;border-top:1px solid #efe6d9;
  font-size:13.5px;color:var(--szary-j)}
.gl-stopa-d{margin:24px 0 0;font-size:12.5px;color:#7d776f}
.gl-stopa-n2{display:flex;flex-wrap:wrap;gap:8px 22px;margin:30px 0 20px;
  padding-top:24px;border-top:1px solid #322f2c}
.gl-stopa-n2 a{color:#d9d3ca;font-size:14px;text-decoration:none}
.gl-stopa-n2 a:hover{color:#fff;text-decoration:underline}
.gl-stopa-z{font-size:12.5px;line-height:1.6;color:#8e887f;margin:0 0 14px}
.gl-stopa-m{padding-top:44px}

/* ——— POPRAWKI PO OCENIE GRAFICZNEJ (3.10.2026) ————————————
   Uwagi: packshot ciągnął hero w dół (kadr z blatem zamiast wyciętego
   renderu), liczby w splicie były za małe jak na „reklamę magazynową”,
   „dla kogo” wyglądało jak część artykułu zamiast pięciu kart, blok opinii
   przed ceną hamował tempo, a finalny banner nie domykał strony ceną. */

/* packshot: wycięty, większy, z własnym cieniem; badge NACHODZI na pudełko */
.gl-hero-f img{max-width:560px;filter:drop-shadow(0 30px 38px rgba(120,80,25,.26))
  drop-shadow(0 6px 10px rgba(120,80,25,.14))}
.gl-badge{top:8px;right:-6px}
.gl-final-f img{filter:drop-shadow(0 22px 28px rgba(120,80,25,.24))}

/* liczby w splicie — skala reklamy, nie akapitu */
.gl-liczby{gap:36px;margin-top:32px}
.gl-liczby strong{font-size:clamp(38px,4vw,56px);letter-spacing:-.03em}
.gl-liczby span{font-size:13.5px;margin-top:7px}

/* „dla kogo”: pięć fizycznych kart w układzie 3+2, z okrągłą ikoną */
.gl-siatka5{grid-template-columns:repeat(6,1fr);gap:20px}
.gl-siatka5 li{grid-column:span 2;display:flex;flex-direction:column;
  align-items:flex-start;padding:26px 24px;border-radius:var(--r)}
.gl-siatka5 li:nth-child(4){grid-column:2/4}
.gl-siatka5 li:nth-child(5){grid-column:4/6}
.gl-dk-f{width:54px;height:54px;border-radius:50%;margin-bottom:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.gl-siatka5 p{padding:0;font-size:15.5px;line-height:1.55}

/* separator z kapsułką: niższy, produkt przecina granicę tła */
.gl-sep{padding:56px 0}
.gl-sep-w{grid-template-columns:34fr 66fr;align-items:center}
.gl-sep-f img{border-radius:50%;box-shadow:0 22px 48px rgba(120,80,25,.16);
  max-width:330px;margin:0 auto}
.gl-sep-u li{padding:18px 14px}

/* pas cech: identyczne okręgi, cienka kreska, złoty mikroakcent */
.gl-cechy li{padding:24px 12px}
.gl-cechy .gl-ik{width:52px;height:52px;padding:13px;border-radius:50%;
  background:linear-gradient(145deg,#fff6ea,#fdeadb);color:var(--graf);
  box-shadow:inset 0 0 0 1px rgba(245,179,36,.35);stroke-width:1.5}

/* zaufanie zamiast opinii: jeden poziomy pas, nie trzy duże karty */
#opinie .gl-siatka3{grid-template-columns:repeat(3,1fr);gap:16px}
#opinie .gl-karta{padding:20px 20px;display:grid;grid-template-columns:44px 1fr;
  gap:0 14px;align-items:start}
#opinie .gl-karta-i{width:44px;height:44px;margin:0;border-radius:12px}
#opinie .gl-karta h3{font-size:16px;margin:0 0 4px;align-self:center}
#opinie .gl-karta p{grid-column:2;font-size:14px}
#opinie .gl-srodek{margin-bottom:30px}

/* finalny banner: cena domyka stronę */
.gl-final{padding:84px 0}
.gl-badge-s{width:168px;height:168px}
.gl-badge-s strong{font-size:34px}
.gl-badge-s span{font-size:12.5px}

@media (max-width:1024px){
  .gl-siatka5{grid-template-columns:repeat(4,1fr)}
  .gl-siatka5 li,.gl-siatka5 li:nth-child(4),.gl-siatka5 li:nth-child(5){grid-column:span 2}
  .gl-siatka5 li:nth-child(5){grid-column:2/4}
}
@media (max-width:860px){
  .gl-hero-f img{max-width:420px}
  .gl-sep-f img{max-width:260px}
  #opinie .gl-siatka3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gl-siatka5{grid-template-columns:1fr}
  .gl-siatka5 li,.gl-siatka5 li:nth-child(4),.gl-siatka5 li:nth-child(5){grid-column:1/-1}
  .gl-badge-s{width:140px;height:140px}
  .gl-badge-s strong{font-size:28px}
}

/* kalkulator „na ile starczy" — liczby od razu, objaśnienie w panelach niżej */
.gl-rachunek{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-bottom:34px;padding:26px 24px;border-radius:var(--r-l);
  background:linear-gradient(180deg,#fffaf2,#fdf1e0);border:1px solid #f0e3d2;
  box-shadow:var(--cien)}
.gl-rachunek div{text-align:center;padding:0 14px;min-width:132px}
.gl-rachunek strong{display:block;color:var(--czer);font-size:clamp(26px,2.6vw,34px);
  font-weight:800;line-height:1.1;letter-spacing:-.02em}
.gl-rachunek span{display:block;margin-top:5px;font-size:13px;color:var(--szary-j)}
.gl-rachunek i{width:9px;height:9px;border-top:2px solid var(--bez);
  border-right:2px solid var(--bez);transform:rotate(45deg);flex:0 0 auto}
.gl-rachunek+.gl-panele .gl-panel{padding:24px 24px}
.gl-rachunek+.gl-panele li{font-size:15px;margin-bottom:8px}
@media (max-width:560px){
  .gl-rachunek{gap:6px;padding:20px 14px}
  .gl-rachunek div{min-width:46%;padding:0 6px}
  .gl-rachunek i{display:none}
}

/* Sekcja „na ile starczy" ma nieść liczby, nie być esejem — po dodaniu
   kalkulatora panele robią już tylko za uzasadnienie, więc schodzą niżej
   w hierarchii: mniejszy nagłówek, ciaśniejszy interlinia, krótszy ogon. */
#na-ile{padding:66px 0}
#na-ile .gl-srodek{margin-bottom:28px}
#na-ile .gl-panele{gap:18px}
#na-ile .gl-panel{padding:22px 22px}
#na-ile .gl-panel h3{font-size:16px;margin-bottom:11px}
#na-ile .gl-panel li{font-size:14.5px;line-height:1.5;margin-bottom:7px}
#na-ile .gl-po{margin-top:20px;font-size:14.5px;color:var(--szary)}

/* ——— RUNDA TYPOGRAFICZNA PO OCENIE (3.10.2026) ——————————————
   Zarzut: „premium landing nie powinien wyglądać jak długi artykuł z nieco
   większymi śródtytułami”. Główne lekarstwo to KONTRAST H2 vs tekst, rytm
   dużych i małych sekcji oraz różne szerokości kolumn — nie wszystko ma
   siedzieć w tej samej. */

h1{font-size:clamp(34px,4.9vw,60px);line-height:1.06}
h2{font-size:clamp(30px,3.6vw,43px);line-height:1.12}
h3{font-size:21px}
body{font-size:17.5px;line-height:1.62}

/* rytm: duże sekcje oddychają, pasy użytkowe są niskie */
.gl-sek{padding:96px 0}
#cechy,#kapsulka{padding:64px 0}
.gl-pas-l{padding-top:32px;padding-bottom:32px}

/* szerokości: intro węższe, tabela średnia, split i finał pełne */
.gl-srodek{max-width:780px}
.gl-tab-w{max-width:1020px;margin-left:auto;margin-right:auto}
.gl-pelny{margin-left:auto;margin-right:auto}

/* cienie: powierzchnia i spacing zamiast obrysu */
:root{--cien:0 2px 3px rgba(30,25,20,.03), 0 18px 50px rgba(30,25,20,.07);
      --cien-m:0 4px 8px rgba(30,25,20,.05), 0 28px 64px rgba(30,25,20,.10)}
.gl-karta,.gl-skl,.gl-panel,.gl-dost,.gl-siatka5 li{border-color:#f4ece1;
  border-radius:24px}
.gl-cechy li,.gl-faq-p{border-radius:18px}
.gl-form{border-radius:28px}

/* czerwień tylko tam, gdzie ma pracować: CTA, badge, cena, znaczniki.
   Nagłówki i opisy wracają do grafitu. */
.gl-skl-e{background:rgba(27,26,25,.05);color:var(--graf)}
.gl-skl-moc .gl-skl-e{background:rgba(216,31,38,.09);color:var(--czer)}
.gl-panel-b h3{color:var(--graf)}
.gl-cechy span{color:var(--graf)}

@media (max-width:860px){
  .gl-sek{padding:60px 0}
  #cechy,#kapsulka{padding:46px 0}
  body{font-size:16.5px}
}
@media (max-width:560px){ .gl-sek{padding:50px 0} h3{font-size:19px} }

/* Packshot i separator to teraz zdjęcia produktu, nie rysunki — zdjęcie na
   przezroczystym tle potrzebuje własnego cienia, inaczej wisi w powietrzu. */
.gl-sep-f img{border-radius:0;box-shadow:none;max-width:420px;
  filter:drop-shadow(0 24px 30px rgba(120,80,25,.22))}
.gl-sep{padding:72px 0}

/* etykieta przy tabeli — dowód, że tabela nie jest przepisana z reklamy */
.gl-tab-d{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;
  margin-top:26px}
.gl-etyk{margin:0}
.gl-etyk img{width:100%;border-radius:var(--r);border:1px solid #efe6d9;
  box-shadow:var(--cien);background:#fff}
.gl-etyk figcaption{margin-top:10px;font-size:13px;color:var(--szary-j);text-align:center}
@media (max-width:860px){ .gl-tab-d{grid-template-columns:1fr;gap:24px}
  .gl-etyk{max-width:420px;margin:0 auto} .gl-sep-f img{max-width:320px} }

/* ——— WARSTWA GRAFICZNA (3.10.2026) ————————————————————————
   Krzysiek: „na mockupie dużo więcej elementów graficznych, a tutaj takie
   płaskie się to wydaje”. Karty składników dostają DUŻĄ grafikę u góry —
   trzy rośliny jako ilustracje botaniczne, a chrom i cynk jako pierścień
   z realnym procentem RWS (grafika niosąca prawdziwą daną z etykiety). */

.gl-skl{padding:0;overflow:hidden;display:flex;flex-direction:column}
.gl-skl-g{width:100%;height:auto;aspect-ratio:440/280;object-fit:cover;display:block}
.gl-skl h3{margin:22px 24px 5px}
.gl-skl .gl-skl-e{margin:0 24px 11px}
.gl-skl p:last-child{margin:0 24px 26px}
.gl-skl-moc{box-shadow:0 4px 10px rgba(216,31,38,.08), 0 26px 60px rgba(30,25,20,.10)}

/* ozdobniki: miękkie plamy i listki na krawędziach sekcji — mockup ma ich
   sporo, bez nich strona czyta się jak dokument, nie jak reklama */
.gl-sek{position:relative;overflow:hidden}
.gl-sek>*{position:relative;z-index:1}
.gl-krem::before,.gl-krem::after{content:"";position:absolute;z-index:0;
  border-radius:50%;pointer-events:none}
.gl-krem::before{width:420px;height:420px;top:-160px;right:-150px;
  background:radial-gradient(circle,rgba(245,179,36,.16),transparent 68%)}
.gl-krem::after{width:360px;height:360px;bottom:-150px;left:-130px;
  background:radial-gradient(circle,rgba(78,143,62,.12),transparent 68%)}

/* listek dekoracyjny — czysty CSS, zero dodatkowych żądań */
.gl-sek-lisc::after{content:"";position:absolute;z-index:0;width:190px;height:190px;
  right:-40px;bottom:-30px;opacity:.5;pointer-events:none;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 88C14 42 40 14 88 10c4 48-22 76-70 78Z' fill='%237fae59' opacity='.5'/%3E%3Cpath d='M18 88C34 62 52 44 80 30' stroke='%235f8b42' stroke-width='3' fill='none' opacity='.5'/%3E%3C/svg%3E")}

/* odręczna adnotacja ze strzałką, jak w mockupie */
.gl-notka{position:relative;padding-right:6px}
.gl-notka::after{content:"";position:absolute;left:-46px;bottom:-6px;width:44px;height:30px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M42 4C28 2 12 8 4 24' stroke='%23d81f26' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 24l9-3M4 24l2-9' stroke='%23d81f26' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}

/* złota pieczątka „naturalne składniki” w hero — odpowiednik tej z mockupu */
.gl-pieczec{position:absolute;top:6px;left:-6px;z-index:3;width:132px;height:132px;
  display:grid;place-items:center;text-align:center;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff3cf,#f5b324);
  color:#7a4e06;font-size:12.5px;font-weight:700;line-height:1.3;padding:0 18px;
  box-shadow:0 12px 26px rgba(201,142,20,.3);transform:rotate(-9deg)}

@media (max-width:1024px){ .gl-pieczec{width:106px;height:106px;font-size:11px} }
@media (max-width:860px){
  .gl-pieczec{top:0;left:0;width:92px;height:92px;font-size:10.5px;padding:0 12px}
  .gl-sek-lisc::after{width:130px;height:130px}
}
@media (max-width:560px){ .gl-pieczec{display:none} }

/* „dla kogo": kółka nie mogą być pustymi plamami — dostają ikonę */
.gl-dk-f{display:grid;place-items:center}
.gl-dk-1{color:#b4510d} .gl-dk-2{color:#3f6b2c} .gl-dk-3{color:#9a6a05}
.gl-dk-4{color:#b3161d} .gl-dk-5{color:#3b566f}