/* ============================================================
   CITY BURGER — cityburger.css (v2, 2026-07)
   Jeden arkusz dla całego serwisu. Zastępuje style inline v16
   oraz mieszankę components/mobile-subpages z mockupu.
   Język wizualny: ciemne tło, mustard, Barlow Condensed / Montserrat / Inter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Montserrat:wght@600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --cb-black:        #0A0A0A;
  --cb-black-ui:     #080C12;
  --cb-charcoal:     #282B2B;
  --cb-card:         #161819;
  --cb-card-hover:   #1D2021;
  --cb-mustard:      #F2B807;
  --cb-mustard-dk:   #D9A506;
  --cb-cream:        #F5F3EF;
  --cb-white:        #FFFFFF;
  --cb-muted:        #A5A5A0;
  --cb-muted-dark:   #6E6E68;
  --cb-line:         #26292B;
  --cb-line-light:   #E3DFD7;

  /* Type */
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-ui:      'Montserrat', sans-serif;
  --f-body:    'Inter', sans-serif;

  --fs-hero:  clamp(3rem, 7.5vw, 5.5rem);
  --fs-h2:    clamp(2.2rem, 4.5vw, 3.4rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:  1rem;
  --fs-small: .875rem;

  --container: 1200px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --sec-y: clamp(3.5rem, 8vw, 6.5rem);

  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cb-black);
  color: var(--cb-cream);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cb-black-ui);
  border-bottom: 1px solid var(--cb-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: .9rem; padding-bottom: .9rem;
}
.site-header__logo img { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a {
  font-family: var(--f-ui); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cb-cream);
  padding: .25rem 0; border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.site-nav a:hover { color: var(--cb-mustard); }
.site-nav a.is-active { color: var(--cb-mustard); border-bottom-color: var(--cb-mustard); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-ui); font-weight: 800; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-md); padding: 1rem 1.9rem;
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.btn--primary { background: var(--cb-mustard); color: var(--cb-black); }
.btn--primary:hover { background: var(--cb-mustard-dk); transform: translateY(-1px); }
.btn--ghost { border-color: #4A4D4F; color: var(--cb-cream); }
.btn--ghost:hover { border-color: var(--cb-cream); }
.btn--ghost-dark { border-color: #B9B4A9; color: var(--cb-charcoal); }
.btn--ghost-dark:hover { border-color: var(--cb-charcoal); }
.btn--lg { padding: 1.25rem 2.75rem; font-size: .95rem; }
.btn--dark { background: var(--cb-black); color: var(--cb-cream); }
.btn--dark:hover { background: var(--cb-charcoal); }

/* Hamburger + mobile nav */
.hamburger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--cb-cream); margin: 5px 0; border-radius: 2px; }
.mobile-nav {
  display: none; flex-direction: column; gap: .25rem;
  background: var(--cb-black-ui); border-bottom: 1px solid var(--cb-line);
  padding: .75rem var(--pad-x) 1.25rem;
  position: sticky; top: 65px; z-index: 99;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--f-ui); font-weight: 700; font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .8rem 0; border-bottom: 1px solid var(--cb-line);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav .btn { margin-top: .5rem; }

