@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --u: min(1vw, 12.4px); /* 1% szerokości okna, najwyżej 1% kolumny strony */
  --bg: #fcfbf9;
  --ink: #0f1e2c;
  --text: #3f4b58;
  --muted: #6b7480;
  --eyebrow: #8b929a;
  --line: #e4e3df;
  --accent: #e2621f;
  --accent-dark: #c9531a;
  --card: #f8f6f5;
  --peach: #fdf1e7;
  --error: #c62828;
  --field: #dcdee3;
  --inset: clamp(0px, calc(1.8 * var(--u)), 28px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, calc(3 * var(--u)), 46px);
  overflow-x: clip;
}

/* Preloader: rozruch na kineskopie. Gdyby skrypt nie zadziałał, po 3,6 s znika sam. */

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  animation: boot-failsafe 0s linear 3.6s forwards;
}

.boot-tube {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050806;
  animation: boot-on .18s ease-out both;
}

/* Linie skanowania i ciemniejsze rogi, bez poświaty na literach */
.boot-tube::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}

.boot-screen {
  position: relative;
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(24px, 6vh, 64px) clamp(20px, 3vw, 46px);
}

.boot-icon {
  position: absolute;
  top: clamp(24px, 6vh, 64px);
  right: clamp(20px, 3vw, 46px);
  width: clamp(48px, 6vw, 84px);
  fill: var(--accent);
}

.boot-text {
  margin: 0;
  color: #33ff6b;
  font-family: "VT323", monospace;
  font-size: clamp(1.300rem, 2.200vw, 1.900rem);
  line-height: 1.250;
  white-space: pre-wrap;
}

.boot-cursor {
  display: inline-block;
  width: .5em;
  height: .85em;
  margin-left: 1px;
  vertical-align: -0.08em;
  background: #33ff6b;
  animation: boot-blink .5s steps(1) infinite;
}

.boot-hint {
  position: absolute;
  bottom: clamp(20px, 5vh, 48px);
  left: clamp(20px, 3vw, 46px);
  margin: 0;
  color: #1f9c45;
  font-family: "VT323", monospace;
  font-size: clamp(1.100rem, 1.600vw, 1.400rem);
}

/* Wyłączenie: obraz zapada się w jasną kreskę, a kreska w punkt i odsłania stronę */
.boot.is-off { pointer-events: none; }

.boot.is-off .boot-tube { animation: boot-off .4s ease-in forwards; }

.boot.is-off .boot-screen,
.boot.is-off .boot-tube::after { animation: boot-fade .1s linear forwards; }

