/* ═══════════════════════════════════════════════════════════
   HUMMER PINK — neon-noir Warszawa
   canvas: near-black · glow: hot pink → magenta → champagne
   display: Unbounded · body: Sofia Sans · labels: IBM Plex Mono
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:      #08050c;
  --ink-2:    #0f0914;
  --ink-3:    #170d1e;
  --white:    #f7edf3;
  --muted:    #a3919f;
  --pink:     #ff2e9d;
  --pink-soft:#ff8ac9;
  --magenta:  #c9187a;
  --gold:     #f0c27f;
  --grad: linear-gradient(96deg, var(--pink-soft) 0%, var(--pink) 42%, var(--gold) 105%);
  --font-display: "Unbounded", sans-serif;
  --font-body: "Sofia Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --nav-h: 76px;
  /* natywne kontrolki (date picker, scrollbary) w ciemnym motywie — biały kalendarz
     gryzł się z klimatem strony */
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { background: var(--ink); }

body {
  font-family: var(--font-body);
  color: var(--white);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: var(--ink); }

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* mono eyebrow markers — "—— ROZDZIAŁ 01" */
.section-marker, .hero__eyebrow, .chapter__marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--pink-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.rule { display: inline-block; width: 46px; height: 1px; background: var(--grad); flex: none; }
/* DASHE (myślniki) tylko w sekcji Rezerwacja (.section-marker--center) — na życzenie
   (2026-07-07) usunięte przy rozdziałach/markerach. W Rezerwacji symetrycznie: 46px z obu stron. */
.section-marker:not(.section-marker--center) .rule,
.hero__eyebrow .rule,
.chapter__marker .rule { display: none; }
.section-marker--center { justify-content: center; }
.section-marker--center::after {
  content: ""; width: 46px; height: 1px; background: var(--grad); flex: none;
}

.section-title {
  font-size: clamp(2rem, 5.2vw, 4.2rem);
  letter-spacing: -.01em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.section-lead { max-width: 46ch; color: var(--muted); font-size: 18px; font-weight: 300; }

/* ═══════════ PRELOADER ═══════════ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 22px;
}
/* logo tekstowe podczas ładowania — "RóżowaLimuzyna.pl" jak w nawigacji (Różowa+kropka
   różowe, Limuzyna+pl białe). Zastąpiło wideo logo-loop.mp4 (user 2026-07-07) */
.preloader__brand {
  display: flex; align-items: center; gap: clamp(7px, 1.8vw, 16px);
  font-family: var(--font-display); font-weight: 900; letter-spacing: .02em;
  font-size: clamp(1rem, 4.5vw, 2.9rem); color: var(--white);
  max-width: 94vw;
}
.preloader__mark-img { height: clamp(30px, 7.5vw, 70px); width: auto; flex: none; filter: drop-shadow(0 0 10px rgba(255,46,157,.6)); }
.preloader__count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .3em; }
.preloader__bar { width: min(260px, 60vw); height: 2px; background: #241627; overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0%; background: var(--grad); }

/* ═══════════ CURSOR ═══════════ */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 150; border-radius: 50%; }
.cursor { width: 8px; height: 8px; background: var(--pink); mix-blend-mode: screen; opacity: 0; }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255, 46, 157, .5); transition: transform .25s ease, opacity .25s; opacity: 0; }
@media (hover: none) { .cursor, .cursor-ring { display: none; } }

/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 40px;
  padding: 0 clamp(20px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(8,5,12,.85), rgba(8,5,12,0));
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-solid { background: rgba(8,5,12,.9); backdrop-filter: blur(14px); }

.nav__logo { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: .14em; text-decoration: none; color: var(--white); display: flex; align-items: center; gap: 7px; }
/* znaczek = przezroczysty PNG (alpha z luminancji klatki logo-nav.mp4) — wideo miało
   czarny prostokąt w tle (h264 bez kanału alfa), feedback 2026-07-07 */
.nav__logo-mark { height: 42px; width: auto; pointer-events: none; margin-right: 4px; flex: none; filter: drop-shadow(0 0 7px rgba(255,46,157,.55)); }
.nav__logo-dot { color: var(--gold); font-size: 10px; }
.nav__logo-word--pink { color: var(--pink); text-shadow: 0 0 22px rgba(255,46,157,.65); }

