/* ================================================================
   vc-components.css  —  VAN-CAR Canonical Component System
   Single source of truth for buttons, nav active state, and
   common interactive patterns. Import after vc-tokens.css.

   The old .btn-primary / .action-button / .button--primary etc.
   stay in van-car.min.css for backwards compat with existing markup,
   but all new markup uses .vc-btn only.
   ================================================================ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  BUTTON SYSTEM                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Base ──────────────────────────────────────────────────────── */
.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vc-btn-gap, 8px);
  min-height: var(--vc-btn-h, 48px);
  padding: 0 var(--vc-btn-px, 24px);
  border-radius: var(--vc-btn-radius, 6px);
  border: 1px solid transparent;
  font-family: var(--vc-btn-font, 'Barlow Condensed', sans-serif);
  font-size: var(--vc-btn-size, 0.82rem);
  font-weight: var(--vc-btn-weight, 800);
  letter-spacing: var(--vc-btn-tracking, 0.12em);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform    var(--vc-dur-fast, 0.28s) var(--vc-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow   var(--vc-dur-fast, 0.28s) var(--vc-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    background   var(--vc-dur-fast, 0.28s) ease,
    border-color var(--vc-dur-fast, 0.28s) ease,
    color        var(--vc-dur-fast, 0.28s) ease;
}

.vc-btn:focus-visible {
  outline: none;
  box-shadow: var(--vc-focus-ring);
}

.vc-btn:active {
  transform: translateY(1px) scale(0.988);
}

/* ── Variants ──────────────────────────────────────────────────── */

/* Primary: red gradient CTA */
.vc-btn--primary {
  background: var(--vc-gradient-red, linear-gradient(180deg, #ff1230, #b90018));
  border-color: rgba(255, 18, 48, 0.55);
  color: #fff;
  box-shadow:
    0 8px 24px rgba(185, 0, 24, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.14);
}
.vc-btn--primary:hover {
  background: linear-gradient(180deg, #ff2a45, #d0001c);
  box-shadow:
    0 12px 32px rgba(185, 0, 24, 0.40),
    inset 0 1px rgba(255, 255, 255, 0.20);
  transform: translateY(-2px);
}

/* Secondary: dark surface */
.vc-btn--secondary {
  background: var(--vc-surface-2, #121218);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}
.vc-btn--secondary:hover {
  background: var(--vc-surface-3, #18181f);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline: border + transparent fill */
.vc-btn--outline {
  border-color: rgba(255, 18, 48, 0.48);
  color: var(--vc-red, #ff1230);
}
.vc-btn--outline:hover {
  background: rgba(255, 18, 48, 0.07);
  border-color: var(--vc-red, #ff1230);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline gold variant */
.vc-btn--outline-gold {
  border-color: rgba(200, 169, 110, 0.48);
  color: var(--vc-gold-warm, #c8a96e);
}
.vc-btn--outline-gold:hover {
  background: rgba(200, 169, 110, 0.07);
  border-color: var(--vc-gold-warm, #c8a96e);
  color: #fff;
}

/* Ghost: text only */
.vc-btn--ghost {
  color: rgba(255, 255, 255, 0.70);
}
.vc-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Phone CTA */
@keyframes vcPhonePing {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(1.6);  opacity: 0.12; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes vcPhoneShake {
  0%, 55%, 100% { transform: rotate(0deg) scale(1); }
  5%  { transform: rotate(-16deg) scale(1.08); }
  15% { transform: rotate(14deg)  scale(1.08); }
  25% { transform: rotate(-10deg); }
  35% { transform: rotate(8deg); }
  45% { transform: rotate(-4deg); }
}

/* Phone CTA — czerwono-czarno-biały (paleta VAN-CAR) */
.vc-btn--phone {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #18181c 0%, #0c0c0e 100%);
  border-color: rgba(255, 18, 48, 0.62);
  color: #fff;
  gap: 10px;
  padding: 0 22px;
  min-height: 48px;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 224px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 18, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Phone icon (SVG w markupie) — czerwony akcent + delikatne „dzwonienie" */
.vc-btn--phone .vc-btn__phone-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #ff1230;
  transform-origin: center;
  animation: vcPhoneShake 4.5s ease-in-out 1.8s infinite;
}
.vc-btn--phone .vc-btn__phone-text {
  display: inline-block;
  line-height: 1;
}
/* Pulsing ring expanding from button edge */
.vc-btn--phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(255, 18, 48, 0.45);
  animation: vcPhonePing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.vc-btn--phone:hover {
  border-color: rgba(255, 18, 48, 0.95);
  background: linear-gradient(135deg, #ff1230 0%, #b90018 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(185, 0, 24, 0.4), 0 0 18px rgba(255, 18, 48, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vc-btn--phone:hover .vc-btn__phone-icon { color: #fff; }
.vc-btn--phone:hover::after {
  animation-duration: 1.4s;
}

/* Kompaktowy przycisk-ikona telefonu (mobile) — sama słuchawka */
.vc-btn--phone-icon {
  display: none;               /* widoczny tylko na mobile (breakpoint poniżej) */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #18181c 0%, #0c0c0e 100%);
  border: 1px solid rgba(255, 18, 48, 0.62);
  color: #ff1230;
  flex-shrink: 0;
}
.vc-btn--phone-icon svg { width: 20px; height: 20px; }
.vc-btn--phone-icon:active { transform: scale(0.95); }

/* Pasek akcji nagłówka — jeden rząd (Umowa + Telefon + hamburger) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vc-btn--phone::after { animation: none; opacity: 0.4; }
  .vc-btn--phone .vc-btn__phone-icon { animation: none; }
}

/* Contract / Umowa — jasny (biały), NIE czerwony (czytelność na ciemnym tle) */
.vc-btn--contract {
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.vc-btn--contract:hover {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  NAV — DROPDOWN „WIĘCEJ" + RESPONSYWNY RESET (spójny na 9 str.)║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Płynne dopasowanie linków — bez nachodzenia na średnich szerokościach */
.site-nav { gap: clamp(0px, 0.4vw, 4px); min-width: 0; flex-wrap: nowrap; }
.site-nav__link { padding: 0 clamp(8px, 1vw, 13px); }

/* Wrapper dropdownu */
.site-nav__more { position: relative; display: inline-flex; }

.site-nav__more-btn {
  background: none;
  cursor: pointer;
  gap: 5px;
}
.site-nav__more-caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.site-nav__more[data-open] .site-nav__more-caret { transform: rotate(180deg); }
.site-nav__more[data-open] > .site-nav__more-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Panel rozwijany */
.site-nav__more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 7px;
  background: rgba(10, 10, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.site-nav__more[data-open] .site-nav__more-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.site-nav__more-menu[hidden] { display: none; }

.site-nav__more-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 7px;
  font-family: var(--vc-font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.site-nav__more-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.site-nav__more-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.site-nav__more-item[data-active] {
  color: #fff;
  background: rgba(255, 18, 48, 0.1);
  box-shadow: inset 2px 0 0 var(--vc-red, #ff1230);
}

/* Hamburger — spójne pokazywanie na wszystkich stronach (nie tylko index) */
.site-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.site-mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* Desktop (>1100px): pełna nawigacja, bez hamburgera i ikony telefonu */
@media (min-width: 1101px) {
  .site-mobile-toggle { display: none !important; }
  .site-header__actions .vc-btn--phone-icon { display: none !important; }
}

/* <=1100px: zwijamy do hamburgera, w akcjach zostaje tylko ikona telefonu */
@media (max-width: 1100px) {
  .site-mobile-toggle { display: inline-flex !important; }
  .site-header__actions .vc-btn--phone { display: none !important; }
  .site-header__actions .vc-btn--phone-icon { display: inline-flex !important; }
}

/* ── Size modifiers ─────────────────────────────────────────────── */
.vc-btn--sm {
  --vc-btn-h:       36px;
  --vc-btn-px:      14px;
  --vc-btn-size:    0.70rem;
  --vc-btn-tracking: 0.10em;
}

.vc-btn--lg {
  --vc-btn-h:       56px;
  --vc-btn-px:      32px;
  --vc-btn-size:    0.88rem;
}

.vc-btn--xl {
  --vc-btn-h:       64px;
  --vc-btn-px:      40px;
  --vc-btn-size:    0.96rem;
}

/* ── Layout modifiers ───────────────────────────────────────────── */
.vc-btn--full {
  width: 100%;
}

/* ── Icon suffix / prefix ───────────────────────────────────────── */
.vc-btn__icon {
  display: block;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  NAV ACTIVE STATE                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/*
  Active link is set by vc-nav-active.js which reads window.location.pathname
  and adds the [data-active] attribute to the matching <a>.
  CSS here handles the visual treatment only.
*/
.site-nav__link[data-active],
.site-nav__link--active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 18, 48, 0.38) !important;
  box-shadow: inset 0 -2px 0 var(--vc-red, #ff1230);
}

/* Mobile nav active */
.mobile-nav__link[data-active],
.mobile-nav__link--active {
  color: #fff;
  background: rgba(255, 18, 48, 0.08);
  border-left: 2px solid var(--vc-red, #ff1230);
  padding-left: calc(var(--mobile-nav-px, 20px) - 2px);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  SECTION CHROME                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Cinematic bridge image between sections */
.vc-cinematic-bridge {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 40%;
  /* Reveal handled by vc-animations.js CinematicBridge() */
}

/* Map container — positions the SVG overlay above the image */
.vc-map-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.vc-map-wrap__img {
  display: block;
  width: 100%;
  height: auto;
}

.vc-map-wrap__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  REDUCED MOTION GLOBAL GUARD                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce) {
  .vc-btn,
  .vc-btn:hover {
    transition: none;
    transform: none;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CTA BANNER — subpage calculator promo                       ║
   ║                                                              ║
   ║  Usage:                                                      ║
   ║    <div class="vc-cta-banner" data-vc-cinematic>             ║
   ║      <a href="kalkulator.html" class="vc-cta-banner__link">  ║
   ║        <img class="vc-cta-banner__img"                       ║
   ║             src="assets/baner_kalkulator.webp"               ║
   ║             alt="Kalkulator importu — policz koszt">         ║
   ║      </a>                                                    ║
   ║    </div>                                                    ║
   ║                                                              ║
   ║  • Image fills banner at its natural ratio — no crop ever    ║
   ║  • max-width keeps it compact even on ultrawide screens      ║
   ║  • CinematicBridge() handles the scroll-reveal wipe          ║
   ╚══════════════════════════════════════════════════════════════╝ */

.vc-cta-banner-wrap {
  padding: clamp(28px, 4vw, 52px) clamp(16px, 4vw, 40px);
  background: var(--vc-bg, #040404);
  display: flex;
  justify-content: center;
}

.vc-cta-banner {
  /* Natural image ratio — baner_kalkulator.webp is 1347×664 (≈ 2.03:1) */
  display: block;
  width: 100%;
  max-width: 860px;  /* "nie za duży, nie za szeroki" */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  /* Layered shadow: dark depth + subtle red rim */
  box-shadow:
    0 0 0 1px rgba(255, 18, 48, 0.22),
    0 0 0 3px rgba(255, 18, 48, 0.05),
    0 20px 56px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.40);
  transition: box-shadow 0.3s ease, transform 0.3s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}

.vc-cta-banner:hover {
  box-shadow:
    0 0 0 1px rgba(255, 18, 48, 0.45),
    0 0 0 4px rgba(255, 18, 48, 0.10),
    0 28px 72px rgba(0, 0, 0, 0.70),
    0 0 38px rgba(255, 18, 48, 0.12);
  transform: translateY(-3px);
}

.vc-cta-banner__link {
  display: block;
  line-height: 0;  /* kills descender gap below inline image */
}

.vc-cta-banner__img {
  display: block;
  width: 100%;
  height: auto;    /* preserves natural ratio — NEVER crops */
  object-fit: fill; /* fill = scale to exact box; height:auto makes box match ratio */
  border-radius: 12px;
  /* Subtle zoom on hover via parent */
  transition: transform 0.55s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}

.vc-cta-banner:hover .vc-cta-banner__img {
  transform: scale(1.025);
}

/* Label eyebrow above banner (optional slot) */
.vc-cta-banner-wrap__label {
  display: block;
  text-align: center;
  margin-bottom: 14px;
  color: rgba(255, 18, 48, 0.85);
  font-family: var(--vc-font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .vc-cta-banner {
    border-radius: 10px;
    max-width: 100%;
  }
  .vc-cta-banner__img {
    border-radius: 8px;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CANONICAL SECTION HEADINGS — project-wide                   ║
   ║  Eyebrow (Barlow) → Title (Barlow Condensed) → Body (Inter).    ║
   ║  Single source of truth so every page matches index/kalk.   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.vc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--vc-font-display, 'Barlow Condensed'), sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vc-red, #ff1230);
  margin-bottom: 18px;
}
.vc-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--vc-red, #ff1230);
  flex-shrink: 0;
}

.vc-section-title {
  font-family: var(--vc-font-hero, 'Barlow Condensed'), system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
  line-height: .95;
  margin: 0 0 20px;
}
.vc-section-title em {
  font-style: normal;
  color: var(--vc-red, #ff1230);
}

.vc-section-body {
  font-family: var(--vc-font-body, 'Inter'), system-ui, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, .6);
  max-width: 680px;
  margin: 0 0 40px;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  IMAGE FRAME — subtle automotive treatment                  ║
   ║  Reusable wrapper for large imagery. Composite-only          ║
   ║  effects: rim glow + lift + diagonal sheen sweep on hover,   ║
   ║  optional cinematic clip-path reveal on scroll.             ║
   ║                                                              ║
   ║  Usage:                                                      ║
   ║    <figure class="vc-frame"><img ...></figure>              ║
   ║    <figure class="vc-frame" data-reveal="wipe"><img></figure>║
   ╚══════════════════════════════════════════════════════════════╝ */

.vc-frame {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  box-shadow:
    0 0 0 1px rgba(255, 18, 48, .18),
    0 20px 56px rgba(0, 0, 0, .6);
  transition:
    box-shadow .35s ease,
    transform  .45s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.vc-frame:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 18, 48, .4),
    0 0 34px rgba(255, 18, 48, .12),
    0 28px 72px rgba(0, 0, 0, .7);
}
.vc-frame img {
  display: block;
  width: 100%;
  transition: transform .6s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.vc-frame:hover img {
  transform: scale(1.03);
}
/* Cover variant: image fills a fixed-ratio box (keeps object-fit:cover) */
.vc-frame--cover img {
  height: 100%;
  object-fit: cover;
}

/* Diagonal sheen sweep — pure transform, sits above image */
.vc-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, .14) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform .8s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.vc-frame:hover::after {
  transform: translateX(120%);
}

/* HUD corner brackets — subtle red L's, fade in with frame */
.vc-frame--hud::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  border: 1.5px solid transparent;
  border-image: none;
  background:
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) left  top    / 18px 1.5px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) left  top    / 1.5px 18px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) right top    / 18px 1.5px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) right top    / 1.5px 18px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) left  bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) left  bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) right bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--vc-red, #ff1230), var(--vc-red, #ff1230)) right bottom / 1.5px 18px no-repeat;
  opacity: .55;
  transition: opacity .4s ease;
}
.vc-frame--hud:hover::before { opacity: .9; }

/* Cinematic wipe reveal — works with the existing [data-reveal] observer */
[data-reveal="wipe"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--vc-ease-out, cubic-bezier(0.16,1,0.3,1));
}
[data-reveal="wipe"].is-visible {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .vc-frame,
  .vc-frame img,
  .vc-frame::after,
  .vc-frame:hover,
  .vc-frame:hover img,
  .vc-frame:hover::after {
    transition: none;
    transform: none;
  }
  [data-reveal="wipe"] {
    clip-path: none;
    transition: none;
  }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  FAZA 1 — KLASY SEMANTYCZNE TEKSTU (audit 2026-06-27)        ║
   ║  Opt-in. Uzupełniają .vc-section-title/-body o drobne typy.  ║
   ║  Używają tokenów z Fazy 0 (track / lh / text scale).         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Helpery nagłówków — gdy nie używamy .vc-section-title */
.vc-h1 {
  font-family: var(--vc-font-hero, 'Barlow Condensed'), system-ui, sans-serif;
  font-weight: 400;
  line-height: var(--vc-lh-tight, 1.05);
  letter-spacing: var(--vc-track-tight, -0.01em);
  text-transform: uppercase;
}
.vc-h2,
.vc-h3 {
  font-family: var(--vc-font-display, 'Barlow Condensed'), system-ui, sans-serif;
  font-weight: 800;
  line-height: var(--vc-lh-heading, 1.15);
  letter-spacing: var(--vc-track-tight, -0.01em);
}

/* Body copy — spójny akapit (S-3) */
.vc-body {
  font-family: var(--vc-font-body, 'Inter'), system-ui, sans-serif;
  font-size: var(--vc-text-md-2, 1.05rem);
  line-height: var(--vc-lh-body, 1.6);
  letter-spacing: var(--vc-track-normal, 0.04em);
  color: var(--vc-muted, #a9a9a9);
}

/* Podpisy / captions (S-2) — jeden styl drobnego tekstu */
.vc-caption {
  font-family: var(--vc-font-body, 'Inter'), system-ui, sans-serif;
  font-size: var(--vc-text-xs, 0.7rem);
  line-height: 1.4;
  color: var(--vc-muted, #a9a9a9);
}

/* Mała etykieta CAPS (label) — np. nad polem / w karcie */
.vc-label {
  font-family: var(--vc-font-display, 'Barlow Condensed'), system-ui, sans-serif;
  font-size: var(--vc-text-sm-2, 0.72rem);
  font-weight: 800;
  letter-spacing: var(--vc-track-wider, 0.2em);
  text-transform: uppercase;
  color: var(--vc-muted, #a9a9a9);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  FAZA 1 — POLA FORMULARZY (.vc-field) + BADGE (.vc-badge)    ║
   ║  Opt-in standard. Wysokość/radius spójne z systemem .vc-btn. ║
   ║  Uwaga <x-dc>: <select> wymaga value="{{ }}" (binding stanu).║
   ╚══════════════════════════════════════════════════════════════╝ */

.vc-field {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: var(--vc-btn-h, 48px);
  padding: 0 var(--vc-space-4, 16px);
  border-radius: var(--vc-r-md, 8px);
  border: 1px solid var(--vc-border, rgba(255, 255, 255, 0.08));
  background: var(--vc-surface-2, #121218);
  color: var(--vc-text, #f8f8f8);
  font-family: var(--vc-font-body, 'Inter'), system-ui, sans-serif;
  font-size: var(--vc-text-base, 1rem);
  line-height: 1.2;
  transition:
    border-color var(--vc-fast, 0.2s),
    box-shadow    var(--vc-fast, 0.2s),
    background    var(--vc-fast, 0.2s);
}
.vc-field::placeholder { color: var(--vc-muted, #a9a9a9); }
.vc-field:hover { border-color: rgba(255, 255, 255, 0.18); }
.vc-field:focus-visible,
.vc-field:focus {
  outline: none;
  border-color: rgba(255, 18, 48, 0.55);
  box-shadow: var(--vc-focus-ring);
}
textarea.vc-field {
  min-height: calc(var(--vc-btn-h, 48px) * 2);
  padding: var(--vc-space-3, 12px) var(--vc-space-4, 16px);
  line-height: var(--vc-lh-body, 1.6);
}
/* Select: zostaw natywny caret, ale zachowaj ramkę/wysokość systemu */
select.vc-field { cursor: pointer; }

.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-space-1, 4px);
  padding: var(--vc-space-1, 4px) var(--vc-space-3, 12px);
  border-radius: var(--vc-r-pill, 999px);
  border: 1px solid var(--vc-border, rgba(255, 255, 255, 0.08));
  background: var(--vc-surface-2, #121218);
  font-family: var(--vc-font-display, 'Barlow Condensed'), system-ui, sans-serif;
  font-size: var(--vc-text-sm-2, 0.72rem);
  font-weight: 800;
  letter-spacing: var(--vc-track-wide, 0.12em);
  text-transform: uppercase;
  color: var(--vc-muted, #a9a9a9);
  white-space: nowrap;
}
.vc-badge--red {
  border-color: rgba(255, 18, 48, 0.4);
  background: rgba(255, 18, 48, 0.1);
  color: var(--vc-red, #ff1230);
}
.vc-badge--gold {
  border-color: rgba(200, 169, 110, 0.4);
  background: rgba(200, 169, 110, 0.1);
  color: var(--vc-gold-warm, #c8a96e);
}

@media (prefers-reduced-motion: reduce) {
  .vc-field { transition: none; }
}

/* UI consistency pass 2026-06-27: legacy compatibility without broad rewrites. */
:root {
  --vc-page-h1-mobile: clamp(2.35rem, 10.4vw, 3.35rem);
  --vc-page-h1-tablet: clamp(3.2rem, 7.2vw, 4.6rem);
  --vc-page-h1-desktop: clamp(3.7rem, 6.4vw, 5.85rem);
  --vc-page-h2-mobile: clamp(1.9rem, 7.6vw, 2.5rem);
  --vc-page-h2-desktop: clamp(2.45rem, 4vw, 3.55rem);
  --vc-floating-safe-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  --vc-floating-phone-size: 56px;
}

.page-hero__title,
.on-hero__h1,
.hero-title,
.legal-header,
.video-hero__title,
h1:first-of-type,
body:not(.home) main h1:first-of-type {
  max-width: min(100%, 980px);
  font-family: var(--vc-font-hero, 'Barlow Condensed'), system-ui, sans-serif;
  font-size: var(--vc-page-h1-desktop) !important;
  line-height: .92 !important;
  letter-spacing: -0.018em !important;
  text-transform: uppercase;
}

.section-header__title,
.verification-lab__title,
.vc-section-title,
.mkt__title,
.import-map-hero__title,
main h2:first-of-type {
  font-size: var(--vc-page-h2-desktop);
  line-height: .96;
}

.btn,
.filter-button,
.adpt__cta-btn,
.listing-card__btn-primary,
.imh-stat__btn,
.button--secondary,
.button--flag-submit {
  min-height: var(--vc-btn-h, 48px);
  border-radius: var(--vc-btn-radius, 6px);
  font-family: var(--vc-btn-font, var(--vc-font-display, 'Barlow Condensed', sans-serif));
  font-weight: var(--vc-btn-weight, 800);
  letter-spacing: var(--vc-btn-tracking, .12em);
  text-transform: uppercase;
}

.filter-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--vc-r-pill, 999px);
}

.panel-card,
.glass-card,
.listing-card,
.on-why-card {
  border-radius: var(--vc-r-lg, 12px);
}

.mkt-card {
  border-radius: var(--vc-r-md, 8px);
}

.video-hero__eyebrow,
.video-hero__meta-label,
.section-cta__micro,
.vc-footer-ram__contact-label,
.field-label,
.slider-step,
.summary-card__badge,
.vc-chat__badge,
.vc-leasing-label,
[class*="eyebrow"],
[class*="label"] {
  font-size: max(11px, 0.72rem) !important;
}

@media (max-width: 1100px) {
  .page-hero__title,
  .on-hero__h1,
  .hero-title,
  .legal-header,
  .video-hero__title,
  h1:first-of-type,
  body:not(.home) main h1:first-of-type {
    font-size: var(--vc-page-h1-tablet) !important;
  }
}

@media (max-width: 640px) {
  .page-hero__title,
  .on-hero__h1,
  .hero-title,
  .legal-header,
  .video-hero__title,
  h1:first-of-type,
  body:not(.home) main h1:first-of-type {
    font-size: var(--vc-page-h1-mobile) !important;
    line-height: .94 !important;
    letter-spacing: -0.012em !important;
  }

  .section-header__title,
  .verification-lab__title,
  .vc-section-title,
  .mkt__title,
  .import-map-hero__title,
  main h2:first-of-type {
    font-size: var(--vc-page-h2-mobile);
    line-height: 1;
  }

  .btn,
  .filter-button,
  .adpt__cta-btn,
  .listing-card__btn-primary,
  .imh-stat__btn,
  .button--secondary,
  .button--flag-submit {
    min-height: 46px;
    font-size: max(12px, var(--vc-btn-size, .82rem));
  }
}

/* ══════════════════════════════════════════════════════════════════
   .btn / .btn__canton / .btn__label — American-flag CTA button
   Base component (canton + stripes + dark label chip). Previously
   shipped via the removed van-car.min.css bundle; restored here as
   the single shared definition so every page using this markup
   (index.html nav/hero/footer/offer-card CTAs, o-nas.html hero,
   blog article CTAs) renders the flag instead of an unstyled link.
   ══════════════════════════════════════════════════════════════════ */
.btn {
  --flag-canton-w: 72px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--vc-font-body, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid rgba(255,18,48,.85); outline-offset: 2px; }

.btn__canton {
  flex: 0 0 var(--flag-canton-w);
  background:
    radial-gradient(circle, rgba(255,255,255,0.92) 1.4px, transparent 1.6px) 5px 5px / 12px 10px,
    linear-gradient(180deg, #1e44a0 0%, #0d2868 60%, #091d50 100%);
}

.btn__label {
  position: relative;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  white-space: nowrap;
  color: #fff;
}

.btn--primary {
  padding: 4px;
  gap: 6px;
  background: repeating-linear-gradient(180deg,
      #c8132b 0, #c8132b 16.66%, #f4f4f4 16.66%, #f4f4f4 33.33%,
      #c8132b 33.33%, #c8132b 50%, #f4f4f4 50%, #f4f4f4 66.66%,
      #c8132b 66.66%, #c8132b 83.33%, #f4f4f4 83.33%, #f4f4f4 100%);
  box-shadow: 0 0 0 1px rgba(255,60,80,0.25), 0 8px 24px rgba(110,6,18,0.45), 0 2px 4px rgba(0,0,0,0.3);
}
.btn--primary .btn__canton,
.btn--primary .btn__label { border-radius: 6px; }
.btn--primary .btn__label {
  background: linear-gradient(180deg, #0c1740 0%, #060e2c 100%);
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.btn--primary:hover .btn__label { background: linear-gradient(180deg,#13205a 0%,#0a1338 100%); }

.btn--ghost {
  border: 1.5px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
}
.btn--ghost .btn__canton { display: none; }
.btn--ghost .btn__label { flex: 1 1 auto; }
.btn--ghost:hover { border-color: rgba(255,255,255,0.42); background: rgba(255,255,255,0.07); }

.btn--fb {
  border: 1px solid rgba(24,119,242,0.4);
  background: rgba(24,119,242,0.12);
}
.btn--fb .btn__canton { display: none; }
.btn--fb .btn__label { color: #4a9bff; }
.btn--fb:hover { background: #1877F2; border-color: #1877F2; }
.btn--fb:hover .btn__label { color: #fff; }

.btn--lg { --flag-canton-w: 88px; }
.btn--lg .btn__label { min-height: 52px; font-size: 0.85rem; }
.btn--sm { --flag-canton-w: 60px; }
.btn--sm .btn__label { min-height: 38px; font-size: 0.72rem; padding: 0 12px; }
.btn--full,
.btn--block { display: flex; width: 100%; }