@keyframes boot-on {
  0% { background: #dfffe8; transform: scale(1, .005); }
  70% { background: #dfffe8; transform: scale(1, .005); }
  100% { background: #050806; transform: none; }
}

@keyframes boot-off {
  0% { background: #050806; transform: none; }
  25% { background: #dfffe8; transform: scale(1, .05); }
  62% { background: #fff; transform: scale(1, .004); opacity: 1; }
  100% { background: #fff; transform: scale(0, .004); opacity: 0; }
}

@keyframes boot-fade { to { opacity: 0; } }
@keyframes boot-blink { 50% { opacity: 0; } }
@keyframes boot-failsafe { to { visibility: hidden; } }

/* Nagłówek */

.site-header {
  display: flex;
  align-items: center;
  gap: clamp(24px, calc(5.500 * var(--u)), 90px);
  padding: 13px var(--inset);
  border-bottom: 1px solid var(--line);
}

.logo { display: block; flex: none; }

.logo img { display: block; width: auto; height: clamp(44px, calc(4.100 * var(--u)), 64px); }

.site-nav { display: flex; gap: clamp(20px, calc(2.900 * var(--u)), 44px); font-size: 1.050rem; color: #2c3844; }

.site-nav a { transition: color .2s; }
.site-nav a:hover { color: var(--accent); }

.site-header .btn { margin-left: auto; }

/* Na komputerze nagłówek zostaje u góry, a tło zakrywa też treść wystającą poza jego szerokość */
@media (min-width: 861px) {
  html { scroll-padding-top: 40px; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 78px;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--bg);
    transition: height .2s ease, margin-bottom .2s ease;
  }

  .site-header .logo img { transition: height .2s ease; }

  .site-header .btn { transition: background-color .2s, padding .2s ease; }

  /* Po przewinięciu nagłówek jest o 30% niższy. Margines oddaje różnicę, więc treść strony nie podskakuje. */
  .site-header.is-stuck { height: 55px; margin-bottom: 23px; }

  .site-header.is-stuck .logo img { height: 38px; }

  .site-header.is-stuck .btn { padding-top: 7px; padding-bottom: 7px; }

  .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -60px;
    background: var(--bg);
  }
}

.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

/* Przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s;
}

.btn:hover { background: var(--accent-dark); }

.btn .arrow {
  width: 1.150em;
  height: 1.150em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.800;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.btn:hover .arrow { transform: translateX(3px); }

.btn-small { padding: 13px 22px; font-size: 1.050rem; }
.btn-large { padding: 18px 40px; font-size: clamp(1.250rem, calc(1.700 * var(--u)), 1.650rem); }
.btn-full { width: 100%; justify-content: center; padding: 15px 24px; font-size: 1.150rem; font-weight: 600; }
.btn-block { display: flex; justify-content: center; padding: 13px 18px; font-size: 1.050rem; }

button.btn { border: 0; font-family: inherit; cursor: pointer; }

.btn-outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); font-weight: 600; }
.btn-outline:hover { background: var(--peach); }
button.btn-outline { border: 2px solid var(--accent); padding: 10px 34px; font-size: 1.100rem; }

/* Hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  padding: clamp(24px, calc(3 * var(--u)), 44px) var(--inset) clamp(12px, calc(1 * var(--u)), 16px);
  border-bottom: 1px solid var(--line);
}

.hero-text { position: relative; z-index: 1; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--eyebrow);
  font-size: clamp(0.950rem, calc(1.200 * var(--u)), 1.200rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.750rem, calc(5.700 * var(--u)), 5.750rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h1 em { display: block; max-width: 7em; color: var(--accent); font-style: normal; }

.lead {
  margin: 22px 0 34px;
  font-size: clamp(1.200rem, calc(1.950 * var(--u)), 1.900rem);
  line-height: 1.350;
}

.hint {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.100rem;
}

.hint-icon {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #7d858e;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Zmieniające się grafiki */

.hero-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-left: -6%;
  margin-right: calc(var(--inset) * -0.5);
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* białe tło grafik zlewa się z tłem strony */
  opacity: 0;
}

.hero-slide.is-active { opacity: 1; }

/* Płótno animacji: widoczne tylko w trakcie zmiany grafiki */
.hero-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
  visibility: hidden;
}

/* Ekrany kineskopowe: konsola w pierwszym slajdzie i gra w trzecim */
.hero-crt {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}

.hero-slide--crt.is-active ~ .hero-crt--console,
.hero-slide--game.is-active ~ .hero-crt--game { visibility: visible; }
.hero-slider.is-scanning .hero-crt.hero-crt { visibility: hidden; }

/* Diody na obudowach w pierwszym i drugim slajdzie */
.hero-led {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}

.hero-led-core {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.hero-led--disk { opacity: 0; }

.hero-led--power { animation: led-power 3.7s ease-in-out infinite paused; }

.hero-slide--crt.is-active ~ .hero-led--crt,
.hero-slide--pcs.is-active ~ .hero-led--pcs { visibility: visible; }
.hero-slide--crt.is-active ~ .hero-led--crt.hero-led--power,
.hero-slide--pcs.is-active ~ .hero-led--pcs.hero-led--power { animation-play-state: running; }
.hero-slider.is-offscreen .hero-led.hero-led--power { animation-play-state: paused; }
.hero-slider.is-scanning .hero-led.hero-led { visibility: hidden; }

@keyframes led-power {
  0%, 100% { opacity: .95; }
  22% { opacity: .78; }
  37% { opacity: 1; }
  58% { opacity: .82; }
  76% { opacity: .98; }
}

.hero-slider.is-scanning .hero-fx { visibility: visible; }
.hero-slider.is-scanning .hero-slide { opacity: 0; }

/* Kroki */

.steps-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 28px 0 40px;
  list-style: none;
}

.step {
  display: flex;
  gap: clamp(14px, calc(1.300 * var(--u)), 20px);
  padding: 8px 12px 8px clamp(14px, calc(1.800 * var(--u)), 28px);
  border-left: 1px solid var(--line);
}

.step:first-child { border-left: 0; padding-left: var(--inset); }

.step-icon {
  flex: none;
  width: clamp(46px, calc(3.900 * var(--u)), 62px);
  height: clamp(46px, calc(3.900 * var(--u)), 62px);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.600;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-no { display: block; color: var(--accent); font-size: 1.300rem; font-weight: 700; }

.step h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: clamp(1.150rem, calc(1.550 * var(--u)), 1.500rem);
  font-weight: 700;
  line-height: 1.200;
  letter-spacing: -0.02em;
}

.step p { margin: 0; color: var(--muted); font-size: clamp(0.950rem, calc(1.100 * var(--u)), 1.100rem); line-height: 1.450; }

/* Jak to działa */

.sec { padding: clamp(16px, calc(2 * var(--u)), 32px) 0 clamp(32px, calc(4 * var(--u)), 64px); }

.sec-head { padding: 0 var(--inset); }

.sec-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: clamp(0.950rem, calc(1.150 * var(--u)), 1.150rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sec-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.750rem, calc(5.700 * var(--u)), 5.750rem);
  font-weight: 800;
  line-height: 1.050;
  letter-spacing: -0.045em;
}

.sec-title em { color: var(--accent); font-style: normal; }

.sec-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(1.150rem, calc(1.950 * var(--u)), 1.900rem);
  line-height: 1.350;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(20px, calc(1.800 * var(--u)), 28px) clamp(0px, calc(.7 * var(--u)), 11px) 0;
  padding: 0;
  list-style: none;
}

.how-card {
  display: flex;
  min-height: clamp(260px, calc(19.500 * var(--u)), 316px);
  overflow: hidden;
  background: var(--card);
  border-radius: 14px;
}

.how-text { flex: 1 1 0; min-width: 0; padding: clamp(20px, calc(2 * var(--u)), 32px) 8px clamp(20px, calc(2 * var(--u)), 32px) clamp(20px, calc(2 * var(--u)), 30px); }

.how-no {
  display: block;
  color: var(--accent);
  font-size: clamp(3.250rem, calc(5.800 * var(--u)), 5.750rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.how-text h3 {
  margin: clamp(8px, calc(1 * var(--u)), 14px) 0 clamp(6px, calc(.7 * var(--u)), 10px);
  color: var(--ink);
  font-size: clamp(1.350rem, calc(2 * var(--u)), 2rem);
  font-weight: 800;
  line-height: 1.150;
  letter-spacing: -0.03em;
}

.how-text p { margin: 0; color: var(--muted); font-size: clamp(1rem, calc(1.400 * var(--u)), 1.375rem); line-height: 1.300; }

.how-media { position: relative; flex: 0 0 50%; }

.how-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* białe tło grafiki zlewa się z tłem karty */
}

/* Co skupujemy */

.buy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(20px, calc(1.800 * var(--u)), 28px) clamp(0px, calc(.7 * var(--u)), 11px) 0;
  padding: 0;
  list-style: none;
}

.buy-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--card);
  border-radius: 14px;
  transition: box-shadow .2s;
}

