/* ==========================================================================
   edgeup.pl — arkusz główny
   Kolejność: 1. Zmienne  2. Reset  3. Typografia  4. Komponenty
              5. Header / wyspa  6. Sekcje strony głównej  7. Podstrony
              8. Stopka  9. Animacje  10. RWD
   ========================================================================== */

/* ---------- 1. ZMIENNE ---------- */
:root{
  --black:        #050506;
  --black-2:      #0a0a0c;
  --black-3:      #111114;
  --line:         rgba(255,255,255,.09);
  --white:        #f6f6f8;
  --muted:        #9a9aa4;

  --red:          #ff1414;
  --red-deep:     #cc0008;
  --red-soft:     rgba(255,20,20,.14);

  /* poświata */
  --glow-sm: 0 0 18px rgba(255,20,20,.28);
  --glow-md: 0 0 36px rgba(255,20,20,.30), 0 0 90px rgba(255,20,20,.14);
  --glow-lg: 0 0 60px rgba(255,20,20,.35), 0 0 160px rgba(255,20,20,.18);

  /* promienie */
  --r-xs: 12px;
  --r-sm: 18px;
  --r-md: 24px;
  --r-lg: 34px;
  --r-xl: 46px;
  --r-full: 999px;

  /* nakładki – możesz je swobodnie regulować */
  --overlay-showreel: .32;   /* przyciemnienie filmu w showreelu */

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --container: 1240px;
  --pad: clamp(20px, 5vw, 56px);

  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

/* atrybut hidden musi wygrywać z display z klas (np. .kalk__alert{display:flex}) */
[hidden]{ display:none !important; }

img,video,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--red); color:#fff; }

/* pasek przewijania */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:#26262b; border-radius:99px; border:3px solid var(--black); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

/* ---------- 3. TYPOGRAFIA ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0;
}
h1{ font-size:clamp(2.6rem, 7vw, 5.6rem); }
h2{ font-size:clamp(2rem, 4.6vw, 3.6rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.9rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.container--wide{ max-width:1560px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:.75rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:currentColor; box-shadow:var(--glow-sm);
}
.eyebrow--light{ color:#fff; }
.lead{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.13rem); max-width:62ch; }
.txt-red{ color:var(--red); }

.section{ position:relative; padding:clamp(72px,10vw,140px) 0; }

/* ---------- 4. KOMPONENTY ---------- */
.btn{
  --btn-bg: var(--red);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  border-radius:var(--r-full);
  background:var(--btn-bg);
  color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(255,20,20,.28), var(--glow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(255,20,20,.42), var(--glow-md); }
.btn:active{ transform:translateY(-1px); }
.btn svg{ transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn--ghost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,20,20,.5);
  box-shadow:var(--glow-sm);
}
.btn--light{ background:#fff; color:#0a0a0c; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.btn--light:hover{ box-shadow:0 16px 44px rgba(0,0,0,.5); }

/* czarny z czerwonym obrysem → po najechaniu wypełnia się czerwienią */
.btn--outline{
  background:rgba(5,5,6,.72);
  color:#fff;
  border:1.5px solid var(--red);
  backdrop-filter:blur(10px);
  box-shadow:0 0 22px rgba(255,20,20,.22), inset 0 0 18px rgba(255,20,20,.10);
}
.btn--outline:hover{
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 12px 36px rgba(255,20,20,.45), var(--glow-md);
}

/* wersja o połowę mniejsza */
.btn--mini{
  padding:8px 16px;
  font-size:.62rem;
  gap:6px;
  letter-spacing:.01em;
}

.card{
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{
  border-color:rgba(255,20,20,.35);
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.5), var(--glow-sm);
}

/* delikatny szum na całej stronie */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* pasek postępu przewijania */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:9997;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--red-deep), var(--red));
  box-shadow:var(--glow-sm);
  pointer-events:none;
}

/* preloader */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--black);
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__logo{ width:min(240px,52vw); animation:pulseGlow 1.8s ease-in-out infinite; }
.preloader__bar{
  position:absolute; bottom:calc(50% - 70px); left:50%; transform:translateX(-50%);
  width:min(240px,52vw); height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0;
  background:var(--red); box-shadow:var(--glow-sm);
  animation:loadBar 1.4s var(--ease-out) forwards;
}
@keyframes loadBar{ to{ width:100%; } }
@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 14px rgba(255,20,20,.25)); }
  50%    { filter:drop-shadow(0 0 34px rgba(255,20,20,.6)); }
}

/* ---------- 5. HEADER / DYNAMICZNA WYSPA ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; justify-content:center;
  padding-top:clamp(14px,2vw,22px);
  pointer-events:none;
}
.island{
  pointer-events:auto;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(18px,3.4vw,44px);
  padding:12px 26px;
  border-radius:var(--r-full);
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,20,20,.10),
    0 10px 40px rgba(255,20,20,.16),
    0 22px 60px rgba(0,0,0,.65);
  transition:padding .6s var(--ease), gap .6s var(--ease), transform .6s var(--ease),
             box-shadow .6s var(--ease), background .6s var(--ease), border-radius .6s var(--ease);
  transform-origin:top center;
}
/* poświata pod wyspą */
.island::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 140% at 50% 0%, rgba(255,20,20,.35), transparent 70%);
  filter:blur(16px); opacity:.7;
  transition:opacity .6s var(--ease);
}
.header.is-compact .island{
  padding:7px 16px;
  gap:clamp(10px,2vw,24px);
  transform:scale(.9);
  box-shadow:
    0 0 0 1px rgba(255,20,20,.08),
    0 6px 24px rgba(255,20,20,.12),
    0 14px 40px rgba(0,0,0,.6);
}
.header.is-compact .island::after{ opacity:.4; }
/* powrót do pełnego rozmiaru: hover lub przewinięcie w górę */
.header.is-compact.is-expanded .island{
  padding:12px 26px;
  gap:clamp(18px,3.4vw,44px);
  transform:scale(1);
  box-shadow:
    0 0 0 1px rgba(255,20,20,.14),
    0 12px 46px rgba(255,20,20,.22),
    0 22px 60px rgba(0,0,0,.65);
}
.header.is-compact.is-expanded .island::after{ opacity:.85; }

