/* ==========================================================
   Szkoła jazdy kat. B – style
   ========================================================== */
:root {
  --ink: #0E1216;
  --asphalt: #15191E;
  --asphalt-2: #1D2228;
  --asphalt-3: #262C34;
  --paper: #F5F3EE;
  --paper-2: #ECE8DF;
  --text: #12161B;
  --muted: #5A636E;
  --muted-d: #A1AAB5;
  --line: rgba(18, 22, 27, .1);
  --line-2: rgba(18, 22, 27, .16);
  --line-d: rgba(255, 255, 255, .1);
  --blue: #1A56C4;
  --blue-2: #2F6FED;
  --blue-soft: #E8EFFC;
  --yellow: #FFC233;
  --yellow-2: #FFD263;
  --green: #1F9D55;
  --ph: #D92D35;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --hdr: 76px;
  --g: clamp(16px, 4vw, 40px);

  --ph-c: #D92D35;
  --ph-bg: rgba(229, 72, 77, .1);
}

/* ---------- Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--asphalt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.ico {
  display: inline-block; flex-shrink: 0;
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(1240px + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* Miejsca do uzupełnienia (czerwone) */
.ph-t {
  color: var(--ph-c); background: var(--ph-bg);
  border-radius: 4px; padding: 0 .16em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-tag {
  display: inline-block; vertical-align: middle;
  font-family: var(--font); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ph-c); border: 1px solid currentColor; border-radius: 99px; padding: 2px 7px; line-height: 1.3;
}
.road-sec, .signup, .foot, .hdr, .mnav, .stats, .calc, .mcard__back, .pump__head, .lcd {
  --ph-c: #FF8F94; --ph-bg: rgba(255, 120, 126, .15);
}
.btn--primary { --ph-c: #A3121A; --ph-bg: rgba(255, 255, 255, .45); }

/* ---------- Przyciski ---------- */
.btn {
  --bh: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh); padding: 0 24px;
  border: 0; border-radius: 99px;
  font-family: inherit; font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s;
}
.btn--sm { --bh: 42px; padding: 0 18px; font-size: .9rem; }
.btn--lg { --bh: 58px; padding: 0 30px; font-size: 1.04rem; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .35s var(--ease); }
.btn--primary {
  background: var(--yellow); color: var(--ink);
  box-shadow: 0 12px 30px -14px rgba(255, 194, 51, .8), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 12px 30px -16px rgba(14, 18, 22, .7); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .35; cursor: not-allowed; box-shadow: none; }
@media (hover: hover) {
  .btn:hover .arr { transform: translateX(4px); }
  .btn--primary:hover { background: var(--yellow-2); transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(255, 194, 51, .85), inset 0 -2px 0 rgba(0, 0, 0, .12); }
  .btn--ghost:hover { background: rgba(255, 255, 255, .13); }
  .btn--dark:hover { background: #000; transform: translateY(-2px); }
  .btn[disabled]:hover { transform: none; background: var(--ink); }
}

/* ---------- Nagłówki sekcji ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 13px);
}
.eyebrow--dark { color: var(--yellow); }
.eyebrow--dark::before { display: none; }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(255, 194, 51, .55); animation: pulse 2.4s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 194, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 194, 51, 0); } }

.sec { padding: clamp(84px, 11vw, 140px) 0; position: relative; }
.sec-h { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-h h2, .signup h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.7rem); font-stretch: 116%; font-weight: 800;
  line-height: 1; letter-spacing: -.025em; margin: .38em 0 .42em; text-wrap: balance;
}
.sec-sub { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.sec-cta { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sec-cta p { color: var(--muted); }
.sec-cta p a { color: var(--text); font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Pojawianie się ---------- */
.anim [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.anim [data-reveal].is-in { opacity: 1; transform: none; }
.anim [data-in] { animation: heroIn 1.1s var(--ease) both; animation-delay: calc(.12s + var(--d, 0) * 90ms); }
.hero__txt > :nth-child(2) { --d: 1; }
.hero__txt > :nth-child(3) { --d: 2; }
.hero__txt > :nth-child(4) { --d: 3; }
.hero__txt > :nth-child(5) { --d: 4; }
.hero__hint { --d: 7; }
@keyframes heroIn { from { opacity: 0; translate: 0 34px; } }

/* ==========================================================
   Menu
   ========================================================== */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); color: #fff;
  transition: background-color .4s, box-shadow .4s, height .4s var(--ease);
}
.hdr.is-solid, .menu-open .hdr {
  background: rgba(14, 18, 22, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
.hdr__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-width: 0; }
.logo__l {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--blue); color: #fff; font-weight: 900; font-size: 1.45rem; font-stretch: 100%; line-height: 1;
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 5px var(--blue), 0 6px 18px -6px rgba(26, 86, 196, .8);
}
.logo__l--sm { width: 30px; height: 30px; font-size: 1rem; border-radius: 7px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--blue); }
.logo__txt { min-width: 0; }
.logo__txt b { display: block; font-weight: 800; font-stretch: 112%; font-size: 1.04rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo__txt small { display: block; font-size: .72rem; color: var(--muted-d); letter-spacing: .04em; white-space: nowrap; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  color: rgba(255, 255, 255, .76); text-decoration: none; font-weight: 600; font-size: .94rem;
  padding: 10px 14px; border-radius: 99px; transition: color .25s, background-color .25s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hdr__end { display: flex; align-items: center; gap: 14px; }
.hdr__tel { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: .94rem; white-space: nowrap; }
.hdr__tel .ico { color: var(--yellow); }
.burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .08); place-items: center; position: relative;
}
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.menu-open .burger span:first-child { transform: rotate(45deg); }
.menu-open .burger span:last-child { transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 45; background: var(--ink); color: #fff;
  padding: calc(var(--hdr) + 20px) var(--g) calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow-y: auto;
}
.mnav[hidden] { display: none; }
.mnav__links a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--line-d);
  font-size: clamp(1.7rem, 8vw, 2.2rem); font-weight: 800; font-stretch: 115%; text-decoration: none;
  animation: mIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms);
}
.mnav__foot { display: grid; gap: 10px; animation: mIn .55s var(--ease) .3s both; }
@keyframes mIn { from { opacity: 0; transform: translateY(16px); } }
.menu-open { overflow: hidden; }