.buy-card:hover { box-shadow: 0 10px 28px rgba(15, 30, 44, .09); }

.buy-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  mix-blend-mode: multiply; /* jasne tło zdjęcia zlewa się z tłem karty */
}

.buy-text { margin-top: auto; padding: 4px clamp(16px, calc(1.700 * var(--u)), 26px) clamp(16px, calc(1.500 * var(--u)), 24px); }

.buy-text h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(1.250rem, calc(1.950 * var(--u)), 1.900rem);
  font-weight: 800;
  line-height: 1.200;
  letter-spacing: -0.03em;
}

.buy-text .arrow {
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .2em;
  vertical-align: -0.08em;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.400;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.buy-card:hover .arrow { transform: translateX(4px); }

.buy-desc { display: block; color: var(--muted); font-size: clamp(0.950rem, calc(1.300 * var(--u)), 1.250rem); line-height: 1.350; }

/* Pasek z wezwaniem */

.cta-band {
  display: flex;
  align-items: center;
  gap: clamp(16px, calc(3 * var(--u)), 48px);
  margin-top: 18px;
  padding: 18px 20px 18px clamp(20px, calc(2.500 * var(--u)), 40px);
  background: var(--peach);
  border-radius: 12px;
}

.cta-band-icon { flex: none; width: clamp(46px, calc(4.200 * var(--u)), 66px); height: auto; fill: none; stroke: var(--accent); stroke-width: 2.600; stroke-linejoin: round; }

.cta-band-icon .dot { fill: var(--accent); stroke: none; }

.cta-band-text { min-width: 0; }

.cta-band-text p { margin: 0; color: var(--text); font-size: clamp(1rem, calc(1.300 * var(--u)), 1.250rem); }

.cta-band-text .cta-band-title { color: var(--ink); font-size: clamp(1.150rem, calc(1.550 * var(--u)), 1.500rem); font-weight: 700; letter-spacing: -0.02em; }

.cta-band .btn { margin-left: auto; flex: none; }

/* Formularz wyceny */

.quote {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(20px, calc(2.500 * var(--u)), 40px);
  align-items: start;
  padding: clamp(16px, calc(2 * var(--u)), 32px) var(--inset) clamp(32px, calc(4 * var(--u)), 64px);
}

.quote-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.750rem, calc(6.200 * var(--u)), 6.250rem);
  font-weight: 800;
  line-height: 1.020;
  letter-spacing: -0.045em;
}