.island__nav{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.island__nav--left{ justify-content:flex-end; }
.island__nav--right{ justify-content:flex-start; }

.island__link{
  position:relative;
  font-family:var(--font-display);
  font-weight:700; font-size:.88rem; letter-spacing:-.01em;
  color:rgba(246,246,248,.82);
  padding:6px 2px;
  white-space:nowrap;
  transition:color .3s var(--ease), font-size .6s var(--ease);
}
.header.is-compact .island__link{ font-size:.8rem; }
.header.is-compact.is-expanded .island__link{ font-size:.88rem; }
.island__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
  box-shadow:var(--glow-sm);
}
.island__link:hover{ color:#fff; }
.island__link:hover::after,
.island__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.island__link.is-active{ color:#fff; }

.island__logo{ display:block; padding:2px 6px; }
.island__logo img{
  height:26px; width:auto;
  filter:drop-shadow(0 0 14px rgba(255,20,20,.35));
  transition:height .6s var(--ease), filter .4s var(--ease);
}
.header.is-compact .island__logo img{ height:20px; }
.header.is-compact.is-expanded .island__logo img{ height:26px; }
.island__logo:hover img{ filter:drop-shadow(0 0 26px rgba(255,20,20,.75)); }

/* burger (mobile) */
.island__burger{
  display:none;
  width:38px; height:38px;
  border-radius:var(--r-full);
  border:1px solid var(--line);
  align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.island__burger:hover{ border-color:rgba(255,20,20,.5); background:rgba(255,20,20,.08); }
.island__burger span{
  display:block; width:16px; height:2px; border-radius:2px; background:#fff;
  position:relative; transition:background .3s var(--ease);
}
.island__burger span::before,
.island__burger span::after{
  content:""; position:absolute; left:0; width:16px; height:2px; border-radius:2px; background:#fff;
  transition:transform .4s var(--ease), top .3s var(--ease);
}
.island__burger span::before{ top:-6px; }
.island__burger span::after{ top:6px; }
body.nav-open .island__burger span{ background:transparent; }
body.nav-open .island__burger span::before{ top:0; transform:rotate(45deg); }
body.nav-open .island__burger span::after{ top:0; transform:rotate(-45deg); }

/* menu mobilne */
.mobile-nav{
  position:fixed; inset:0; z-index:880;
  background:rgba(5,5,6,.96);
  backdrop-filter:blur(24px);
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; }
.mobile-nav ul{ display:grid; gap:6px; text-align:center; }
.mobile-nav a{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,8vw,3rem); letter-spacing:-.03em;
  padding:8px 24px;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-nav.is-open a{ opacity:1; transform:none; }
.mobile-nav.is-open li:nth-child(1) a{ transition-delay:.06s; }
.mobile-nav.is-open li:nth-child(2) a{ transition-delay:.12s; }
.mobile-nav.is-open li:nth-child(3) a{ transition-delay:.18s; }
.mobile-nav.is-open li:nth-child(4) a{ transition-delay:.24s; }
.mobile-nav.is-open li:nth-child(5) a{ transition-delay:.30s; }
.mobile-nav a:hover{ color:var(--red); }
.mobile-nav__foot{
  position:absolute; bottom:40px; left:0; right:0;
  text-align:center; color:var(--muted); font-size:.9rem;
}
.mobile-nav__foot a:hover{ color:var(--red); }

/* ---------- 6. SEKCJE STRONY GŁÓWNEJ ---------- */

/* 6.1 SHOWREEL */
.showreel{
  position:relative;
  height:100vh; min-height:560px;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  overflow:hidden;
  z-index:3;
  isolation:isolate;
}
/* pełna wysokość również na telefonach z chowającym się paskiem przeglądarki */
@supports (height:100svh){ .showreel{ height:100svh; } }
.showreel__media{ position:absolute; inset:0; overflow:hidden; background:#000; }
.showreel__poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
}
.showreel__media iframe,
.showreel__media video{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;          /* 16:9 – wypełnia szerokość */
  min-height:100vh; min-width:177.77vh;  /* … lub wysokość */
  /* powiększenie ucina belkę z tytułem i sterowanie YouTube poza kadr */
  transform:translate(-50%,-50%) scale(1.35);
  border:0; pointer-events:none;
  object-fit:cover;
}
.showreel__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 95% at 50% 40%, rgba(0,0,0,.05), rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 32%, rgba(5,5,6,.88) 100%),
    rgba(0,0,0,var(--overlay-showreel));
}
.showreel__glow{
  position:absolute; left:50%; bottom:-30%; transform:translateX(-50%);
  width:120vw; height:60vh; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,20,20,.22), transparent 70%);
  filter:blur(40px);
}
.showreel__inner{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:clamp(46px,7vh,84px);
}
/* --near (0–1) ustawia skrypt na podstawie odległości kursora */
.showreel__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  transform:scale(calc(1 + var(--near, 0) * .95));
  transform-origin:center bottom;
  transition:transform .45s var(--ease);
}
/* animacja wejścia nie może kolidować ze skalowaniem */
.showreel__actions[data-reveal]{ transform:translateY(30px) scale(1); }
.showreel__actions[data-reveal].is-in{ transform:scale(calc(1 + var(--near, 0) * .95)); }

/* tekst tylko dla czytników ekranu */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.scroll-cue{
  position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  z-index:3;
  display:grid; place-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.scroll-cue__line{
  width:1px; height:44px; background:linear-gradient(180deg, var(--red), transparent);
  animation:cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
.sound-toggle{
  position:absolute; right:var(--pad); bottom:56px; z-index:4;
  width:48px; height:48px; border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(10,10,12,.6);
  backdrop-filter:blur(10px);
  transition:border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.sound-toggle:hover{ border-color:rgba(255,20,20,.5); box-shadow:var(--glow-sm); transform:scale(1.06); }

/* 6.2 OFERTA — czerwona sekcja */
.offer{
  position:relative;
  margin-top:calc(var(--r-xl) * -1);
  padding-top:calc(var(--r-xl) + clamp(80px,10vw,150px));
  padding-bottom:clamp(110px,13vw,190px);
  background:linear-gradient(160deg, #e00b12 0%, #b8000a 55%, #8c0007 100%);
  overflow:hidden;
  z-index:1;
}
.offer__bg{
  position:absolute; inset:0;
  background:url("../img/tlo-sprzet.jpg") center/cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.4;
  filter:grayscale(1) contrast(1.15);
}
.offer__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, rgba(0,0,0,.5), transparent 70%);
}
.offer .container{ position:relative; z-index:2; }
.offer__head{
  text-align:center;
  margin-bottom:clamp(34px,5vw,60px);
}
.offer__head h2{ margin-inline:auto; max-width:18ch; text-shadow:0 6px 40px rgba(0,0,0,.4); }

.tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.tile{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#0a0a0c;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
  isolation:isolate;
}
.tile:hover{ transform:translateY(-6px); box-shadow:0 34px 80px rgba(0,0,0,.6); }
.tile__media{ position:absolute; inset:0; }
.tile__still,
.tile__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .5s var(--ease), filter .6s var(--ease), transform 1.2s var(--ease);
}
/* stopklatka z czerwoną nakładką */
.tile__still{ filter:grayscale(1) contrast(1.05) brightness(1.12); transform:scale(1.04); }
.tile__video{ opacity:0; }
/* czerwona nakładka: barwa (blend „color”) + czerwony welon */
.tile__tint{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,30,30,.9), rgba(190,0,8,.95));
  mix-blend-mode:color;
  transition:opacity .5s var(--ease);
}
.tile__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 90% at 50% 35%, rgba(255,26,26,.32), rgba(120,0,4,.48));
  transition:opacity .5s var(--ease);
}
.tile.is-playing .tile__media::after,
.tile:hover .tile__media::after{ opacity:0; }
.tile__shade{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 45%, transparent 70%);
}
/* stan hover — zdejmujemy czerwoną barwę (działa też bez pliku wideo) */
.tile.is-playing .tile__tint,
.tile:hover .tile__tint{ opacity:0; }
.tile:hover .tile__still,
.tile.is-playing .tile__still{ filter:none; }
/* stopklatka ustępuje filmowi dopiero, gdy ten jest gotowy do odtwarzania */
.tile.is-ready.is-playing .tile__still,
.tile.is-ready:hover .tile__still{ opacity:0; }
.tile.is-ready.is-playing .tile__video,
.tile.is-ready:hover .tile__video{ opacity:1; transform:scale(1); }

.tile__meta{
  position:absolute; left:clamp(20px,2.4vw,32px); bottom:clamp(18px,2.2vw,28px); right:24px;
  z-index:2;
}
.tile__meta h3{
  font-size:clamp(1.35rem,2.4vw,2rem);
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.tile__more{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:6px;
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.78);
  transition:color .3s var(--ease), gap .3s var(--ease);
}
.tile:hover .tile__more{ color:var(--red); gap:12px; }
.tile__corner{
  position:absolute; top:18px; right:18px; z-index:2;
  width:40px; height:40px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-6px) rotate(-25deg);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tile:hover .tile__corner{ opacity:1; transform:none; }
.tile__badge{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:5px 12px; border-radius:var(--r-full);
  background:rgba(5,5,6,.5); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}