.nav__links { display: flex; gap: 34px; margin-left: auto; }
.nav__links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; position: relative; padding: 6px 0;
  transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--grad); transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__tel {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--white); text-decoration: none;
  border: 1px solid rgba(255,46,157,.45); border-radius: 999px; padding: 9px 18px;
  transition: background .3s, box-shadow .3s;
}
.nav__tel:hover { background: rgba(255,46,157,.12); box-shadow: 0 0 24px rgba(255,46,157,.35); }

.nav__burger { display: none; background: none; border: 0; width: 34px; height: 28px; position: relative; cursor: pointer; }
.nav__burger i { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--white); transition: .3s; }
.nav__burger i:nth-child(1) { top: 5px; }
.nav__burger i:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__burger i:nth-child(3) { bottom: 5px; }
.nav__burger.is-open i:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger.is-open i:nth-child(2) { opacity: 0; }
.nav__burger.is-open i:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,5,12,.97);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--white); text-decoration: none; }
.mobile-menu__tel { color: var(--pink) !important; font-family: var(--font-mono) !important; font-size: 16px !important; }

/* ═══════════ HERO ═══════════ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }

.hero__media { position: absolute; inset: -8% 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.hero__shade { position: absolute; inset: 0; }
.hero__shade--left { background: linear-gradient(92deg, rgba(8,5,12,.94) 6%, rgba(8,5,12,.55) 38%, rgba(8,5,12,0) 62%); }
/* dół hero gaśnie w czerń długim ogonem — zlewa się z wyrastającą z czerni górą
   rozdziału (.chapter__pin::before) w jeden płynny, ciemny szew */
.hero__shade--bottom { background: linear-gradient(180deg,
  rgba(8,5,12,.35) 0%, rgba(8,5,12,0) 22%, rgba(8,5,12,0) 46%,
  rgba(8,5,12,.14) 58%, rgba(8,5,12,.34) 68%, rgba(8,5,12,.56) 77%,
  rgba(8,5,12,.76) 85%, rgba(8,5,12,.92) 93%, var(--ink) 100%); }
.hero__dark { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }

.hero__content { position: relative; z-index: 2; padding: calc(var(--nav-h) + 4vh) clamp(20px, 5vw, 72px) 12vh; max-width: min(94vw, 1050px); }

.hero__title { font-size: clamp(2.9rem, 9.6vw, 8.4rem); font-weight: 900; letter-spacing: -.015em; text-transform: uppercase; }
.hero__title-line { display: block; overflow: hidden; white-space: nowrap; }
.hero__title-line--grad { filter: drop-shadow(0 0 34px rgba(255, 46, 157, .45)); }
.hero__title-line .ch { display: inline-block; will-change: transform; }

.hero__lead { margin: 30px 0 38px; max-width: 44ch; font-size: clamp(16px, 1.6vw, 19px); font-weight: 300; color: #d8c9d4; }

.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }

.btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; padding: 17px 34px; display: inline-block;
  transition: box-shadow .3s, transform .3s, background .3s; will-change: transform;
}
.btn--grad { background: var(--grad); color: #180410; font-weight: 500; box-shadow: 0 0 34px rgba(255,46,157,.35); }
.btn--grad:hover { box-shadow: 0 0 58px rgba(255,46,157,.65); }
.btn--ghost { border: 1px solid rgba(247,237,243,.35); color: var(--white); }
.btn--ghost:hover { border-color: var(--pink); box-shadow: 0 0 30px rgba(255,46,157,.25); }
.btn--xl { padding: 22px 44px; font-size: 14px; }

.chips { list-style: none; display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #e5d5e0; border: 1px solid rgba(247,237,243,.16); border-radius: 999px;
  padding: 9px 16px; display: flex; align-items: center; gap: 9px;
  background: rgba(8,5,12,.45); backdrop-filter: blur(6px);
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--pink); flex: none; }