@media (max-width: 1100px) { .nav { display: none; } .hdr__end { margin-left: auto; } }
@media (max-width: 899px) {
  :root { --hdr: 66px; }
  .burger { display: grid; }
  .hdr__tel { display: none; }
  .logo__l { width: 38px; height: 38px; font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .logo__txt small { display: none; }
  .hdr__cta { padding: 0 14px; }
}

/* ==========================================================
   1. Droga do prawa jazdy
   ========================================================== */
.road-sec { position: relative; background: var(--asphalt); color: #fff; overflow: clip; isolation: isolate; }
.road-sec::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 120vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 60% at 12% 18%, rgba(26, 86, 196, .32), transparent 70%),
    radial-gradient(35% 40% at 88% 30%, rgba(255, 194, 51, .07), transparent 70%);
}
.road-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
.road-on .road-layer { display: block; }
.road-svg { position: absolute; top: 0; left: 0; overflow: visible; }
.rd-shoulder { fill: none; stroke: rgba(255, 255, 255, .035); stroke-linecap: round; stroke-linejoin: round; }
.rd-edge { fill: none; stroke: rgba(255, 255, 255, .55); stroke-linecap: round; stroke-linejoin: round; }
.rd-asphalt { fill: none; stroke: #2B3139; stroke-linecap: round; stroke-linejoin: round; }
.rd-center { fill: none; stroke: rgba(255, 255, 255, .78); stroke-linecap: butt; }
.car {
  position: absolute; top: 0; left: 0; width: 132px;
  transform-origin: 22.857% 50%; will-change: transform;
}
.car svg { display: block; width: 100%; height: auto; }
.car__beams { opacity: 0; transition: opacity .3s; }
.car.is-lit .car__beams { opacity: 1; }

.hero { position: relative; z-index: 1; min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--hdr) + 40px); padding-bottom: 110px; }
.hero__txt { max-width: min(660px, 62%); }
.hero__h {
  font-size: clamp(2.7rem, 5.6vw, 5.4rem); font-stretch: 118%; font-weight: 800;
  line-height: .95; letter-spacing: -.03em; margin: .34em 0 .36em; text-wrap: balance;
}
.hero__h em { font-style: normal; color: var(--yellow); white-space: nowrap; }
.hero__sub { font-size: clamp(1.08rem, 1.45vw, 1.28rem); color: var(--muted-d); max-width: 44ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-d); }
.hero__facts li { display: flex; flex-direction: column; line-height: 1.25; }
.hero__facts b { font-size: 1.5rem; font-stretch: 118%; font-weight: 800; }
.hero__facts span { font-size: .85rem; color: var(--muted-d); }
.hero__hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-d); white-space: nowrap;
}
.hero__mouse { width: 22px; height: 34px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .35); position: relative; }
.hero__mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: var(--yellow); animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Etapy – wersja podstawowa (oś czasu: bez JS i przy „ograniczeniu ruchu”) */
.track { position: relative; z-index: 1; padding: 40px 0 clamp(90px, 10vw, 130px); }
.stages { position: relative; display: grid; gap: 22px; max-width: 760px; }
.stages::before {
  content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px;
  border-left: 3px dashed rgba(255, 255, 255, .2);
}
.stage { position: relative; padding-left: 82px; }
.sign { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.sign__plate {
  width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 1.6rem; line-height: 1; font-stretch: 100%;
  background: var(--blue); color: #fff;
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 5px var(--blue), 0 8px 18px rgba(0, 0, 0, .3);
  transition: background-color .45s, color .45s, box-shadow .45s, transform .5s var(--spring);
}
.sign__post { display: none; width: 5px; height: 46px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #5D656F, #ADB4BC, #5D656F); }
.stage__card {
  position: relative; background: var(--asphalt-2); border: 1px solid var(--line-d); border-radius: 22px;
  padding: 24px 26px 26px; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .7);
}
.stage__k { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.stage__h { font-size: clamp(1.3rem, 2vw, 1.6rem); font-stretch: 112%; font-weight: 800; line-height: 1.12; margin: .35em 0 .45em; text-wrap: balance; }
.stage__p { color: var(--muted-d); }
.bubble {
  display: inline-block; margin-top: 16px; position: relative;
  background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .9rem; line-height: 1.35;
  padding: 10px 14px; border-radius: 14px 14px 14px 4px;
}

.finish { position: relative; display: grid; justify-items: center; text-align: center; gap: 38px; padding-top: 80px; }
.finish__k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-d); }
.checker {
  width: 22px; height: 16px; border-radius: 2px;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 8px 8px;
}
.finish__h { font-size: clamp(2.6rem, 6vw, 4.8rem); font-stretch: 120%; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: .2em 0 .3em; }
.finish__p { color: var(--muted-d); max-width: 46ch; margin: 0 auto 28px; }