/* pasek liczb pod kafelkami */
.stats{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding-top:34px; border-top:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.stats__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1; letter-spacing:-.04em;
}
.stats__label{ color:rgba(255,255,255,.75); font-size:.85rem; margin-top:6px; }

/* 6.3 O NAS */
.about{
  position:relative;
  margin-top:calc(var(--r-xl) * -1);
  z-index:3;
  min-height:80vh;
  display:grid; place-items:center;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  overflow:hidden;
  padding:clamp(90px,10vw,140px) 0;
  /* dół o połowę węższy — sekcja opinii ma leżeć bliżej */
  padding-bottom:clamp(45px,5vw,70px);
  background:var(--black);
}
.about__bg{
  position:absolute; inset:0;
  /* twarz jest w lewej części kadru — kotwiczymy tło do lewej krawędzi,
     żeby przy każdej szerokości ekranu pozostała widoczna */
  background:url("../img/o-nas.jpg") 16% center/cover no-repeat;
  /* lekkie zejście z nasycenia zieleni, żeby kadr grał z czerwienią marki,
     plus rozjaśnienie — zdjęcie jest nocne i samo w sobie bardzo ciemne */
  filter:saturate(.85) contrast(1.02) brightness(1.32);
  transform:scale(1.06);
  transform-origin:left center;
  will-change:transform;
}
/* przyciemnienie rośnie w prawo: twarz zostaje czytelna, tekst dostaje tło */
.about__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,5,6,.06) 0%,
      rgba(5,5,6,.16) 26%,
      rgba(5,5,6,.78) 52%,
      rgba(5,5,6,.93) 72%,
      rgba(5,5,6,.96) 100%),
    radial-gradient(55% 75% at 76% 50%, rgba(255,20,20,.16), transparent 70%),
    linear-gradient(180deg,
      rgba(5,5,6,.50) 0%, rgba(5,5,6,0) 20%,
      rgba(5,5,6,0) 74%, rgba(5,5,6,.72) 100%);
}

.about__inner{ position:relative; z-index:2; }
/* treść trzyma się prawej połowy kadru */
.about__content{
  margin-left:auto;
  width:min(560px, 100%);
  text-align:left;
}
.about__content h2{
  font-size:clamp(1.75rem,2.9vw,2.5rem);
  margin-bottom:24px;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.about__content h2 em{
  font-style:normal; color:var(--red);
  text-shadow:0 0 40px rgba(255,20,20,.55);
}
.about__text p{
  font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.75;
  color:rgba(246,246,248,.88);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.about__text p + p{ margin-top:18px; }
.about__actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* 6.4 SPRZĘT — slider */
.gear{
  background:var(--black);
  padding-top:clamp(36px,5vw,70px);   /* połowa standardowego odstępu — bliżej opinii */
  padding-bottom:clamp(60px,8vw,110px);
}
.gear__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:clamp(26px,3.6vw,44px);
}
.gear__viewport{ overflow:hidden; border-radius:var(--r-lg); }
.gear__track{
  display:flex;
  gap:clamp(16px,2.2vw,32px);          /* odstęp między slajdami */
  transition:transform .8s var(--ease);
  will-change:transform;
}
.gear__slide{
  flex:0 0 100%;
  min-height:50vh;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(20px,3vw,44px);
  align-items:center;
  padding:clamp(26px,3.4vw,48px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,20,20,.10), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}
.gear__num{
  font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.2em; color:var(--red);
  margin-bottom:14px; display:block;
}
.gear__slide h3{ font-size:clamp(1.7rem,3.2vw,2.6rem); margin-bottom:16px; }
.gear__slide p{ color:var(--muted); max-width:46ch; }
.gear__list{ margin-top:22px; display:grid; gap:9px; }
.gear__list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.92rem; color:rgba(246,246,248,.8);
}
.gear__list li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:9px;
  border-radius:50%; background:var(--red); box-shadow:var(--glow-sm);
}
.gear__cta{ margin-top:28px; }