.quote-title em { display: block; color: var(--accent); font-style: normal; }

.quote-intro .sec-lead { margin-top: 10px; }

.quote-photo { display: block; width: 100%; height: auto; margin: clamp(12px, calc(2 * var(--u)), 32px) 0 clamp(8px, calc(1 * var(--u)), 16px); mix-blend-mode: multiply; }

.perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }

.perk { display: flex; align-items: center; gap: clamp(14px, calc(1.400 * var(--u)), 22px); }

.perk-icon { flex: none; display: grid; place-items: center; width: clamp(64px, calc(5.500 * var(--u)), 88px); aspect-ratio: 1; background: var(--peach); border-radius: 14px; }

.perk-icon svg { width: 58%; height: 58%; fill: none; stroke: var(--accent); stroke-width: 1.600; stroke-linecap: round; stroke-linejoin: round; }

.perk-icon svg[viewBox="0 0 48 48"] { stroke-width: 3; }

.perk h3 { margin: 0 0 4px; color: var(--ink); font-size: clamp(1.150rem, calc(1.600 * var(--u)), 1.550rem); font-weight: 800; line-height: 1.200; letter-spacing: -0.025em; }

.perk p { margin: 0; color: var(--muted); font-size: clamp(1rem, calc(1.250 * var(--u)), 1.200rem); line-height: 1.350; }

.quote-form {
  display: grid;
  gap: 18px;
  padding: clamp(18px, calc(2.300 * var(--u)), 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.quote-form-title { margin: 0; color: var(--ink); font-size: clamp(1.750rem, calc(3.100 * var(--u)), 3rem); font-weight: 800; line-height: 1.100; letter-spacing: -0.035em; }

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(20px, calc(2.200 * var(--u)), 34px) 16px;
  text-align: center;
  background: #fff;
  border: 2px dashed #f4b590;
  border-radius: 12px;
  transition: background-color .2s, border-color .2s;
}

.drop.is-over { background: var(--peach); border-color: var(--accent); }
.drop.has-error { border-color: var(--error); }

.drop-icon { width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }

.drop p { margin: 0; }

.drop-title { color: var(--ink); font-size: clamp(1.200rem, calc(1.600 * var(--u)), 1.550rem); font-weight: 800; letter-spacing: -0.025em; }

.drop-hint { margin-bottom: 8px !important; color: var(--muted); font-size: 1.100rem; }

.drop-error { margin-top: 6px !important; color: var(--error); font-weight: 600; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.thumbs[hidden] { display: none; }

.thumbs li { position: relative; width: 84px; height: 84px; }

.thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }

.thumb-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #fff;
  font: 700 1rem/26px inherit;
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.form-row { display: grid; gap: 16px; }
.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field { min-width: 0; margin: 0; padding: 0; border: 0; }

.field > label { display: block; margin-bottom: 8px; padding: 0; color: var(--ink); font-size: 1.050rem; font-weight: 700; }

.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  background: #fff;
  border: 1px solid var(--field);
  border-radius: 8px;
}

.input::placeholder { color: var(--eyebrow); opacity: 1; }

.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 98, 31, .18); }

.input-area { height: auto; min-height: 76px; padding: 12px 13px; line-height: 1.400; resize: vertical; }

.form-status { margin: 0; padding: 12px 16px; color: var(--ink); background: var(--peach); border-radius: 8px; }

