/* ==========================================================================
   NAPOLI IN VIAGGIO
   Paleta z logo: granat, krem #F9EFE0, złoto #D0AD7E.
   Ikony: Phosphor (light).

   System typografii
   - Nagłówki:  Roboto, wersaliki, kontrast wag 200 i 700 (styl hero).
   - Tekst:     Jost 400, interlinia 1.7, wiersz do 62 znaków.
   - Menu i etykiety: Josefin Sans, wersaliki, rozstrzelone.
   - Akcent:    pismo odręczne (tylko etykiety, podpisy, znacznik).
   Skala: 13 / 14.5 / 16-17 / 17 / 19 / fluid H2 / fluid hero.
   Tracking: duże wersaliki ujemny, małe tytuły lekko dodatni, etykiety szeroki.

   System wizualny
   - Jeden motyw (ciemny granat), jeden akcent (złoto), ostre krawędzie (2px).
   - Ruch: tylko transform i opacity, ease-out, poniżej 300 ms dla UI.
   ========================================================================== */

:root{
  /* kolory */
  --bg: #030d1d;
  --bg-2: #07182f;
  --bg-deep: #020913;
  --text: #f6efe3;
  --muted: rgba(249,239,224,.76);
  --faint: rgba(249,239,224,.58);
  --line: rgba(249,239,224,.14);
  --line-strong: rgba(249,239,224,.3);
  --gold: #d0ad7e;
  --gold-hover: #ddbf96;
  --gold-soft: rgba(208,173,126,.12);
  --error: #ff9d94;

  /* rodziny */
  --font-display: "Roboto", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-ui: "Josefin Sans", system-ui, sans-serif;

  /* skala rozmiarów */
  --fs-hero: clamp(2.2rem, 6.4vw, 5.8rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.6rem);
  --fs-statement: clamp(1.7rem, 3.5vw, 3.1rem);
  --fs-lead: clamp(1.0625rem, .9rem + .5vw, 1.1875rem);
  --fs-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-title: 1.0625rem;
  --fs-label: .78rem;
  --fs-micro: .8125rem;

  /* interlinia */
  --lh-display: .96;
  --lh-heading: 1.04;
  --lh-title: 1.25;
  --lh-body: 1.7;
  --lh-small: 1.65;

  /* tracking */
  --tr-display: -.045em;
  --tr-heading: -.04em;
  --tr-title: .03em;
  --tr-label: .18em;
  --tr-button: .16em;

  /* wiersz */
  --measure: 62ch;
  --measure-lead: 54ch;

  --r: 2px;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-io: cubic-bezier(.77,0,.175,1);

  --container: 1200px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:400; line-height:var(--lh-body);
  font-kerning:normal; font-variant-ligatures:common-ligatures; hyphens:manual;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd,fieldset{ margin:0; padding:0; }
fieldset{ border:0; min-width:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--gold); color:var(--bg); }

/* łamanie wierszy: równe nagłówki, brak wdów i sierot w akapitach */
h1,h2,h3,.story__statement,.faq-q{ text-wrap:balance; }
p,li,figcaption{ text-wrap:pretty; }

/* cyfry: liczydła, ceny i sumy w układzie tabelarycznym */
.pkg__price,.summary__total strong,.summary__rows dd,.addon__price,.dish__num,.qty input{ font-variant-numeric:lining-nums tabular-nums; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:820px; }

.skip-link{ position:absolute; left:-999px; top:8px; z-index:1000; background:var(--gold); color:var(--bg); padding:10px 16px; }
.skip-link:focus{ left:8px; }
.nav-sentinel{ position:absolute; top:0; left:0; width:1px; height:24px; pointer-events:none; }

/* ==========================================================================
   Elementy typograficzne
   ========================================================================== */
.eyebrow{
  font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.22em;
  font-size:var(--fs-micro); line-height:1.3; color:var(--gold); margin-bottom:20px;
}
.h2{
  font-family:var(--font-display); font-weight:200; text-transform:uppercase;
  font-size:var(--fs-h2); line-height:var(--lh-heading); letter-spacing:var(--tr-heading); margin-bottom:28px;
}
.h2 strong, .hero__title strong{ display:block; font-weight:700; }
.lead{ color:var(--muted); max-width:var(--measure-lead); font-size:var(--fs-lead); line-height:1.65; }
.head{ margin-bottom:64px; }

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 34px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--font-ui); font-weight:600; font-size:var(--fs-label); letter-spacing:var(--tr-button); text-transform:uppercase; white-space:nowrap;
  transition:transform .16s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform:scale(.97); }