/* zdjęcie kategorii w slajdzie */
.gear__photo{
  margin:0;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--black-3);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.gear__photo img{
  width:100%; height:100%;
  aspect-ratio:16/10; object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.gear__slide:hover .gear__photo img{ transform:scale(1.05); }

/* fasada YouTube — klik ładuje film */
.yt{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#000 center/cover no-repeat;
  cursor:pointer;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.yt:hover{ box-shadow:0 26px 70px rgba(0,0,0,.65), var(--glow-sm); transform:translateY(-3px); }
.yt::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  transition:opacity .4s var(--ease);
}
.yt:hover::before{ opacity:.7; }
.yt__play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:rgba(255,20,20,.92);
  box-shadow:0 0 0 10px rgba(255,20,20,.16), var(--glow-md);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.yt:hover .yt__play{ transform:scale(1.1); box-shadow:0 0 0 16px rgba(255,20,20,.18), var(--glow-lg); }
.yt__play svg{ margin-left:4px; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt.is-loaded::before,
.yt.is-loaded .yt__play,
.yt.is-loaded .yt__label{ display:none; }
.yt__label{
  position:absolute; left:16px; bottom:14px;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75);
}

/* portfolio realizacji — miks kafelków poziomych i pionowych */
.pf{ display:grid; gap:clamp(14px,1.9vw,22px); margin-top:clamp(26px,3.4vw,42px); }
.pf .yt{ margin:0; }
.pf__hero{ aspect-ratio:16/9; }                             /* wyróżniony film — pełna szerokość */
.pf__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.9vw,22px); }
.pf__row .yt{ aspect-ratio:16/9; }
.pf__pion-head{
  margin-top:clamp(8px,1.4vw,16px); text-align:center;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.pf__pion{
  display:grid; grid-template-columns:repeat(2, minmax(0, 300px));
  gap:clamp(14px,1.9vw,22px); justify-content:center;
}
.pf__v{ aspect-ratio:9/16; }
.pf__v .yt__play{ width:58px; height:58px; box-shadow:0 0 0 8px rgba(255,20,20,.16), var(--glow-md); }
.pf__v .yt__label{ left:12px; bottom:11px; font-size:.68rem; }
@media (max-width:560px){
  .pf__row{ grid-template-columns:1fr; }
  .pf__pion{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* siatka filmów z realizacji (podstrony ofertowe) */
.yt-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,4vw,50px);
}
.yt-grid .yt__label{
  right:16px;
  font-size:.8rem; letter-spacing:.02em; text-transform:none;
  color:#fff; font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
  line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.gear__controls{
  margin-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.gear__dots{ display:flex; gap:8px; flex-wrap:wrap; }
.gear__dot{
  height:6px; width:26px; border-radius:99px;
  background:rgba(255,255,255,.16);
  transition:background .4s var(--ease), width .4s var(--ease), box-shadow .4s var(--ease);
}
.gear__dot.is-active{ background:var(--red); width:52px; box-shadow:var(--glow-sm); }
.gear__arrows{ display:flex; gap:10px; }
.gear__arrow{
  width:50px; height:50px; border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.gear__arrow:hover{ border-color:rgba(255,20,20,.55); background:rgba(255,20,20,.1); box-shadow:var(--glow-sm); transform:scale(1.05); }
.gear__arrow:disabled{ opacity:.3; cursor:not-allowed; transform:none; }

/* 6.5 OPINIE */
/* odstępy wokół paska opinii — o połowę mniejsze niż standardowe sekcje */
.reviews{
  padding-top:clamp(36px,5vw,70px);
  padding-bottom:clamp(40px,5vw,65px);
  overflow:hidden;
}
.reviews__head{ text-align:center; margin-bottom:clamp(30px,4vw,52px); }
.reviews__head .eyebrow{ justify-content:center; }
/* pasek jest dzieckiem sekcji o pełnej szerokości — bez sztuczek z 100vw,
   bo transformacja kolidowała z animacją wejścia */
.marquee{
  position:relative;
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display:flex; gap:20px; width:max-content;
  animation:marquee 60s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

.review{
  flex:0 0 auto;
  width:min(380px,80vw);
  background:#fff; color:#111114;
  border-radius:var(--r-md);
  padding:24px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,20,20,.25); }
.review__top{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.review__avatar{
  width:46px; height:46px; border-radius:var(--r-full);
  object-fit:cover; flex:0 0 auto;
  background:#e9e9ee;
}
.review__name{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-.02em; line-height:1.2;
}
.review__stars{ display:flex; gap:2px; margin-top:3px; color:#ffb400; }
.review__stars svg{ width:14px; height:14px; }
.review__text{ font-size:.93rem; line-height:1.6; color:#3a3a42; }
.review__g{ margin-left:auto; opacity:.5; flex:0 0 auto; }
.review__when{ font-size:.76rem; color:#8a8a94; margin-top:2px; }
/* zapasowy awatar, gdy Google nie odda zdjęcia profilowego */
.review__avatar--litera{
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:#fff; background:linear-gradient(150deg, var(--red), var(--red-deep));
}

/* plakietka ze średnią oceną z Google */
.reviews__badge{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:22px; padding:10px 20px;
  border-radius:var(--r-full);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.reviews__badge:hover{
  border-color:rgba(255,20,20,.45);
  box-shadow:var(--glow-sm);
  transform:translateY(-2px);
}
.reviews__badge .review__g{ margin-left:0; opacity:1; }
.reviews__badge strong{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:-.02em;
}
.reviews__badge .review__stars{ margin-top:0; color:#ffb400; }
.reviews__count{ font-size:.84rem; color:var(--muted); }

/* 6.6 KONTAKT */
.contact{ position:relative; padding-bottom:clamp(80px,10vw,130px); }
.contact__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.contact__aside h2{ margin-bottom:18px; }
.contact__info{ margin-top:32px; display:grid; gap:16px; }
.contact__info a{
  display:flex; align-items:center; gap:14px;
  font-size:1.02rem;
  transition:color .3s;
}
.contact__info a:hover{ color:var(--red); }
.contact__ico{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--red-soft); border:1px solid rgba(255,20,20,.25);
  color:var(--red);
}
.contact__socials{ margin-top:30px; display:flex; gap:10px; }
.contact__socials a{
  width:44px; height:44px; border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.contact__socials a:hover{
  border-color:rgba(255,20,20,.5); background:rgba(255,20,20,.1);
  transform:translateY(-3px); box-shadow:var(--glow-sm); color:var(--red);
}

.form{
  position:relative;
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(255,20,20,.10), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,42px);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ position:relative; margin-bottom:16px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:600;
}
.field label span{ color:var(--red); }
.field input,
.field textarea{
  width:100%;
  padding:15px 18px;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--white);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  outline:none;
}
.field textarea{ min-height:150px; resize:vertical; border-radius:var(--r-md); }
.field input::placeholder,
.field textarea::placeholder{ color:#5c5c66; }
.field input:focus,
.field textarea:focus{
  border-color:rgba(255,20,20,.6);
  box-shadow:0 0 0 4px rgba(255,20,20,.12), var(--glow-sm);
  background:rgba(0,0,0,.5);
}
.field.has-error input,
.field.has-error textarea{ border-color:#ff4444; box-shadow:0 0 0 4px rgba(255,68,68,.12); }
.field__err{
  display:none; margin-top:7px; font-size:.8rem; color:#ff6b6b;
}
.field.has-error .field__err{ display:block; }
.field--hp{ position:absolute; left:-9999px; opacity:0; }

.form__foot{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.form__note{ font-size:.82rem; color:var(--muted); max-width:44ch; }
.form__note a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.form__msg{
  margin-top:18px; padding:14px 18px; border-radius:var(--r-sm);
  font-size:.9rem; display:none;
}
.form__msg.is-ok{ display:block; background:rgba(0,200,120,.12); border:1px solid rgba(0,200,120,.35); color:#5ff0b0; }
.form__msg.is-err{ display:block; background:rgba(255,68,68,.1); border:1px solid rgba(255,68,68,.35); color:#ff9a9a; }
.btn.is-loading{ pointer-events:none; opacity:.7; }
.btn.is-loading::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 6.7 POP-UP (lista sprzętu) ---------- */
.modal{
  position:fixed; inset:0; z-index:950;
  display:grid; place-items:center;
  padding:20px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(3,3,4,.78);
  backdrop-filter:blur(8px);
  animation:modalTlo .4s var(--ease) both;
}
@keyframes modalTlo{ from{ opacity:0; } }

.modal__box{
  position:relative;
  width:min(480px, 100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:clamp(28px,3.4vw,40px);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,20,20,.14), transparent 55%),
    linear-gradient(165deg, #131316, #0a0a0c);
  box-shadow:
    0 0 0 1px rgba(255,20,20,.12),
    0 30px 90px rgba(0,0,0,.7),
    var(--glow-md);
  animation:modalWjazd .5s var(--ease) both;
}
@keyframes modalWjazd{
  from{ opacity:0; transform:translateY(24px) scale(.96); }
}
.modal__close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.modal__close:hover{
  color:#fff; border-color:rgba(255,20,20,.5);
  background:rgba(255,20,20,.10); transform:rotate(90deg);
}
.modal__ico{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:20px;
  border-radius:var(--r-sm);
  background:var(--red-soft); border:1px solid rgba(255,20,20,.28);
  color:var(--red);
}
.modal__box h3{ font-size:clamp(1.4rem,2.4vw,1.8rem); margin-bottom:12px; }
.modal__lead{ color:var(--muted); font-size:.95rem; margin-bottom:24px; }
.modal__lead strong{ color:var(--white); font-weight:600; }
.modal__box .field{ margin-bottom:14px; }
.modal__box .btn{ width:100%; }

/* checkbox jest elementem <label>, więc zerujemy dziedziczone style etykiet pola */
.checkbox{
  display:flex; gap:11px; align-items:flex-start;
  margin:0 0 22px;
  font-size:.85rem; line-height:1.5; color:var(--muted);
  cursor:pointer;
  text-transform:none; letter-spacing:normal; font-weight:400;
}
.checkbox input{
  flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  accent-color:var(--red); cursor:pointer;
}
/* nadpisujemy .field label span (czerwona gwiazdka) — to zwykły tekst opcji.
   Wyższa specyficzność (2 klasy) bije regułę .field label span. */
.checkboxy .checkbox span,
.field .checkbox span{
  color:var(--muted); text-transform:none; letter-spacing:normal; font-weight:400;
}
.checkbox:hover span{ color:rgba(246,246,248,.9); }

.btn--full{ width:100%; }

body.modal-open{ overflow:hidden; }

/* ---------- 7. PODSTRONY OFERTOWE ---------- */
.page-hero{
  position:relative;
  min-height:74vh;
  display:flex; align-items:flex-end;
  padding:clamp(120px,14vw,180px) 0 clamp(50px,6vw,80px);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  overflow:hidden;
  isolation:isolate;
}
.page-hero__media{ position:absolute; inset:0; }
.page-hero__media img,
.page-hero__media video{ width:100%; height:100%; object-fit:cover; }
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,6,.85) 0%, rgba(5,5,6,.35) 40%, rgba(5,5,6,.96) 100%),
    radial-gradient(90% 70% at 20% 100%, rgba(255,20,20,.22), transparent 60%);
}
.page-hero__inner{ position:relative; z-index:2; }
.breadcrumb{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; color:var(--muted); margin-bottom:20px;
}
.breadcrumb a:hover{ color:var(--red); }
.page-hero h1{ max-width:15ch; }
.page-hero__sub{ margin-top:22px; max-width:56ch; color:rgba(246,246,248,.8); font-size:clamp(1rem,1.4vw,1.15rem); }
.page-hero__actions{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.split--reverse .split__media{ order:-1; }
.split__media{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,4vw,50px);
}
.feature__ico{
  width:48px; height:48px; border-radius:var(--r-sm);
  display:grid; place-items:center; margin-bottom:18px;
  background:var(--red-soft); border:1px solid rgba(255,20,20,.25); color:var(--red);
}
.feature h3{ font-size:1.15rem; margin-bottom:10px; }
.feature p{ color:var(--muted); font-size:.93rem; }

.steps{ counter-reset:step; display:grid; gap:14px; margin-top:clamp(30px,4vw,50px); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:flex-start;
  padding:24px clamp(20px,2.6vw,32px);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(120deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.step:hover{ border-color:rgba(255,20,20,.35); transform:translateX(6px); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  color:var(--red); text-shadow:var(--glow-sm); line-height:1.2;
}
.step h3{ font-size:1.1rem; margin-bottom:6px; }
.step p{ color:var(--muted); font-size:.93rem; }

.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-top:clamp(30px,4vw,50px); }
.price{ display:flex; flex-direction:column; }
.price--hot{
  border-color:rgba(255,20,20,.45);
  box-shadow:0 0 0 1px rgba(255,20,20,.14), var(--glow-sm);
  position:relative;
}
.price--hot::before{
  content:"Najczęściej wybierane";
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:4px 14px; border-radius:var(--r-full);
  background:var(--red); color:#fff; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; box-shadow:var(--glow-sm);
}
.price__name{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.price__val{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,3vw,2.5rem); letter-spacing:-.03em; margin:10px 0 4px;
}
.price__val small{ font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.price ul{ display:grid; gap:9px; margin:20px 0 26px; }
.price li{ position:relative; padding-left:25px; font-size:.9rem; color:rgba(246,246,248,.82); }
.price li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--red); font-weight:700; text-shadow:var(--glow-sm);
}
.price .btn{ margin-top:auto; width:100%; }

/* ==========================================================================
   MOTYWY PODSTRON — każda strona ofertowa ma własny charakter.
   Kolor marki zostaje ten sam; różni się rytm sekcji, typografia i faktura.
   ========================================================================== */

/* ---------- A. AFTERMOVIE — energia, ukosy, ruch ---------- */
.strona--aftermovie .page-hero{
  min-height:78vh;
  /* delikatne, symetryczne zaokrąglenie zamiast agresywnego ukosu */
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
/* nagłówek stonowany — mniej krzyku, lżejszy, z oddechem między literami */
.strona--aftermovie .page-hero h1{
  font-size:clamp(2.4rem,5.4vw,4.3rem);
  font-weight:700;
  letter-spacing:-.01em; line-height:1.06;
}
.strona--aftermovie .eyebrow::before{
  width:9px; height:9px; border-radius:50%;
}
.strona--aftermovie h2{ letter-spacing:-.025em; }
.strona--aftermovie .step{ border-left:2px solid rgba(255,20,20,.35); }

/* pasek haseł — stonowany: ciemne tło z czerwonymi liniami zamiast pełnej czerwieni */
.hasla{
  position:relative; overflow:hidden;
  padding:clamp(15px,1.8vw,22px) 0;
  margin-top:0;
  background:linear-gradient(180deg, rgba(255,20,20,.05), rgba(255,20,20,.02));
  border-top:1px solid rgba(255,20,20,.22);
  border-bottom:1px solid rgba(255,20,20,.22);
}
.hasla__tor{
  display:flex; width:max-content; gap:0;
  animation:marquee 42s linear infinite;
}
.hasla:hover .hasla__tor{ animation-play-state:paused; }
.hasla span{
  display:inline-flex; align-items:center; gap:clamp(22px,2.6vw,38px);
  padding-right:clamp(22px,2.6vw,38px);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.25rem);
  letter-spacing:.02em; text-transform:uppercase;
  color:rgba(246,246,248,.62);
  white-space:nowrap;
}
.hasla span::after{
  content:"·"; font-size:1.3em; line-height:0; color:var(--red); opacity:.7;
}

/* mozaika kadrów — nierówna siatka zamiast równych kafelków */
.mozaika{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2, clamp(120px, 15vw, 210px));
  gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(30px,4vw,50px);
}
.mozaika__kafel{ position:relative; }
.mozaika__kafel:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.mozaika__kafel:nth-child(2){ grid-column:span 2; grid-row:span 1; }
.mozaika__kafel:nth-child(3){ grid-column:span 1; grid-row:span 1; }
.mozaika__kafel:nth-child(4){ grid-column:span 1; grid-row:span 1; }

/* kafelek wideo wypełnia całą komórkę siatki (nadpisuje 16:9 z .yt) */
.mozaika .yt{ aspect-ratio:auto; width:100%; height:100%; }

/* puste kafelki — placeholdery „Wkrótce” bez przycisku odtwarzania */
.yt--pusty{ cursor:default; }
.yt--pusty::before{ background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7)); }
.yt--pusty:hover{ transform:none; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.mozaika__wkrotce{
  position:absolute; inset:auto auto 14px 16px; z-index:2;
  padding:5px 12px; border-radius:var(--r-full);
  background:rgba(5,5,6,.55); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,246,248,.72);
}

/* ---------- B. KORPO — porządek, jasny blok, konkret ---------- */
.strona--korpo .page-hero{ min-height:68vh; }
.strona--korpo .page-hero h1{ font-size:clamp(2.2rem,4.6vw,3.8rem); }
.strona--korpo .eyebrow{ letter-spacing:.3em; }
.strona--korpo .eyebrow::before{ width:44px; }

/* sygnaturowa sekcja — najmocniejszy wyróżnik tej strony */
.blok-jasny{
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,20,20,.14) 0%, transparent 46%),
    linear-gradient(165deg, #1a1013 0%, #100b0d 60%, #0c090a 100%);
  color:#f4f4f6;
  border:1px solid rgba(255,20,20,.22);
  border-radius:var(--r-xl);
  box-shadow:0 34px 90px -46px rgba(255,20,20,.4), inset 0 1px 0 rgba(255,255,255,.05);
  margin:clamp(40px,5vw,70px) auto 0;
  width:calc(100% - var(--pad) * 2);
  max-width:var(--container);
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,60px);
}
.blok-jasny h2{ color:#fff; }
.blok-jasny .eyebrow{ color:var(--red); }
.blok-jasny .lead{ color:var(--muted); }

/* lista specyfikacji zamiast kart */
.spec{ margin-top:clamp(28px,3.4vw,44px); border-top:1px solid rgba(255,255,255,.14); }
.spec__row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(16px,2.4vw,34px); align-items:baseline;
  padding:clamp(18px,2vw,24px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.spec__row:hover{ background:rgba(255,20,20,.08); padding-left:10px; }
.spec__nr{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.8rem; color:var(--red); font-weight:600;
}
.spec__nazwa{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.3rem); color:#fff; }
.spec__opis{ color:var(--muted); font-size:.92rem; margin-top:6px; max-width:60ch; }
.spec__tag{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#9a9aa4; white-space:nowrap;
}

/* pasek wskaźników */
.liczby{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(30px,4vw,48px);
}
.liczby div{ border-left:2px solid var(--red); padding-left:16px; }
.liczby b{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.03em; line-height:1;
}
.liczby span{ display:block; margin-top:6px; font-size:.84rem; color:var(--muted); }

/* ---------- C. MULTICAM — reżyserka, siatka, monospace ---------- */
.strona--multicam .page-hero{ min-height:70vh; }
.strona--multicam .page-hero__media::after{
  background:
    linear-gradient(180deg, rgba(5,5,6,.88) 0%, rgba(5,5,6,.42) 40%, rgba(5,5,6,.97) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px);
}
.strona--multicam .section{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 120px);
}
.eyebrow--mono{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing:.2em; font-size:.72rem;
}
.eyebrow--mono::before{ height:1px; width:34px; }
.strona--multicam .feature__ico{ border-radius:6px; }
.strona--multicam .step::before{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:1.1rem;
}

@media (max-width:900px){
  .mozaika{ grid-template-columns:repeat(2,1fr); }
  .mozaika__kafel:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .mozaika__kafel:nth-child(2){ grid-column:span 2; }
  .liczby{ grid-template-columns:repeat(2,1fr); }
  .spec__row{ grid-template-columns:auto 1fr; }
  .spec__tag{ grid-column:2; }
}

/* ---------- BRIEF: formularz wyceny wydarzenia ---------- */
.field select{
  width:100%;
  padding:15px 18px;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:var(--white);
  outline:none;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aa4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field select:focus{
  border-color:rgba(255,20,20,.6);
  box-shadow:0 0 0 4px rgba(255,20,20,.12), var(--glow-sm);
}
.field select option{ background:#111114; color:var(--white); }

/* grupa pól wyboru w formularzu briefowym */
.checkboxy{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px 20px; margin:2px 0 20px;
}
.checkboxy .checkbox{ margin:0; font-size:.88rem; }

.brief__podsumowanie{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(24px,3vw,36px);
}
.brief__punkt{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:.92rem; color:rgba(246,246,248,.82); line-height:1.55;
}
.brief__punkt svg{ flex:0 0 auto; margin-top:3px; color:var(--red); }

@media (max-width:900px){
  .checkboxy,
  .brief__podsumowanie{ grid-template-columns:1fr; }
}

/* ---------- BRIEF AFTERMOVIE: dynamiczne materiały ---------- */
.uslugi-head{
  margin-top:clamp(28px,3.4vw,42px);
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);
}
.uslugi-head h3{ font-size:clamp(1.1rem,1.9vw,1.35rem); margin-bottom:8px; }
.uslugi-head p{ font-size:.9rem; color:var(--muted); line-height:1.55; }
.uslugi-head strong{ color:rgba(246,246,248,.9); font-weight:600; }

#afUslugi{ display:grid; gap:14px; margin-top:clamp(16px,2vw,22px); }

.usluga{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.028);
  padding:clamp(16px,2vw,22px);
  transition:border-color .3s var(--ease);
}
.usluga:hover{ border-color:rgba(255,20,20,.28); }
.usluga__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.usluga__nr{
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:-.01em; color:var(--red);
}
.usluga__usun{
  width:30px; height:30px; flex:0 0 auto;
  border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
}
.usluga__usun:hover{ color:#fff; border-color:rgba(255,20,20,.5); background:rgba(255,20,20,.1); }

/* co ma powstać = pełna szerokość, pod spodem długość + ilość */
.usluga__pola{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:14px;
}
.usluga__co{ grid-column:1 / -1; margin-bottom:0; }
.usluga__dlug{ margin-bottom:0; }
.usluga__ilosc{ margin-bottom:0; }
.usluga__pola .field label{ font-size:.72rem; }
.usluga__ilosc input{ text-align:center; }

.usluga__dodaj{ width:100%; margin-top:16px; }

@media (max-width:560px){
  .usluga__pola{ grid-template-columns:1fr; }
}

/* ---------- PODZIAŁ MATERIAŁU WG FORMATU (strona multicam) ---------- */
.podzial{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,38px);
  margin-top:clamp(28px,3.6vw,46px);
}
.podzial__kol{
  border-top:2px solid var(--red);
  padding-top:20px;
}
.podzial__format{
  display:block;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin-bottom:10px;
}
.podzial__kol h3{ font-size:clamp(1.05rem,1.7vw,1.25rem); margin-bottom:14px; }
.podzial__kol ul{ display:grid; gap:9px; }
.podzial__kol li{
  position:relative; padding-left:18px;
  font-size:.9rem; color:var(--muted); line-height:1.55;
}
.podzial__kol li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:8px; height:1px; background:var(--red);
}

/* pasek o rolkach — wspólny dla wszystkich formatów */
.podzial__pas{
  display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  margin-top:clamp(20px,2.6vw,32px);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
  border-radius:var(--r-md);
  border:1px solid rgba(255,20,20,.28);
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(255,20,20,.12), transparent 60%),
    rgba(255,255,255,.03);
}
.podzial__pas svg{ flex:0 0 auto; color:var(--red); }
.podzial__pas b{ font-family:var(--font-display); font-size:1rem; display:block; margin-bottom:4px; }
.podzial__pas p{ font-size:.9rem; color:var(--muted); margin:0; }

@media (max-width:900px){
  .podzial{ grid-template-columns:1fr; gap:26px; }
  .podzial__pas{ flex-direction:column; align-items:flex-start; }
}

/* ---------- PODGLĄD WIELOKAMEROWY (strona multicam) ---------- */
.mcam{
  margin-top:clamp(28px,3.6vw,44px);
  padding:clamp(14px,1.6vw,20px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,20,20,.10), transparent 60%),
    linear-gradient(170deg, #101013, #08080a);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}

/* pasek 4 kamer u góry */
.mcam__pasek{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1vw,14px);
  margin-bottom:clamp(10px,1.2vw,16px);
}
.mcam__kamera{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-sm);
  border:2px solid rgba(255,255,255,.10);
  background:#000;
  cursor:pointer;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.mcam__kamera video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.72);
  transition:filter .3s var(--ease);
}
.mcam__kamera:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.mcam__kamera:hover video{ filter:none; }
.mcam__kamera.jest-aktywna{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,20,20,.18), var(--glow-sm);
}
.mcam__kamera.jest-aktywna video{ filter:none; }
.mcam__kamera__nr{
  position:absolute; top:7px; left:7px; z-index:2;
  padding:2px 8px; border-radius:99px;
  background:rgba(5,5,6,.7); backdrop-filter:blur(6px);
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.66rem; letter-spacing:.1em; color:rgba(255,255,255,.85);
}
.mcam__kamera.jest-aktywna .mcam__kamera__nr{ background:var(--red); color:#fff; }
.mcam__kamera__nazwa{
  position:absolute; left:8px; right:8px; bottom:7px; z-index:2;
  font-size:.72rem; font-weight:600; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* czerwona kropka „na antenie” */
.mcam__kamera.jest-aktywna::after{
  content:""; position:absolute; top:11px; right:9px; z-index:2;
  width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 3px rgba(255,20,20,.25);
  animation:mcamPuls 1.6s ease-in-out infinite;
}
@keyframes mcamPuls{ 50%{ opacity:.35; } }

/* duży ekran */
.mcam__ekran{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  background:#000; aspect-ratio:16/9;
}
.mcam__ekran canvas{ width:100%; height:100%; display:block; object-fit:cover; }
.mcam.jest-grane .mcam__ekran canvas{ cursor:pointer; }

.mcam__overlay{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center; gap:18px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55), rgba(3,3,4,.88)),
    url("../img/hero-multicam.jpg") center/cover no-repeat;
  text-align:center; padding:24px;
}
.mcam__overlayTresc{ display:grid; justify-items:center; gap:16px; }
.mcam__overlay h3{ font-size:clamp(1.2rem,2.4vw,1.7rem); }
.mcam__overlay p{ color:var(--muted); font-size:.9rem; max-width:44ch; }
.mcam__start{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 34px; border-radius:var(--r-full);
  background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:.02em;
  box-shadow:0 14px 40px rgba(255,20,20,.4), var(--glow-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mcam__start:hover{ transform:scale(1.05); box-shadow:0 18px 50px rgba(255,20,20,.55), var(--glow-lg); }
.mcam__start.is-loading{ pointer-events:none; opacity:.75; }
.mcam__start.is-loading::after{
  content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}

/* samouczek w overlayu startowym */
.mcam__samouczek{
  display:grid; gap:12px;
  margin:4px 0 6px;
  text-align:left;
  max-width:46ch;
}
.mcam__samouczek li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.88rem; line-height:1.5; color:rgba(246,246,248,.82);
}
.mcam__samouczek span{
  flex:0 0 auto;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  box-shadow:var(--glow-sm);
}

/* ekran po zakończeniu materiału */
.mcam__koniec{
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.72), rgba(3,3,4,.94)),
    url("../img/hero-multicam.jpg") center/cover no-repeat;
}
.mcam__koniec .mcam__overlayTresc{ max-width:52ch; }
.mcam__koniecNad{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red);
}
.mcam__koniec p{ font-size:.95rem; line-height:1.6; color:rgba(246,246,248,.8); }