.form-note { margin: -6px 0 0; color: var(--muted); font-size: 1rem; text-align: center; }

/* Stopka */

.site-footer { padding-bottom: 20px; border-top: 1px solid var(--line); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.350fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 44px var(--inset) 36px;
}

.footer-brand { position: relative; }

.footer-logo { display: block; width: auto; height: 60px; }

.footer-brand p { margin: 14px 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.450; }

.footer-cta { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

.footer-cta .arrow { width: 1.100em; height: 1.100em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }

.footer-cta:hover .arrow { transform: translateX(3px); }

.footer-floppy { position: absolute; right: 8px; bottom: -8px; width: 92px; height: auto; mix-blend-mode: multiply; pointer-events: none; }

.footer-col h2 { margin: 0 0 14px; color: var(--ink); font-size: 1.125rem; font-weight: 800; line-height: 1.200; letter-spacing: -0.025em; }

.footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.footer-col a:not(.btn), .footer-bottom a { color: var(--muted); font-size: 1rem; }

.footer-col a[href]:not(.btn):hover { color: var(--accent); }

.contact-item { display: flex; gap: 12px; margin-bottom: 12px; }

.contact-item svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 1.600; stroke-linecap: round; stroke-linejoin: round; }

.contact-item div { min-width: 0; }

.contact-item strong { display: block; margin-bottom: 1px; color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }

.contact-item span { display: block; color: var(--muted); font-size: .9375rem; }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px var(--inset) 0; border-top: 1px solid var(--line); }

.footer-bottom p { margin: 0; color: var(--muted); font-size: .875rem; }

.footer-bottom a { font-size: .875rem; }

.footer-contact .btn-block { display: inline-flex; gap: 10px; margin-top: 2px; padding: 9px 16px; font-size: 1rem; }

/* Mniejsze ekrany */

@media (min-width: 1181px) {
  .how-text h3 { font-size: clamp(1.350rem, calc(1.750 * var(--u)), 1.900rem); }
}