.btn--sm{ height:42px; padding:0 22px; font-size:.75rem; }
.btn--lg{ height:58px; padding:0 40px; }
.btn--full{ width:100%; }
.btn--gold{ background:var(--gold); color:var(--bg); }
.btn--line{ background:transparent; border-color:var(--line-strong); color:var(--text); }
@media (hover:hover){
  .btn--gold:hover{ background:var(--gold-hover); }
  .btn--line:hover{ border-color:var(--gold); color:var(--gold); }
}

/* ---------- nawigacja ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:rgba(3,13,29,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, background-color .25s ease;
}
.nav.is-stuck{ background:rgba(3,13,29,.9); border-color:var(--line); }
.nav__inner{ height:100%; display:flex; align-items:center; gap:40px; }
.nav__brand{ display:flex; align-items:center; margin-right:auto; }
.nav__brand img{ height:56px; width:auto; }
.nav__links{ display:flex; gap:44px; }
.nav__links a{
  font-family:var(--font-ui); font-weight:300; font-size:.84rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(249,239,224,.86); transition:color .2s ease;
}
@media (hover:hover){ .nav__links a:hover{ color:var(--gold); } }
.nav__burger{ display:none; width:44px; height:44px; border:0; background:none; font-size:28px; align-items:center; justify-content:center; }

.mobile-menu{
  position:absolute; left:0; right:0; top:var(--nav-h); background:var(--bg);
  border-bottom:1px solid var(--line); padding:12px 24px 28px;
  display:flex; flex-direction:column; gap:4px;
  opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
}
.mobile-menu.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s; }
.mobile-menu a:not(.btn){
  font-family:var(--font-ui); font-weight:300; text-transform:uppercase; font-size:1.5rem; letter-spacing:.1em;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.mobile-menu .btn{ margin-top:20px; }

@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:inline-flex; }
}

/* ---------- sekcje ---------- */
.section{ padding:140px 0; }

.section--tint{ background:var(--bg-2); }
@media (max-width:720px){ .section{ padding:88px 0; } .head{ margin-bottom:44px; } }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:center; padding:calc(var(--nav-h) + 32px) 0 72px; overflow:hidden; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%; filter:brightness(.78) contrast(1.08) saturate(1.05); }

/* wideo ognia (wgrywane do assets/video/, ładowane automatycznie przez hero-video.js) */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 50%;
  filter:brightness(.78) contrast(1.08) saturate(1.05);
  opacity:0; transition:opacity 1s ease; pointer-events:none;
}
.hero__video.is-ready{ opacity:1; }
.hero__shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(3,13,29,.95) 0%, rgba(3,13,29,.8) 36%, rgba(3,13,29,.32) 70%, rgba(3,13,29,.12) 100%),
    linear-gradient(180deg, rgba(3,13,29,.88) 0%, rgba(3,13,29,.4) 30%, rgba(3,13,29,0) 52%, rgba(3,13,29,0) 72%, var(--bg) 100%);
}
.hero__copy{ max-width:1000px; }
.hero__logo{ width:min(100%,210px); margin-bottom:56px; }
.hero__title{
  font-family:var(--font-display); font-weight:200; text-transform:uppercase;
  font-size:var(--fs-hero); line-height:var(--lh-display); letter-spacing:var(--tr-display); margin-bottom:32px;
}
.hero__lead{ color:rgba(249,239,224,.9); max-width:var(--measure-lead); margin-bottom:44px; font-size:var(--fs-lead); line-height:1.65; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.js .hero-in{ animation:rise .8s var(--ease-out) both; animation-delay:calc(var(--i,0) * 90ms + 80ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .hero{ align-items:flex-end; padding-bottom:56px; }
  .hero__shade{ background:linear-gradient(180deg, rgba(3,13,29,.55) 0%, rgba(3,13,29,.78) 55%, var(--bg) 100%); }
  .hero__logo{ width:150px; margin-bottom:36px; }
  .hero__bg, .hero__video{ object-position:82% 50%; }
}

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- historia ---------- */
.story{ padding-top:120px; }
.story__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:48px 24px; }
.story__statement{
  grid-column:1 / span 11; max-width:30ch;
  font-family:var(--font-display); font-weight:200; text-transform:uppercase;
  font-size:var(--fs-statement); line-height:1.06; letter-spacing:var(--tr-heading);
}
.story__statement strong{ display:block; margin-top:.18em; font-weight:700; color:var(--text); }
.story__body{ grid-column:6 / span 6; color:var(--muted); max-width:var(--measure); }
@media (max-width:900px){ .story__statement,.story__body{ grid-column:1 / -1; } }


/* ---------- sztuka alchemii ---------- */
.art__grid{ display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:start; }
.art__copy .h2{ font-size:clamp(2rem,3.8vw,3.2rem); }
.art__copy p{ color:var(--muted); margin-bottom:22px; max-width:var(--measure); }
.art__copy em{ font-style:italic; color:var(--text); }
.art__list{ display:flex; flex-direction:column; gap:44px; padding-top:8px; }
.art__list li{ display:flex; gap:24px; align-items:flex-start; }
.art__list h3, .trust__list h3{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  font-size:var(--fs-title); line-height:var(--lh-title); letter-spacing:var(--tr-title); margin-bottom:10px;
}
.art__list p, .trust__list p{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); max-width:var(--measure); }
.icon-tile{ width:52px; height:52px; flex:none; display:grid; place-items:center; border:1px solid var(--line-strong); color:var(--gold); font-size:26px; border-radius:var(--r); }
@media (max-width:900px){ .art__grid{ grid-template-columns:1fr; gap:56px; } }