/* suwak głośności muzyki */
.mcam__glosnosc{ display:flex; align-items:center; flex:0 0 auto; }
.mcam__suwak{
  -webkit-appearance:none; appearance:none;
  width:86px; height:4px; border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,
    var(--red) 0%, var(--red) var(--fill,50%),
    rgba(255,255,255,.14) var(--fill,50%), rgba(255,255,255,.14) 100%);
}
.mcam__suwak::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .18s var(--ease);
}
.mcam__suwak::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.mcam__suwak:hover::-webkit-slider-thumb{ transform:scale(1.15); }

@media (max-width:620px){
  .mcam__suwak{ width:60px; }
}

/* belka pod ekranem */
.mcam__belka{
  display:flex; align-items:center; gap:14px;
  margin-top:clamp(10px,1.2vw,14px);
  padding:0 4px;
}
.mcam__aktywna{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.76rem; letter-spacing:.08em; color:var(--red);
  white-space:nowrap;
}
.mcam__postep{
  flex:1; height:4px; border-radius:99px;
  background:rgba(255,255,255,.10); overflow:hidden;
}
.mcam__postep::after{
  content:""; display:block; height:100%; width:var(--postep,0%);
  background:linear-gradient(90deg, var(--red-deep), var(--red));
  box-shadow:var(--glow-sm);
}
.mcam__dzwiek{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:var(--r-full);
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
}
.mcam__dzwiek:hover,
.mcam__dzwiek.jest-wlaczony{
  color:#fff; border-color:rgba(255,20,20,.5); background:rgba(255,20,20,.10);
}
.mcam__podpowiedz{
  margin:14px 4px 0; font-size:.78rem; color:#5f5f69;
}
.mcam__komunikat{
  margin:12px 4px 0; padding:12px 16px;
  border-radius:var(--r-sm);
  background:rgba(255,20,20,.09); border:1px solid rgba(255,20,20,.3);
  font-size:.84rem; color:#ffc9c9;
}