.hero__scrollcue {
  position: absolute; z-index: 2; right: clamp(16px, 3vw, 42px); bottom: 42px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.hero__scrollcue span {
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .38em; color: var(--muted); text-transform: uppercase;
}
.hero__scrollcue i { width: 1px; height: 64px; background: linear-gradient(180deg, var(--pink), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity:.4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ═══════════ CHAPTER 01 — pinned stages ═══════════ */
/* z-index: rozdział nasuwa się NAD przypięte hero (overlap) */
.chapter { position: relative; z-index: 3; }
.chapter__pin { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
/* miękkie wtopienie góry kadru w noc — bez twardej krawędzi zdjęcia, gdy rozdział
   wjeżdża po zniknięciu dymu (feedback: żadnych linii/granic; 62vh z długim,
   wykładniczym ogonem = oko nie znajduje miejsca, gdzie zaczyna się zdjęcie) */
.chapter__pin::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 62vh;
  background: linear-gradient(180deg,
    var(--ink) 0%, rgba(8,5,12,.98) 8%, rgba(8,5,12,.93) 18%,
    rgba(8,5,12,.84) 28%, rgba(8,5,12,.7) 40%, rgba(8,5,12,.54) 52%,
    rgba(8,5,12,.38) 64%, rgba(8,5,12,.24) 75%, rgba(8,5,12,.13) 84%,
    rgba(8,5,12,.06) 91%, rgba(8,5,12,.02) 96%, rgba(8,5,12,0) 100%);
  z-index: 5; pointer-events: none;
}

.chapter__marker { position: absolute; top: calc(var(--nav-h) + 26px); left: clamp(20px, 5vw, 72px); z-index: 6; margin: 0; }

.chapter__ghost {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(11rem, 34vw, 30rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,46,157,.22);
  z-index: 3; pointer-events: none; white-space: nowrap; will-change: transform;
}

.stage { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: clip-path, transform; }
.stage.is-active { opacity: 1; visibility: visible; }
.stage img { width: 100%; height: 100%; object-fit: cover; will-change: transform, filter; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,12,.5), rgba(8,5,12,.06) 30%, rgba(8,5,12,.72) 92%); }

.stage figcaption {
  position: absolute; left: clamp(20px, 5vw, 72px); bottom: clamp(36px, 8vh, 84px); z-index: 4;
  display: flex; flex-direction: column; gap: 14px; max-width: 80vw;
}
.stage__chip {
  align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #ffd9ee; border: 1px solid rgba(255,46,157,.4); border-radius: 999px;
  padding: 8px 16px; display: flex; align-items: center; gap: 9px; background: rgba(8,5,12,.5); backdrop-filter: blur(8px);
}
.stage__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--pink); }
.stage__word { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -.01em; }
.stage__note { font-style: normal; font-weight: 300; color: #d8c9d4; font-size: 16px; }

/* trzeci kadr używa zdjęcia hero, ale w innym kadrze — nie dubluje hero */
.stage--neon img { object-position: 32% 74%; }

/* pozioma świecąca krawędź — góra rozdziału nasuwającego się na hero */
.edge-beam {
  position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 8vh, 120px);
  transform: translateY(-50%); z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,46,157,.5) 45%, rgba(255,138,201,.85) 50%, rgba(255,46,157,.5) 55%, transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* świecąca krawędź kurtyny (wipe) między kadrami */
.wipe-beam {
  position: absolute; top: -5%; bottom: -5%; left: 0; width: clamp(90px, 9vw, 160px);
  z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,46,157,.55) 45%, rgba(255,138,201,.9) 50%, rgba(255,46,157,.55) 55%, transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  will-change: transform;
}

.chapter__progress { position: absolute; right: clamp(18px, 3vw, 44px); top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.chapter__progress i { width: 5px; height: 26px; border-radius: 3px; background: rgba(247,237,243,.16); transition: background .3s; }
.chapter__progress i.on { background: var(--grad); box-shadow: 0 0 12px rgba(255,46,157,.7); }

/* ═══════════ INTERLUDE ═══════════ */
.interlude { padding: clamp(96px, 15vh, 168px) clamp(20px, 6vw, 90px); text-align: left; }
.interlude__statement { font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 800; letter-spacing: -.015em; max-width: 14ch; }
.interlude__statement .line { display: block; overflow: hidden; }
.interlude__statement .w { display: inline-block; will-change: transform, opacity; }
.interlude__para { margin-top: 40px; max-width: 42ch; color: var(--muted); font-size: 19px; font-weight: 300; }

/* marquee */
.marquee { overflow: hidden; border-top: 1px solid rgba(255,46,157,.22); border-bottom: 1px solid rgba(255,46,157,.22); padding: 20px 0; background: rgba(255,46,157,.03); }
.marquee__track { display: flex; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; }
.marquee__track span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .34em; color: var(--pink-soft); text-transform: uppercase; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sekcje treściowe nie rozjeżdżają się na ultrawide */
.interior, .fleet, .packages, .interlude { max-width: 1720px; margin-inline: auto; }
.finale__sub, .bookform, .finale__actions, .stats { margin-inline: auto; }
.footer { max-width: 1720px; margin-inline: auto; }

/* ═══════════ INTERIOR — slider zakładkowy ═══════════ */
.interior { padding: clamp(96px, 14vh, 156px) clamp(20px, 5vw, 72px); }
.interior__head { max-width: 720px; margin-bottom: 56px; }

/* ═══════════ FSLIDER — futurystyczny slider zakładkowy ═══════════ */
.fslider {
  display: grid; grid-template-columns: minmax(320px, 480px) 1fr;
  border: 1px solid rgba(255,46,157,.22); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23,13,30,.55), rgba(8,5,12,.8));
  box-shadow: 0 40px 110px -50px rgba(255,46,157,.4);
}