/* ---------- menu ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px 40px; margin-bottom:64px; border-bottom:1px solid var(--line); }
.tab{
  position:relative; padding:0 0 18px; border:0; background:none;
  font-family:var(--font-ui); font-weight:400; font-size:var(--fs-label); letter-spacing:var(--tr-button); text-transform:uppercase; color:var(--faint);
  transition:color .2s ease;
}
.tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out); }
.tab.is-active{ color:var(--text); }
.tab.is-active::after{ transform:scaleX(1); }
@media (hover:hover){ .tab:not(.is-active):hover{ color:var(--text); } }

.menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:56px 72px; }
.menu.is-swap{ animation:rise .3s var(--ease-out) both; }
.dish{ display:grid; grid-template-columns:56px 1fr; gap:0 8px; align-items:start; }
.dish__num{ font-family:var(--font-display); font-weight:200; font-size:1.7rem; line-height:1.1; color:var(--gold); letter-spacing:-.03em; }
.dish__head{ display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; margin-bottom:8px; }
.dish__name{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  font-size:1.125rem; line-height:var(--lh-title); letter-spacing:.04em;
}
.dish__tag{
  font-family:var(--font-ui); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(208,173,126,.5); padding:2px 8px; border-radius:var(--r);
}
.dish p{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); max-width:50ch; }
@media (max-width:760px){ .menu{ grid-template-columns:1fr; gap:40px; } .dish{ grid-template-columns:44px 1fr; } }

/* ---------- konfigurator ---------- */
.config{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; }
.config__main{ display:flex; flex-direction:column; gap:64px; min-width:0; }
.group__title{
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:var(--lh-heading); letter-spacing:-.02em; color:var(--text); margin-bottom:28px;
}

.packages{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pkg{ position:relative; display:block; cursor:pointer; }
.pkg input{ position:absolute; opacity:0; inset:0; }
.pkg__body{
  display:flex; flex-direction:column; gap:12px; height:100%; padding:28px 24px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  transition:border-color .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.pkg:active .pkg__body{ transform:scale(.985); }
@media (hover:hover){ .pkg:hover .pkg__body{ border-color:var(--line-strong); } }
.pkg input:checked + .pkg__body{ border-color:var(--gold); background:var(--gold-soft); }
.pkg input:focus-visible + .pkg__body{ outline:2px solid var(--gold); outline-offset:3px; }
.pkg__top{ display:flex; justify-content:space-between; align-items:center; min-height:28px; }
.pkg__tag{ font-family:var(--font-ui); font-size:var(--fs-micro); font-weight:400; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--faint); }
.pkg__tag--gold{ font-family:var(--font-body); font-weight:500; letter-spacing:.16em; color:var(--gold); }
.pkg__check{ font-size:24px; color:var(--gold); opacity:0; transform:scale(.9); transition:opacity .2s ease, transform .2s var(--ease-out); }
.pkg input:checked + .pkg__body .pkg__check{ opacity:1; transform:none; }
.pkg__name{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:1.125rem; line-height:var(--lh-title); letter-spacing:.12em; }
.pkg__price{ font-family:var(--font-display); font-weight:200; font-size:2.6rem; letter-spacing:-.04em; line-height:1.05; }
.pkg__desc{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); }
.pkg__list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; padding-top:20px; border-top:1px solid var(--line); font-size:.875rem; line-height:1.5; color:var(--muted); }
.pkg__list span{ display:flex; align-items:center; gap:12px; }
.pkg__list i{ font-size:18px; color:var(--gold); flex:none; }

