/* TRANSLOGIC — strona firmowa. Granat marki + bursztyn (jak w aplikacji), Barlow Semi Condensed do tytułów, Inter do treści. */

:root {
  --granat-900: #070b14;
  --granat-800: #0b1220;
  --granat-700: #111a2c;
  --granat-600: #182238;
  --granat-500: #223052;
  --marka: #123354;
  --stal-50: #f7f8fa;
  --stal-100: #eef1f5;
  --stal-200: #dfe4ec;
  --stal-300: #c3ccd8;
  --ink: #0f172a;
  --ink-2: #475467;
  --ink-3: #667085;
  --na-ciemnym: #e9eef6;
  --na-ciemnym-2: #a9b4c6;
  --na-ciemnym-3: #7d8aa0;
  --bursztyn: #f0b43c;
  --bursztyn-600: #d99a17;
  --bursztyn-ink: #1a1200;
  --niebieski: #2f6ae0;
  --niebieski-300: #7fb2ff;
  --ok: #43c285;
  --pauza: #a894f5;
  --zal: #35c7b4;
  --whatsapp: #25d366;
  --r: 12px;
  --r-lg: 20px;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kontener: 1180px;
  --rynna: 24px;
  --naglowek-h: 72px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--ink);
  background: var(--granat-800); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -.005em; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--niebieski-300); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: var(--naglowek-h); }

.kontener { width: 100%; max-width: var(--kontener); margin: 0 auto; padding: 0 var(--rynna); }
.pomin { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--bursztyn); color: var(--bursztyn-ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.pomin:focus { top: 12px; }

/* ── Przyciski ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 10px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-duzy { padding: 16px 26px; font-size: 16px; border-radius: 12px; }
.btn-glowny { background: var(--bursztyn); color: var(--bursztyn-ink); box-shadow: 0 8px 24px -8px rgba(240, 180, 60, .6); }
.btn-glowny:hover { background: #f5c25a; box-shadow: 0 12px 28px -8px rgba(240, 180, 60, .7); }
.btn-obrys { background: rgba(255, 255, 255, .04); color: var(--na-ciemnym); border-color: rgba(255, 255, 255, .22); }
.btn-obrys:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.btn-ciemny { background: var(--granat-800); color: var(--na-ciemnym); }
.btn-ciemny:hover { background: var(--granat-600); }
.btn-whatsapp { background: var(--whatsapp); color: #062b15; width: 100%; justify-content: center; margin-top: 24px; }
.btn-whatsapp:hover { background: #3ee07d; }

/* ── Nagłówek ───────────────────────────────────────────────────────────── */
.naglowek {
  position: sticky; top: 0; z-index: 100; height: var(--naglowek-h);
  background: rgba(7, 11, 20, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--na-ciemnym);
  transition: background .25s, box-shadow .25s;
}
.naglowek.przewiniete { background: rgba(7, 11, 20, .92); box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .6); }
.naglowek-wnetrze { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo img { width: 40px; height: 40px; border-radius: 10px; }
.logo span { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .04em; }
.logo em { font-style: normal; color: var(--bursztyn); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a { padding: 8px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--na-ciemnym-2); text-decoration: none; transition: color .15s, background .15s; }
.nav > a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.menu-mobilne { display: none; }
.naglowek-prawa { display: flex; align-items: center; gap: 14px; }
.jezyki { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.jezyki a { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--na-ciemnym-3); transition: background .15s, color .15s; }
.jezyki a:hover { color: #fff; }
.jezyki a[aria-current] { background: var(--bursztyn); color: var(--bursztyn-ink); }
.hamburger { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--na-ciemnym); cursor: pointer; align-items: center; justify-content: center; }
.hamburger svg { width: 24px; height: 24px; }
.hamburger .i-zamknij { display: none; }
body.menu-otwarte .hamburger .i-menu { display: none; }
body.menu-otwarte .hamburger .i-zamknij { display: block; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; color: var(--na-ciemnym); overflow: hidden; isolation: isolate; }
.hero-tlo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(240, 180, 60, .16), transparent 60%),
    radial-gradient(700px 500px at 12% 90%, rgba(47, 106, 224, .18), transparent 60%),
    linear-gradient(180deg, var(--granat-800) 0%, var(--granat-900) 100%);
}
.hero-tlo::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.hero-siatka { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 96px); min-height: min(calc(100vh - var(--naglowek-h)), 820px); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(240, 180, 60, .12); border: 1px solid rgba(240, 180, 60, .35); color: var(--bursztyn); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.badge svg { width: 18px; height: 18px; }
.hero h1 { font-size: clamp(42px, 6.2vw, 78px); font-weight: 700; margin: 26px 0 22px; letter-spacing: -.01em; }
.hero h1 span { color: var(--bursztyn); }
.hero-sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--na-ciemnym-2); max-width: 560px; }
.hero-przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero-panel-wrap { perspective: 1400px; }
.panel {
  background: linear-gradient(180deg, #101a2d 0%, #0d1526 100%); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transform: rotateY(-7deg) rotateX(3deg); transition: transform .6s var(--ease); overflow: hidden;
}
.hero-panel-wrap:hover .panel { transform: rotateY(-2deg) rotateX(1deg); }
.panel-naglowek { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 13px; }
.panel-tytul { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.zywo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(67, 194, 133, .14); color: var(--ok); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.zywo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(67, 194, 133, .6); animation: puls 2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(67, 194, 133, .55); } 70% { box-shadow: 0 0 0 9px rgba(67, 194, 133, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 194, 133, 0); } }
.panel-info { margin-left: auto; color: var(--na-ciemnym-3); }
.panel-mapa { background: #0a1120; color: #7fb2ff; }
.panel-lista { padding: 8px 10px; }
.auto-wiersz { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; }
.auto-wiersz + .auto-wiersz { border-top: 1px solid rgba(255, 255, 255, .05); }
.auto-wiersz .kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--na-ciemnym-3); }
.stan-ok .kropka { background: var(--ok); } .stan-zal .kropka { background: var(--zal); } .stan-pauza .kropka { background: var(--pauza); border-radius: 2px; }
.auto-trasa { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.auto-trasa small { font-weight: 400; font-size: 12px; color: var(--na-ciemnym-3); }
.chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--na-ciemnym-2); }
.stan-ok .chip { background: rgba(67, 194, 133, .14); color: var(--ok); }
.stan-zal .chip { background: rgba(53, 199, 180, .14); color: var(--zal); }
.stan-pauza .chip { background: rgba(168, 148, 245, .16); color: var(--pauza); }
.panel-stopka { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: var(--na-ciemnym-3); }
.panel-stopka svg { width: 16px; height: 16px; flex: none; }