.fslider__tabs { display: flex; flex-direction: column; border-right: 1px solid rgba(255,46,157,.18); }
.ftab {
  position: relative; flex: 1; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(247,237,243,.08);
  padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start;
  transition: background .3s;
}
.ftab:last-of-type { border-bottom: 0; }
.ftab:hover { background: rgba(255,46,157,.05); }
.ftab.is-active { background: linear-gradient(90deg, rgba(255,46,157,.1), transparent 75%); }
.ftab::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad); transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ftab.is-active::before { transform: scaleY(1); }

.ftab__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); padding-top: 3px; transition: color .3s, text-shadow .3s; }
.ftab.is-active .ftab__num { color: var(--pink); text-shadow: 0 0 14px rgba(255,46,157,.8); }

.ftab__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ftab__title { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--muted); letter-spacing: .01em; transition: color .3s; }
.ftab.is-active .ftab__title { color: var(--white); }
.ftab__desc {
  color: #cbbcc8; font-weight: 300; font-size: 14px; line-height: 1.55;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s .1s;
}
.ftab.is-active .ftab__desc { max-height: 90px; opacity: 1; }

.ftab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(247,237,243,.06); opacity: 0; }
.ftab.is-active .ftab__bar { opacity: 1; }
.ftab__bar b { display: block; height: 100%; width: 0%; background: var(--grad); box-shadow: 0 0 12px rgba(255,46,157,.7); }

.fslider__stage { position: relative; overflow: hidden; min-height: 520px; }
.fslide { position: absolute; inset: 0; visibility: hidden; }
.fslide.is-active { visibility: visible; }
.fslide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* HUD-owe narożniki */
.fs-corner { position: absolute; width: 26px; height: 26px; z-index: 6; pointer-events: none; }
.fs-corner::before, .fs-corner::after { content: ""; position: absolute; background: var(--pink); box-shadow: 0 0 10px rgba(255,46,157,.8); }
.fs-corner::before { width: 100%; height: 2px; }
.fs-corner::after { width: 2px; height: 100%; }
.fs-corner--tl { top: 14px; left: 14px; }
.fs-corner--tr { top: 14px; right: 14px; transform: rotate(90deg); }
.fs-corner--br { bottom: 14px; right: 14px; transform: rotate(180deg); }
.fs-corner--bl { bottom: 14px; left: 14px; transform: rotate(270deg); }

.slider__beam {
  position: absolute; top: -5%; bottom: -5%; left: 0; width: clamp(70px, 8vw, 130px);
  z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,46,157,.55) 45%, rgba(255,138,201,.9) 50%, rgba(255,46,157,.55) 55%, transparent);
  filter: blur(2px); mix-blend-mode: screen; will-change: transform;
}

.fslider__count {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 6;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--muted);
  background: rgba(8,5,12,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,46,157,.3); border-radius: 999px; padding: 8px 14px;
}
.fslider__count b { color: var(--pink); font-weight: 500; }

/* ═══════════ FLEET — karty-plakaty ═══════════ */
.fleet { padding: clamp(96px, 14vh, 156px) clamp(20px, 5vw, 72px); }
.fleet__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px; margin-top: 64px;
}
/* Karty floty: zdjęcie-nad-tekstem (poziome fotki aut nie są cięte do pionowego plakatu).
   Ten sam układ na wszystkich szerokościach — desktop już nie kadruje limuzyn na wąski pion. */
.card {
  display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer;
  position: relative; border: 1px solid rgba(247,237,243,.1); border-radius: 16px;
  overflow: hidden;
  background: var(--ink-2);
  transition: border-color .35s, transform .35s, box-shadow .35s;
  will-change: transform;
}
.card:hover { border-color: rgba(255,46,157,.65); transform: translateY(-8px); box-shadow: 0 34px 80px -34px rgba(255,46,157,.55); }