.addon{ display:flex; justify-content:space-between; gap:24px; padding:28px; border-radius:var(--r); border:1px solid var(--line); margin-bottom:12px; transition:border-color .2s ease, background-color .2s ease; }
.addon:has(input[type="checkbox"]:checked){ border-color:var(--gold); background:var(--gold-soft); }
.addon__main{ display:flex; gap:18px; align-items:flex-start; cursor:pointer; flex:1; }
.addon__main input{ width:20px; height:20px; margin-top:4px; flex:none; accent-color:var(--gold); }
.addon__text{ display:flex; flex-direction:column; gap:8px; }
.addon__text strong{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:1.0625rem; line-height:var(--lh-title); letter-spacing:var(--tr-title); }
.addon__text span{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); max-width:var(--measure); }
.addon__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:14px; flex:none; }
.addon__price{ font-family:var(--font-display); font-weight:400; color:var(--gold); font-size:1.0625rem; letter-spacing:.03em; text-align:right; white-space:nowrap; }
.addon__price small{ display:block; font-family:var(--font-body); font-weight:400; color:var(--faint); font-size:var(--fs-micro); letter-spacing:0; white-space:normal; }
.qty{ display:flex; align-items:center; gap:12px; font-family:var(--font-ui); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.qty input{ width:76px; height:42px; text-align:center; border:1px solid var(--line-strong); border-radius:var(--r); background:rgba(255,255,255,.04); font-size:1rem; font-weight:500; }
.qty input:disabled{ opacity:.4; }
.note{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); }
.note i{ font-size:20px; color:var(--gold); flex:none; margin-top:2px; }

.summary{
  position:sticky; top:calc(var(--nav-h) + 24px); padding:36px 32px; border-radius:var(--r);
  border:1px solid rgba(208,173,126,.45); background:var(--bg);
}
.summary h3{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:var(--fs-title); line-height:var(--lh-title); letter-spacing:var(--tr-title); margin-bottom:24px; }
.summary__rows{ display:flex; flex-direction:column; gap:14px; font-size:var(--fs-small); color:var(--muted); padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.summary__rows > div{ display:flex; justify-content:space-between; gap:12px; }
.summary__rows dd{ font-weight:500; color:var(--text); text-align:right; }
.summary__total{ display:flex; flex-direction:column; gap:2px; margin-bottom:20px; }
.summary__total span{ font-family:var(--font-ui); font-size:var(--fs-micro); font-weight:400; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--faint); }
.summary__total strong{ font-family:var(--font-display); font-weight:200; font-size:3.2rem; letter-spacing:var(--tr-display); line-height:1.05; }
.summary__fine{ font-size:var(--fs-micro); color:var(--faint); line-height:1.6; margin-bottom:28px; }
.summary .btn{ margin-bottom:10px; }
.summary .btn:last-child{ margin-bottom:0; }