/* Mapa tras (SVG) */
.mapa-tras { width: 100%; height: auto; }
.mapa-tras .trasa { fill: none; stroke: currentColor; stroke-width: 2; stroke-opacity: .55; stroke-dasharray: 8 10; animation: plyn 2.4s linear infinite; }
@keyframes plyn { to { stroke-dashoffset: -36; } }
.mapa-tras .miasto { fill: #0a1120; stroke: currentColor; stroke-width: 2.5; }
.mapa-tras .miasto.duze { fill: currentColor; }
.mapa-tras .miasto-nazwa { font-family: var(--font-ui); font-size: 15px; font-weight: 500; fill: var(--ink-3); }
.mapa-tras .miasto-nazwa.duze { font-weight: 700; fill: var(--ink); font-size: 17px; }
.mapa-tras .auto { fill: var(--ok); }
.mapa-tras .auto-poswiata { fill: var(--ok); opacity: .22; }
.mapa-tras .auto-zal .auto { fill: var(--zal); } .mapa-tras .auto-zal .auto-poswiata { fill: var(--zal); }
.mapa-tras .auto-pauza .auto { fill: var(--pauza); } .mapa-tras .auto-pauza .auto-poswiata { fill: var(--pauza); }
.mapa-tras.hero { aspect-ratio: 1120 / 720; }
.mapa-tras.zasieg { color: var(--marka); }
.mapa-tras.zasieg .trasa { stroke-width: 3; stroke-opacity: .5; }
.mapa-tras.zasieg .miasto { fill: #fff; }
.mapa-tras.zasieg .miasto.duze { fill: var(--marka); }

/* Pasek zaufania */
.pasek-zaufania { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.pasek-siatka { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-liczba { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--bursztyn); }
.stat-opis { margin-top: 6px; font-size: 14px; color: var(--na-ciemnym-2); }

/* ── Sekcje ─────────────────────────────────────────────────────────────── */
.sekcja { padding: clamp(64px, 9vw, 112px) 0; }
.sekcja.jasna { background: #fff; color: var(--ink); }
.sekcja.stal { background: var(--stal-100); color: var(--ink); }
.sekcja.ciemna { background: var(--granat-800); color: var(--na-ciemnym); }
.sekcja-naglowek { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.etykieta { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--bursztyn-600); margin-bottom: 12px; }
.ciemna .etykieta { color: var(--bursztyn); }
.sekcja h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; }
.sekcja-sub { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.ciemna .sekcja-sub { color: var(--na-ciemnym-2); }

.siatka-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.siatka-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.karta { background: #fff; border: 1px solid var(--stal-200); border-radius: var(--r-lg); padding: 28px; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.karta:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(15, 23, 42, .35); border-color: var(--stal-300); }
.karta h3 { margin: 18px 0 10px; }
.karta p { color: var(--ink-2); font-size: 15px; }
.karta-ciemna { background: var(--granat-700); border-color: rgba(255, 255, 255, .08); }
.karta-ciemna:hover { border-color: rgba(240, 180, 60, .35); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8); }
.karta-ciemna p { color: var(--na-ciemnym-2); }
.ikona { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(240, 180, 60, .16); color: var(--bursztyn-600); }
.ikona svg { width: 26px; height: 26px; }
.ciemna .ikona { color: var(--bursztyn); }

/* Flota */
.flota-siatka { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.ilustracja { margin: 0; background: #fff; border: 1px solid var(--stal-200); border-radius: var(--r-lg); padding: 28px 24px 16px; }
.ilustracja figcaption { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.galeria img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--granat-800); }
.galeria img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: 0 24px 50px -28px rgba(15, 23, 42, .5); }
.galeria figcaption { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.zestaw { width: 100%; height: auto; }
.zestaw .cien { fill: rgba(15, 23, 42, .1); }
.zestaw .plandeka { fill: #f3f5f9; stroke: #b9c3d1; stroke-width: 2; }
.zestaw .zebra line { stroke: #d5dce6; stroke-width: 1.5; }
.zestaw .rama { fill: var(--marka); }
.zestaw .podwozie { fill: #2a3548; }
.zestaw .napis { font-family: var(--font-display); font-weight: 700; font-size: 56px; letter-spacing: .08em; fill: var(--marka); }
.zestaw .pas { fill: var(--bursztyn); }
.zestaw .tyl { fill: #c9d2de; }
.zestaw .swiatlo-tyl { fill: #e5484d; }
.zestaw .blotnik { fill: #2a3548; }
.zestaw .oslona { fill: #8b98aa; }
.zestaw .noga { fill: #6b7a90; }
.zestaw .rama-ciagnika { fill: #2a3548; }
.zestaw .zbiornik { fill: #b8c2cf; stroke: #8b98aa; stroke-width: 1.5; }
.zestaw .kabina { fill: var(--marka); }
.zestaw .szyba { fill: #9cc3ff; opacity: .9; }
.zestaw .dach { fill: #0e2a45; }
.zestaw .drzwi { stroke: #0e2a45; stroke-width: 2; fill: none; }
.zestaw .klamka { fill: #c9d2de; }
.zestaw .listwa { fill: var(--bursztyn); }
.zestaw .grill { fill: #0e2a45; }
.zestaw .swiatlo { fill: #fde68a; }
.zestaw .zderzak { fill: #0e2a45; }
.zestaw .stopnie { fill: #0e2a45; }
.zestaw .stopnie-linie { stroke: #3a4f6b; stroke-width: 2; }
.zestaw .wydech { fill: #6b7a90; }
.zestaw .lusterko { fill: #0e2a45; }
.zestaw .blotnik-kabiny { fill: none; stroke: #0e2a45; stroke-width: 7; }
.zestaw .napis-maly { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; fill: var(--marka); }
.zestaw .opona { fill: #1c2431; }
.zestaw .felga { fill: #cfd6e0; stroke: #8b98aa; stroke-width: 2; }
.zestaw .piasta { fill: #7d8aa0; }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.spec-wiersz { background: #fff; border: 1px solid var(--stal-200); border-radius: var(--r); padding: 14px 16px; }
.spec dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 4px 0 0; font-weight: 600; }
.lista-punktow { display: grid; gap: 18px; }
.lista-punktow li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.lista-punktow h3 { font-size: 21px; margin-bottom: 6px; }
.lista-punktow p { color: var(--ink-2); font-size: 15px; }
.ptaszek { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(240, 180, 60, .18); color: var(--bursztyn-600); margin-top: 2px; }
.ptaszek svg { width: 20px; height: 20px; }

/* Technologia */
.wyroznik { margin-top: 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 30px 34px; border-radius: var(--r-lg); background: linear-gradient(90deg, rgba(240, 180, 60, .14), rgba(240, 180, 60, .03)); border: 1px solid rgba(240, 180, 60, .3); border-left: 5px solid var(--bursztyn); }
.wyroznik h3 { font-size: 26px; margin-bottom: 8px; }
.wyroznik p { color: var(--na-ciemnym-2); max-width: 720px; }

/* Kroki */
.kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: krok; position: relative; }
.krok { position: relative; padding: 28px 24px 24px; background: var(--stal-50); border: 1px solid var(--stal-200); border-radius: var(--r-lg); }
.krok-nr { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--granat-800); color: var(--bursztyn); font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 16px; }
.krok h3 { font-size: 21px; margin-bottom: 8px; }
.krok p { color: var(--ink-2); font-size: 15px; }
.krok:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -20px; width: 20px; border-top: 2px dashed var(--stal-300); }
.przyciski-srodek { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

/* Zasięg */
.zasieg-siatka { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.mapa-karta { background: #fff; border: 1px solid var(--stal-200); border-radius: var(--r-lg); padding: 20px; }
.kraje-tytul { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.kraje-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.kraj { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--stal-200); font-size: 14px; font-weight: 500; }
.kraj.glowny { background: var(--granat-800); color: var(--na-ciemnym); border-color: var(--granat-800); font-weight: 600; }
.kraj span { font-size: 18px; line-height: 1; }

/* Pas kierowców */
.pas-kierowcy { background: var(--bursztyn); color: var(--bursztyn-ink); }
.pas-wnetrze { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.pas-kierowcy h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 8px; }
.pas-kierowcy p { max-width: 720px; color: #3a2a00; }

/* Kontakt */
.kontakt-siatka { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.info-karta { background: var(--granat-800); color: var(--na-ciemnym); border-radius: var(--r-lg); padding: 32px; }
.info-firma { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-bottom: 20px; }
.info-karta dl { display: grid; gap: 16px; }
.info-karta dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--na-ciemnym-3); }
.info-karta dt svg { width: 16px; height: 16px; color: var(--bursztyn); }
.info-karta dd { margin: 4px 0 0 24px; font-size: 16px; font-weight: 500; }
.info-karta dd a { text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.info-karta dd a:hover { border-color: var(--bursztyn); }
.info-karta dd small { color: var(--na-ciemnym-3); font-weight: 400; }
.formularz { background: var(--stal-50); border: 1px solid var(--stal-200); border-radius: var(--r-lg); padding: 32px; }
.formularz h3 { margin-bottom: 18px; }
.pola { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.pola label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pola .pelna { grid-column: 1 / -1; }
.pola input, .pola textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--stal-300); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.pola input:focus, .pola textarea:focus { outline: 0; border-color: var(--niebieski); box-shadow: 0 0 0 4px rgba(47, 106, 224, .15); }
.pola input.blad, .pola textarea.blad { border-color: #d93636; }
.pola textarea { resize: vertical; min-height: 110px; }
.podpowiedz { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* Stopka */
.stopka { background: var(--granat-900); color: var(--na-ciemnym-2); padding: 56px 0 28px; border-top: 1px solid rgba(255, 255, 255, .06); }
.stopka-siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.stopka .logo { color: var(--na-ciemnym); }
.stopka-haslo { margin-top: 14px; max-width: 360px; }
.stopka-ciasteczka { margin-top: 10px; font-size: 13px; color: var(--na-ciemnym-3); }
.stopka-tytul { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--na-ciemnym-3); margin-bottom: 12px; }
.stopka nav a { display: block; padding: 5px 0; text-decoration: none; color: var(--na-ciemnym-2); }
.stopka nav a:hover, .stopka nav a[aria-current] { color: #fff; }
.stopka-dol { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; color: var(--na-ciemnym-3); }
.na-gore { color: inherit; text-decoration: none; }
.na-gore:hover { color: #fff; }

/* Ujawnianie przy przewijaniu */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.widoczny { opacity: 1; transform: none; }
.bez-js .reveal { opacity: 1; transform: none; }

/* ── Podstrona „System” ─────────────────────────────────────────────────── */
.nav > a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .07); }
.hero-system .hero-system-wnetrze { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 64px); max-width: 980px; }
.hero-system h1 { font-size: clamp(38px, 5.6vw, 68px); margin: 22px 0 18px; }
.wstecz { display: table; margin-bottom: 22px; color: var(--na-ciemnym-2); text-decoration: none; font-weight: 500; }
.wstecz:hover { color: #fff; }
.hero-uwaga { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--na-ciemnym-3); }
.hero-uwaga svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.skoki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.skoki a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--na-ciemnym-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.skoki a:hover { background: rgba(240, 180, 60, .14); border-color: rgba(240, 180, 60, .45); color: #fff; }
.funkcje .kontener { display: grid; gap: clamp(56px, 8vw, 104px); }
.funkcja { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; scroll-margin-top: calc(var(--naglowek-h) + 24px); }
.funkcja.odwrotna { grid-template-columns: 1fr 1.35fr; }
.funkcja.odwrotna .zrzut { order: 2; }
.zrzut { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--granat-800); border: 1px solid rgba(15, 23, 42, .12); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset; transition: transform .3s var(--ease), box-shadow .3s; }
.zrzut:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(15, 23, 42, .65); }
.zrzut img { width: 100%; height: auto; display: block; }
.zrzut-pasek { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #070b14; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.zrzut-pasek i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.zrzut-pasek i:first-child { background: #ef4444; } .zrzut-pasek i:nth-child(2) { background: #f0b43c; } .zrzut-pasek i:nth-child(3) { background: #43c285; }
.zrzut-pasek b { margin-left: 10px; font-weight: 500; font-size: 12px; color: var(--na-ciemnym-3); letter-spacing: .02em; }
.zrzut-lupa { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(7, 11, 20, .82); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.zrzut-lupa svg { width: 14px; height: 14px; transform: rotate(-45deg); }
.zrzut:hover .zrzut-lupa, .zrzut:focus-visible .zrzut-lupa { opacity: 1; transform: none; }
.funkcja-tekst h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.funkcja-opis { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.funkcja-punkty { display: grid; gap: 10px; margin-top: 20px; }
.funkcja-punkty li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--ink); font-weight: 500; }
.funkcja-punkty .ptaszek { width: 26px; height: 26px; border-radius: 8px; margin-top: 0; }
.funkcja-punkty .ptaszek svg { width: 16px; height: 16px; }
.cta-przyciski { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-obrys-ciemny { border-color: rgba(26, 18, 0, .45); color: var(--bursztyn-ink); background: transparent; }
.btn-obrys-ciemny:hover { background: rgba(26, 18, 0, .08); border-color: var(--bursztyn-ink); }
/* Karty-linki (Technologia, „Poza panelem”) */
.karta-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.karta-link p { flex: 1; }
.karta-wiecej { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--bursztyn); }
.karta-wiecej svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.karta-link:hover .karta-wiecej svg { transform: translateX(4px); }
.siatka-poza { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }

/* ── Podstrony „System / …” ─────────────────────────────────────────────── */
.okruszki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; font-size: 14px; color: var(--na-ciemnym-3); }
.okruszki a { color: var(--na-ciemnym-2); text-decoration: none; }
.okruszki a:hover { color: #fff; }
.okruszki b { color: var(--na-ciemnym); font-weight: 600; }
.funkcja.z-telefonami { grid-template-columns: 1fr 1fr; }
.funkcja.odwrotna .obrazy { order: 2; }
.funkcja.szeroka { grid-template-columns: 1fr; gap: 32px; }
.funkcja.szeroka .funkcja-tekst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
.funkcja.szeroka .funkcja-tekst > .etykieta, .funkcja.szeroka .funkcja-tekst > h2 { grid-column: 1 / -1; }
.funkcja.szeroka .funkcja-punkty { margin-top: 0; }
.funkcja.bez-obrazu { display: block; background: #fff; border: 1px solid var(--stal-200); border-left: 5px solid var(--bursztyn); border-radius: var(--r-lg); padding: 32px 36px; }
.funkcja.bez-obrazu .funkcja-tekst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.funkcja.bez-obrazu .funkcja-tekst > .etykieta, .funkcja.bez-obrazu .funkcja-tekst > h2 { grid-column: 1 / -1; }
.funkcja.bez-obrazu .funkcja-punkty { margin-top: 0; }
.obrazy { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.obraz { margin: 0; display: grid; gap: 10px; justify-items: center; }
.obraz figcaption { font-size: 13px; color: var(--ink-3); text-align: center; }
.obrazy-telefon .obraz { flex: 1 1 0; min-width: 0; max-width: 260px; }
.obrazy-telefon.obrazy-1 .obraz { flex: 0 1 290px; max-width: 290px; }
.obrazy-telefon.obrazy-4 .obraz { max-width: 250px; }
.zrzut-telefon { border-radius: 30px; border: 9px solid #0b1220; background: #0b1220; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .6), 0 0 0 1px rgba(15, 23, 42, .25); width: 100%; }
.zrzut-telefon img { border-radius: 21px; }
.obrazy-ekran .obraz, .obrazy-dokument .obraz { flex: 1 1 100%; }
.obrazy-dokument.obrazy-2 .obraz { flex: 1 1 calc(50% - 11px); max-width: calc(50% - 11px); }
.zrzut-dokument { border-radius: 6px; background: #fff; box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .08); width: 100%; }
.zrzut-dokument img { border-radius: 6px; }
.obrazy-dokument.obrazy-1 .obraz { max-width: 560px; }
.inne-sekcja { padding: 56px 0; }
.inne-strony { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.inna-strona { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--stal-200); background: var(--stal-50); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.inna-strona:hover { border-color: var(--stal-300); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .4); }
.inna-strona .ikona { width: 40px; height: 40px; border-radius: 11px; }
.inna-strona .ikona svg { width: 22px; height: 22px; }
.inna-strona > svg { width: 18px; height: 18px; color: var(--ink-3); }
.inna-strona.glowna { background: var(--granat-800); color: var(--na-ciemnym); border-color: var(--granat-800); }
.inna-strona.glowna .ikona { color: var(--bursztyn); }

/* Powiększenie zrzutu */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(4, 7, 13, .94); backdrop-filter: blur(6px); padding: 24px 12px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-height: 100%; grid-column: 2; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.lightbox figcaption { color: var(--na-ciemnym-2); font-size: 15px; text-align: center; }
.lightbox button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; display: grid; place-items: center; justify-self: center; }
.lightbox button:hover { background: rgba(255, 255, 255, .14); }
.lightbox button svg { width: 22px; height: 22px; }
.lb-poprz svg { transform: rotate(180deg); }
.lb-zamknij { position: absolute; top: 18px; right: 18px; }
body.lb-otwarty { overflow: hidden; }

/* 404 */
.strona-404 { min-height: 100vh; display: grid; place-items: center; color: var(--na-ciemnym); background: var(--granat-800); }
.s404 { text-align: center; padding: 48px 24px; max-width: 560px; }
.s404 .logo { justify-content: center; margin-bottom: 32px; }
.s404-kod { font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: 1; color: var(--bursztyn); }
.s404 h1 { font-size: 36px; margin: 8px 0 12px; }
.s404 p { color: var(--na-ciemnym-2); }
.s404-en { margin-top: 12px; }
.s404-linki { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ── Responsywność ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .siatka-4 { grid-template-columns: repeat(2, 1fr); }
  .kroki { grid-template-columns: repeat(2, 1fr); }
  .krok:not(:last-child)::after { display: none; }
  .hero-siatka { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1120px) {
  /* Nagłówek: pełne menu nie mieści się poniżej ~1100 px (5 linków + języki + portal) → menu w panelu */
  .nav { display: none; }
  .menu-mobilne { display: flex; position: fixed; z-index: 99; top: var(--naglowek-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px var(--rynna) 32px; background: rgba(7, 11, 20, .97); color: var(--na-ciemnym); overflow-y: auto; transform: translateX(100%); transition: transform .3s var(--ease), visibility 0s .3s; visibility: hidden; }
  body.menu-otwarte .menu-mobilne { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  body.menu-otwarte { overflow: hidden; }
  .menu-mobilne > a { font-size: 20px; font-weight: 500; padding: 14px 12px; border-radius: 10px; color: var(--na-ciemnym); text-decoration: none; }
  .menu-mobilne > a:hover { background: rgba(255, 255, 255, .07); }
  .nav-mobil { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); max-width: 420px; }
  .nav-mobil .jezyki { align-self: flex-start; }
  .nav-mobil .btn { justify-content: center; }
  .naglowek-prawa .jezyki { display: none; }
  .hamburger { display: inline-flex; }
}
@media (max-width: 960px) {
  :root { --rynna: 20px; --naglowek-h: 64px; }
  .naglowek-prawa .btn { display: none; }
  .hero-siatka { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .panel { transform: none; }
  .hero-panel-wrap:hover .panel { transform: none; }
  .pasek-siatka { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px 16px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .siatka-3 { grid-template-columns: repeat(2, 1fr); }
  .flota-siatka, .zasieg-siatka, .kontakt-siatka { grid-template-columns: 1fr; }
  .wyroznik { grid-template-columns: 1fr; }
  .pas-wnetrze { grid-template-columns: 1fr; }
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .funkcja, .funkcja.odwrotna, .funkcja.z-telefonami { grid-template-columns: 1fr; }
  .funkcja.odwrotna .zrzut { order: 0; }
  .funkcja.odwrotna .obrazy { order: 0; }
  .funkcja.szeroka .funkcja-tekst, .funkcja.bez-obrazu .funkcja-tekst { grid-template-columns: 1fr; }
  .funkcja.szeroka .funkcja-punkty, .funkcja.bez-obrazu .funkcja-punkty { margin-top: 20px; }
}
@media (max-width: 600px) {
  :root { --rynna: 16px; }
  body { font-size: 15px; }
  .logo span { font-size: 21px; }
  .siatka-4, .siatka-3, .kroki, .spec, .pola, .stopka-siatka, .galeria { grid-template-columns: 1fr; }
  .galeria img:first-child { aspect-ratio: 4 / 3; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .hero-przyciski .btn { width: 100%; justify-content: center; }
  .przyciski-srodek .btn { width: 100%; justify-content: center; }
  .pasek-siatka { grid-template-columns: 1fr 1fr; }
  .stat-liczba { font-size: 26px; }
  .karta, .info-karta, .formularz, .ilustracja, .mapa-karta { padding: 22px 18px; }
  .wyroznik { padding: 22px 18px; }
  .wyroznik .btn { width: 100%; justify-content: center; white-space: normal; text-align: left; }
  .mapa-tras .miasto-nazwa { font-size: 22px; } .mapa-tras .miasto-nazwa.duze { font-size: 24px; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 64px 8px 16px; gap: 12px; }
  .lightbox figure { grid-column: 1; }
  .lb-poprz, .lb-nast { position: absolute; bottom: 18px; }
  .lb-poprz { left: 18px; } .lb-nast { right: 18px; }
  .cta-przyciski .btn { width: 100%; justify-content: center; }
  .obrazy { gap: 14px; }
  .obrazy-telefon .obraz { flex: 0 1 calc(50% - 7px); max-width: none; }
  .obrazy-telefon.obrazy-1 .obraz { flex-basis: 78%; max-width: 78%; }
  .obrazy-dokument.obrazy-2 .obraz { flex: 1 1 100%; max-width: 100%; }
  .zrzut-telefon { border-width: 6px; border-radius: 22px; }
  .zrzut-telefon img { border-radius: 16px; }
  .funkcja.bez-obrazu { padding: 22px 18px; }
  .zrzut-lupa { opacity: 1; transform: none; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mapa-tras .trasa { animation: none; }
  .mapa-tras animateMotion { display: none; }
  .zywo i { animation: none; }
  .panel, .karta, .btn { transition: none; }
}

/* ══ MULTIMEDIA (28.09.2026: niech strona będzie ładniejsza graficznie, multimedialna) ══════════════════
   buduj.mjs dokleja ten plik na końcu dist/style.css. */

/* Hero z filmem w tle: plakat od razu, film po wczytaniu (skrypt.js), przyciemnienie pod tekstem */
.hero-film .hero-tlo { background: var(--granat-900); }
.hero-plakat, .hero-wideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-wideo { opacity: 0; transition: opacity 1.4s ease; }
.hero-wideo.gra { opacity: 1; }
.hero-film .hero-tlo::after {
  z-index: 1; background-image: none; mask-image: none; -webkit-mask-image: none;
  background:
    linear-gradient(90deg, rgba(7, 11, 20, .94) 0%, rgba(7, 11, 20, .78) 34%, rgba(7, 11, 20, .32) 66%, rgba(7, 11, 20, .42) 100%),
    linear-gradient(180deg, rgba(7, 11, 20, .6) 0%, transparent 22%, transparent 58%, rgba(7, 11, 20, .96) 100%);
}
.hero-film .panel { background: rgba(12, 19, 34, .66); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border-color: rgba(255, 255, 255, .16); }
.hero-film .panel-mapa { background: rgba(8, 14, 26, .55); }
.hero-film h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.btn-film { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-left: 14px; }
.btn-film:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.btn-film .play { width: 32px; height: 32px; border-radius: 50%; background: var(--bursztyn); color: var(--bursztyn-ink); display: grid; place-items: center; animation: puls-film 2.4s infinite; }
.btn-film .play svg { width: 14px; height: 14px; margin-left: 2px; }
@keyframes puls-film { 0% { box-shadow: 0 0 0 0 rgba(240, 180, 60, .6); } 70% { box-shadow: 0 0 0 12px rgba(240, 180, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 180, 60, 0); } }
.wideo-pauza { position: absolute; z-index: 2; right: max(var(--rynna), calc((100vw - var(--kontener)) / 2 + var(--rynna))); top: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(7, 11, 20, .45); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); }
.wideo-pauza[hidden] { display: none; }
.wideo-pauza svg { width: 16px; height: 16px; }
.wideo-pauza .i-play, .wideo-pauza[aria-pressed="true"] .i-pauza { display: none; }
.wideo-pauza[aria-pressed="true"] .i-play { display: block; }
.hero-film .pasek-zaufania { background: rgba(7, 11, 20, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Taśma z trasami */
.tasma { position: relative; overflow: hidden; background: var(--bursztyn); color: var(--bursztyn-ink); padding: 13px 0; }
.tasma-tor { display: flex; width: max-content; animation: tasma 70s linear infinite; }
.tasma li { display: flex; align-items: center; gap: 10px; padding-right: 44px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .02em; white-space: nowrap; }
.tasma li svg { width: 22px; height: 22px; opacity: .85; }
.tasma:hover .tasma-tor { animation-play-state: paused; }
@keyframes tasma { to { transform: translateX(-50%); } }

/* Karty usług ze zdjęciem */
.karta-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karta-zdjecie { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--granat-700); }
.karta-zdjecie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.karta-foto:hover .karta-zdjecie img { transform: scale(1.07); }
.karta-zdjecie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7, 11, 20, .4)); }
.karta-tresc { position: relative; padding: 0 26px 28px; }
.karta-foto .ikona { position: relative; z-index: 1; margin-top: -25px; background: #fff; color: var(--bursztyn-600); box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .35); border: 1px solid var(--stal-200); }

/* System w akcji: laptop + telefon z nagraniami */
.akcja + .sekcja.ciemna { padding-top: 0; }
.akcja { position: relative; overflow: hidden; background: radial-gradient(900px 520px at 12% 0%, rgba(47, 106, 224, .2), transparent 62%), radial-gradient(760px 460px at 96% 100%, rgba(240, 180, 60, .13), transparent 60%), var(--granat-800); }
.akcja-siatka { display: grid; grid-template-columns: 1.6fr .8fr; gap: 56px; align-items: center; }
.urzadzenia { position: relative; padding: 0 64px 44px 0; }
.laptop { margin: 0; }
.laptop-ramka { background: linear-gradient(180deg, #1a2233, #0e1420); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px 18px 6px 6px; padding: 12px 12px 16px; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.laptop-ekran { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #05080f; }
.laptop-ekran video, .smartfon-ekran video { width: 100%; height: 100%; object-fit: cover; }
.laptop-podstawa { position: relative; height: 16px; margin: 0 -7%; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, #3a4458, #151b28); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .8); }
.laptop-podstawa::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 16%; height: 6px; border-radius: 0 0 8px 8px; background: #0a0e17; }
.smartfon { position: absolute; right: 0; bottom: 0; width: 25%; margin: 0; padding: 7px; border-radius: 30px; background: #04060b; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .95), 0 0 0 5px rgba(255, 255, 255, .03); }
.smartfon-ekran { aspect-ratio: 390 / 844; border-radius: 24px; overflow: hidden; background: #000; }
.akcja-opisy { display: grid; gap: 30px; }
.akcja-opisy li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; }
.akcja-opisy .ikona { background: rgba(240, 180, 60, .14); color: var(--bursztyn); }
.akcja-opisy h3 { font-size: 24px; margin-bottom: 8px; }
.akcja-opisy p { color: var(--na-ciemnym-2); font-size: 15.5px; }
.link-film { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--bursztyn); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.link-film svg { width: 14px; height: 14px; }
.link-film:hover { color: #f5c25a; text-decoration: underline; text-underline-offset: 4px; }
.akcja-uwaga { display: flex; align-items: center; gap: 8px; margin-top: 30px; font-size: 13px; color: var(--na-ciemnym-3); }
.akcja-uwaga svg { width: 16px; height: 16px; flex: none; color: var(--ok); }

/* Pas ze zdjęciem (paralaksa) */
.pas-foto { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center; min-height: clamp(380px, 48vw, 600px); color: #fff; background: var(--granat-900); }
.pas-foto-img, .pas-kierowcy-img { position: absolute; left: 0; top: -14%; width: 100%; height: 128%; object-fit: cover; z-index: -2; will-change: transform; }
.pas-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 20, .88) 0%, rgba(7, 11, 20, .45) 55%, rgba(7, 11, 20, .1) 100%); }
.pas-foto blockquote { margin: 0; max-width: 780px; padding: 60px 0; }
.pas-foto blockquote p { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.8vw, 62px); line-height: 1.04; letter-spacing: -.01em; }
.pas-foto cite { display: block; margin-top: 20px; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn); }

/* Galeria „W trasie” — karuzela */
.galeria-sekcja { padding-bottom: clamp(52px, 7vw, 92px); background: linear-gradient(180deg, var(--granat-800), var(--granat-900)); }
.karuzela-tor { --margines: max(var(--rynna), calc((100vw - var(--kontener)) / 2 + var(--rynna)));
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margines); padding: 6px var(--margines) 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.karuzela-tor::-webkit-scrollbar { display: none; }
.karuzela-tor:focus-visible { outline-offset: -3px; }
.slajd { flex: 0 0 min(64vw, 900px); scroll-snap-align: start; }
.slajd a { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--granat-700); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.slajd img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.slajd a:hover img { transform: scale(1.045); }
.slajd p { margin-top: 14px; color: var(--na-ciemnym-2); font-size: 15px; }
.karuzela-dol { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; }
.galeria-uwaga { font-size: 13px; color: var(--na-ciemnym-3); }
.karuzela-nav { display: flex; gap: 10px; }
.karuzela-nav button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.karuzela-nav button:hover { background: var(--bursztyn); border-color: var(--bursztyn); color: var(--bursztyn-ink); }
.karuzela-nav svg { width: 20px; height: 20px; }
.k-poprz svg { transform: rotate(180deg); }

/* Pas dla kierowców ze zdjęciem */
.pas-kierowcy-foto { position: relative; overflow: hidden; isolation: isolate; background: var(--granat-900); color: #fff; }
.pas-kierowcy-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 20, .93) 0%, rgba(7, 11, 20, .72) 48%, rgba(7, 11, 20, .25) 100%); }
.pas-kierowcy-foto .pas-wnetrze { padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(70px, 9vw, 120px); }
.pas-kierowcy-foto h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 14px; }
.pas-kierowcy-foto p { color: var(--na-ciemnym-2); font-size: 17px; }

/* Flota: dwa zestawy przenikają się w jednej ramce (co 12 s), najechanie zatrzymuje */
.zestawy { display: grid; }
.zestawy > figure { grid-area: 1 / 1; margin: 0; }
.zestawy img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); background: var(--granat-800); box-shadow: 0 24px 50px -28px rgba(15, 23, 42, .5); }
/* bez podpisów pod zdjęciami (Rafał 28.09: „każdy widzi, jaka kabina i plandeka”) */
.zestawy > figure:nth-child(2) { animation: zestaw 12s ease-in-out infinite; }
.zestawy > figure:first-child figcaption { animation: zestaw-podpis 12s ease-in-out infinite; }
.zestawy:hover > figure:nth-child(2), .zestawy:hover > figure:first-child figcaption { animation-play-state: paused; }
@keyframes zestaw { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zestaw-podpis { 0%, 40% { opacity: 1; } 45%, 95% { opacity: 0; } 100% { opacity: 1; } }
/* trzy zestawy (biała → niebieska → żółta): przełącza skrypt.js klasą .aktywny co 6 s (najechanie = pauza);
   bez JS widać pierwszy zestaw */
.zestawy-3 > figure, .zestawy-3 > figure:nth-child(2), .zestawy-3 > figure:first-child figcaption { animation: none; }
.zestawy-3 > figure { opacity: 0; transition: opacity 1s ease-in-out; background: var(--stal-100); }
.zestawy-3 > figure.aktywny, .zestawy-3:not(.js) > figure:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .zestawy { gap: 18px; }
  .zestawy > figure { grid-area: auto; }
  .zestawy > figure:nth-child(2) { animation: none; }
  .zestawy-3 > figure { opacity: 1; transition: none; }
}

/* ── Strony usług /uslugi/<slug>/ (28.09.2026): zdjęcie w tle, liczby, kroki, korzyści ze zdjęciami ── */
.karta-foto .karta-tresc { display: flex; flex-direction: column; flex: 1; }
.karta-foto .karta-wiecej { margin-top: auto; padding-top: 16px; color: var(--marka); }
.karta-foto.karta-link { cursor: pointer; }
.hero-usluga-wnetrze { position: relative; z-index: 1; padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-usluga h1 { font-size: clamp(36px, 5.2vw, 66px); margin: 22px 0 18px; max-width: 900px; }
.hero-usluga .hero-sub { max-width: 700px; }
.hero-usluga .pasek-zaufania { position: relative; z-index: 1; }
.usluga-szczegoly { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.usluga-punkty { margin-top: 4px; }
.usluga-punkty p { font-size: 16.5px; color: var(--ink); line-height: 1.55; padding-top: 5px; }
.usluga-link { margin-top: 28px; }
.usluga-link a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--marka); text-decoration: none; border-bottom: 2px solid rgba(18, 51, 84, .25); padding-bottom: 3px; }
.usluga-link a:hover { border-color: var(--marka); }
.usluga-link svg { width: 18px; height: 18px; }
/* zdjęcia: pierwsze duże, drugie mniejsze nachodzi na nie od dołu z prawej */
.usluga-obrazy { display: grid; grid-template-columns: 1fr; align-items: start; }
.usluga-obrazy figure { margin: 0; }
.usluga-obrazy figure:nth-child(2) { width: 62%; justify-self: end; margin-top: -18%; position: relative; }
.usluga-obrazy figure:nth-child(2) a { border: 6px solid var(--stal-100); }
.usluga-obrazy figure:first-child { width: 88%; }
.usluga-dokumenty { grid-template-columns: 1fr 1fr; gap: 16px; }
.usluga-dokumenty figure:nth-child(n) { width: auto; margin-top: 0; }
.usluga-dokumenty figure:nth-child(2) { margin-top: 48px; }
.usluga-dokumenty figure:nth-child(2) a { border: 0; }
.usluga-obrazy a { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .55); background: var(--granat-700); }
.usluga-obrazy img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
.usluga-obrazy a:hover img { transform: scale(1.04); }
.usluga-dokumenty img { aspect-ratio: auto; background: #fff; }
.usluga-obrazy figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.usluga-uwaga { margin-top: 32px; font-size: 13px; color: var(--ink-3); }
.inne-uslugi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.inne-uslugi .karta h3 { color: var(--ink); }
@media (max-width: 960px) {
  .usluga-szczegoly { grid-template-columns: 1fr; }
  .inne-uslugi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .inne-uslugi { grid-template-columns: 1fr; }
  .usluga-dokumenty { gap: 10px; }
  .usluga-dokumenty figure:nth-child(2) { margin-top: 28px; }
  .hero-usluga .hero-przyciski .btn { white-space: normal; text-align: left; }
}

/* ── Dźwięk (28.09.2026): przełącznik w rogu, lektor, przewracanie strony ───────────────────────── */
.dzwiek { position: fixed; z-index: 150; left: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(11, 18, 32, .82); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .2s var(--ease), background .2s; }
.dzwiek:hover { transform: scale(1.06); background: rgba(18, 51, 84, .92); }
.dzwiek svg { width: 22px; height: 22px; }
.dzwiek .kreska { display: none; }
.dzwiek[aria-pressed="false"] .fala { display: none; }
.dzwiek[aria-pressed="false"] .kreska { display: inline; }
.dzwiek[aria-pressed="false"] { color: var(--na-ciemnym-3); }
.dzwiek-eq { position: absolute; right: 7px; bottom: 9px; display: none; gap: 2px; align-items: flex-end; height: 10px; }
.dzwiek.gra[aria-pressed="true"] .dzwiek-eq { display: flex; }
.dzwiek-eq i { width: 2px; height: 4px; border-radius: 1px; background: var(--bursztyn); animation: eq 0.9s ease-in-out infinite; }
.dzwiek-eq i:nth-child(2) { animation-delay: -.3s; } .dzwiek-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
.lektor { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 4px; padding: 8px 16px 8px 8px; border-radius: 999px;
  border: 1px solid var(--stal-300); background: #fff; color: var(--marka); font: 600 14px/1 var(--font-ui); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.lektor:hover { border-color: var(--marka); box-shadow: 0 8px 20px -12px rgba(18, 51, 84, .5); }
.lektor-ikona { width: 28px; height: 28px; border-radius: 50%; background: var(--bursztyn); color: var(--bursztyn-ink); display: grid; place-items: center; }
.lektor-ikona svg { width: 12px; height: 12px; grid-area: 1 / 1; }
.lektor-ikona svg:first-child { margin-left: 2px; }
.lektor-ikona svg:last-child, .lektor.gra .lektor-ikona svg:first-child { display: none; }
.lektor.gra .lektor-ikona svg:last-child { display: block; }
.lektor.gra .lektor-ikona { animation: puls-film 1.6s infinite; }
.lektor-postep { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.lektor-postep i { display: block; height: 100%; width: var(--postep, 0%); background: var(--bursztyn); transition: width .25s linear; }
/* przewracanie strony: stara odjeżdża w lewo, nowa wjeżdża z prawej (tylko treść — nagłówek i przyciski stoją) */
html.wyjscie main { opacity: 0; transform: translateX(-3%) rotateY(4deg); transform-origin: left center; transition: opacity .26s ease-in, transform .26s ease-in; }
html.wejscie main { animation: kartka-wejscie .5s cubic-bezier(.2, .7, .2, 1); transform-origin: right center; }
@keyframes kartka-wejscie { from { opacity: 0; transform: translateX(3%) rotateY(-4deg); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .dzwiek { left: 12px; bottom: 12px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { html.wyjscie main, html.wejscie main { transition: none; animation: none; } .dzwiek-eq i { animation: none; } }

/* Nagranie w nagłówku podstron systemu */
.hero-wideo-ramka { margin-top: 36px; max-width: 920px; }
.hero-wideo-ramka .smartfon { position: relative; width: min(300px, 70vw); }
.hero-wideo-ramka.pion { display: flex; justify-content: flex-start; }

/* Okienko: film */
.lightbox video { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 10px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.lightbox img[hidden], .lightbox video[hidden] { display: none; }
.lightbox.bez-strzalek .lb-poprz, .lightbox.bez-strzalek .lb-nast { visibility: hidden; }

@media (max-width: 1100px) {
  .akcja-siatka { grid-template-columns: 1fr; gap: 44px; }
  .akcja-opisy { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero-film .hero-tlo::after { background: linear-gradient(180deg, rgba(7, 11, 20, .78) 0%, rgba(7, 11, 20, .6) 45%, rgba(7, 11, 20, .96) 100%); }
  .wideo-pauza { top: 14px; }
  .slajd { flex-basis: 84vw; }
}
@media (max-width: 600px) {
  .akcja-opisy { grid-template-columns: 1fr; }
  .urzadzenia { padding: 0 34px 36px 0; }
  .smartfon { width: 32%; padding: 4px; border-radius: 18px; }
  .smartfon-ekran { border-radius: 14px; }
  .laptop-ramka { padding: 6px 6px 9px; border-radius: 12px 12px 4px 4px; }
  .laptop-podstawa { height: 10px; }
  .tasma li { font-size: 16px; padding-right: 32px; }
  .karuzela-dol { flex-direction: column-reverse; align-items: flex-start; }
  .karta-tresc { padding: 0 18px 22px; }
  .pas-kierowcy-foto .btn { width: 100%; justify-content: center; }
  .pas-foto::before, .pas-kierowcy-foto::before { background: linear-gradient(180deg, rgba(7, 11, 20, .6), rgba(7, 11, 20, .85)); }
}
@media (prefers-reduced-motion: reduce) {
  .tasma-tor { animation: none; }
  .btn-film .play { animation: none; }
  .hero-wideo { display: none; }
  .karta-zdjecie img, .slajd img { transition: none; }
}