@media (max-width:620px){
  .mcam__pasek{ grid-template-columns:repeat(2,1fr); }
  .mcam__kamera__nazwa{ font-size:.66rem; }
}

/* ---------- KALKULATOR WYCENY ---------- */
.kalk{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(30px,4vw,50px);
  align-items:start;
}
.kalk__panel,
.kalk__wynik{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
}
.kalk__wynik{
  position:sticky; top:100px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,20,20,.16), transparent 55%),
    linear-gradient(165deg, #141417, #0b0b0d);
  box-shadow:0 0 0 1px rgba(255,20,20,.12), 0 26px 70px rgba(0,0,0,.55), var(--glow-sm);
}

/* --- suwaki --- */
.kalk__pole{ margin-bottom:clamp(24px,2.8vw,32px); }
.kalk__gora{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.kalk__gora label{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.kalk__wartosc{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.03em;
  color:var(--red);
  text-shadow:0 0 26px rgba(255,20,20,.45);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.kalk__suwak{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:6px;
  border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,
    var(--red-deep) 0%, var(--red) var(--fill,50%),
    rgba(255,255,255,.12) var(--fill,50%), rgba(255,255,255,.12) 100%);
}
.kalk__suwak::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--red);
  box-shadow:0 0 0 5px rgba(255,20,20,.14), 0 4px 14px rgba(0,0,0,.5);
  cursor:grab;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kalk__suwak::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--red);
  box-shadow:0 0 0 5px rgba(255,20,20,.14), 0 4px 14px rgba(0,0,0,.5);
  cursor:grab;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kalk__suwak:hover::-webkit-slider-thumb{ transform:scale(1.12); }
