/* GONG — strona sprzedażowa. Bez frameworków. Tokeny opisane w docs/MARKA.md */

/* ---------- Fonty (lokalnie, SIL OFL) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-ext-700-normal.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:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.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:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-ext-800-normal.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:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.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:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-ext-400-normal.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:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.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:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-ext-400-italic.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:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-italic.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:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-ext-600-normal.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:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-600-normal.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.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}

/* ---------- Tokeny ----------
   Pięć kolorów: musztarda (marka, hero i co druga sekcja), biel (sekcje tekstowe),
   atrament (tekst, cennik, stopka), czerwień (główny przycisk), zieleń (poprawna odpowiedź).
   Kontura z twardym cieniem tylko dla przycisków, kart trybów, tablicy cennika i zrzutu telefonu. */
:root{
  --musztarda:#F2B705;
  --bialy:#FFFFFF;
  --atrament:#1B1B2F;
  --atrament-2:#26263D;
  --papier:#F4EDE1;          /* jasny tekst na atramencie */
  --gong:#E2412B;            /* plamy i cienie, nie tekst */
  --gong-tekst:#B22E1B;      /* przyciski i tekst na bieli */
  --zielen:#1F7A6B;
  --zielen-tekst:#17665A;
  --szary:#5E574C;           /* tekst drugorzędny, tylko na bieli */
  --linia:#D9CFBE;
  --kontur:3px solid var(--atrament);
  --cien:6px 6px 0 var(--atrament);
  --sprezyna:cubic-bezier(.34,1.56,.64,1);
  --font-naglowki:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --font-tekst:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; /* tylko klapki */
  --wrap:1240px;
}

/* ---------- Podstawy ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bialy);color:var(--atrament);font-family:var(--font-tekst);font-size:1.0625rem;line-height:1.55;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:4px}
h1,h2,h3,h4{font-family:var(--font-naglowki);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media (min-width:760px){.wrap{padding:0 40px}}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--atrament);color:var(--papier);padding:12px 16px;z-index:20}
.skip:focus{top:12px}

/* Fokus: atrament na jasnym, musztarda na ciemnym. Odsunięta obwódka, więc nie myli się
   z wypełnieniem stanu „wybrane”. */
:focus-visible{outline:3px solid var(--atrament);outline-offset:3px;border-radius:3px}
.pasek :focus-visible,.cennik :focus-visible,.stopka :focus-visible,.runda-ekran :focus-visible,.skip:focus-visible{outline-color:var(--musztarda)}

/* ---------- Pasek i nagłówek ---------- */
.pasek{background:var(--atrament);color:var(--papier);font-size:.92rem;text-align:center;padding:8px 12px}
.pasek b{color:var(--musztarda);font-weight:600}
.pasek-duzy{display:none}
@media (min-width:860px){.pasek-duzy{display:inline}.pasek-maly{display:none}}
.naglowek{border-bottom:var(--kontur);background:var(--bialy)}
.naglowek-in{display:flex;align-items:center;gap:24px;min-height:70px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--font-naglowki);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--atrament);margin:0}
.logo .logo-ikona{width:44px;height:auto}
.nav{display:none;gap:22px;margin-left:auto;font-weight:600;font-size:.98rem}
.nav a{text-decoration:none;padding:10px 0}
.nav a:hover{text-decoration:underline}
.naglowek .btn-maly{margin-left:auto;white-space:nowrap}
.logo+.btn-maly{margin-left:auto !important}
.nav-mobilna{display:flex;border-top:2px solid var(--atrament);font-weight:600;font-size:.95rem}
.nav-mobilna a{flex:1;text-align:center;padding:12px 4px;text-decoration:none}
.nav-mobilna a+a{border-left:2px solid var(--atrament)}
@media (min-width:980px){.nav{display:flex}.naglowek .btn-maly{margin-left:8px}.nav-mobilna{display:none}}
@media (max-width:420px){.logo{font-size:1.35rem;gap:6px}.logo .logo-ikona{width:34px}.naglowek-in{gap:10px}.naglowek .btn-maly{padding:10px 12px;font-size:.9rem}}