@media (max-width:1020px){
  .config{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .packages{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .addon{ flex-direction:column; padding:24px 20px; }
  .addon__side{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}

/* ---------- gwarancje ---------- */
.trust__grid{ display:grid; grid-template-columns:5fr 7fr; gap:88px; align-items:start; }
.trust__list{ display:grid; grid-template-columns:1fr 1fr; gap:48px 40px; }
.trust__list li{ border-top:1px solid var(--line); padding-top:28px; }
.trust__list i{ display:block; font-size:34px; color:var(--gold); margin-bottom:20px; }
@media (max-width:900px){ .trust__grid{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:560px){ .trust__list{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left;
  background:none; border:0; padding:28px 0;
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:var(--lh-title); letter-spacing:.01em;
}
.faq-q i{ font-size:22px; color:var(--gold); flex:none; transition:transform .25s var(--ease-out); }
.faq-item.is-open .faq-q i{ transform:rotate(180deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease-io); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ color:var(--muted); padding:0 0 28px; max-width:var(--measure); }

/* ---------- rezerwacja ---------- */
.booking__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:88px; align-items:start; }
.contact{ display:flex; flex-direction:column; gap:12px; margin-top:44px; }
.contact a{
  display:flex; align-items:center; gap:18px; padding:18px 22px; border-radius:var(--r); border:1px solid var(--line);
  transition:border-color .2s ease, transform .16s var(--ease-out);
}
.contact a:active{ transform:scale(.98); }
@media (hover:hover){ .contact a:hover{ border-color:var(--gold); } }
.contact i{ font-size:26px; color:var(--gold); flex:none; }
.contact span{ display:flex; flex-direction:column; font-weight:500; font-size:1.0625rem; line-height:1.4; }
.contact small{ font-family:var(--font-ui); font-weight:400; font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--faint); }

.form{ border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:var(--r); padding:48px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.field label{ font-family:var(--font-ui); font-size:var(--fs-micro); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
.field input,.field select,.field textarea{
  height:54px; padding:0 16px; border-radius:var(--r); border:1px solid var(--line-strong); background:rgba(255,255,255,.04); color:var(--text);
  font-size:1rem; /* min. 16px, bez automatycznego powiększania na iOS */
  transition:border-color .2s ease, background-color .2s ease;
}
.field select option{ background:var(--bg); color:var(--text); }
.field textarea{ height:auto; padding:16px; resize:vertical; min-height:110px; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,.07); }
.field.has-error input{ border-color:var(--error); }
.field__err{ color:var(--error); font-size:.875rem; margin-top:-4px; }
.config-box{ border:1px dashed rgba(208,173,126,.55); border-radius:var(--r); padding:18px 22px; margin-bottom:24px; display:flex; flex-direction:column; gap:6px; }
.config-box__label{ font-family:var(--font-ui); font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--gold); }
.config-box p{ font-weight:500; line-height:1.55; }
.config-box a{ font-size:.875rem; color:var(--gold); text-decoration:underline; text-underline-offset:4px; width:fit-content; }
.check{ display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; cursor:pointer; font-size:var(--fs-small); color:var(--muted); line-height:var(--lh-small); }
.check input{ width:20px; height:20px; margin-top:3px; flex:none; accent-color:var(--gold); }
.form__hint{ text-align:center; font-size:var(--fs-micro); color:var(--faint); line-height:1.6; margin-top:18px; }
.success{ display:flex; gap:18px; margin-top:28px; padding:24px; border-radius:var(--r); border:1px solid var(--gold); background:var(--gold-soft); }
.success > i{ font-size:30px; color:var(--gold); flex:none; }
.success h3{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:var(--fs-title); line-height:var(--lh-title); letter-spacing:var(--tr-title); margin-bottom:6px; }
.success p{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); margin-bottom:16px; }
.success__actions{ display:flex; flex-wrap:wrap; gap:10px; }
[hidden]{ display:none !important; }

@media (max-width:980px){ .booking__grid{ grid-template-columns:1fr; gap:56px; } }
@media (max-width:560px){ .form{ padding:28px 20px; } .form__row{ grid-template-columns:1fr; gap:0; } }

/* ---------- stopka ---------- */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding:88px 0 36px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:56px; padding-bottom:56px; }
.footer__brand img{ width:170px; margin-bottom:24px; }
.footer__brand p{ color:var(--muted); font-size:var(--fs-small); max-width:36ch; line-height:var(--lh-small); }
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col h4{ font-family:var(--font-ui); font-weight:600; font-size:var(--fs-micro); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.footer__col a{ font-size:1rem; color:var(--muted); transition:color .2s ease; }
@media (hover:hover){ .footer__col a:hover{ color:var(--text); } }
.footer__bottom{ border-top:1px solid var(--line); padding-top:28px; color:var(--faint); font-size:var(--fs-micro); display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.footer__bottom a{ transition:color .2s ease; }
@media (hover:hover){ .footer__bottom a:hover{ color:var(--text); } }
@media (max-width:700px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hero-in, .menu.is-swap{ animation:none; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   Dopracowanie: ruch, pasek CTA, strona prawna
   ========================================================================== */


/* hero: paralaksa zdjęcia przy przewijaniu (animacja sterowana przewijaniem, bez JS) */
@supports (animation-timeline: scroll()) {
  .hero__media{ top:-6%; bottom:auto; height:112%; animation:heroParallax linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
  @keyframes heroParallax{ from{ transform:translateY(0); } to{ transform:translateY(7%); } }
}
@media (prefers-reduced-motion:reduce){
  .hero__media{ animation:none !important; }
}

/* przyklejony pasek rezerwacji (telefon) */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(3,13,29,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s var(--ease-out);
}
.cta-bar.is-visible{ transform:none; }
.cta-bar .btn{ flex:1; height:48px; }
.cta-bar__call{ width:48px; height:48px; flex:none; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:var(--r); font-size:22px; color:var(--gold); }
@media (max-width:900px){
  .cta-bar{ display:flex; }
  .footer{ padding-bottom:calc(36px + 72px); }
}

/* strona prawna */
.legal{ padding-top:calc(var(--nav-h) + 56px); padding-bottom:96px; }
.legal .h2{ margin-bottom:36px; }
.legal h2:not(.h2){ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:var(--fs-title); letter-spacing:var(--tr-title); margin:44px 0 12px; }
.legal p{ color:var(--muted); margin-bottom:16px; max-width:var(--measure); }
.legal a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.legal__draft{ border:1px dashed rgba(208,173,126,.55); padding:14px 18px; color:var(--gold); margin-bottom:40px; font-size:var(--fs-small); border-radius:var(--r); }

/* przycisk dźwięku wideo w hero */
.hero__sound{
  position:absolute; right:24px; bottom:28px; z-index:3; display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 16px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:rgba(3,13,29,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--text);
  font-family:var(--font-ui); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .5s ease, transform .5s var(--ease-out), border-color .2s ease;
}
.hero__sound.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.hero__sound i{ font-size:20px; color:var(--gold); }
.hero__sound:active{ transform:scale(.97); }
@media (hover:hover){ .hero__sound:hover{ border-color:var(--gold); } }
@media (max-width:900px){ .hero__sound{ right:16px; bottom:16px; } }

/* pakiet Grande: wycena indywidualna */
.pkg__price--quote{ font-size:1.6rem; line-height:1.15; letter-spacing:-.02em; min-height:2.9rem; display:flex; align-items:flex-end; }
.summary__total strong.is-quote{ font-size:1.7rem; letter-spacing:-.02em; line-height:1.25; }

.grande-box{ border:1px solid rgba(208,173,126,.45); border-radius:var(--r); padding:32px; background:var(--gold-soft); }
.grande-box .group__title{ margin-bottom:12px; }
.grande-box__lead{ color:var(--muted); font-size:var(--fs-small); line-height:var(--lh-small); max-width:var(--measure); margin-bottom:28px; }
.grande-box__row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grande-box .field{ margin-bottom:8px; }
.flavors{ margin-top:20px; }
.flavors__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.flavors__title{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; font-size:var(--fs-title); letter-spacing:var(--tr-title); }
.flavors__count{ font-family:var(--font-ui); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.flavors.has-error .flavors__count{ color:var(--error); }
.flavors__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; }
.flavor{ display:flex; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:var(--fs-small); transition:border-color .2s ease, background-color .2s ease; }
.flavor input{ width:18px; height:18px; flex:none; accent-color:var(--gold); }
.flavor:has(input:checked){ border-color:var(--gold); background:rgba(208,173,126,.12); }
.flavor:has(input:disabled){ opacity:.45; cursor:not-allowed; }
@media (max-width:640px){ .grande-box{ padding:24px 20px; } .grande-box__row, .flavors__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Dopracowanie ruchu i interakcji (wg zasad Emila Kowalskiego)
   ========================================================================== */

/* telefon: bez opóźnienia dotyku i bez szarej poświaty po tapnięciu; fałszywy bold/italic wyłączony */
html{ -webkit-tap-highlight-color:transparent; }
body{ font-synthesis:none; }
a, button, label, summary, input, select{ touch-action:manipulation; }
.btn, .tab, .pkg, .flavor, .addon__main, .faq-q, .hero__sound, .nav__burger{ -webkit-user-select:none; user-select:none; }

/* pola kliknięcia min. 44 px (linki menu i zakładki są wizualnie małe) */
.nav__links a{ display:inline-flex; align-items:center; min-height:44px; }
.tab{ min-height:44px; padding-top:12px; }
.btn--sm{ height:44px; }
.footer__col a{ display:inline-flex; align-items:center; min-height:40px; }

/* feedback przy naciśnięciu dla pozostałych elementów klikalnych (subtelnie, 0.98) */
.addon, .flavor, .faq-q, .nav__burger{ transition-property:transform, border-color, background-color, color; transition-duration:.16s, .2s, .2s, .2s; transition-timing-function:var(--ease-out); }
.addon:has(.addon__main:active){ transform:scale(.995); }
.flavor:active{ transform:scale(.98); }
.faq-q:active{ transform:scale(.995); }
.nav__burger:active{ transform:scale(.92); }

/* elementy, które pojawiają się z display:none, wchodzą płynnie zamiast skakać */
.grande-box, .success, .summary__rows > div, .field__err, .flavors__count{
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
@starting-style{
  .grande-box{ opacity:0; transform:translateY(10px); }
  .success{ opacity:0; transform:translateY(8px); }
  .summary__rows > div{ opacity:0; transform:translateY(6px); }
  .field__err{ opacity:0; }
}

/* zmiana zakładki menu: lekkie rozmycie maskuje "podmianę" dwóch układów (crossfade bez widocznego szwu) */
@keyframes swap{
  from{ opacity:0; transform:translateY(8px); filter:blur(3px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.menu.is-swap{ animation:swap .32s var(--ease-out) both; }

/* "ogranicz ruch": mniej i łagodniej, nie zero. Zostają krótkie zaniki, znikają ruchy i rozmycia */
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:0; transform:none; transition:opacity .35s ease; transition-delay:0s; }
  .js .reveal.is-in{ opacity:1; }
  .js .hero-in{ animation:fadeOnly .4s ease both; animation-delay:0s; }
  .menu.is-swap{ animation:fadeOnly .2s ease both; }
  @keyframes fadeOnly{ from{ opacity:0; } to{ opacity:1; } }
  @starting-style{ .grande-box, .success, .summary__rows > div{ transform:none; } }
}

/* certyfikowani pizzaiolo */
.cert{ border:1px solid var(--line); background:var(--bg-2); padding:44px 40px; border-radius:2px; }
.cert__seal{ display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:30px; margin-bottom:28px; }
.cert__label{ font-family:var(--font-ui); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.cert__name{ font-weight:200; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.05; }
.cert__role{ color:var(--muted); margin:8px 0 28px; }
.cert__list{ border-top:1px solid var(--line); }
.cert__list li{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:var(--fs-small); }
.cert__list i{ color:var(--gold); font-size:18px; flex:none; }
#pizzaiolo .btn i{ margin-left:10px; font-size:18px; }
@media (max-width:900px){ .cert{ padding:32px 24px; } }

/* informacja o cookies */
.footer__legal{ display:flex; gap:24px; flex-wrap:wrap; }
.cookie{ position:fixed; z-index:60; left:16px; right:16px; bottom:16px; max-width:640px; display:flex; gap:20px; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:2px; box-shadow:0 12px 40px rgba(0,0,0,.45); transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.cookie[hidden]{ display:none; }
.cookie p{ font-size:var(--fs-small); line-height:1.5; color:var(--muted); }
.cookie a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.cookie .btn{ flex:none; }
.cookie.is-out{ opacity:0; transform:translateY(8px); }
@starting-style{ .cookie{ opacity:0; transform:translateY(12px); } }
@media (max-width:640px){ .cookie{ flex-direction:column; align-items:stretch; bottom:calc(84px + env(safe-area-inset-bottom)); } }
.legal__list{ margin:0 0 16px 1.1em; list-style:disc; color:var(--muted); max-width:var(--measure); }
.legal__list li{ margin-bottom:8px; }
.legal__list strong{ color:var(--text); font-weight:500; }

.footer__bottom a, .config-box a{ display:inline-flex; align-items:center; min-height:44px; }
.footer__legal{ gap:0 24px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__hint a{ text-decoration:underline; text-underline-offset:3px; }