html,body{margin:0}[hidden]{display:none!important}

/* Układ: jedna kolumna sprzedażowa, kolory werdyktów jako system nawigacji, ciemne pasy otwierają i zamykają ofertę. Jeden motyw (jasny), jak ebook. */
:root{
  --bg:#FFFDF9; --ink:#1F2421; --ink2:#3C4540; --mute:#7A827D; --line:#EBE5DA; --white:#FFFFFF;
  --nigdy:#C8372D; --nigdy-d:#7E1E17; --nigdy-l:#FBE9E6;
  --ostr:#D98A12; --ostr-d:#8A5506; --ostr-l:#FCF1DD;
  --tak:#2E8B57; --tak-d:#1B5C38; --tak-l:#E4F4EA;
  --gold:#F2B632; --dark2:#2A302C;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --w:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:20px}
.label{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{max-width:720px;display:grid;gap:14px;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,4.4vw,46px);font-weight:800}
.sec-head p{color:var(--ink2);font-size:18px}

/* przycisk */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--tak);color:var(--white);text-decoration:none;font:800 18px/1 var(--body);padding:20px 30px;border-radius:999px;border:0;cursor:pointer;transition:background .15s, transform .15s;box-shadow:0 6px 0 var(--tak-d)}
.btn:hover{background:var(--tak-d)}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--tak-d)}
.btn:focus-visible,.q:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn svg{width:20px;height:20px}
.micro{font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 18px}
.micro span{display:inline-flex;align-items:center;gap:6px}
.micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tak)}

/* pasek góry */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.logo img{width:34px;height:34px}
.bar .btn{font-size:15px;padding:12px 20px;box-shadow:none}
.stripe{height:6px;display:grid;grid-template-columns:1fr 1fr 1fr}
.stripe i:nth-child(1){background:var(--nigdy)}.stripe i:nth-child(2){background:var(--ostr)}.stripe i:nth-child(3){background:var(--tak)}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,90px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-txt{display:grid;gap:24px;min-width:0}
.hero .label{color:var(--tak-d)}
.hero h1{font-size:clamp(44px,7vw,84px);font-weight:900;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--tak)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink2);max-width:34em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:900 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--white);padding:9px 14px;border-radius:999px}
.c-n{background:var(--nigdy)}.c-o{background:var(--ostr)}.c-t{background:var(--tak)}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.price{display:grid;gap:2px}
.price b{font:900 44px/1 var(--display);letter-spacing:-.03em}
.price small{font-size:13px;color:var(--mute);font-weight:600}
.cover{position:relative;justify-self:center;width:min(100%,420px)}
.cover img{border-radius:6px 14px 14px 6px;box-shadow:0 2px 0 var(--line),0 30px 60px -20px rgba(31,36,33,.45),0 12px 24px -12px rgba(31,36,33,.3);transform:rotate(2deg)}
.cover::before{content:"";position:absolute;inset:8% -6% -4% 10%;background:var(--tak-l);border-radius:50%;z-index:-1}
.badge{position:absolute;left:-18px;bottom:28px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;gap:2px;box-shadow:0 10px 24px -12px rgba(31,36,33,.35);transform:rotate(-3deg)}
.badge b{font:900 30px/1 var(--display)}
.badge span{font-size:13px;color:var(--ink2);font-weight:600}

/* quiz */
.quiz{background:var(--white);border-block:1px solid var(--line)}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.q{appearance:none;font:inherit;color:inherit;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:var(--r);padding:20px;display:grid;gap:14px;align-content:start;cursor:pointer;transition:border-color .15s, background .15s}
.q:hover{border-color:var(--mute)}
.q .ph{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--line);max-width:180px;justify-self:center}
.q .ph img{width:100%;height:100%;object-fit:cover}
.q h3{font-size:22px;font-weight:800}
.q .ask{font-size:14px;font-weight:700;color:var(--mute)}
.q .ans{display:grid;gap:10px}
.q .ans p{font-size:15px;line-height:1.45;color:var(--ink2)}
.q[data-v="n"].open{background:var(--nigdy-l);border-color:var(--nigdy)}
.q[data-v="o"].open{background:var(--ostr-l);border-color:var(--ostr)}
.q[data-v="t"].open{background:var(--tak-l);border-color:var(--tak)}
.q .chip{justify-self:start}
.quiz-foot{margin-top:28px;color:var(--ink2);font-size:17px}
.quiz-foot b{color:var(--ink)}