/* ---------- Przyciski (jedyne miejsce na sprężynę: odpowiedź na kliknięcie) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;font-family:var(--font-naglowki);font-weight:800;font-size:1.08rem;line-height:1.1;text-decoration:none;color:#FBF6EC;background:var(--gong-tekst);border:var(--kontur);border-radius:10px;padding:14px 22px;box-shadow:5px 5px 0 var(--atrament);cursor:pointer}
.btn:hover{color:#FBF6EC;text-decoration:underline;text-decoration-thickness:2px}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--atrament)}
.btn-drugi{background:var(--bialy);color:var(--atrament)}
.btn-drugi:hover{color:var(--atrament)}
.btn-maly{min-height:44px;padding:9px 14px;font-size:.95rem;box-shadow:3px 3px 0 var(--atrament)}
.btn-ciemny{margin-top:16px;background:var(--atrament);color:var(--papier);box-shadow:4px 4px 0 var(--gong)}
.btn-ciemny:hover{color:var(--papier)}
.btn-jasny{background:var(--musztarda);color:var(--atrament);border-color:var(--atrament);box-shadow:3px 3px 0 #000}
.btn-jasny:hover{color:var(--atrament)}

/* ---------- Dymki komiksowe (przechył w stronę mówiącego, każdy inny) ---------- */
.dymek{position:relative;display:block;width:fit-content;max-width:100%;background:var(--bialy);border:var(--kontur);border-radius:22px;padding:10px 16px;font-family:var(--font-naglowki);font-weight:800;font-size:1.02rem;line-height:1.18;color:var(--atrament);margin:0 0 24px}
.dymek::before,.dymek::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.dymek::before{left:26px;bottom:-21px;border-width:21px 16px 0 0;border-color:var(--atrament) transparent transparent transparent}
.dymek::after{left:29px;bottom:-14px;border-width:15px 11px 0 0;border-color:var(--bialy) transparent transparent transparent}
.dymek-prawy{margin-left:auto}
.dymek-prawy::before{left:auto;right:26px;border-width:21px 0 0 16px}
.dymek-prawy::after{left:auto;right:29px;border-width:15px 0 0 11px}

/* ---------- Hero ---------- */
.hero{background:var(--musztarda);padding:36px 0 64px}
@media (min-width:980px){.hero{padding:44px 0 80px}}
.hero-gora{display:grid;gap:8px}
@media (min-width:900px){.hero-gora{grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:end}}
.hero-dla{font-weight:600;font-size:1.08rem;margin:0 0 14px}
h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.95;margin-bottom:20px;max-width:15ch}
.h1-druga{display:block;font-weight:700;font-size:.8em;margin-top:.12em;max-width:16ch}
.lead{font-size:clamp(1.08rem,1.5vw,1.22rem);max-width:38em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px 16px;margin:22px 0 14px}
@media (max-width:559px){.hero-cta .btn{flex:1 1 100%}}
.hero-drobne{font-size:.98rem;max-width:54em;margin:0}
.hero-maskotka{display:flex;flex-direction:column;align-items:flex-start}
.hero-maskotka img{width:270px;margin-left:10px;flex:none}
.dymek-hero{order:-1;font-size:1.05rem;max-width:15em}
@media (max-width:899px){
  .hero-maskotka{flex-direction:row-reverse;align-items:flex-end;justify-content:flex-end;gap:12px;margin-top:20px}
  .hero-maskotka img{width:160px;margin-left:0}
  .dymek-hero{flex:1 1 auto;min-width:0}
  .dymek-hero{order:0;margin-bottom:60px}
  .dymek-hero::before{left:-21px;bottom:14px;border-width:12px 21px 0 0;border-color:transparent var(--atrament) transparent transparent}
  .dymek-hero::after{left:-14px;bottom:17px;border-width:8px 15px 0 0;border-color:transparent var(--bialy) transparent transparent}
}