/* Stylizowane prawo jazdy na mecie */
.license {
  position: relative; overflow: hidden; width: min(370px, 100%); aspect-ratio: 85.6 / 54;
  border-radius: 16px; padding: 16px 18px; text-align: left; color: #4A2B3D;
  background:
    radial-gradient(120% 90% at 0% 0%, #FDE5EE, transparent 60%),
    radial-gradient(110% 110% at 100% 100%, #DDE6FB, transparent 60%),
    #F4E3EC;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .7);
  transform: rotate(-4deg);
}
.license::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 78% 130%, rgba(155, 44, 91, .09) 0 1px, transparent 1px 7px);
}
.license > * { position: relative; }
.license__top { display: flex; justify-content: space-between; align-items: center; }
.license__top b { font-size: clamp(.95rem, 2.6vw, 1.2rem); font-stretch: 125%; font-weight: 900; letter-spacing: .06em; color: #9B2C5B; }
.license__top span { background: var(--blue); color: #fff; font-weight: 800; font-size: .72rem; padding: 4px 9px; border-radius: 6px; }
.license__body { display: grid; grid-template-columns: 30% 1fr; gap: 14px; margin-top: 12px; height: calc(100% - 44px); }
.license__photo { border-radius: 8px; background: #E8D0DC; display: grid; place-items: end center; overflow: hidden; }
.license__photo svg { width: 82%; fill: #B98BA4; }
.license__rows { display: grid; align-content: start; gap: 4px; font-family: var(--mono); font-size: clamp(.62rem, 1.7vw, .74rem); text-transform: uppercase; letter-spacing: .04em; }
.license__rows li { display: flex; gap: 8px; align-items: baseline; }
.license__rows i { font-style: normal; color: #A4708C; min-width: 2.2em; }
.license__rows b { font-family: var(--font); font-size: 1.6em; font-weight: 900; color: var(--blue); line-height: 1; }
.license__shine {
  position: absolute !important; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 48%, transparent 60%);
  transform: translateX(-130%);
}

/* ---------- Tryb „droga” (JS + animacje włączone) ---------- */
.road-on .stages::before { display: none; }
.road-on .sign__plate {
  background: #2A313A; color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .2), 0 8px 18px rgba(0, 0, 0, .35);
}
.road-on .stage.is-on .sign__plate {
  background: var(--blue); color: #fff; transform: scale(1.08);
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 5px var(--blue), 0 0 0 9px rgba(47, 111, 237, .2), 0 14px 44px rgba(47, 111, 237, .6);
}
.road-on .stage__card { opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.road-on .stage.is-on .stage__card { opacity: 1; }
.road-on .bubble { opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%; transition: opacity .4s var(--ease) .35s, transform .5s var(--spring) .35s; }
.road-on .stage.is-on .bubble { opacity: 1; transform: none; }
.road-on .license { opacity: 0; transform: rotate(-14deg) scale(.82) translateY(30px); transition: opacity .7s var(--ease), transform 1s var(--spring); }
.road-on .finish.is-on .license { opacity: 1; transform: rotate(-4deg); }
.road-on .finish.is-on .license__shine { transition: transform 1.3s var(--ease) .45s; transform: translateX(130%); }

@media (min-width: 900px) {
  .road-on .stages { display: block; max-width: none; }
  .road-on .stage { height: max(52vh, 420px); padding: 0; }
  .road-on .sign { top: calc(50% - 28px); }
  .road-on .sign__post { display: block; }
  .road-on .stage[data-side="left"] .sign { left: calc(var(--rx, 60%) - 116px); }
  .road-on .stage[data-side="right"] .sign { left: calc(var(--rx, 40%) + 60px); }
  .road-on .stage__card { position: absolute; top: 50%; }
  .road-on .stage[data-side="left"] .stage__card {
    right: calc(100% - var(--rx, 60%) + 150px); width: min(440px, calc(var(--rx, 60%) - 150px));
    transform: translate(-48px, -50%);
  }
  .road-on .stage[data-side="right"] .stage__card {
    left: calc(var(--rx, 40%) + 150px); width: min(440px, calc(100% - var(--rx, 40%) - 150px));
    transform: translate(48px, -50%);
  }
  .road-on .stage.is-on .stage__card { transform: translate(0, -50%); }
  .road-on .finish { padding-top: 150px; }
}

@media (max-width: 899px) {
  .hero { min-height: auto; padding-top: calc(var(--hdr) + 44px); padding-bottom: 80px; }
  .hero__txt { max-width: none; }
  .hero__h { font-size: clamp(2.5rem, 11.5vw, 3.8rem); }
  .hero__facts { gap: 14px 26px; margin-top: 38px; }
  .hero__facts b { font-size: 1.25rem; }
  .hero__hint { display: none; }
  .hero__btns .btn { flex: 1 1 auto; }
  .road-on .hero { padding-bottom: 170px; }
  .road-on .hero__hint { display: flex; left: 70px; bottom: 54px; transform: none; }

  .car { width: 86px; }
  .stage__card { padding: 20px 20px 22px; }
  .road-on .stages { gap: 0; max-width: none; }
  .road-on .stage { min-height: 44vh; padding: 0 0 40px 52px; }
  .road-on .sign { position: relative; left: auto; top: auto; align-items: flex-start; }
  .road-on .sign__plate { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 9px; }
  .road-on .stage__card { margin-top: 16px; transform: translateY(22px); }
  .road-on .stage.is-on .stage__card { transform: none; }
  .road-on .finish { justify-items: start; text-align: left; padding: 110px 0 0 52px; gap: 30px; }
  .road-on .finish__p { margin-left: 0; }
}

/* Prędkościomierz */
.speedo {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 132px; height: 132px; border-radius: 50%;
  display: none; pointer-events: none; color: #fff;
  background: radial-gradient(circle at 50% 38%, #29313B, #0E1216 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 0 0 6px #171C22, 0 24px 44px -14px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(18px) scale(.9); transform-origin: 100% 100%;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.road-on + .speedo { display: block; }
.speedo.is-on { opacity: 1; transform: none; }
.speedo__dial { position: absolute; inset: 0; width: 100%; height: 100%; }
.speedo__track, .speedo__fill { fill: none; stroke-width: 6; stroke-linecap: round; }
.speedo__track { stroke: rgba(255, 255, 255, .1); }
.speedo__fill { stroke: var(--yellow); stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.speedo__ticks line { stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-linecap: round; }
.speedo__ticks text { fill: rgba(255, 255, 255, .5); font: 700 7.5px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.speedo__needle {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin: -42px 0 0 -2px;
  border-radius: 3px; background: linear-gradient(#FF5A60, #E5484D);
  transform-origin: 50% 42px; transform: rotate(-135deg); will-change: transform;
  box-shadow: 0 0 10px rgba(229, 72, 77, .6);
}
.speedo__hub { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #0E1216; box-shadow: 0 0 0 3px #E5484D; }
.speedo__val { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-family: var(--mono); font-size: .8rem; color: var(--muted-d); }
.speedo__val b { font-size: 1.08rem; color: #fff; }
.speedo__lbl { position: absolute; left: 0; right: 0; bottom: 15px; text-align: center; font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
@media (max-width: 899px) {
  .speedo { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); scale: .68; }
}

/* ==========================================================
   2. Dlaczego my
   ========================================================== */
.why { background: var(--paper); }
.why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(26px, 3vw, 38px);
  transition: opacity .9s var(--ease), transform .7s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.tile::after {
  content: ""; position: absolute; left: clamp(26px, 3vw, 38px); right: clamp(26px, 3vw, 38px); bottom: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 18px, transparent 18px 30px);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease);
}
.tile__ico {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 24px;
  background: var(--blue-soft); color: var(--blue); transition: background-color .4s, color .4s, transform .5s var(--spring);
}
.tile__ico .ico { width: 28px; height: 28px; stroke-width: 1.7; }
.tile h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); font-stretch: 110%; font-weight: 800; line-height: 1.15; margin-bottom: .5em; }
.tile p { color: var(--muted); max-width: 46ch; }
@media (hover: hover) {
  .tile:hover { border-color: transparent; box-shadow: 0 30px 60px -30px rgba(18, 22, 27, .35); transform: translateY(-4px); }
  .tile:hover .tile__ico { background: var(--blue); color: #fff; transform: rotate(-6deg) scale(1.05); }
  .tile:hover::after { transform: scaleX(1); }
}

.stats {
  position: relative; overflow: hidden; margin-top: 20px; border-radius: 24px; color: #fff;
  background: var(--asphalt); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(30px, 4vw, 46px) 0;
}
.stat { position: relative; padding: 0 clamp(22px, 3vw, 44px); }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; border-left: 2px dashed rgba(255, 255, 255, .18); }
.stat b {
  display: flex; align-items: baseline; gap: 2px; font-size: clamp(2.5rem, 4.8vw, 4rem); font-stretch: 116%; font-weight: 800;
  line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat b.is-ph { color: #FF8F94; }
.stat p { margin-top: 10px; color: var(--muted-d); }
.stat .ph-tag { margin-top: 10px; }

@media (max-width: 760px) {
  .why__grid { grid-template-columns: 1fr; gap: 14px; }
  .stats { grid-template-columns: 1fr; padding: 6px 0; }
  .stat { padding: 24px 24px; }
  .stat + .stat::before { left: 24px; right: 24px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .18); }
}

/* ==========================================================
   3. Cennik – dystrybutor
   ========================================================== */
.price { background: var(--paper-2); }
.station { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 22px; align-items: stretch; }
.pump {
  --c: var(--blue);
  position: relative; display: flex; flex-direction: column; border-radius: 32px; padding: 16px 16px 0; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFEDE8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 40px 70px -40px rgba(18, 22, 27, .45);
}
.pump__head { display: flex; align-items: center; gap: 12px; background: var(--asphalt); color: #fff; border-radius: 18px 18px 8px 8px; padding: 12px 16px; }
.pump__brand { font-weight: 800; font-stretch: 115%; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pump__no { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); white-space: nowrap; }
.pump__screen { margin-top: 6px; display: grid; gap: 10px; padding: 16px; border-radius: 8px 8px 16px 16px; background: #0A0D10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.lcd {
  position: relative; border-radius: 10px; padding: 12px 16px; font-family: var(--mono); color: #FFB627;
  background: #11171B; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 182, 39, .12);
}
.lcd__lbl { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 182, 39, .55); }
.lcd__val { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; font-variant-numeric: tabular-nums; }
.lcd__val b { font-weight: 700; text-shadow: 0 0 18px rgba(255, 182, 39, .5); letter-spacing: .02em; }
.lcd__val i { font-style: normal; font-weight: 700; font-size: .9rem; opacity: .7; }
.lcd--main .lcd__val b { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.05; }
.lcd--row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lcd__txt { font-weight: 700; font-size: .98rem; text-transform: uppercase; letter-spacing: .06em; text-align: right; text-shadow: 0 0 12px rgba(255, 182, 39, .4); }
.pump__stripe { height: 8px; margin: 14px 4px 0; border-radius: 4px; background: var(--c); transition: background-color .5s var(--ease); }
.pump__hint { text-align: center; font-size: .82rem; color: var(--muted); margin: 14px 0 6px; }
.pump__nozzles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 2px 18px; }
.nozzle {
  --c: #888; --fg: #fff;
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center;
}
.nozzle__slot {
  position: relative; height: 124px; border-radius: 16px; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end;
  background: linear-gradient(180deg, #D5D2CB, #E6E3DD);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: box-shadow .35s var(--ease);
}
.nz { width: 56px; height: auto; margin-bottom: -34px; transform-origin: 62% 70%; transition: transform .6s var(--spring); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .2)); }
.nz__body { fill: var(--c); }
.nozzle__tag {
  display: block; padding: 8px 6px; border-radius: 9px; background: var(--c); color: var(--fg);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); min-height: 44px; display: grid; place-items: center;
}
.nozzle[aria-selected="true"] .nozzle__slot { box-shadow: inset 0 3px 10px rgba(0, 0, 0, .16), 0 0 0 2.5px var(--c); }
.nozzle[aria-selected="true"] .nz { transform: translateY(-20px) rotate(-11deg); }
@media (hover: hover) { .nozzle:hover .nz { transform: translateY(-10px) rotate(-5deg); } .nozzle[aria-selected="true"]:hover .nz { transform: translateY(-20px) rotate(-11deg); } }

.pkg {
  --c: var(--blue);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border-radius: 32px; padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgba(18, 22, 27, .35);
}
.pkg::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--c); transition: background-color .5s var(--ease); }
.pkg__for {
  align-self: flex-start; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 99px;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: color-mix(in srgb, var(--c) 72%, #000);
  transition: background-color .5s, color .5s;
}
.pkg__name { font-size: clamp(2.1rem, 3.6vw, 3rem); font-stretch: 118%; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 16px 0 26px; }
.pkg__lbl { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pkg__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.pkg__list li:last-child { border-bottom: 0; }
.pkg__list .chk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; margin-top: 1px; }
.pkg__list .chk .ico { width: 14px; height: 14px; stroke-width: 3; }
.pkg.is-anim .pkg__list li { animation: liIn .55s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.pkg.is-anim .pkg__name, .pkg.is-anim .pkg__for { animation: liIn .5s var(--ease) both; }
@keyframes liIn { from { opacity: 0; transform: translateX(18px); } }
.pkg__foot { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; justify-content: space-between; }
.pkg__price { font-size: 1.9rem; font-stretch: 115%; font-weight: 800; line-height: 1.1; }
.pkg__price small { font-size: .9rem; font-weight: 600; color: var(--muted); font-stretch: 100%; }
.pkg__price .ph-tag { margin-left: 6px; }
.pkg__price.is-ph .num { color: var(--ph-c); }

/* Kalkulator */
.calc {
  margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) auto auto; align-items: center; gap: 28px;
  background: var(--asphalt); color: #fff; border-radius: 28px; padding: 28px 32px;
}
.calc__txt h3 { font-size: 1.3rem; font-stretch: 112%; font-weight: 800; line-height: 1.2; }
.calc__txt p { color: var(--muted-d); font-size: .96rem; margin-top: 4px; }
.calc__count { display: flex; align-items: baseline; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.calc__count b { font-family: var(--mono); font-size: 1.7rem; color: var(--yellow); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.calc__count small { color: var(--muted-d); font-weight: 500; margin-left: auto; }
.calc__scale { position: relative; display: flex; justify-content: space-between; font-family: var(--mono); font-size: .7rem; color: var(--muted-d); margin-top: 8px; padding-inline: 11px; }
.calc__scale span:nth-child(2) { position: absolute; left: var(--mid, 50%); transform: translateX(-50%); }
input[type="range"] {
  --fill: 21%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--yellow) 0 var(--fill), rgba(255, 255, 255, .14) var(--fill)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--yellow); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 4px, #fff 4.5px 8px, var(--ink) 8.5px 10.5px, #fff 11px);
  box-shadow: 0 0 0 4px rgba(255, 194, 51, .35), 0 6px 14px rgba(0, 0, 0, .4); transition: transform .25s var(--spring);
}
input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 4px, #fff 4.5px 8px, var(--ink) 8.5px 10.5px, #fff 11px);
  box-shadow: 0 0 0 4px rgba(255, 194, 51, .35), 0 6px 14px rgba(0, 0, 0, .4);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12) rotate(30deg); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--blue-2), 0 6px 14px rgba(0, 0, 0, .4); }
.calc__out { display: grid; gap: 8px; }
.lcd--calc { min-width: 210px; }
.lcd--calc .lcd__val b { font-size: 2rem; }
.calc__note { font-size: .8rem; color: var(--muted-d); text-align: right; }
.fine { margin-top: 18px; font-size: .86rem; color: var(--muted); max-width: 90ch; }

@media (max-width: 1100px) {
  .calc { grid-template-columns: 1fr 1fr; }
  .calc__txt { grid-column: 1 / -1; }
  .calc__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 899px) {
  .station { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pump { padding: 12px 12px 14px; border-radius: 26px; }
  .pump__nozzles { order: -1; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 12px; }
  .pump__hint { display: none; }
  .nozzle__slot { display: none; }
  .nozzle__tag {
    min-height: 48px; background: #fff; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2);
    display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem;
  }
  .nozzle__tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
  .nozzle[aria-selected="true"] .nozzle__tag { background: var(--c); color: var(--fg); box-shadow: 0 8px 18px -8px var(--c); }
  .nozzle[aria-selected="true"] .nozzle__tag::before { background: currentColor; }
  .pump__stripe { margin: 12px 2px 0; }
  .pkg { border-radius: 26px; }
  .calc { grid-template-columns: 1fr; padding: 24px 20px; gap: 22px; border-radius: 24px; }
  .calc__cta { justify-self: stretch; }
  .lcd--calc { min-width: 0; }
}

/* ==========================================================
   4. Instruktorzy – lusterka
   ========================================================== */
.team { background: var(--paper); }
.mirrors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mcard { position: relative; perspective: 1400px; }
.mcard__in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.2, .8, .2, 1); }
.mcard.is-flipped .mcard__in { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .mcard:hover .mcard__in { transform: rotateY(180deg); } }
.mcard__face {
  grid-area: 1 / 1; border-radius: 28px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mcard__front {
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(18, 22, 27, .4);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px 26px;
}
.mcard__back {
  transform: rotateY(180deg); background: var(--asphalt); color: #fff; padding: 28px 26px 24px;
  display: flex; flex-direction: column; box-shadow: 0 30px 60px -30px rgba(18, 22, 27, .6);
}
.mirror { width: 100%; padding-top: 44px; position: relative; }
.mirror__mount { position: absolute; left: 50%; top: 0; width: 54px; height: 16px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #2A3038; }
.mirror__mount::after {
  content: ""; position: absolute; left: 50%; top: 14px; width: 11px; height: 18px; transform: translateX(-50%); border-radius: 4px;
  background: linear-gradient(90deg, #1B1F24, #4A525C, #1B1F24);
}
.mirror__frame {
  position: relative; padding: 9px;
  border-radius: 24px 24px 38px 38px / 24px 24px 46px 46px;
  background: linear-gradient(180deg, #353D47, #101418);
  box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mirror__glass {
  position: relative; overflow: hidden; aspect-ratio: 2.1 / 1;
  border-radius: 16px 16px 30px 30px / 16px 16px 36px 36px;
  background: linear-gradient(180deg, #C9DBF2, #8FA9C9);
}
.mirror__glass img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.mirror__glass::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 26px rgba(0, 0, 0, .35); border-radius: inherit; pointer-events: none; }
.mirror__glare {
  position: absolute; inset: -10% -30%; pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, .1) 50%, transparent 58%);
  transform: translateX(-12%); transition: transform 1.2s var(--ease);
}
.mcard:hover .mirror__glare { transform: translateX(14%); }
/* Bez zdjęcia: inicjały i droga „w odbiciu” */
.mirror__ini {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(90% 80% at 25% 0%, hsl(var(--h) 75% 62% / .9), transparent 65%),
    linear-gradient(180deg, hsl(var(--h) 55% 38%), hsl(var(--h) 45% 16%));
}
.mirror__ini::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 86%; height: 48%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(20, 24, 29, .55), rgba(20, 24, 29, .9));
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
}
.mirror__ini::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 46%; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .75) 0 8px, transparent 8px 15px);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.mirror__ini span {
  position: relative; z-index: 1; margin-bottom: 16%;
  font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; font-stretch: 125%; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.mcard__name { font-size: 1.42rem; font-stretch: 112%; font-weight: 800; line-height: 1.15; margin-top: auto; padding-top: 26px; }
.mcard__front .mcard__flip { margin-bottom: auto; }
.mcard__role { color: var(--muted); font-size: .94rem; margin-top: 4px; }
.mcard__flip {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 99px; padding: 10px 16px; background: var(--paper); font-weight: 700; font-size: .86rem; color: var(--text);
  transition: background-color .25s;
}
.mcard__flip .ico { width: 16px; height: 16px; color: var(--blue); }
.mcard__flip:hover { background: var(--blue-soft); }
.mcard__k { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.mcard__back h3 { font-size: 1.35rem; font-stretch: 112%; font-weight: 800; line-height: 1.15; margin: 6px 0 16px; }
.mcard__dl { display: grid; gap: 10px; }
.mcard__dl div { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-d); }
.mcard__dl dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.mcard__dl dd { font-weight: 600; font-size: .95rem; line-height: 1.4; }
.mcard__desc { color: #D3D9E0; font-size: .93rem; margin: 14px 0 20px; line-height: 1.55; }
.mcard__back .btn { margin-top: auto; white-space: normal; padding-block: 12px; }
.mcard__unflip {
  align-self: center; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; color: var(--muted-d); font-size: .84rem; font-weight: 600; cursor: pointer; padding: 6px 10px;
}
.mcard__unflip .ico { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .mcard__unflip { display: none; }
  .mcard.is-flipped .mcard__unflip { display: inline-flex; }
}

@media (max-width: 960px) {
  .mirrors {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--g)); padding: 6px var(--g) 22px; scrollbar-width: none;
  }
  .mirrors::-webkit-scrollbar { display: none; }
  .mcard { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; }
}