@media (min-width: 1181px) and (max-width: 1240px) {
  .quote { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .quote-form { padding: 20px; }
}

@media (min-width: 561px) and (max-width: 1180px) {
  .how-media { flex: 0 0 min(50%, 400px); align-self: stretch; }
}

@media (max-width: 1180px) {
  .quote { grid-template-columns: minmax(0, 1fr); }
  .quote-title { font-size: clamp(2.750rem, calc(10 * var(--u)), 5.500rem); }
  .quote-photo { max-width: 560px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-floppy { right: 4%; bottom: 0; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-no { font-size: clamp(3.250rem, calc(8 * var(--u)), 5rem); }
  .how-text h3 { font-size: clamp(1.350rem, calc(3.200 * var(--u)), 1.900rem); }
  .how-text p { font-size: clamp(1rem, calc(2.200 * var(--u)), 1.250rem); }
  .sec-title { font-size: clamp(2.750rem, calc(9 * var(--u)), 5rem); }
  .sec-lead { font-size: clamp(1.150rem, calc(3 * var(--u)), 1.600rem); }
  .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .step:nth-child(odd) { border-left: 0; padding-left: var(--inset); }
  .site-nav { font-size: 1.050rem; }
  .btn-small { padding: 13px 20px; font-size: 1.050rem; }
}

@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; gap: 14px 16px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-slider { margin: 12px 0 0; }
  .buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-text h3 { font-size: clamp(1.200rem, calc(2.900 * var(--u)), 1.500rem); }
  .buy-desc { font-size: clamp(0.950rem, calc(2 * var(--u)), 1.050rem); }
  h1 { font-size: clamp(2.750rem, calc(12 * var(--u)), 5rem); }
  .lead { font-size: clamp(1.150rem, calc(3.800 * var(--u)), 1.500rem); }
  .btn-large { padding: 18px 32px; }
}

@media (max-width: 560px) {
  .logo img { height: 42px; }
  .btn-small { padding: 11px 14px; font-size: 0.950rem; gap: 8px; }
  .lead br, .step p br { display: none; }
  .btn-large { display: flex; justify-content: center; }
  .steps-list { grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; row-gap: 12px; }
  .step, .step:nth-child(odd) { border-left: 0; padding: 8px 0; }
  .buy-grid { grid-template-columns: minmax(0, 1fr); }
  .how-card { flex-direction: column; }
  .how-text { flex: none; padding: 20px 20px 12px; }
  .how-text p br { display: none; }
  .how-media { flex: none; aspect-ratio: 4 / 3; }
  .cta-band { flex-wrap: wrap; padding: 18px; }
  .cta-band-text { flex: 1 1 200px; }
  .cta-band .btn { width: 100%; margin: 0; justify-content: center; }
  .quote-intro .sec-lead br, .footer-brand p br { display: none; }
  .form-row--3 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-floppy { right: 0; }
}

@media (max-width: 380px) {
  .btn-small .arrow { display: none; }
  .footer-floppy { display: none; }
}

/* Formularz wyceny mieści się w całości na jednym ekranie */

@media (min-width: 861px) {
  .quote-form { gap: 11px; padding: 20px 24px; }
  .quote-form-title { font-size: 1.875rem; }
  .drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; padding: 11px 16px; text-align: left; }
  .drop-icon { grid-row: 1 / 3; width: 40px; height: 40px; }
  .drop-title { grid-column: 2; align-self: end; font-size: 1.125rem; }
  .drop-hint { grid-column: 2; align-self: start; margin-bottom: 0 !important; font-size: .9375rem; }
  #photos-button { grid-column: 3; grid-row: 1 / 3; padding: 8px 20px; font-size: 1rem; }
  .drop-error { grid-column: 1 / -1; }
  .thumbs li { width: 48px; height: 48px; }
  .thumb-remove { top: -6px; right: -6px; width: 20px; height: 20px; font-size: .8rem; line-height: 20px; }
  .form-row { gap: 12px; }
  .field > label { margin-bottom: 4px; font-size: .9375rem; }
  .input { height: 42px; font-size: .9375rem; }
  .input-area { height: auto; min-height: 112px; padding: 8px 13px; }
  .btn-full { padding: 11px 24px; font-size: 1.0625rem; }
  .form-note { margin: -3px 0 0; font-size: .875rem; }
}
@media (min-width: 1181px) {
  .quote { align-items: center; }
  .quote-title { font-size: 4.25rem; }
  .quote-intro .sec-lead { font-size: 1.25rem; }
  .quote-photo { width: 76%; margin: 10px 0 8px; }
  .perks { gap: 12px; }
  .perk-icon { width: 56px; }
  .perk h3 { font-size: 1.0625rem; }
  .perk p { font-size: .9375rem; }
}

/* Sekcje "Jak to działa" i "Co skupujemy" mieszczą się w całości na jednym ekranie */

@media (min-width: 861px) {
  .sec { padding-bottom: 32px; }
  .sec .sec-eyebrow { margin-bottom: 2px; }
  .sec .sec-title { font-size: 3.5rem; line-height: 1.100; }
  .sec .sec-lead { margin-top: 2px; font-size: 1.125rem; }
  .buy-grid { gap: 12px; margin-top: 14px; }
  .buy-card img {
    height: 124px;
    padding-top: 6px;
    object-fit: contain;
  }
  .buy-text { padding: 2px 18px 12px; }
  .buy-text h3 { margin-bottom: 2px; font-size: 1.25rem; }
  .buy-desc { font-size: .9375rem; }
  .sec .cta-band { margin-top: 12px; padding: 10px 14px 10px 22px; }
  .sec .cta-band-icon { width: 38px; }
  .sec .cta-band-text p { font-size: .9375rem; }
  .sec .cta-band-text .cta-band-title { font-size: 1.0625rem; }
  .sec .cta-band .btn { padding: 10px 18px; font-size: 1rem; }
}

@media (min-width: 1000px) {
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .how-card { min-height: 194px; border-radius: 14px; }
  .how-text { padding: 12px 8px 12px 20px; }
  .how-no { font-size: 3rem; }
  .how-text h3 { margin: 4px 0 3px; font-size: 1.25rem; }
  .how-text p { font-size: .9375rem; line-height: 1.300; }
  .how-media { flex: 0 0 268px; margin: 4px 4px 4px 0; }

@media (min-width: 1000px) and (max-width: 1180px) {
  .how-media { flex-basis: 196px; }
}
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .hero-led--power { animation: none; opacity: .9; }
  .site-header, .site-header .logo img, .site-header .btn, .btn, .btn .arrow, .buy-card, .buy-text .arrow, .drop, .footer-cta .arrow { transition: none; }
}