.card__media { position: relative; overflow: hidden; }
.card__bg {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
/* kadrowanie per-auto w ramce 16/10 — cała bryła auta w kadrze */
.card--flag .card__bg { object-position: 70% 42%; }                       /* gen-hero-a 2.36:1 — auto po prawej (grill) */
.card[href="lincoln-pink.html"] .card__bg { object-position: 50% 58%; }   /* długa limuzyna 2.01:1 — nisko, żeby zostały koła */
.card[href="chrysler-barbie.html"] .card__bg { object-position: 50% 50%; }
.card__bg--tone { filter: saturate(1.2) contrast(1.06) brightness(.8) hue-rotate(-6deg); }
.card:hover .card__bg { transform: scale(1.06); }

/* delikatna winieta na dole zdjęcia + różowa poświata (tekst jest już POD zdjęciem) */
.card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,5,12,0) 55%, rgba(8,5,12,.5) 100%),
    radial-gradient(90% 30% at 50% 112%, rgba(255,46,157,.24), transparent 70%);
}

.card__tag {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .26em;
  background: var(--grad); color: #180410; border-radius: 999px; padding: 6px 12px; font-weight: 500;
  box-shadow: 0 0 24px rgba(255,46,157,.5);
}
.card--flag { border-color: rgba(255,46,157,.45); }