/* ==========================================================
   5. Formularz zapisu
   ========================================================== */
.signup { background: var(--asphalt); color: #fff; overflow: clip; }
.signup::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 0% 10%, rgba(26, 86, 196, .28), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(255, 194, 51, .08), transparent 70%);
}
.signup__grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 84px); align-items: start; }
.signup__intro { position: sticky; top: calc(var(--hdr) + 36px); }
.signup .sec-sub { color: var(--muted-d); }
.signup__points { margin-top: 30px; display: grid; gap: 4px; }
.signup__points li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: #D6DBE1; }
.signup__points .ico { color: var(--yellow); margin-top: 3px; stroke-width: 2.4; }
.signup__alt { margin-top: 32px; padding: 22px 24px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-d); }
.signup__alt p { color: var(--muted-d); font-size: .92rem; }
.signup__tel { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 1.6rem; font-stretch: 112%; font-weight: 800; text-decoration: none; }
.signup__tel .ico { color: var(--yellow); }

.fcard {
  position: relative; background: #fff; color: var(--text); border-radius: 30px;
  padding: clamp(22px, 3.4vw, 40px); min-height: 560px; display: flex; flex-direction: column;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8);
}
.fcard__top { display: grid; gap: 10px; }
.fprog__road { position: relative; height: 32px; border-radius: 99px; background: #2A3038; overflow: hidden; }
.fprog__road::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .45); }
.fprog__car {
  position: absolute; top: 50%; left: calc(8px + var(--p, 0) * (100% - 74px)); width: 46px; transform: translateY(-50%);
  transition: left .8s var(--ease);
}
.fprog__car svg { display: block; width: 100%; height: auto; }
.fprog__flag {
  position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); border-radius: 2px;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 8px 8px;
}
.fcard__count { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips:not(:empty) { margin-top: 14px; }
.fchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 99px;
  background: var(--blue-soft); color: var(--blue); font-size: .84rem; font-weight: 700;
}
.fchip button { width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(26, 86, 196, .12); color: var(--blue); cursor: pointer; }
.fchip button .ico { width: 13px; height: 13px; stroke-width: 2.4; }

