/* ───────── D3b · WYBRANA WERSJA — Sticker Pop + „Świat poza klasą" z Evergreen + oferta i rezerwacja ─────────
   Wspólne style strony głównej i podstrony oferty. */
:root{
  --ink:#14261E; --cream:#F6F1E8; --paper:#FFFDF6;
  --green:#2A4A3F; --leaf:#9CC265; --honey:#F2B65F; --terra:#E27D54; --blush:#F4BFB0; --sky:#A9C8D6; --oak:#A47750;
  --bw:3px; --sh:6px 6px 0 var(--ink); --sh-l:10px 10px 0 var(--ink);
  --head:'Archivo',Impact,sans-serif; --body:'Space Grotesk',system-ui,sans-serif; --hand:'Caveat',cursive; --mono:'Space Mono',ui-monospace,monospace;
  --pop:cubic-bezier(.34,1.56,.64,1); --pad:clamp(16px,3.4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.5;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(rgba(20,38,30,.2) 1.4px,transparent 1.6px);background-size:26px 26px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:4px solid var(--terra);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.h{font-family:var(--head);font-stretch:112%;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}

.progress{position:fixed;left:0;top:0;height:8px;width:100%;background:var(--ink);z-index:80}
.progress::after{content:"";position:absolute;inset:0;background:var(--terra);transform-origin:0 50%;transform:scaleX(var(--scroll,0))}

/* belka */
.bar{position:sticky;top:8px;z-index:70;margin:16px auto 0;max-width:1280px;padding:0 var(--pad)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:8px 10px 8px 12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 18px/1 var(--head);font-stretch:115%;text-transform:uppercase;letter-spacing:-.01em}
.logo i{display:grid;place-items:center;width:34px;height:34px;background:var(--honey);border:var(--bw) solid var(--ink);border-radius:9px;font-style:normal;transform:rotate(-6deg);transition:transform .4s var(--pop)}
.logo:hover i{transform:rotate(8deg) scale(1.12)}
.links{display:flex;align-items:center;gap:4px}
.links a{font:600 14px/1 var(--body);text-decoration:none;padding:10px 11px;border-radius:10px;border:2px solid transparent;transition:background .2s,border-color .2s,transform .3s var(--pop);white-space:nowrap}
.links a:hover{background:var(--leaf);border-color:var(--ink);transform:translateY(-2px) rotate(-2deg)}
.links a[aria-current="page"]{background:var(--honey);border-color:var(--ink)}
.lang{font:800 13px/1 var(--head);font-stretch:115%;background:var(--ink);color:var(--cream);border:var(--bw) solid var(--ink);border-radius:10px;padding:10px 13px;cursor:pointer;transition:transform .2s,background .2s,color .2s;margin-left:4px}
.lang:hover{background:var(--terra);color:var(--ink)}
.lang:active{transform:translate(2px,2px)}
@media(max-width:1000px){.links a{display:none}}

/* przyciski */
.btn{display:inline-flex;align-items:center;gap:10px;font:800 15px/1 var(--head);font-stretch:112%;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;padding:17px 22px;background:var(--terra);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,background .2s;cursor:pointer}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);background:var(--honey)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn--alt{background:var(--paper)}
.btn--alt:hover{background:var(--leaf)}
.btn svg{width:18px;height:18px;transition:transform .3s var(--pop)}
.btn:hover svg{transform:translateX(5px)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* wejścia „slam" (animacja → hover działa) */
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal].is-in{animation:slam .75s var(--pop) var(--d,0ms) backwards}
@keyframes slam{from{opacity:0;transform:translateY(46px) rotate(calc(var(--rot,0deg) + 4deg)) scale(.88)}}
.reduce [data-reveal]{opacity:1!important;animation:none!important}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes throb{50%{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* sekcje */
.sec{padding:clamp(44px,7vw,100px) 0 0}
.sec.wrap{padding-left:var(--pad);padding-right:var(--pad)} /* .sec zerowało boczne odstępy .wrap — treść dotykała krawędzi ekranu */
.sh{display:flex;align-items:center;gap:16px;margin-bottom:clamp(22px,3vw,44px)}
.sh .no{flex:none;width:clamp(52px,6vw,76px);aspect-ratio:1;display:grid;place-items:center;font:900 clamp(18px,2.2vw,28px)/1 var(--head);background:var(--terra);border:var(--bw) solid var(--ink);box-shadow:var(--sh);transform:rotate(-8deg);border-radius:50%}
.sh h2{font-size:clamp(24px,6.4vw,96px);min-width:0;overflow-wrap:anywhere}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}
.card{position:relative;background:var(--c,var(--paper));border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--sh);padding:clamp(20px,2.4vw,32px);transform:rotate(var(--rot,0deg));transition:transform .3s var(--pop),box-shadow .3s}
.card:hover{transform:translate(-4px,-4px) rotate(calc(var(--rot,0deg)*-1));box-shadow:11px 11px 0 var(--ink)}
.sub{margin-top:22px;font:700 13px/1.3 var(--mono);text-transform:uppercase}
.mockpill{display:inline-block;font:700 12px/1 var(--mono);text-transform:uppercase;background:var(--paper);border:2px dashed var(--ink);padding:7px 10px;border-radius:8px;transform:rotate(-1.5deg)}

.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 18px;padding:56px 0 96px;font:700 13px/1 var(--mono);text-transform:uppercase}
.foot .legal{text-decoration:underline;text-underline-offset:4px}
.foot .legal:hover{color:var(--terra)}
.totop{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:800 13px/1 var(--head);font-stretch:112%;text-transform:uppercase;background:var(--honey);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:12px;padding:13px 16px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s}
.totop svg{width:16px;height:16px;transition:transform .3s var(--pop)}
.totop:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--leaf)}
.totop:hover svg{transform:translateY(-3px)}
.totop:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* atrybut hidden ma pierwszeństwo przed display z komponentów (menu, sekcja opinii) */
[hidden]{display:none!important}