/* ---------- Hero ---------- */
.hero { background: var(--cb-black); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.3fr);
  align-items: start; gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero__headline {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-hero); line-height: .95; letter-spacing: .01em;
  color: var(--cb-white);
}
.hero__headline .accent { color: var(--cb-mustard); display: block; }
.hero__sub { margin-top: 1.4rem; max-width: 34rem; color: var(--cb-muted); font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
/* Wszystkie heroy: szeroka rama 3:2, bez zaokrągleń i obrysu. */
.hero__media { position: relative; aspect-ratio: 3 / 2; }
/* ostry kadr, bez warstw pod spodem */
.hero__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* STAN FAKTYCZNY WARSTW NA HERO PODSTRON (aktualne od 04.08):
   ŻADNYCH. Zdjęcie leży w ramie 3:2 i jest cięte ostro — nad nim nie ma już
   żadnego pseudoelementu, maski ani gradientu.
   Historia, żeby nikt tego nie odtworzył: od 30.07 siedziała tu nakładka ::after
   z czterema gradientami w kolorze tła. To ona była „winietą", z którą walczył
   właściciel — kolejne próby (maska, halo, rozświetlenie) dokładano NA nią, więc
   po każdym „usunąłem wszystko" krawędź dalej była miękka. 30.07 wyłączono ją
   dla Kontaktu i O marce, 04.08 zdjęto całkiem: przygaszała do 32% szerokości
   kadru i psuła produkt na zdjęciach (bułka na /menu wychodziła szara).
   Miękkiej krawędzi NIE robi się w CSS — jeśli kiedyś będzie potrzebna, wypala
   się ją w pliku, po skadrowaniu do proporcji ramy. */

/* ===== HERO STRONY GŁÓWNEJ — zdjęcie przenika się z napisem =====
   Wymagania właściciela: zdjęcie CAŁE (nic nie ucięte z boków), przenika się z napisem
   (frytki wchodzą pod „sobie"), zero widocznych krawędzi, przejścia bardzo stopniowe
   i łagodne — bez gwałtownego przyciemnienia ani rozjaśnienia.

   Dlatego zdjęcie nie jest kolumną siatki, a osobną warstwą pod tekstem: zachowuje
   własną proporcję (żaden object-fit go nie przycina) i może zachodzić na kolumnę tekstu.
   Wygaszenie robi nakładka w kolorze tła z siedmioma przystankami (krzywa wygładzona,
   nie liniowa) — najdłuższe od lewej, gdzie spotyka się z napisem. */
.hero--home { position: relative; overflow: hidden; }
/* `max-width` jest tu obowiązkowe: szerokość liczy się od SEKCJI (czyli viewportu),
   więc bez ograniczenia na szerokim ekranie zdjęcie rosło ponad wysokość sekcji
   i było ucinane u dołu. 900 px daje wysokość 600 px, którą sekcja pomieści. */
/* Kadr ma w pliku ucięty pusty dym z góry (19% wysokości oryginału), więc produkt jest
   wyśrodkowany. Dodatkowe -9% podnosi go tyle, żeby GÓRA BUŁKI wypadła nieco powyżej
   górnej krawędzi napisu „Głodny?" (wymóg właściciela). Dół zdjęcia jest już wygaszony
   do czerni, więc powstający pod nim margines nie tworzy widocznej krawędzi. */
.hero--home .hero__foto-wrap {
  position: absolute; top: 50%; right: 0; transform: translateY(-61%);
  width: min(72%, 900px); line-height: 0; z-index: 1;
}
.hero--home .hero__foto-wrap img { width: 100%; height: auto; display: block; }
.hero--home .hero__foto-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Wygaszanie skrócone po ocenie na renderze: wcześniejsze 66% sięgało lewej bułki
     i ją przygaszało, a zdjęcie wchodziło pod napis za mocno. 26% kończy przejście
     na pustym, ciemnym tle zdjęcia — bułka zostaje w pełnym świetle, a frytki
     nadal idą w stronę napisu. */
  background:
    linear-gradient(to right,
      #0A0A0A 0%, rgba(10,10,10,.90) 7%, rgba(10,10,10,.62) 13%,
      rgba(10,10,10,.30) 19%, rgba(10,10,10,.08) 23%, rgba(10,10,10,0) 26%),
    linear-gradient(to top,    #0A0A0A 0%, rgba(10,10,10,.45) 4%, rgba(10,10,10,0) 9%),
    linear-gradient(to bottom, #0A0A0A 0%, rgba(10,10,10,.45) 4%, rgba(10,10,10,0) 9%);
}
/* Wysokość dobrana tak, żeby po podniesieniu zdjęcia nie zostawał pod nim duży pusty
   pas: kadr ma 486 px przy 900 px szerokości, podniesienie to ~44 px. */
.hero--home .hero__inner { position: relative; z-index: 2; min-height: 28.5rem; display: block; }
.hero--home .hero__content { max-width: 32rem; }

/* Telefon: zdjęcie wraca nad tekst, na całą szerokość, wygaszone od dołu,
   żeby napis wychodził z niego, a nie stał na krawędzi. */
@media (max-width: 860px) {
  .hero--home .hero__foto-wrap {
    position: static; transform: none; width: 118%; max-width: none;
    margin: 0 -9% -22% -9%;
  }
  /* Wygaszenie w dół musi dojść do pełnej czerni WYRAŹNIE PRZED końcem kadru, inaczej
     jasny brzeg łupka przebija i widać twardą linię (wyłapane na zrzucie z 375 px). */
  .hero--home .hero__foto-wrap::after {
    background:
      linear-gradient(to bottom,
        rgba(10,10,10,0) 26%, rgba(10,10,10,.30) 48%, rgba(10,10,10,.62) 66%,
        rgba(10,10,10,.88) 82%, #0A0A0A 93%),
      linear-gradient(to right, #0A0A0A 0%, rgba(10,10,10,0) 9%),
      linear-gradient(to left,  #0A0A0A 0%, rgba(10,10,10,0) 9%);
  }
  .hero--home .hero__inner { min-height: 0; }
  .hero--home .hero__content { max-width: none; }
}

/* Halo za kadrem (rozmyta kopia zdjęcia wychodząca poza ramę) USUNIĘTE 30.07.2026
   na polecenie właściciela — razem z próbami wtapiania krawędzi. Hero podstron
   to teraz czysty kadr, bez poświaty i bez winiety.
   Markup do odtworzenia: git show 1218566:styles/cityburger.css */

/* Wtopienie zdjęcia w tło — zamiast maski na obrazie nakładka w kolorze tła.
   Historia zmian, żeby nie wracać do złych wariantów:
   1) oryginalna maska radialna miała zasięg 140%/150% kadru i pełne krycie do 68%
      promienia — wygaszanie wypadało POZA kadrem, więc na brzegach obraz był w 100%
      kryjący i widać było prostokątną linię odcięcia;
   2) nakładka 16%/13% usunęła linię, ale weszła w kadr i przygasiła głowy oraz ramiona
      na zdjęciach z ludźmi — sprawdzone na renderach, nie na pomiarach;
   3) obecnie pas jest wąski (5% / 4%), czyli działa NA ZEWNĄTRZ: rozpuszcza samą
      krawędź prostokąta, a treść zdjęcia zostaje nietknięta. */
/* NAKŁADKA NA HERO PODSTRON — ZDJĘTA CAŁKOWICIE (polecenie właściciela, 04.08).
   Historia: pseudoelement ::after malował na każdym hero cztery gradienty w kolorze
   tła, żeby rozpuścić krawędź kadru. Lewy sięgał 32% szerokości i startował od
   pełnej czerni, więc realnie przygaszał jedną trzecią zdjęcia — na burgerze
   z /menu bułka wychodziła szara i cały kadr czytał się jak niedoświetlony.
   Krawędzie i tak są ciemne w samych plikach, więc nakładka niczego nie ratowała,
   a psuła produkt. Wszystkie hero podstron mają teraz ostre cięcie.
   Modyfikator --ostry (dawniej wyłączał tę nakładkę dla Kontaktu i O marce)
   stracił rację bytu i został usunięty z HTML. */

/* Para zdjęć w sekcji: wspólna proporcja, żeby dwa kadry o różnych wymiarach
   nie robiły schodków, i żeby pionowe zdjęcie nie rozciągało sekcji na pół ekranu. */
.foto-para img {
  width: 100%; display: block; border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; object-fit: cover;
}

/* Podstrony: te same odstępy, nagłówki wyrównane do tej samej wysokości (align-items: start). */
.hero--sub .hero__inner {
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Order strip ---------- */
.order-strip { background: #141617; border-top: 1px solid var(--cb-line); border-bottom: 1px solid var(--cb-line); }
.order-strip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.order-strip__text {
  font-family: var(--f-ui); font-weight: 800; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
}
.order-strip__text .accent { color: var(--cb-mustard); }

/* ---------- Sections ---------- */
.section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.section--light { background: var(--cb-cream); color: var(--cb-charcoal); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font-family: var(--f-ui); font-weight: 800; font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cb-mustard);
  display: block; margin-bottom: .8rem;
}
.section--light .eyebrow { color: #A88400; }
.section__title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: 1; color: var(--cb-white);
}
.section--light .section__title { color: var(--cb-charcoal); }
.section__sub { margin-top: 1rem; color: var(--cb-muted); font-size: 1.02rem; }
.section--light .section__sub { color: #5C5C55; }

/* ---------- Product grid / cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Bez obramowania: ramka 1 px czytała się na ciemnym tle jako jasny kontur wokół
   każdego zdjęcia. Karty i tak są oddzielone własnym tłem. */
.card {
  background: var(--cb-card); border: 0;
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, background .18s ease;
}
.card:hover { transform: translateY(-4px); background: var(--cb-card-hover); }

/* Kadr produktu przycięty o 20% OD GÓRY — nad produktem było za dużo pustego tła.
   Kwadratowe źródło w ramie 5:4 przy `object-position: bottom` obcina dokładnie
   górne 20% zdjęcia, identycznie dla każdego produktu, więc linia produktu
   trzyma się na wszystkich kartach tak samo. Pliki zostają nietknięte. */
.card__img { aspect-ratio: 5 / 4; overflow: hidden; background: #101213; }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* --full: kadr bez przycięcia. Packshoty są kwadratowe, a domyślne 5/4 kotwiczone
   do dołu zjada górne 20% kadru. Przy burgerze to puste tło, ale przy zestawie
   ucinało korek butelki — dlatego zestawy dostają pełny kwadrat. */
.card__img--full { aspect-ratio: 1 / 1; }
.card__img--full img { object-position: center; }
.card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__name {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.45rem; line-height: 1.05; color: var(--cb-white);
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.card__badge {
  font-family: var(--f-ui); font-weight: 800; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--cb-mustard); color: var(--cb-black);
  border-radius: var(--r-pill); padding: .28rem .7rem; white-space: nowrap;
  align-self: center;
}
.card__desc { margin-top: .7rem; color: var(--cb-muted); font-size: .9rem; line-height: 1.55; flex: 1; }
.card__price {
  margin-top: 1rem; font-family: var(--f-ui); font-weight: 800;
  font-size: 1.05rem; color: var(--cb-mustard); letter-spacing: .02em;
}
/* Dopisek o opakowaniu/kaucji idzie pod cenę, nie obok — w kolumnie karty
   zawijał się w połowie zdania i rozbijał linię ceny. */
.card__price small {
  display: block; margin-top: .3rem;
  font-weight: 600; font-size: .72rem; color: var(--cb-muted); letter-spacing: .05em;
}

/* Feature card (zestaw, frytki, sosy)
   Kolumna zdjęcia jest ograniczona do 24rem. Wcześniej była to połowa kontenera,
   a że wszystkie packshoty są kwadratowe (900×900), sekcja rosła do ~700 px
   i trzy linijki tekstu obok pływały w pustce. */
.feature {
  display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  background: var(--cb-card); border: 0;
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.4rem;
}
/* Kontener trzyma proporcję zdjęcia, więc kadr niczego nie ucina —
   butelka w zestawie zostaje z korkiem. */
.feature__img { aspect-ratio: 1 / 1; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* --crop: dla zdjęć, gdzie górna część kadru to samo tło (frytki) */
.feature__img--crop { aspect-ratio: 4 / 3; }
.feature__img--crop img { object-position: center bottom; }
.feature__body { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
/* .card__desc ma flex:1, żeby w siatce kart wyrównywać ceny do dolnej krawędzi.
   Tutaj kolumna jest wyższa od treści, więc ten sam flex rozpychał opis i zostawiał
   dziurę między zdaniem a ceną. */
.feature__body .card__desc { flex: 0 0 auto; }
.feature__body .card__price { margin-top: 1.2rem; font-size: 1.15rem; }

/* Sauce tiles */
.sauce {
  background: var(--cb-card); border: 1px solid var(--cb-line);
  border-radius: var(--r-md); padding: 1.2rem 1.3rem;
}
.sauce__name {
  font-family: var(--f-ui); font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cb-mustard);
}
.sauce__desc { margin-top: .5rem; font-size: .85rem; color: var(--cb-muted); line-height: 1.55; }

/* Drinks — transparent bottles on dark tile with radial glow */
.drink { text-align: center; }
.drink__img {
  position: relative;
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, rgba(242,184,7,.14), transparent 70%),
    var(--cb-card);
  /* bez obramowania, tak jak karty produktów; butelek NIE przycinamy od góry,
     bo kadr obciąłby korki — tu produkt stoi w pełnej wysokości */
  border: 0; border-radius: var(--r-lg);
  padding: 2.25rem 1rem; display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.drink__img img { height: 260px; width: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
.drink__name { margin-top: 1rem; font-family: var(--f-ui); font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-white); }
.drink__price { margin-top: .35rem; font-family: var(--f-ui); font-weight: 800; color: var(--cb-mustard); }
.drink__price small { font-weight: 600; font-size: .72rem; color: var(--cb-muted); }

/* ---------- Steps (jak zamówić) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.step { text-align: center; }
.step__no {
  width: 46px; height: 46px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-mustard); color: var(--cb-black);
  font-family: var(--f-ui); font-weight: 900; font-size: 1.1rem;
  border-radius: 50%;
}
.step__title {
  margin-top: 1.1rem; font-family: var(--f-ui); font-weight: 800;
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}
.step__text { margin-top: .5rem; font-size: .9rem; color: #5C5C55; max-width: 17rem; margin-left: auto; margin-right: auto; }

/* ---------- Cities ---------- */
.cities { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.city-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--cb-white); border: 1.5px solid var(--cb-line-light);
  border-radius: var(--r-md); padding: .95rem 1.6rem;
  font-family: var(--f-ui); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; color: var(--cb-charcoal);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.city-btn:hover { border-color: var(--cb-mustard); transform: translateY(-2px); background: #FFFDF5; }
.city-btn svg { width: 15px; height: 15px; stroke: var(--cb-mustard); stroke-width: 2.5; fill: none; }

/* ---------- USP line (pod hero CTA) ---------- */
.usp-line {
  margin-top: 1.8rem;
  font-family: var(--f-ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cb-muted);
}
.usp-line .dot { color: var(--cb-mustard); margin: 0 .55rem; }

/* ---------- Agregatorzy ---------- */
.agg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.agg-card {
  background: var(--cb-white); border: 1.5px solid var(--cb-line-light);
  border-radius: var(--r-lg); padding: 1.6rem 1.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center; position: relative;
  transition: border-color .15s ease, transform .15s ease;
}
.agg-card__logo { height: 34px; display: flex; align-items: center; }
.agg-card__logo img { max-height: 34px; width: auto; max-width: 130px; object-fit: contain; }
.agg-card--active:hover { border-color: var(--cb-mustard); transform: translateY(-2px); }
.agg-card--soon { pointer-events: none; }
.agg-card--soon .agg-card__logo img { filter: grayscale(1); opacity: .45; }
.agg-card__badge {
  font-family: var(--f-ui); font-weight: 800; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: .3rem .8rem;
}
.agg-card--active .agg-card__badge { background: var(--cb-mustard); color: var(--cb-black); }
.agg-card--soon .agg-card__badge { background: #ECE8E0; color: #8A867D; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--cb-black); text-align: center; }
.final-cta__title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; color: var(--cb-white);
}
.final-cta__title .accent { color: var(--cb-mustard); display: block; }
.final-cta .btn { margin-top: 2.4rem; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-info__title { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); line-height: 1; color: var(--cb-white); }
.contact-info__title .accent { color: var(--cb-mustard); }
.contact-info__text { margin-top: 1.2rem; color: var(--cb-muted); }
.contact-email {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
  font-family: var(--f-ui); font-weight: 700; font-size: 1.05rem; color: var(--cb-mustard);
}
.contact-email:hover { text-decoration: underline; }
.contact-photo { margin-top: 2.2rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--cb-line); }

.form { background: var(--cb-card); border: 1px solid var(--cb-line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.form__group { margin-bottom: 1.1rem; }
.form label {
  display: block; font-family: var(--f-ui); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: .45rem;
}
.form input, .form textarea {
  width: 100%; background: #0F1112; border: 1px solid var(--cb-line);
  border-radius: var(--r-md); color: var(--cb-cream);
  font-family: var(--f-body); font-size: .95rem; padding: .85rem 1rem;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--cb-mustard); outline-offset: 0; border-color: transparent; }
.form textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: .78rem; color: var(--cb-muted-dark); margin-top: .9rem; line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer { background: var(--cb-black-ui); border-top: 1px solid var(--cb-line); padding-top: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
/* Lockup "powered by Da Grasso" jest wyzszy od samego logo — przy 42px linia
   "POWERED BY" bylaby nieczytelna, dlatego w stopce dajemy wiecej wysokosci. */
.footer-brand img { height: 64px; width: auto; }
.footer-brand p { margin-top: 1rem; font-size: .88rem; color: var(--cb-muted); max-width: 20rem; }
.footer-social { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer-social a {
  width: 38px; height: 38px; border: 1px solid #3A3E40; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.footer-social a:hover { border-color: var(--cb-mustard); }
.footer-social svg { width: 17px; height: 17px; fill: var(--cb-cream); }
.footer-col h4 {
  font-family: var(--f-ui); font-weight: 800; font-size: .75rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--cb-white);
  margin-bottom: 1.1rem;
}
.footer-col a { display: block; font-size: .9rem; color: var(--cb-muted); padding: .3rem 0; }
.footer-col a:hover { color: var(--cb-mustard); }
.footer-bottom {
  border-top: 1px solid var(--cb-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.4rem; padding-bottom: 1.4rem;
  font-size: .8rem; color: var(--cb-muted-dark);
}
.footer-bottom a { color: var(--cb-muted); }
.footer-bottom a:hover { color: var(--cb-mustard); }

/* ---------- Prose (polityka prywatności) ---------- */
.prose { max-width: 48rem; }
.prose h2 { font-family: var(--f-ui); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cb-white); margin: 2.2rem 0 .8rem; }
.prose p, .prose li { color: var(--cb-muted); font-size: .95rem; }
.prose ul { padding-left: 1.2rem; }

/* ---------- Pillars (Delivery-first) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pillar {
  background: var(--cb-card); border: 1px solid var(--cb-line);
  border-radius: var(--r-lg); padding: 1.9rem 1.7rem;
}
.pillar__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cb-mustard); color: var(--cb-black);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.pillar__icon svg { width: 26px; height: 26px; }
.pillar__title {
  font-family: var(--f-ui); font-weight: 800; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cb-white);
}
.pillar__text { margin-top: .6rem; font-size: .92rem; color: var(--cb-muted); line-height: 1.6; }

/* ---------- Lifestyle band ---------- */
.lifestyle-band { position: relative; overflow: hidden; }
/* Rama przejmuje proporcje PLIKU (2,1:1) zamiast stalej wysokosci — przy stalej
   wysokosci proporcja ramy zalezala od szerokosci ekranu (2,2:1 do 3,4:1) i cover
   ZAWSZE cos ucinal w pionie: raz glowe (1920), raz burgera (1136) — obie wtopy
   zgloszone przez Aleksa 30-31.07. Teraz kadr = plik, pion nietkniety na kazdej
   szerokosci; plik ma glowe Z zapasem i calego burgera z marginesem.
   min-height dziala tylko na telefonie: rama robi sie wyzsza niz plik i cover
   tnie BOKI (miasto), nie pion — twarz stoi blisko srodka, wiec zostaje. */
.lifestyle-band__img { width: 100%; height: auto; aspect-ratio: 2.1 / 1; min-height: 320px; object-fit: cover; object-position: 50% 30%; display: block; }
/* Nakładka kończy się na 55%, a nie 75% — kolumna tekstu ma 30rem, więc dalsze
   przyciemnianie zjadałoby produkt stojący w osi kadru. */
.lifestyle-band__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.62) 24%, rgba(10,10,10,.22) 42%, rgba(10,10,10,0) 55%);
  display: flex; align-items: center;
}
.lifestyle-band__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; }
.lifestyle-band__text { max-width: 30rem; }
.lifestyle-band__title {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: 1; color: var(--cb-white);
}
.lifestyle-band__title .accent { color: var(--cb-mustard); }
.lifestyle-band__sub { margin-top: 1rem; color: var(--cb-cream); font-size: 1.02rem; }

/* ---------- Manifest ---------- */
.manifest { text-align: center; }
.manifest__body {
  max-width: 40rem; margin: 0 auto;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.15; color: var(--cb-cream);
}
.manifest__body .dim { color: var(--cb-muted-dark); display: block; }
.manifest__body .accent { color: var(--cb-mustard); display: block; }

/* ---------- About: explain / info cards ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.info-card {
  background: var(--cb-card); border: 1px solid var(--cb-line);
  border-radius: var(--r-lg); padding: 1.8rem 1.6rem;
}
.info-card__title {
  font-family: var(--f-ui); font-weight: 800; font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cb-mustard);
}
.info-card__text { margin-top: .6rem; font-size: .92rem; color: var(--cb-muted); line-height: 1.6; }

/* About: social claim tiles */
.claim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.claim-tile {
  background: var(--cb-card); border: 1px solid var(--cb-line);
  border-radius: var(--r-lg); padding: 1.6rem 1.4rem; min-height: 150px;
  display: flex; align-items: flex-end;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.3rem; line-height: 1.05; color: var(--cb-white);
}
.claim-tile--accent { background: var(--cb-mustard); color: var(--cb-black); border-color: var(--cb-mustard); }

/* Split feature (packaging: photo + text) */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
.split__img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--cb-line); }
.split__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq__item { border-bottom: 1px solid var(--cb-line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0; color: var(--cb-white);
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem;
}
.faq__q::after { content: "+"; color: var(--cb-mustard); font-size: 1.4rem; line-height: 1; flex: none; }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__q::-webkit-details-marker { display: none; }
.faq__a { padding: 0 0 1.35rem; color: var(--cb-muted); font-size: .95rem; line-height: 1.6; max-width: 42rem; }

/* ---------- Responsive ---------- */
/* Lockup „CITY BURGER powered by Da Grasso" z ® istnieje wyłącznie w wersji na jasnym
   tle (wersja odwrócona dostarczona przez markę nie ma ® — sprawdzone u źródła).
   Nie dorabiamy znaku, więc w ciemnej stopce lockup siedzi na białej plakietce.
   Dodatkowa korzyść: czerwony znak Da Grasso zachowuje właściwy kolor. */
.footer-brand__plate {
  display: inline-block; background: #FFFFFF;
  border-radius: var(--r-lg); padding: .5rem .75rem;
}
.footer-brand__plate img { height: 54px; width: auto; display: block; }

/* Treść tylko dla czytników ekranu (podpisy tabel) — niewidoczna, ale odczytywana. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== TABELE: ALERGENY I WARTOŚCI ODŻYWCZE =====
   Dane są szerokie (14 alergenów + 9 wartości), więc rozbite na dwie tabele i każda
   przewija się w POZIOMIE we własnym kontenerze — strona nigdy nie jeździe na boki.
   Pierwsza kolumna (nazwa produktu) jest przyklejona, żeby przy przewijaniu było wiadomo,
   czyj to wiersz. */
.tabela-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cb-line); border-radius: var(--r-lg);
  background: var(--cb-card);
}
.tabela-dane {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-family: var(--f-body); font-size: .84rem; color: var(--cb-cream);
}
.tabela-dane th, .tabela-dane td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--cb-line);
  text-align: center; white-space: nowrap;
}
.tabela-dane thead th {
  background: #14181C; font-family: var(--f-ui); font-weight: 800;
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cb-muted); vertical-align: bottom;
}
.tabela-dane th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  background: #14181C; text-align: left; font-weight: 700;
  font-size: .78rem; color: var(--cb-white); white-space: normal; min-width: 13rem;
}
.tabela-dane tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.tabela-dane .grupa th {
  background: var(--cb-black-ui); color: var(--cb-mustard);
  font-family: var(--f-ui); font-weight: 800; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; text-align: left;
  position: sticky; left: 0;
}
.alergen-x { color: var(--cb-white); font-weight: 800; }
.alergen-o { color: var(--cb-muted); }
.tabela-legenda {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.2rem;
  font-size: .84rem; color: var(--cb-muted);
}
.tabela-noty { margin-top: 1.6rem; font-size: .78rem; line-height: 1.65; color: var(--cb-muted); }
.tabela-noty p { margin-bottom: .7rem; }
.tabela-podpis {
  margin: 2.4rem 0 .9rem; font-family: var(--f-ui); font-weight: 800;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-mustard);
}

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .agg-grid { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .claim-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .site-nav, .site-header .btn { display: none; }
  .hamburger { display: block; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .order-strip__inner { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .lifestyle-band__overlay { background: linear-gradient(0deg, rgba(10,10,10,.92) 10%, rgba(10,10,10,.45) 60%, rgba(10,10,10,.2) 100%); align-items: flex-end; }
  .lifestyle-band__inner { padding-bottom: 2rem; }
}
@media (max-width: 520px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .drink__img img { height: 200px; }
}