.kalk__suwak:hover::-moz-range-thumb{ transform:scale(1.12); }
.kalk__suwak:active::-webkit-slider-thumb{
  transform:scale(1.22); cursor:grabbing;
  box-shadow:0 0 0 9px rgba(255,20,20,.2), var(--glow-md);
}
.kalk__suwak:active::-moz-range-thumb{
  transform:scale(1.22); cursor:grabbing;
  box-shadow:0 0 0 9px rgba(255,20,20,.2), var(--glow-md);
}
.kalk__suwak:focus-visible{ box-shadow:0 0 0 4px rgba(255,20,20,.22); }
.kalk__skala{
  display:flex; justify-content:space-between;
  margin-top:9px; font-size:.74rem; color:#5f5f69;
}

/* pole lokalizacji + podpowiedź o dojeździe */
.kalk__pole .field input{ padding:13px 16px; }
.kalk__hint{
  margin:10px 0 0;
  font-size:.79rem; line-height:1.5; color:#5f5f69;
  transition:color .3s var(--ease);
}
.kalk__hint--ok{ color:rgba(246,246,248,.78); }
.kalk__hint--ok::before{ content:"✓ "; color:var(--red); font-weight:700; }
.kalk__hint--blad{ color:#ffb0b0; }

/* --- komunikaty --- */
.kalk__alert{
  display:flex; gap:10px; align-items:flex-start;
  margin:14px 0 0; padding:12px 14px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  font-size:.84rem; line-height:1.5; color:var(--muted);
}
.kalk__alert svg{ flex:0 0 auto; margin-top:2px; }
.kalk__alert--ostrz{
  background:rgba(255,20,20,.09);
  border-color:rgba(255,20,20,.32);
  color:#ffc9c9;
}
.kalk__alert--ostrz svg{ color:var(--red); }

.kalk__checkbox{ margin:4px 0 26px; }
.kalk__checkbox strong{ color:var(--white); font-weight:600; }

.kalk__czas{
  padding-top:22px;
  border-top:1px solid var(--line);
}
.kalk__czasRow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.9rem; color:var(--muted);
}
.kalk__czasRow strong{
  font-family:var(--font-display); font-size:1.15rem; color:var(--white);
  font-variant-numeric:tabular-nums;
}