.card__body { position: relative; z-index: 2; padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.card__body h3 { font-size: 20px; font-weight: 800; letter-spacing: .01em; margin-bottom: 7px; }
.card__body > p { color: #cbbcc8; font-weight: 300; font-size: 14px; }

.card__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 14px; border-top: 1px solid rgba(247,237,243,.16); padding-top: 14px; }
.card__specs dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.card__specs dd { font-family: var(--font-mono); font-size: 13px; color: var(--white); }

.card__price { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-top: auto; }
.card__price b { color: var(--pink); font-size: 21px; font-weight: 500; text-shadow: 0 0 18px rgba(255,46,157,.55); }

/* ═══════════ PACKAGES ═══════════ */
.packages { padding: clamp(96px, 14vh, 156px) clamp(20px, 5vw, 72px); }
.packages__list { margin-top: 64px; border-top: 1px solid rgba(247,237,243,.1); }
.pkg {
  display: grid; grid-template-columns: 110px 1.1fr 2fr auto; gap: 26px; align-items: center;
  padding: 30px 10px; border-bottom: 1px solid rgba(247,237,243,.1);
  transition: background .3s, padding-left .3s;
}
.pkg:hover { background: rgba(255,46,157,.05); padding-left: 22px; }
.pkg--hot { background: linear-gradient(90deg, rgba(255,46,157,.09), transparent 60%); }
.pkg__time { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.pkg__name { font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 600; }
.pkg__desc { color: var(--muted); font-weight: 300; font-size: 15px; }
.pkg__price { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: right; display: flex; flex-direction: column; gap: 3px; }
.pkg__price b { color: var(--pink); font-size: 17px; font-weight: 500; }
.pkg__price em { font-style: normal; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
/* Standard / More Fun: cena per-auto — 3 wiersze "AUTO  cena", wyrównane do prawej */
.pkg__price--multi { gap: 7px; }
.pkg__price--multi > span { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; }
.pkg__price--multi em { color: var(--muted); min-width: 62px; text-align: left; }

.packages__clubs { margin-top: 44px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); line-height: 2; }
.packages__clubs b { color: var(--pink-soft); font-weight: 500; }
.packages__clubs span { display: block; font-size: 11px; color: #7e6f7c; }

/* ═══════════ FINALE ═══════════ */
.finale { position: relative; text-align: center; padding: clamp(115px, 18vh, 204px) clamp(20px, 5vw, 72px) 40px; overflow: hidden; }
.finale__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 44% at 50% 108%, rgba(255,46,157,.32), transparent 70%),
    radial-gradient(40% 30% at 82% 96%, rgba(240,194,127,.12), transparent 70%);
}
.finale__title { font-size: clamp(3rem, 9.5vw, 8rem); font-weight: 900; letter-spacing: -.015em; }
.finale__sub { margin: 26px auto 48px; max-width: 44ch; color: var(--muted); font-weight: 300; font-size: 18px; }
.finale__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ═══════════ FORMULARZ REZERWACJI ═══════════ */
.bookform {
  max-width: 760px; text-align: left;
  border: 1px solid rgba(255,46,157,.28); border-radius: 20px;
  padding: clamp(22px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(23,13,30,.72), rgba(8,5,12,.85));
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 120px -50px rgba(255,46,157,.45);
}
.bookform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.bookform label {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pink-soft);
}
.bookform__wide { grid-column: 1 / -1; }
.bookform input, .bookform textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--white);
  background: rgba(8,5,12,.65); border: 1px solid rgba(247,237,243,.16); border-radius: 10px;
  padding: 13px 15px; outline: none; transition: border-color .25s, box-shadow .25s;
  resize: vertical; min-width: 0;
  color-scheme: dark;
}
.bookform input::placeholder, .bookform textarea::placeholder { color: #6d5f6b; }
.bookform input:focus, .bookform textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,46,157,.18), 0 0 24px rgba(255,46,157,.25); }
.bookform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bookform__footer { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
/* border:0 tylko dla natywnego <button> (submit) — telefon to <a.btn--ghost> i ma
   zachować biały border (desktop + mobile), user 2026-07-08 */
.bookform__footer button.btn { border: 0; cursor: pointer; }
.bookform__status { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--gold); min-height: 1em; }
.bookform__status.is-error { color: #ff7a7a; }
.bookform__status.is-ok { color: #9dffb0; }

/* ═══════════ FAB — pływający przycisk rezerwacji ═══════════ */
.fab {
  position: fixed; right: clamp(16px, 2.5vw, 34px); bottom: clamp(16px, 3vh, 30px); z-index: 85;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: #180410; font-weight: 500;
  background: var(--grad); border-radius: 999px; padding: 16px 26px;
  box-shadow: 0 10px 40px -6px rgba(255,46,157,.65);
  opacity: 0; transform: translateY(90px); pointer-events: none;
  transition: opacity .4s, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fab:hover { box-shadow: 0 14px 55px -4px rgba(255,46,157,.85); transform: translateY(-3px); }

.stats { list-style: none; display: flex; justify-content: center; gap: clamp(30px, 7vw, 90px); flex-wrap: wrap; margin: 90px 0 110px; }
.stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

.footer {
  border-top: 1px solid rgba(247,237,243,.1); padding-top: 30px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #7e6f7c;
}
.footer a { color: var(--pink-soft); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ═══════════ BURST — mgła okrywająca scenę (igloo-style) ═══════════ */
.burst { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 1; }
.burst canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* prawdziwa wolumetryczna mgła (wideo z Higgsfield na czarnym tle):
   mix-blend-mode: screen — czerń znika, zostaje sam dym */
.burst video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0;
}

/* ═══════════ SOUND TOGGLE — jak "Sound: On" na igloo ═══════════ */
.sound-toggle {
  position: fixed; left: clamp(16px, 2.5vw, 34px); bottom: clamp(16px, 3vh, 30px); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,5,12,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(247,237,243,.18); border-radius: 999px; padding: 11px 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; color: var(--muted);
  cursor: pointer; transition: color .3s, border-color .3s;
}
.sound-toggle:hover { color: var(--white); border-color: rgba(255,46,157,.5); }
.sound-toggle i { width: 6px; height: 6px; border-radius: 50%; background: #5c4f5a; transition: background .3s, box-shadow .3s; }
.sound-toggle.is-on { color: var(--white); border-color: rgba(255,46,157,.5); }
.sound-toggle.is-on i { background: var(--grad); box-shadow: 0 0 12px rgba(255,46,157,.9); }

/* ═══════════ PODSTRONY AUT ═══════════ */
.carhero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: 8vh; }
.carhero__media { position: absolute; inset: 0; z-index: 0; }
.carhero__media img { width: 100%; height: 100%; object-fit: cover; }
.carhero__content { position: relative; z-index: 2; padding: calc(var(--nav-h) + 4vh) clamp(20px, 5vw, 72px) 0; max-width: 900px; }
.carhero__title { font-size: clamp(2.6rem, 7.5vw, 6rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; margin-bottom: 22px; }
.carhero__price {
  position: absolute; right: clamp(20px, 4vw, 60px); bottom: clamp(24px, 6vh, 60px); z-index: 2;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: right;
  background: rgba(8,5,12,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,46,157,.35);
  border-radius: 14px; padding: 14px 20px;
}
.carhero__price b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.carhero__price span { font-size: 10px; letter-spacing: .2em; }

.carbody {
  display: grid; grid-template-columns: minmax(320px, 44%) 1fr;
  gap: clamp(40px, 6vw, 90px); align-items: start;
  max-width: 1720px; margin-inline: auto;
  padding: clamp(90px, 14vh, 160px) clamp(20px, 5vw, 72px);
}
.carbody__copy { position: sticky; top: calc(var(--nav-h) + 40px); }
.speclist { list-style: none; margin-top: 40px; border-top: 1px solid rgba(247,237,243,.1); }
.speclist li { display: flex; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid rgba(247,237,243,.1); }
.speclist b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .2em; color: var(--pink); flex: 0 0 110px; }
.speclist span { color: #cbbcc8; font-weight: 300; }
.carbody__note { margin-top: 30px; font-size: 14px; color: var(--muted); font-weight: 300; line-height: 1.8; }
.carbody__note b { color: var(--pink-soft); font-weight: 500; }

.cargrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cargrid__item { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; }
.cargrid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.cargrid__item:hover img { transform: scale(1.06); }
.cargrid__item::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 50px 8px rgba(8,5,12,.55); pointer-events: none; }
.cargrid__item figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .24em; color: #ffd9ee; background: rgba(8,5,12,.62); padding: 6px 11px; border-radius: 999px;
}
.carfinale { padding-top: clamp(90px, 14vh, 160px); padding-bottom: 56px; }
/* na podstronach stopka następuje od razu po CTA (index ma między nimi statystyki) — potrzebuje oddechu */
.carfinale .footer { margin-top: clamp(90px, 14vh, 150px); }

@media (max-width: 960px) {
  .carbody { grid-template-columns: 1fr; }
  .carbody__copy { position: static; }
  .carhero__price { position: static; margin: 26px clamp(20px,5vw,72px) 0; display: inline-block; align-self: flex-start; }
  /* kolumna — statyczna cena była drugim itemem flex-row i wystawała za prawą krawędź */
  .carhero { flex-direction: column; align-items: stretch; justify-content: center; }
}

/* ═══════════ GRAIN ═══════════ */
.grain { position: fixed; inset: -50%; z-index: 140; pointer-events: none; opacity: .05; animation: grain 8s steps(10) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 10% { transform: translate(-5%,-8%) } 20% { transform: translate(-13%,3%) }
  30% { transform: translate(6%,-12%) } 40% { transform: translate(-5%,12%) } 50% { transform: translate(-12%,6%) }
  60% { transform: translate(12%,0) } 70% { transform: translate(0,10%) } 80% { transform: translate(-8%,-2%) } 90% { transform: translate(9%,5%) }
}

/* reveal helpers (JS sets final states; these are safe no-JS defaults) */
.reveal-line { opacity: 1; }

/* ═══════════ RESPONSYWNOŚĆ ═══════════ */
@media (max-width: 960px) {
  .fslider { grid-template-columns: 1fr; }
  .fslider__tabs { border-right: 0; border-bottom: 1px solid rgba(255,46,157,.18); }
  /* 3/2 ≈ proporcje zdjęć wnętrza — sztywne 320px wysokości ucinało kadry na boki */
  .fslider__stage { min-height: 0; aspect-ratio: 3 / 2; }
  .ftab { padding: 16px 18px; }
  .pkg { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .pkg__price { text-align: left; flex-direction: row; align-items: baseline; gap: 12px; }
  /* per-auto ceny zostają w kolumnie (3 wiersze) i do lewej na telefonie */
  .pkg__price--multi { flex-direction: column; align-items: flex-start; }
  .pkg__price--multi > span { justify-content: flex-start; }
  .bookform__grid { grid-template-columns: 1fr; }
  .card { min-height: 380px; }
}
@media (max-width: 820px) {
  .nav { gap: 14px; }
  .nav__links, .nav__tel { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  /* logo-nav.mp4 ma proporcje 3.3:1 — przy 42px wysokości znaczek + napis nie mieściły
     się w 390px i "LIMUZYNA" była ucięta */
  .nav__logo-mark { height: 28px; margin-right: 2px; }
  .nav__logo { font-size: clamp(10.5px, 3vw, 13px); letter-spacing: .08em; gap: 5px; }
  /* hero FULL-BLEED (user 2026-07-07: "I preferred the bigger hummer" + "musi być
     full viewport width"). UWAGA: NIE używać transform:scale na .hero__video — skaluje
     cały box wideo w OBU osiach → 35px luki po bokach (nie full width). Wideo hero to
     1600×686 (2.33:1), na pionowym ekranie cover wypełnia wysokością → auto duże;
     mniejsze auto bez luk = nowy, inaczej wykadrowany asset, nie CSS. */
  .hero__video { object-position: 54% center; }
  /* CZYTELNOŚĆ napisów hero na jasnym tle auta (user 2026-07-07): ciemne halo pod tekstem
     + mocniejszy lewy scrim (dalej przezroczysty po prawej, żeby przód auta był widoczny) */
  .hero__shade--left { background: linear-gradient(96deg, rgba(8,5,12,.97) 12%, rgba(8,5,12,.8) 46%, rgba(8,5,12,.34) 72%, transparent 100%); }
  .hero__eyebrow { color: #fff; text-shadow: 0 2px 16px rgba(8,5,12,.9), 0 0 4px rgba(8,5,12,.8); }
  .hero__lead { color: #f4edf1; font-weight: 400; text-shadow: 0 2px 18px rgba(8,5,12,.88), 0 1px 4px rgba(8,5,12,.72); }
  /* krótszy lead na telefonie — druga połowa zdania ukryta (desktop bez zmian) */
  .hero__lead-more { display: none; }
  /* mniej i krótszych tagów, w jednej linii: "LED sufit i podłoga"→"LED sufit",
     "szampan w cenie" ukryty; zostają 3 (do 19 osób / jet door / LED sufit).
     Scoped do .hero (index) — chipy na podstronach (.carhero) mają zwijać się normalnie,
     nie ściskać tekstu w środku pigułki */
  .chip__more { display: none; }
  .chip--extra { display: none; }
  .hero .chips { flex-wrap: nowrap; gap: 7px; }
  .hero .chip { font-size: 9.5px; letter-spacing: .08em; padding: 7px 11px; gap: 6px; }
  .hero .chip i { width: 5px; height: 5px; }
  .chapter__ghost { -webkit-text-stroke-color: rgba(255,46,157,.16); }
  /* sceny rozdziału 01: pas 58svh zamiast pełnego ekranu — przy 58svh mieści się
     PRAWIE CAŁE auto (gen-palace: tył+kabina+przód i Pałac w tle) */
  .stage img { position: absolute; left: 0; top: 11svh; width: 100%; height: 58svh; }
  .stage[data-stage="0"] img { object-position: 50% center; }
  /* IMPREZA: panna młoda (welon) stoi na ~66% szerokości gen-party.jpg —
     domyślny środek ją ucinał; 77% = cała piątka dziewczyn + bok limuzyny */
  .stage[data-stage="2"] img { object-position: 77% center; }
  /* przycisk formularza IDEALNIE na środku: kolumna, żeby pusty .bookform__status
     (flex-sibling) nie spychał przycisku w lewo od środka */
  .bookform__footer { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; }
  /* mniejsze odstępy między sekcjami na telefonie (user: za dużo czarnego tła między
     rozdziałami) — ~150px (18–22vh) było za dużo, tniemy do ~80–96px */
  .fleet, .packages, .interior { padding-top: 80px; padding-bottom: 80px; }
  .interlude { padding-top: 78px; padding-bottom: 78px; }
  /* finale: mniej u góry; dół 130px żeby stopka nie wpadała pod pływające pigułki (dźwięk / Rezerwuj) */
  .finale { padding-top: 96px; padding-bottom: 130px; }
  .footer { flex-direction: column; gap: 8px; }
  .carfinale { padding-bottom: 120px; }
  /* pełne 88svh z poziomego zdjęcia zostawiało na telefonie wąski, nieczytelny pasek */
  .carhero { min-height: 64svh; }
  /* Chrysler Barbie: przód auta jest po LEWEJ (~0–28% kadru), a jet door na środku —
     domyślny środek pokazywał tylko drzwi. Na telefonie kadruj w lewo, żeby był przód.
     !important bije inline object-position (desktop zostaje 50% 46%). */
  .carhero__img--chrysler { object-position: 20% 48% !important; }
}

/* ═══ FLOTA NA TELEFONIE — karty przechodzą z plakatu (3/4.1) na układ
   zdjęcie-nad-tekstem: poziome fotki aut nie są już cięte do pionowego slajdu ═══ */
@media (max-width: 700px) {
  /* układ zdjęcie-nad-tekstem jest już domyślny (patrz .card wyżej) — tu tylko drobiazgi */
  .fleet__grid { gap: 22px; margin-top: 48px; }
  .card:hover { transform: none; }
  .card__body { padding: 18px 20px 24px; }
  /* PODSTRONY AUT: siatka zdjęć z 2 kolumn (4/3, ciasne i cięte) na 1 kolumnę 16/10 —
     poziome fotki aut/wnętrz nie są już przycinane do małych kafli (user 2026-07-07) */
  .cargrid { grid-template-columns: 1fr; gap: 16px; }
  .cargrid__item { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .hero__scrollcue i, .grain { animation: none; }
  * { transition-duration: .01ms !important; }
}