/* problem */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.prob div{display:grid;gap:10px;align-content:start;border-top:3px solid var(--ink);padding-top:18px}
.prob h3{font-size:22px;font-weight:800}
.prob p{color:var(--ink2)}
.answer{margin-top:44px;background:var(--ink);color:var(--white);border-radius:var(--r);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:auto 1fr;gap:20px 28px;align-items:center}
.answer .q3{font:900 clamp(24px,3vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.answer .q3 span{color:var(--gold)}
.answer p{color:#C9D0CB;font-size:17px;max-width:46em}
.answer .k{color:var(--gold)}

/* kolory */
.verd{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v{border-radius:var(--r);overflow:hidden;background:var(--white);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr}
.v-top{color:var(--white);padding:18px 22px;display:flex;align-items:center;gap:12px}
.v-top .ic{width:34px;height:34px;border-radius:50%;background:var(--white);display:grid;place-items:center;flex:none}
.v-top .ic svg{width:18px;height:18px}
.v-top b{font:900 24px/1 var(--display);letter-spacing:.02em}
.v-top .n{margin-left:auto;font:800 14px/1 var(--body);opacity:.9}
.v-body{padding:20px 22px;display:grid;gap:12px;align-content:start}
.v-body .m{font-weight:700}
.v-body p{color:var(--ink2);font-size:15px}
.v1 .v-top{background:var(--nigdy)} .v1 .ic{color:var(--nigdy)} .v1 .v-body{background:var(--nigdy-l)}
.v2 .v-top{background:var(--ostr)} .v2 .ic{color:var(--ostr)} .v2 .v-body{background:var(--ostr-l)}
.v3 .v-top{background:var(--tak)} .v3 .ic{color:var(--tak)} .v3 .v-body{background:var(--tak-l)}
.dots{display:flex;gap:5px}
.dots i{width:26px;height:6px;border-radius:9px;background:rgba(31,36,33,.15)}
.v1 .dots i{background:var(--nigdy)}
.v2 .dots i:nth-child(-n+2){background:var(--ostr)}
.v3 .dots i:first-child{background:var(--tak)}

/* środek */
.inside{background:var(--white);border-block:1px solid var(--line)}
.pages{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
.pg{display:grid;gap:12px;align-content:start;margin:0}
.pg img{border-radius:8px;border:1px solid var(--line);box-shadow:0 18px 36px -24px rgba(31,36,33,.45)}
.pg figcaption{font-size:15px;color:var(--ink2)}
.pg figcaption b{color:var(--ink);display:block;font-size:16px}

/* polska kuchnia */
.pl{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.pl .sec-head{margin-bottom:0}
.dish{display:flex;flex-wrap:wrap;gap:10px}
.dish span{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;font-weight:600;font-size:15px}
.dish span::before{content:"";width:10px;height:10px;border-radius:50%}
.dish .n::before{background:var(--nigdy)} .dish .o::before{background:var(--ostr)} .dish .t::before{background:var(--tak)}
.legend{margin-top:18px;font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 18px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* oferta */
.offer{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.list{display:grid;gap:0;border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.li .ck{width:32px;height:32px;border-radius:50%;background:var(--tak);display:grid;place-items:center;color:var(--white)}
.li .ck svg{width:16px;height:16px}
.li b{font-size:18px;display:block;margin-bottom:2px}
.li p{color:var(--ink2);font-size:16px}
.box{position:sticky;top:90px;background:var(--white);border:2px solid var(--ink);border-radius:22px;padding:28px;display:grid;gap:18px}
.box .label{color:var(--tak-d)}
.box h3{font-size:26px;font-weight:800}
.box .price b{font-size:58px}
.box .btn{width:100%}
.box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--ink2)}
.box li{display:flex;gap:10px}
.box li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--tak);margin-top:9px}
.pay{display:flex;flex-wrap:wrap;gap:8px}
.pay span{font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:7px 9px;color:var(--ink2)}

/* źródła */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.src{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.src div{border:1px solid var(--line);background:var(--white);border-radius:14px;padding:16px 18px}
.src b{display:block;font-size:16px}
.src span{font-size:14px;color:var(--mute)}
.warn{background:var(--white);border-left:6px solid var(--ostr);border-radius:0 14px 14px 0;padding:22px 24px;display:grid;gap:8px;box-shadow:0 0 0 1px var(--line) inset}
.warn .label{color:var(--ostr-d)}
.warn p{font-weight:600;color:var(--ink)}

/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font:700 19px/1.35 var(--body);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding-bottom:22px;color:var(--ink2);max-width:62ch}

/* finał */
.final{background:var(--ink);color:var(--white);padding-block:0;overflow:hidden}
.final .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.final .dog{align-self:end}
.final .dog img{width:100%;max-width:480px}
.final .txt{display:grid;gap:22px;padding-block:clamp(48px,7vw,88px);min-width:0}
.final .label{color:var(--gold)}
.final h2{font-size:clamp(34px,5vw,56px);font-weight:900}
.final p{color:#C9D0CB;font-size:18px;max-width:32em}
.final .price small{color:#A8B0AB}
.final .btn{box-shadow:0 6px 0 #0E1310}
.final .micro{color:#A8B0AB}

footer{padding-block:36px;font-size:14px;color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

.mbar{display:none}

@media (max-width:900px){
  .hero .wrap,.pl,.offer,.trust,.final .wrap{grid-template-columns:1fr}
  .cover{width:min(78%,340px);order:-1}
  .qgrid{grid-template-columns:1fr 1fr}
  .prob,.verd{grid-template-columns:1fr}
  .pages{grid-template-columns:1fr 1fr}
  .box{position:static}
  .final .dog{order:2;justify-self:center}
  .final .dog img{max-width:320px}
  .final .txt{padding-bottom:0}
  .answer{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .bar .btn{display:none}
  .qgrid{gap:10px}
  .q{padding:14px;gap:10px}
  .q h3{font-size:18px}
  .src{grid-template-columns:1fr}
  .buy .btn{width:100%}
  .badge{left:-8px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--white);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:space-between;gap:12px}
  .mbar b{font:900 24px/1 var(--display)}
  .mbar small{display:block;font-size:12px;color:var(--mute)}
  .mbar .btn{padding:14px 20px;font-size:16px;box-shadow:none}
  footer{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* klikalne strony + przeglądarka */
.pg-open{appearance:none;border:0;padding:0;background:none;cursor:zoom-in;position:relative;display:block;width:100%;border-radius:8px}
.pg-open img{width:100%;height:auto;aspect-ratio:707/1000;object-fit:cover;transition:transform .2s, box-shadow .2s}
.pg-open:hover img{transform:translateY(-3px);box-shadow:0 24px 40px -22px rgba(31,36,33,.55)}
.pg-open:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.pg-zoom{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.pg-zoom svg{width:18px;height:18px}
.cover img{width:100%;height:auto;aspect-ratio:700/990}
.q .ph img{height:100%}
html.lb-on,html.lb-on body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100000;background:rgba(20,24,22,.94);display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.lb[hidden]{display:none!important}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#fff}
.lb-count{font:700 15px/1 var(--body);font-variant-numeric:tabular-nums;opacity:.85}
.lb-x{appearance:none;border:0;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-x svg{width:22px;height:22px}
.lb-x:hover{background:rgba(255,255,255,.25)}
.lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;min-height:0;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:4px 16px;min-height:0}
.lb-slide img{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);max-width:min(100%,760px);width:auto;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.lb-nav{appearance:none;border:0;position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.lb-nav svg{width:24px;height:24px}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-foot{display:flex;justify-content:center;padding:12px 16px 16px}
.lb-foot .btn{font-size:16px;padding:15px 24px;box-shadow:none}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:700px){.lb-nav{display:none}.lb-slide{padding:4px 10px}}