/* Runda „Kto kłamie” do zagrania na stronie */
.runda{margin-top:36px}
.runda-glowa{display:grid;gap:6px 40px;margin-bottom:18px}
@media (min-width:900px){.runda-glowa{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
.runda-h{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.runda-opis{margin:0;max-width:40em}
.runda .tylko-js{display:none}
.runda-js .tylko-js{display:inline}
.runda-js .bez-js{display:none}
.runda-ekran{background:var(--atrament);color:var(--papier);border:10px solid #0E0E1A;border-radius:18px;padding:18px;display:grid;gap:22px}
@media (min-width:760px){.runda-ekran{padding:26px 28px}}
@media (min-width:980px){.runda-ekran{grid-template-columns:minmax(0,1fr) 290px;gap:32px}}
.runda-pyt{background:var(--papier);color:var(--atrament);font-family:var(--font-naglowki);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.05;border-radius:10px;padding:14px 18px;margin:0 0 16px;transform:rotate(-.6deg)}
.runda-odp{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:640px){.runda-odp{grid-template-columns:1fr 1fr}}
.runda-odp li{position:relative;background:var(--atrament-2);border:2px solid #4A4A6E;border-radius:10px;padding:12px 14px;min-height:56px}
.runda-btn{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;width:calc(100% + 28px);margin:-12px -14px;padding:12px 14px;min-height:56px;border-radius:8px;cursor:pointer;color:var(--papier);font-weight:600;font-size:1.08rem;line-height:1.25}
.runda-btn:focus-visible{outline:0}
.runda-odp li:has(.runda-btn:focus-visible){outline:3px solid var(--musztarda);outline-offset:4px}
.runda-odp li:has(.runda-btn:not([aria-disabled=true]):hover){border-color:var(--musztarda)}
.runda-btn[aria-disabled=true]{cursor:default}
.runda-odp li:not(:has(.runda-btn)){display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-weight:600;font-size:1.08rem}
.runda-litera{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--musztarda);color:var(--atrament);font-family:var(--font-naglowki);font-weight:800;font-size:1rem}
.runda-kto{display:block;flex-basis:100%;font-size:.95rem;font-weight:400;color:#E4DACB;margin-top:6px;padding-left:42px}
.runda-js .runda-kto{display:none}
.runda-js li.odkryta .runda-kto{display:block}
.runda-twoj{position:absolute;top:-11px;right:10px;background:var(--bialy);color:var(--atrament);border:2px solid var(--atrament);border-radius:999px;font-size:.8rem;font-weight:700;padding:0 8px;line-height:1.5}
/* bez JS: od razu stan po odsłonie */
.runda-odp li[data-prawda]{background:var(--zielen);border-color:#3DB39C}
.runda-odp li[data-prawda] .runda-kto{color:#fff}
.runda-js .runda-odp li[data-prawda]{background:var(--atrament-2);border-color:#4A4A6E}
.runda-js .runda-odp li.wybrana{background:#3A3A5C;border-color:var(--bialy);border-width:3px}
.runda-js .runda-odp li.odkryta.klamstwo{opacity:.92}
.runda-js .runda-odp li.odkryta.klamstwo .runda-tekst{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--gong)}
.runda-js .runda-odp li.odkryta[data-prawda]{background:var(--zielen);border-color:#3DB39C}
.runda-js .runda-odp li.odkryta[data-prawda] .runda-kto{color:#fff}
.runda-wynik{min-height:1.5em;margin:16px 0 0;font-family:var(--font-naglowki);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--bialy)}
.runda-wynik:empty{margin:0;min-height:0}
.runda-dalej{margin:14px 0 0}
.runda-dalej:has([hidden]){margin:0}
.runda-tabela{border-top:2px dashed #44445E;padding-top:16px}
@media (min-width:980px){.runda-tabela{border-top:0;padding-top:0;border-left:2px dashed #44445E;padding-left:28px}}
.runda-tabela-h{font-family:var(--font-naglowki);font-weight:800;font-size:1.2rem;margin:0 0 10px;color:var(--musztarda)}
.runda-tabela ol{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.runda-tabela li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-naglowki);font-weight:700;font-size:1.15rem}
.runda-tabela li[hidden]{display:none}
.runda-tabela .klapki{font-size:1.45rem}
.runda-tabela li.ty span:first-child{color:var(--musztarda)}
.runda-zasady{font-size:.92rem;color:#E4DACB;margin:0}

/* ---------- Klapki (split-flap) ---------- */
.klapki{display:inline-flex;gap:2px;font-family:var(--font-mono);font-weight:600;text-transform:uppercase}
.klapki .kl{position:relative;display:inline-block;min-width:1.02em;text-align:center;padding:.12em .06em;background:#30304C;color:var(--papier);border-radius:3px;line-height:1.15;
  background-image:linear-gradient(to bottom,rgba(255,255,255,.07) 0 49%,rgba(0,0,0,.55) 49% 51%,rgba(0,0,0,0) 51%)}
.klapki .kl.kl-pusta{color:transparent}
.klapki .kl.kl-skok{animation:klapka .08s steps(2) both}
@keyframes klapka{0%{transform:scaleY(1)}50%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
.klapki-musztarda .kl{color:var(--musztarda)}

/* ---------- Sekcje: tło zmienia scenerię, bez kresek przez całą szerokość ---------- */
.sekcja{padding:60px 0}
@media (min-width:980px){.sekcja{padding:76px 0}}
.sekcja-h2{font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:22ch;margin-bottom:28px}
.tryby,.porownanie,.rezerwacja{background:var(--musztarda)}

/* ---------- Na sali: pasek komiksu ---------- */
.sala-glowa{display:grid;gap:4px 40px;margin-bottom:28px}
@media (min-width:860px){.sala-glowa{grid-template-columns:auto minmax(0,1fr);align-items:end}.sala-glowa .sekcja-h2{margin-bottom:0}}
.sala-lead{font-size:1.15rem;max-width:30em;margin:0}
.komiks{list-style:none;margin:0;padding:0;display:grid;border:var(--kontur);border-radius:8px;background:var(--bialy)}
@media (min-width:980px){.komiks{grid-template-columns:1.45fr 1.15fr 1fr}}
.kadr{display:flex;flex-direction:column;padding:0 18px 18px;min-width:0}
.kadr+.kadr{border-top:var(--kontur)}
@media (min-width:980px){.kadr+.kadr{border-top:0;border-left:var(--kontur)}}
.kadr-ramka{align-self:flex-start;margin:0 0 16px -18px;background:var(--musztarda);border-right:var(--kontur);border-bottom:var(--kontur);border-radius:0 0 6px 0;padding:7px 12px;font-family:var(--font-naglowki);font-weight:700;font-size:.95rem;line-height:1.2;max-width:92%}
.kadr-1 .kadr-ramka{border-top-left-radius:5px}
.dymek-kadr{font-size:.98rem;max-width:min(88%,22em);transform:rotate(-1.5deg)}
.dymek-kadr.dymek-prawy{transform:rotate(1.5deg)}
.dymek-trzeci{transform:rotate(-.5deg)}
.kadr-ilu{width:100%;margin-top:auto}
.kadr-zrzut{border:2px solid var(--atrament);border-radius:4px}
.kadr-podpis{margin:14px 0 0;font-size:1rem;max-width:32em}
.sala-dol{margin-top:28px}
.sala-przypis{font-size:1.1rem;max-width:46em;margin:0}
.sala-przypis strong{font-family:var(--font-naglowki);font-size:1.25em}
.zrzuty{display:grid;gap:20px;margin-top:48px;align-items:end}
@media (min-width:760px){.zrzuty{grid-template-columns:minmax(0,1fr) 22%;gap:32px}}
.zrzut-tv{border:var(--kontur);border-radius:10px;overflow:hidden;background:var(--atrament)}
.zrzut-tv img{width:100%}
.zrzut-tel{border:var(--kontur);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 var(--gong);background:var(--bialy);transform:rotate(2deg);max-width:220px;margin:0 auto}
.podpis{grid-column:1/-1;font-size:.98rem;color:var(--szary);max-width:52em;margin:0}

/* ---------- Tryby ---------- */
.tryby-lead{font-size:1.12rem;max-width:40em;margin:-8px 0 36px}
.karteczki{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.kol{display:contents}
.k-blef{order:1}.k-abcd{order:2}.k-ankieta{order:3}.k-najblizej{order:4}.k-gong{order:5}
@media (min-width:860px){
  .karteczki{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
  .kol{display:grid;gap:32px;align-content:start}
  .kol>*{order:0}
  .kol-prawa{padding-top:36px}
}
.karteczka{position:relative;background:var(--bialy);padding:24px 22px 22px;border:var(--kontur);border-radius:14px;box-shadow:var(--cien)}
.k-blef{padding:30px 28px 28px}
.k-tryb{font-weight:600;font-size:.92rem;color:var(--szary);margin:0 0 6px}
.karteczka h3{font-size:clamp(1.7rem,2.6vw,2.15rem);margin-bottom:12px}
.k-blef h3{font-size:clamp(2.5rem,4.8vw,3.9rem);color:var(--gong-tekst)}
.k-zasada{max-width:34em}
.k-kroki{margin:0 0 16px;padding:0 0 0 1.3em;display:grid;gap:10px}
.k-kroki li::marker{font-family:var(--font-naglowki);font-weight:800}
.k-przyklad{border-top:2px dashed var(--linia);padding-top:14px;margin-top:6px}
.k-pyt{font-family:var(--font-naglowki);font-weight:700;font-size:1.2rem;line-height:1.2;margin-bottom:10px}
.k-czemu{font-weight:600;margin:14px 0 0}
.k-abcd-odp{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.k-abcd-odp span{border:2.5px solid var(--atrament);border-radius:8px;padding:6px 9px;font-weight:600;font-size:.98rem}
.k-abcd-odp .k-ok{background:var(--zielen);color:#fff}
.k-ok small{font-size:.78rem;font-weight:700;border:1.5px solid #fff;border-radius:999px;padding:0 6px;margin-left:4px;vertical-align:.1em}
.k-tablica{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:5px;counter-reset:t}
.k-tablica li{counter-increment:t;display:flex;gap:10px;align-items:center;background:var(--atrament);color:var(--papier);border-radius:6px;padding:7px 10px;font-weight:600;font-size:.98rem}
.k-tablica li::before{content:counter(t);color:var(--musztarda);font-family:var(--font-naglowki);font-weight:800}
.k-tablica .k-zakryte span{color:#9C9483;letter-spacing:.3em}
.k-uczciwie{font-size:.95rem;margin:0}
.k-liczby{display:flex;gap:6px;flex-wrap:wrap;margin:0;font-weight:700;align-items:flex-start}
.k-liczby span{border:2.5px solid var(--atrament);border-radius:8px;padding:5px 10px;text-align:center}
.k-liczby small{display:block;font-size:.74rem;font-weight:600}
.k-liczby .k-najblizsza{background:var(--musztarda)}
.k-prawda-wiersz{margin:10px 0 0;font-weight:600}
.k-prawda-wiersz b{background:var(--zielen);color:#fff;padding:1px 8px;border-radius:6px}
.pieczatka{position:absolute;display:inline-block;font-family:var(--font-naglowki);font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.02;text-align:center;color:var(--gong-tekst);border:3px solid currentColor;border-radius:8px;padding:6px 10px;outline:2px solid currentColor;outline-offset:3px;background:rgba(255,255,255,.9);font-size:.92rem}
.k-blef .pieczatka{right:18px;top:-20px;transform:rotate(6deg)}
.tryby-dol{display:grid;gap:36px;margin-top:56px}
@media (min-width:860px){.tryby-dol{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.tryby-h{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:12px}
.kulisy-dop{margin:-4px 0 12px}

/* listy rozdzielone kreską zamiast ptaszków */
.lista-kreski{list-style:none;margin:0;padding:0}
.lista-kreski li{border-top:2px solid var(--atrament);padding:12px 0}
.lista-kreski li:last-child{border-bottom:2px solid var(--atrament)}
.dla-kogo .lista-kreski li{border-color:var(--linia)}
.lista-kreski i{white-space:nowrap}

/* ---------- Dla kogo: nagłówek na środku, nad wodzirejem ---------- */
.dla-glowa{text-align:center;margin-bottom:28px}
.dla-wodzirej{width:120px;margin:0 auto 10px}
@media (min-width:760px){.dla-wodzirej{width:150px}}
.dla-glowa .sekcja-h2{margin:0 auto;font-size:clamp(2.4rem,6vw,4.4rem)}
.rozpiska-wiersz{display:grid;gap:14px;padding:30px 0;border-top:var(--kontur)}
@media (min-width:860px){.rozpiska-wiersz{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:44px;padding:38px 0}}
.rozpiska-kto h3{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.rozpiska-gdzie{font-size:1rem;margin:10px 0 0}
.rozpiska-zart{font-family:var(--font-naglowki);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;margin-bottom:14px}

/* ---------- Porównanie ---------- */
.por-glowa{display:grid;gap:20px;align-items:center;margin-bottom:24px}
@media (min-width:860px){.por-glowa{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}}
.por-glowa .sekcja-h2{margin-bottom:14px}
.por-lead{font-size:1.15rem;max-width:34em;margin:0}
.por-kosz img{width:100%;max-width:280px;margin:0 auto}
.por-kosz figcaption{font-size:.98rem;text-align:center;max-width:26em;margin:4px auto 0}
.tabela-ramka{overflow-x:auto;border:var(--kontur);background:var(--bialy);border-radius:12px}
.tabela{width:100%;border-collapse:collapse;min-width:620px;font-size:1rem}
.tabela th,.tabela td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:2px solid var(--linia)}
.tabela thead th{font-weight:700;background:var(--atrament);color:var(--papier);border-bottom:0}
.tabela thead th:nth-child(2){color:var(--musztarda)}
.tabela tbody th{font-weight:600;width:24%}
.tabela td{width:38%}
.tabela tr:last-child th,.tabela tr:last-child td{border-bottom:0}
.tabela .lepiej{font-weight:700;box-shadow:inset 5px 0 0 var(--zielen)}
.lepiej-tag{display:inline-block;font-size:.78rem;font-weight:700;color:#fff;background:var(--zielen-tekst);border-radius:999px;padding:0 8px;margin-left:6px;vertical-align:.12em}
.td-kto{display:none}
.drobne{display:block;font-size:.9rem;color:var(--szary);font-weight:400;margin-top:4px}
.przypis{font-size:.95rem;max-width:56em;margin:16px 0 0}
@media (max-width:639px){
  .tabela-ramka{overflow:visible;border:0;background:transparent}
  .tabela{min-width:0}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela,.tabela tbody,.tabela tr,.tabela th,.tabela td{display:block;width:auto}
  .tabela tr{border:var(--kontur);border-radius:10px;background:var(--bialy);margin-bottom:14px;overflow:hidden}
  .tabela tbody th{background:var(--atrament);color:var(--papier);padding:10px 14px;width:auto}
  .tabela td{padding:10px 14px 12px}
  .tabela tr td:last-child{border-bottom:0}
  .td-kto{display:block;font-size:.88rem;font-weight:600;color:var(--szary)}
}

/* ---------- Cennik: tablica na pierwszym planie ---------- */
.cennik{background:var(--atrament);color:var(--papier)}
.cennik-h{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--papier);text-align:center;margin:0 auto 26px;max-width:24ch}
.tablica{max-width:900px;margin:0 auto;background:#10101E;border:8px solid #0A0A14;outline:3px solid var(--papier);border-radius:12px;padding:16px;display:grid;gap:10px;box-shadow:10px 10px 0 var(--gong)}
@media (min-width:760px){.tablica{padding:24px 28px;gap:12px}}
.tablica-wiersz{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 0;border-bottom:2px dashed #33334D}
.tablica-wiersz:last-child{border-bottom:0}
.tablica-co{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(.86rem,1.6vw,1.12rem);color:var(--papier)}
.tablica-dop{display:block;font-size:max(.8em,.8rem);color:#D9CFBE;letter-spacing:.02em;margin-top:3px;font-weight:500;text-transform:none}
.tablica-dop-zolty{color:var(--musztarda)}
.klapki-cena{font-size:clamp(1.3rem,4vw,2.6rem);flex:none}
.cennik-opis{display:grid;gap:30px;margin-top:52px}
@media (min-width:980px){.cennik-opis{grid-template-columns:1fr 1fr 1.15fr;gap:40px}}
.cennik-opis h3{font-size:1.45rem;margin-bottom:10px;color:var(--papier)}
.cennik-opis p{color:#E4DACB;margin:0 0 .8em}
.cennik-prog{font-weight:600;color:var(--papier) !important}
.cennik-promo{position:relative;align-self:start;background:var(--musztarda);color:var(--atrament);padding:24px 22px 22px;border:var(--kontur);border-radius:14px;transform:rotate(-1deg)}
.cennik-promo h3,.cennik-promo p{color:var(--atrament)}
.cennik-promo h3{padding-right:120px}
.cennik-promo :focus-visible{outline-color:var(--atrament)}
.pieczatka-duza{font-size:1.7rem;right:16px;top:14px;padding:8px 12px;transform:rotate(-8deg);background:rgba(255,255,255,.6)}
.cennik-stopka{margin:40px 0 0;color:#D9CFBE;font-size:.98rem}

/* ---------- FAQ: wiersze rozdzielone kreską ---------- */
.faq-in{display:grid;gap:30px}
@media (min-width:980px){.faq-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}.faq-glowa{position:sticky;top:20px;align-self:start}}
.faq-ilu img{width:100%;max-width:300px}
.faq-ilu figcaption{font-size:.98rem;font-weight:600;max-width:20em}
@media (max-width:979px){.faq-ilu{display:flex;gap:14px;align-items:center}.faq-ilu img{width:40%}}
.faq-lista details{border-top:var(--kontur)}
.faq-lista details:last-child{border-bottom:var(--kontur)}
.faq-lista summary{cursor:pointer;list-style:none;font-family:var(--font-naglowki);font-weight:800;font-size:clamp(1.12rem,1.9vw,1.35rem);padding:16px 48px 16px 0;min-height:56px;position:relative;line-height:1.2}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-52%);font-family:var(--font-naglowki);font-weight:800;font-size:1.9rem;line-height:1}
.faq-lista details[open] summary::after{content:"−"}
.faq-lista details p{padding:0 0 20px;margin:0;max-width:42em}

/* ---------- Zgłoszenie ---------- */
.rez-in{display:grid;gap:36px}
@media (min-width:980px){.rez-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}}
.rez-tekst{max-width:40em}
.rez-tekst .sekcja-h2{font-size:clamp(2.4rem,6vw,4.4rem)}
.rez-lead{font-size:1.18rem}
.rez-promo{font-weight:600;margin-top:22px}
.rez-alt{overflow-wrap:anywhere}
.rez-mini{margin:0}
/* formularz zgłoszenia */
.formularz{background:var(--bialy);border:var(--kontur);border-radius:14px;padding:26px 20px;display:grid;gap:18px 20px}
@media (min-width:640px){.formularz{grid-template-columns:1fr 1fr;padding:32px 30px}}
.formularz[hidden]{display:none}
.formularz-glowa{grid-column:1/-1;font-family:var(--font-naglowki);font-weight:800;font-size:1.3rem;margin:0;padding-bottom:12px;border-bottom:2px dashed var(--linia)}
.pole{display:grid;gap:6px;min-width:0}
.pole-szer,.pole-rola{grid-column:1/-1}
.pole label,.pole legend{font-weight:600;font-size:.98rem}
.opc{font-weight:400;color:var(--szary)}
.pole input[type=text],.pole input[type=email],.pole input[type=tel],.pole textarea{width:100%;font:inherit;font-size:1rem;color:var(--atrament);background:var(--bialy);border:2.5px solid var(--atrament);border-radius:8px;padding:11px 12px}
.pole textarea{resize:vertical;min-height:110px}
.pole input:focus-visible,.pole textarea:focus-visible{outline:3px solid var(--atrament);outline-offset:2px;box-shadow:0 0 0 7px var(--musztarda)}
.pole [aria-invalid=true]{border-width:3px;border-color:var(--gong-tekst);background:#FDE7E2}
fieldset.pole{border:0;padding:0;margin:0}
.role{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.role label{display:inline-flex;align-items:center;gap:7px;min-height:44px;border:2.5px solid var(--atrament);border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:600;background:var(--bialy)}
.role input{accent-color:var(--gong-tekst);margin:0}
.role label:has(input:checked){background:var(--atrament);color:var(--papier)}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-weight:500 !important}
.zgoda input{width:22px;height:22px;margin-top:1px;accent-color:var(--gong-tekst);flex:none}
.rodo{font-size:.88rem;color:var(--szary);margin:0}
.miodek{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formularz-wyslij{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.status-form{margin:0;font-weight:600}
.status-form.ok{color:var(--zielen-tekst)}
.status-form.blad{color:var(--gong-tekst)}

/* ---------- Stopka ---------- */
.stopka{background:var(--atrament);color:var(--papier);padding:44px 0 52px}
.stopka-in{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center}
.stopka-gong{width:170px}
.calosc{white-space:nowrap}
.logo-jasne{color:var(--papier);font-size:1.6rem;margin-bottom:8px}
.stopka-budowa{font-family:var(--font-naglowki);font-weight:800;font-size:1.3rem;margin:0 0 4px}
.stopka-drobne{color:#D9CFBE;margin:0 0 8px}
.stopka-nav{display:flex;flex-wrap:wrap;gap:0 26px}
.stopka-nav a{display:inline-block;padding:11px 0;color:var(--papier)}

/* ---------- Ruch: klapki, jeden występ maskotki i wciśnięcie przycisku ---------- */
@media (prefers-reduced-motion:no-preference){
  /* maskotka w hero rusza się sama (animacja w pliku SVG) */
  .btn{transition:transform .2s var(--sprezyna),box-shadow .2s var(--sprezyna)}
  .btn:active{transition-duration:.06s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Polityka prywatności ---------- */
.dok{padding:48px 0 80px}
.dok-in{max-width:780px}
.dok h1{font-size:clamp(2.3rem,5vw,3.6rem);margin-bottom:18px;max-width:none}
.dok h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:42px 0 12px}
.dok ul{padding-left:1.2em}
.dok li{margin-bottom:.4em}
.dok-data{font-weight:600;margin:0 0 8px}
.szkic{background:var(--musztarda);color:var(--atrament);border:var(--kontur);padding:14px 16px;border-radius:10px;font-weight:600;margin:0 0 30px}
.dok-wroc{display:inline-block;margin-bottom:18px;padding:10px 0;font-weight:600}