.fsteps { position: relative; flex: 1; margin-top: 22px; }
.fstep { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.fstep.is-on { display: block; animation: stepIn .55s var(--ease) both; }
.fstep.is-on.is-back { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(32px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-32px); } }
.fstep__q {
  float: left; width: 100%; padding: 0; outline: none;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-stretch: 112%; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 22px; text-wrap: balance;
}
.fstep__q + * { clear: both; }
.fstep__hint { color: var(--muted); margin: -12px 0 16px; font-size: .95rem; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt {
  position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 96px; padding: 18px 20px; border-radius: 18px; border: 1.5px solid var(--line-2); background: #fff;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.opt b { font-size: 1.12rem; font-weight: 750; font-stretch: 108%; line-height: 1.2; }
.opt span { color: var(--muted); font-size: .88rem; line-height: 1.35; }
.opt--wide { grid-column: 1 / -1; min-height: 76px; }
.opt.is-sel, .opt[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.opt:active { transform: scale(.98); }
@media (hover: hover) { .opt:hover { border-color: var(--blue); background: #F5F8FE; } }
.opt--multi { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 76px; }
.tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line-2); position: relative; transition: background-color .2s, border-color .2s; }
.tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--spring); }
.opt[aria-pressed="true"] .tick { background: var(--blue); border-color: var(--blue); }
.opt[aria-pressed="true"] .tick::after { transform: rotate(45deg) scale(1); }

.fother { margin-top: 16px; }
.fother label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.fother__row { display: flex; gap: 10px; }
.fother__row input { flex: 1; min-width: 0; }
.fcalm {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 14px;
  background: #E7F6EE; color: #146C3B; font-weight: 700; animation: liIn .45s var(--ease) both;
}
.fcalm .ico { stroke-width: 2.6; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.field--full { grid-column: 1 / -1; }
.field > label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; }
.field > label small { font-weight: 500; color: var(--muted); }
.fcard input[type="text"], .fcard input[type="tel"], .fcard input[type="email"], .fcard textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: #FAFAF8;
  border: 1.5px solid var(--line-2); border-radius: 14px; padding: 13px 16px; min-height: 52px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.fcard textarea { resize: vertical; min-height: 96px; }
.fcard input:focus, .fcard textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(47, 111, 237, .16); }
.field__err { display: none; color: #C2262E; font-size: .82rem; font-weight: 600; margin-top: 6px; }
.field.is-err .field__err { display: block; }
.field.is-err input { border-color: #E5484D; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center;
  color: #fff; transition: background-color .2s, border-color .2s; margin-top: 1px;
}
.check__box .ico { width: 15px; height: 15px; stroke-width: 3; transform: scale(0); transition: transform .3s var(--spring); }
.check input:checked + .check__box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .check__box .ico { transform: scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--blue-2); outline-offset: 2px; }
.check a { color: var(--blue); font-weight: 600; }
.field--check.is-err .check__box { border-color: #E5484D; }

.fnav { margin-top: 22px; display: flex; justify-content: flex-end; }
.fcard__bottom { margin-top: 18px; min-height: 40px; display: flex; align-items: center; }
.fback { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: var(--muted); font-weight: 700; padding: 8px 2px; }
.fback:hover { color: var(--text); }
.fback[hidden] { display: none; }

.fsum { display: grid; border-top: 1px solid var(--line); }
.fsum div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fsum dt { grid-column: 1; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fsum dd { grid-column: 1; font-weight: 650; overflow-wrap: anywhere; }
.fsum button { grid-column: 2; grid-row: 1 / span 2; border: 0; background: none; color: var(--blue); font-weight: 700; font-size: .86rem; cursor: pointer; padding: 6px 4px; }
.ferr { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: #FDECEC; color: #A3121A; font-weight: 600; font-size: .92rem; }

.fdone { text-align: center; padding: 40px 10px; outline: none; }
.fdone.is-on { display: grid; justify-items: center; gap: 12px; }
.fdone__ico {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; margin-bottom: 10px;
  box-shadow: 0 0 0 12px rgba(31, 157, 85, .14); animation: pop .7s var(--spring) both;
}
.fdone__ico .ico { width: 40px; height: 40px; stroke-width: 2.6; }
.fdone h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-stretch: 112%; font-weight: 800; line-height: 1.15; }
.fdone p { color: var(--muted); }
.fdone__demo { margin-top: 10px; font-size: .84rem; color: #A3121A !important; background: #FDECEC; padding: 10px 14px; border-radius: 12px; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.is-sending #f-send { opacity: .6; pointer-events: none; }

@media (max-width: 960px) {
  .signup__grid { grid-template-columns: 1fr; }
  .signup__intro { position: static; }
}
@media (max-width: 560px) {
  .fcard { border-radius: 24px; min-height: 0; padding: 22px 18px; }
  .opts { grid-template-columns: 1fr; gap: 10px; }
  .opt { min-height: 68px; padding: 15px 16px; }
  .opt--multi { min-height: 60px; }
  .fields { grid-template-columns: 1fr; }
  .fnav .btn { width: 100%; }
  .fother__row { flex-direction: column; }
  .btn { white-space: normal; }
  .hdr__cta { white-space: nowrap; }
}

/* ==========================================================
   Stopka
   ========================================================== */
.foot { background: var(--ink); color: #C3CAD2; padding: 70px 0 calc(28px + env(safe-area-inset-bottom)); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 40px 56px; }
.foot__brand p { margin-top: 18px; color: var(--muted-d); max-width: 40ch; font-size: .95rem; }
.foot__contact li { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.foot__contact .ico { color: var(--yellow); }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { color: #fff; }
.foot__nav { display: grid; gap: 8px; align-content: start; }
.foot__nav a { text-decoration: none; color: var(--muted-d); }
.foot__nav a:hover { color: #fff; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-d); font-size: .86rem; color: #858F9B; }
.foot__bar a { color: #858F9B; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ==========================================================
   Ograniczenie ruchu
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .anim [data-reveal], .anim [data-in] { opacity: 1 !important; transform: none !important; }
}