/* --- wynik --- */
.kalk__label{
  display:block;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.kalk__cena{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.03em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(255,20,20,.28);
}
.kalk__cena em{ font-style:normal; color:var(--red); }

/* --- BRAMA: e-mail odblokowuje cały kalkulator --- */
.kalk{ position:relative; }
.kalk.jest-zablokowany .kalk__panel,
.kalk.jest-zablokowany .kalk__wynik{
  filter:blur(6px);
  pointer-events:none; user-select:none;
  opacity:.7;
  transition:filter .5s var(--ease), opacity .5s var(--ease);
}
.kalk__brama{
  position:absolute; inset:0; z-index:5;
  display:grid; align-items:start; justify-items:center;
  padding:clamp(28px,7vh,90px) clamp(16px,3vw,32px);
}
.kalk:not(.jest-zablokowany) .kalk__brama{ display:none; }
.kalk__bramaKarta{
  width:min(420px,100%);
  padding:clamp(26px,3vw,38px);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,20,20,.18);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,20,20,.16), transparent 55%),
    linear-gradient(165deg, #17171b, #0c0c0e);
  box-shadow:0 0 0 1px rgba(255,20,20,.10), 0 30px 80px rgba(0,0,0,.6), var(--glow-md);
  text-align:center;
}
.kalk__bramaIco{
  display:grid; place-items:center;
  width:52px; height:52px; margin:0 auto 18px;
  border-radius:var(--r-sm);
  background:var(--red-soft); border:1px solid rgba(255,20,20,.28);
  color:var(--red);
}
.kalk__bramaKarta h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); margin-bottom:10px; }
.kalk__bramaKarta p{ color:var(--muted); font-size:.9rem; line-height:1.55; margin-bottom:22px; }
.kalk__bramaKarta .field{ margin-bottom:0; text-align:left; }
.kalk__bramaKarta .btn{ margin-top:14px; }
.kalk__rabat{
  margin:12px 0 0; font-size:.82rem; color:var(--red); font-weight:600;
}

.kalk__rozpis{
  margin:24px 0 0; padding:20px 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:11px;
}
.kalk__rozpis li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:.86rem; color:var(--muted);
}
.kalk__rozpis b{
  font-weight:600; color:rgba(246,246,248,.9);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kalk__rozpis--rabat b{ color:var(--red); }

.kalk__form{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.kalk__formLead{ font-size:.88rem; color:var(--muted); margin-bottom:16px; }
.kalk__stopka{
  margin:20px 0 0; font-size:.76rem; line-height:1.55; color:#5f5f69;
}

.gallery{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px); margin-top:clamp(30px,4vw,50px);
}
.gallery a{
  border-radius:var(--r-md); overflow:hidden; position:relative;
  aspect-ratio:4/3; background:var(--black-3);
}
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s; }
.gallery a::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(255,20,20,.35));
  opacity:0; transition:opacity .5s var(--ease);
}
.gallery a:hover img{ transform:scale(1.07); }
.gallery a:hover::after{ opacity:1; }

.faq{ margin-top:clamp(30px,4vw,50px); display:grid; gap:10px; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
  overflow:hidden;
  transition:border-color .4s var(--ease), background .4s;
}
.faq__item.is-open{ border-color:rgba(255,20,20,.35); background:rgba(255,20,20,.04); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(18px,2.4vw,28px);
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; text-align:left;
}
.faq__q i{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:var(--red-soft); color:var(--red);
  font-style:normal; font-size:1.1rem; line-height:1;
  transition:transform .45s var(--ease), background .3s;
}
.faq__item.is-open .faq__q i{ transform:rotate(45deg); background:var(--red); color:#fff; }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.faq__a p{ padding:0 clamp(18px,2.4vw,28px) 22px; color:var(--muted); font-size:.95rem; }

.cta-band{
  position:relative; overflow:hidden;
  margin:clamp(60px,8vw,100px) auto 0;
  max-width:var(--container);
  width:calc(100% - var(--pad) * 2);
  border-radius:var(--r-xl);
  padding:clamp(44px,6vw,78px) var(--pad);
  text-align:center;
  background:linear-gradient(140deg, #e00b12, #8c0007);
  box-shadow:0 30px 90px rgba(255,20,20,.22);
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.18), transparent 60%);
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ max-width:20ch; margin:0 auto 18px; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:52ch; margin:0 auto 30px; }

/* strona treściowa (polityka prywatności) */
.legal{ padding-top:clamp(140px,16vw,190px); }
.legal__body{ max-width:820px; }
.legal__body h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:44px 0 14px; }
.legal__body h3{ font-size:1.1rem; margin:28px 0 10px; }
.legal__body p,
.legal__body li{ color:var(--muted); font-size:.97rem; }
.legal__body ul{ list-style:disc; padding-left:22px; display:grid; gap:8px; margin:0 0 18px; }
.legal__body a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.legal__toc{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 26px; margin:30px 0 10px;
  background:rgba(255,255,255,.025);
}
.legal__toc ol{ margin:0; padding-left:20px; display:grid; gap:7px; color:var(--muted); font-size:.93rem; }
.legal__toc a:hover{ color:var(--red); }

/* ---------- 8. STOPKA ---------- */
.footer{
  position:relative;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--black), #08080a);
  padding:clamp(56px,7vw,86px) 0 34px;
  overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:min(760px,90vw); height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow:var(--glow-sm);
}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(26px,4vw,50px);
}
.footer__logo img{ height:30px; margin-bottom:20px; filter:drop-shadow(0 0 18px rgba(255,20,20,.35)); }
.footer__about{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer h4{
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase; color:#fff; margin:0 0 18px;
}
.footer__links{ display:grid; gap:11px; }
.footer__links a{ color:var(--muted); font-size:.93rem; transition:color .3s, padding-left .3s var(--ease); }
.footer__links a:hover{ color:var(--red); padding-left:5px; }
.footer__bottom{
  margin-top:clamp(38px,5vw,60px); padding-top:26px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  color:#67676f; font-size:.83rem;
}
.footer__bottom a:hover{ color:var(--red); }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:850;
  width:46px; height:46px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:rgba(10,10,12,.8); border:1px solid var(--line);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, box-shadow .3s, border-color .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:rgba(255,20,20,.5); box-shadow:var(--glow-sm); color:var(--red); }

/* ---------- 9. ANIMACJE WEJŚCIA ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="zoom"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .preloader{ display:none; }
}

/* ---------- 10. RWD ---------- */
@media (max-width:1080px){
  .contact__grid{ grid-template-columns:1fr; }
  .feature-grid,
  .price-grid{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --r-xl:34px; --r-lg:26px; }
  .island{ grid-template-columns:auto 1fr auto; gap:14px; padding:9px 14px 9px 18px; }
  .island__nav{ display:none; }
  .island__burger{ display:flex; }
  .island__logo{ justify-self:center; }
  .header.is-compact .island{ transform:scale(.94); padding:7px 12px 7px 16px; }
  .header.is-compact.is-expanded .island{ padding:9px 14px 9px 18px; }

  /* „O nas” układa się w pion: twarz u góry, treść pod spodem */
  .about{
    min-height:0;
    padding-top:clamp(250px,42vh,380px);
  }
  .about__bg{ background-position:24% 18%; }
  .about__overlay{
    background:
      linear-gradient(180deg,
        rgba(5,5,6,.06) 0%, rgba(5,5,6,.14) 26%,
        rgba(5,5,6,.88) 48%, rgba(5,5,6,.96) 100%),
      radial-gradient(80% 45% at 50% 82%, rgba(255,20,20,.15), transparent 70%);
  }
  .about__content{ margin-left:0; width:100%; }

  .tiles{ grid-template-columns:1fr; }
  .tile{ aspect-ratio:16/11; }
  .stats{ grid-template-columns:repeat(3,1fr); gap:22px 12px; }

  .gear__slide{ grid-template-columns:1fr; min-height:0; }
  .gear__slide .yt{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .yt-grid{ grid-template-columns:1fr; }
  .kalk{ grid-template-columns:1fr; }
  .kalk__wynik{ position:static; }
  .form__row{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:620px){
  body{ font-size:15px; }
  .feature-grid,
  .price-grid,
  .footer__grid{ grid-template-columns:1fr; }
  .showreel__actions .btn,
  .about__actions .btn{ width:100%; }
  .gear__controls{ flex-direction:column-reverse; align-items:stretch; gap:16px; }
  .gear__arrows{ justify-content:space-between; }
  .gear__dots{ justify-content:center; }
  .sound-toggle{ bottom:auto; top:110px; }
  .scroll-cue{ display:none; }
  .step{ grid-template-columns:1fr; gap:8px; }
  .to-top{ right:14px; bottom:14px; }
}