/* Technologia Vibraé
 *
 * Ta strona nie zakłada własnego świata wizualnego — mieszka w świecie
 * strony vibrae.pl. Wartości poniżej są zmierzone na istniejącej stronie
 * „Technologia Vibrae”, żeby nowe sekcje siedziały obok starych bez szwu:
 * Montserrat 700 wersalikami w nagłówkach, Nunito w tekście, tło #141414,
 * karty #222323 z cienkim złotym obrysem, złoto #cfa962.
 *
 * Zmieniono świadomie jedną rzecz: nagłówki sekcji dostają większą skalę
 * na szerokich ekranach. Oryginał zatrzymywał się na 40 px niezależnie od
 * monitora, przez co sekcje traciły hierarchię przy 1440 px wzwyż.
 */

:root{
  --tlo:#141414;
  --tlo-glebsze:#0f0f0f;
  --karta:#222323;
  --zloto:#cfa962;
  --zloto-jasne:#e0c088;
  --tekst:#fbfbfa;
  --tekst-cichy:rgba(251,251,250,.72);
  --tekst-cichszy:rgba(251,251,250,.5);
  --obrys:rgba(207,169,98,.2);
  --obrys-mocny:rgba(207,169,98,.45);

  --f-naglowek:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --f-tekst:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --szer:1200px;
  --r-karta:18px;
  --r-przycisk:12px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--tlo);
  color:var(--tekst);
  font-family:var(--f-tekst);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;height:auto;display:block}

a{color:var(--zloto);text-decoration:none}
a:hover{color:var(--zloto-jasne)}

/* Pasek serwisu jest wspólny dla całego vibrae.pl i wnosi własny odstęp
   od góry; sekcje kotwiczone muszą się o niego zatrzymać. */
section[id]{scroll-margin-top:calc(var(--vb-sitebar-h,56px) + 16px)}

/* ---------- rusztowanie ---------- */

.sekcja{padding:80px 0}
.sekcja--ciasna{padding:56px 0}
.sekcja--glebsza{background:var(--tlo-glebsze)}
.srodek{width:min(var(--szer),calc(100% - 48px));margin-inline:auto}

.naglowek-sekcji{margin:0 0 8px;font-family:var(--f-naglowek);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.15;
  letter-spacing:-.01em}
.nadtytul{margin:0 0 10px;font-family:var(--f-naglowek);font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--zloto)}
.podtytul{margin:0 0 40px;color:var(--tekst-cichy);max-width:62ch;font-size:1.0625rem}

/* Cienka złota kreska pod tytułem — sygnatura oryginału. */
.kreska{width:104px;height:2px;background:var(--zloto);border:0;margin:18px 0 26px}
.kreska--srodek{margin-inline:auto}

.na-srodku{text-align:center}
.na-srodku .podtytul{margin-inline:auto}

/* ---------- przyciski ---------- */

.przycisk{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-tekst);font-size:1.125rem;font-weight:500;letter-spacing:.5px;
  padding:9px 36px;border-radius:var(--r-przycisk);
  border:1px solid var(--zloto);color:var(--zloto);background:transparent;
  transition:background .18s,color .18s,transform .18s;
}
.przycisk:hover{background:rgba(207,169,98,.12);color:var(--zloto-jasne);transform:translateY(-1px)}
.przycisk--pelny{background:var(--zloto);color:#121212}
.przycisk--pelny:hover{background:var(--zloto-jasne);color:#121212}
.przycisk--goly{border-color:transparent;color:var(--tekst);padding-inline:6px}
.przycisk--goly:hover{background:none;color:var(--zloto)}
.przyciski{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}

.strzalka{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid currentColor;font-size:11px;line-height:1;flex:0 0 auto;
}

/* ---------- listy z iskrą ---------- */

.iskry{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.iskry li{position:relative;padding-left:32px}
.iskry li::before{
  content:"⚡";position:absolute;left:0;top:0;color:var(--zloto);font-size:1rem;
}
.iskry b,.iskry strong{color:var(--zloto);font-weight:700}

/* ---------- hero ---------- */

.hero{position:relative;overflow:hidden;background:#0a0a0a;
  padding:clamp(48px,6vw,84px) 0 clamp(48px,6vw,80px)}
.hero__tlo{position:absolute;inset:0;z-index:0}
.hero__tlo video,.hero__tlo img{width:100%;height:100%;object-fit:cover}
.hero__zaslona{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(70% 60% at 74% 50%,rgba(207,169,98,.10),transparent 70%),
    linear-gradient(180deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.84) 45%,rgba(20,20,20,.97) 100%)}
.hero__srodek{position:relative;z-index:2;display:grid;gap:clamp(28px,4vw,56px);
  align-items:center}
@media (min-width:920px){.hero__srodek{grid-template-columns:1.08fr .92fr}}
.hero__tytul{
  margin:0;font-family:var(--f-naglowek);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.015em;
}
.hero__nad{margin:0 0 16px;font-family:var(--f-naglowek);font-weight:400;
  text-transform:uppercase;letter-spacing:.15em;font-size:clamp(.7rem,1.3vw,.85rem);
  color:var(--zloto)}
.hero__lid{margin:24px 0 0;max-width:56ch;color:var(--tekst-cichy);font-size:1.0625rem}
.hero__lid b{color:var(--tekst);font-weight:600}

/* Strój z impulsem — jedyny obrazek na stronie, który nie siedzi w ramce.
   Ma wyglądać, jakby świecił z ciemności, więc dostaje poświatę zamiast
   obrysu, a nie tło. */
.hero__stroj{position:relative;display:grid;place-items:center}
.hero__stroj img{max-height:min(72vh,620px);width:auto;
  filter:drop-shadow(0 0 60px rgba(90,160,255,.22)) drop-shadow(0 26px 50px rgba(0,0,0,.6))}
@media (max-width:919px){.hero__stroj img{max-height:52vh}}

/* Impuls na stroju: wideo wyładowań nakłada się na zdjęcie w trybie
   rozjaśniania, więc czarne tło klipu znika, a zostaje sam błysk. */
.impuls{position:relative;border-radius:var(--r-karta);overflow:hidden;
  border:1px solid var(--obrys);background:#0a0a0a;display:grid;place-items:center;
  padding:24px}
.impuls img{max-height:520px;width:auto;position:relative;z-index:0}
.impuls video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;opacity:.9;z-index:1;pointer-events:none}

/* ---------- siatki ---------- */

.dwie{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:900px){
  .dwie{grid-template-columns:1fr 1fr}
  .dwie--tekst-prawo>*:first-child{order:2}
}

.karty{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.karta{
  background:var(--karta);border:1px solid var(--obrys);border-radius:var(--r-karta);
  padding:30px 28px;
}
.karta__tytul{margin:0 0 10px;font-family:var(--f-naglowek);font-weight:700;
  font-size:1.0625rem;text-transform:uppercase;letter-spacing:.01em}
.karta p{margin:0;color:var(--tekst-cichy)}

/* Karta parametru: wartość na górze, nazwa pod spodem, jak w oryginale. */
.parametr{text-align:center;padding:26px 22px}
.parametr__wartosc{display:block;font-family:var(--f-naglowek);font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--zloto);line-height:1.25}
.parametr__nazwa{display:block;margin-top:8px;font-family:var(--f-naglowek);font-weight:700;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tekst-cichy)}
.parametr--szeroki{grid-column:1/-1}

/* ---------- tabelka danych ---------- */

.dane{display:grid;gap:0;margin:0}
.dane div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(251,251,250,.09)}
.dane div:last-child{border-bottom:0}
.dane dt{color:var(--zloto);font-weight:700;font-size:.9375rem}
.dane dd{margin:0;color:var(--tekst-cichy)}

/* ---------- kadr na zdjęcie ---------- */

.kadr{border-radius:var(--r-karta);overflow:hidden;border:1px solid var(--obrys);
  background:#0c0c0c}
.kadr img,.kadr video{width:100%;display:block}
.kadr--wysoki img{aspect-ratio:3/4;object-fit:cover}
.podpis{margin:12px 2px 0;font-size:.8125rem;color:var(--tekst-cichszy);line-height:1.5}

/* ---------- tabela rozmiarów ----------
   Tabela przewija się we własnej ramce, nie ciągnie strony w bok —
   przy 390 px szerokości nadal widać pełne wiersze po przesunięciu palcem. */

.tabela-przewin{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--obrys);border-radius:var(--r-karta);
  background:var(--karta);margin:14px 0 32px;max-width:100%}
.tabela-rozmiarow{width:100%;min-width:540px;border-collapse:collapse;font-size:.9375rem}
.tabela-rozmiarow th,.tabela-rozmiarow td{padding:12px 18px;text-align:left;
  white-space:nowrap;border-bottom:1px solid var(--obrys)}
.tabela-rozmiarow tr:last-child th,.tabela-rozmiarow tr:last-child td{border-bottom:0}
.tabela-rozmiarow thead th{color:var(--zloto);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.08em}
.tabela-rozmiarow tbody th{font-weight:700;color:var(--tekst)}
.tabela-rozmiarow tbody td{color:var(--tekst-cichy)}
.wskazowka-tabeli{display:none;margin:0 2px 4px}
@media (max-width:760px){.wskazowka-tabeli{display:block}}

/* ---------- warianty stroju ---------- */

.warianty{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.wariant{background:var(--karta);border:1px solid var(--obrys);border-radius:var(--r-karta);
  overflow:hidden;display:flex;flex-direction:column}
.wariant__foto{background:#0c0c0c;padding:22px;display:grid;place-items:center;min-height:230px}
.wariant__foto img{max-height:210px;width:auto;object-fit:contain}
.wariant__tresc{padding:24px 26px 28px}
.wariant__nazwa{margin:0;font-family:var(--f-naglowek);font-weight:700;font-size:1.125rem;
  text-transform:uppercase;letter-spacing:.02em}
.wariant__strefy{margin:6px 0 12px;color:var(--zloto);font-weight:700;font-size:.9375rem}
.wariant p{margin:0;color:var(--tekst-cichy);font-size:.9375rem}

/* ---------- aplikacje ---------- */

.apka{display:grid;gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:64px}
.apka:last-of-type{margin-bottom:0}
@media (min-width:960px){
  .apka{grid-template-columns:1.05fr .95fr}
  .apka--odwrotnie>*:first-child{order:2}
}
.apka__ekran{border-radius:14px;overflow:hidden;border:1px solid var(--obrys);
  box-shadow:0 24px 60px rgba(0,0,0,.55);background:#0c0c0c}
.apka__telefony{display:flex;gap:16px;justify-content:center}
.apka__telefony img{width:min(200px,44%);border-radius:22px;border:1px solid var(--obrys)}
.apka__znacznik{display:inline-block;margin-bottom:12px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--obrys-mocny);color:var(--zloto);font-size:.72rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.apka__nazwa{margin:0 0 6px;font-family:var(--f-naglowek);font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.85rem);text-transform:uppercase;letter-spacing:-.005em}
.apka__rola{margin:0 0 18px;color:var(--zloto);font-size:.9375rem}
.apka p{color:var(--tekst-cichy)}

/* ---------- pobieranie ---------- */

.pobierz{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:8px}
.pobierz__pozycja{background:var(--karta);border:1px solid var(--obrys);
  border-radius:var(--r-karta);padding:26px;display:flex;gap:20px;align-items:center}
.pobierz__kody{display:flex;gap:10px;flex:0 0 auto}
.pobierz__kody img{width:76px;height:76px;border-radius:8px}
.pobierz__nazwa{margin:0 0 4px;font-family:var(--f-naglowek);font-weight:700;
  font-size:1rem;text-transform:uppercase;letter-spacing:.02em}
.pobierz__opis{margin:0 0 10px;font-size:.875rem;color:var(--tekst-cichy);line-height:1.5}
.pobierz__linki{display:flex;gap:14px;font-size:.875rem}

/* ---------- gdzie pracuje ---------- */

.miejsca{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.miejsce{position:relative;border-radius:var(--r-karta);overflow:hidden;
  border:1px solid var(--obrys);min-height:320px;display:flex;align-items:flex-end;
  background:#0c0c0c}
.miejsce img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity .3s,transform .5s}
.miejsce:hover img{opacity:.62;transform:scale(1.03)}
.miejsce__tresc{position:relative;z-index:1;padding:28px 26px;width:100%;
  background:linear-gradient(180deg,transparent,rgba(12,12,12,.94) 62%)}
.miejsce__nazwa{margin:0 0 6px;font-family:var(--f-naglowek);font-weight:700;
  font-size:1.25rem;text-transform:uppercase}
.miejsce p{margin:0 0 14px;color:var(--tekst-cichy);font-size:.9375rem}
.miejsce a{font-weight:700;font-size:.9375rem}

/* ---------- zamknięcie ---------- */

.rama{border:1px solid var(--obrys);border-radius:var(--r-karta);
  padding:clamp(36px,5vw,64px);text-align:center;background:var(--karta)}
.rama .naglowek-sekcji{margin-bottom:18px}
.rama .iskry{max-width:640px;margin:0 auto;text-align:left}
.puenta{margin:30px 0 0;font-family:var(--f-naglowek);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--zloto)}

.stopka-kontakt{background:var(--zloto);color:#121212;padding:64px 0}
.stopka-kontakt .naglowek-sekcji{color:#121212}
.stopka-kontakt a{color:#121212;text-decoration:underline;text-underline-offset:3px}
.stopka-kontakt .dane-firmy{margin-top:22px;font-size:.9375rem;line-height:1.7;
  color:rgba(18,18,18,.78)}

/* ---------- wejście sekcji ---------- */

@media (prefers-reduced-motion:no-preference){
  .wchodzi{opacity:0;transform:translateY(22px);
    transition:opacity .6s ease-out,transform .6s ease-out}
  .wchodzi.widoczna{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   TABELA ROZMIARÓW — czytelna wersja
   ═══════════════════════════════════════════════════════════
   Poprzednia wersja siedziała w kolumnie tekstu, przez co pięć kolumn
   rozmiarów ściskało się do kilkudziesięciu pikseli każda. Przy wyborze
   rozmiaru człowiek wodzi wzrokiem wzdłuż wiersza i w poprzek kolumn —
   ciasna siatka to uniemożliwia.

   Tabela wychodzi teraz poza kolumnę tekstu na całą szerokość sekcji,
   ma większy stopień pisma, wyraźny nagłówek i naprzemienne wiersze,
   żeby wzrok nie gubił się przy przejściu z lewej do prawej.
   ═══════════════════════════════════════════════════════════ */

/* Wyjście poza wąską kolumnę tekstu — tabela dostaje pełną szerokość
   sekcji, nie szerokość akapitu. */
.tabela-przewin {
	width: 100%;
	max-width: 980px;
	margin: 28px auto 36px;
	overflow-x: auto;
	border-radius: var(--r-karta, 14px);
	border: 1px solid var(--linia, rgba(251, 251, 250, .10));
	background: var(--karta, #222323);
	-webkit-overflow-scrolling: touch;
}

.tabela-rozmiarow {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;   /* cyfry w równych kolumnach */
}

/* ── nagłówek ──────────────────────────────────────────── */

.tabela-rozmiarow thead th {
	background: rgba(207, 169, 98, .12);
	color: var(--zloto, #cfa962);
	font-family: var(--f-naglowek, "Montserrat"), system-ui, sans-serif;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 16px 14px;
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--linia-mocna, rgba(207, 169, 98, .28));
}

/* Pierwsza kolumna to nazwa wymiaru — trzyma się lewej i jest szersza. */
.tabela-rozmiarow thead th:first-child,
.tabela-rozmiarow tbody th {
	text-align: left;
	min-width: 168px;
}

/* ── wiersze ───────────────────────────────────────────── */

.tabela-rozmiarow tbody th {
	font-family: var(--f-tekst, "Nunito"), system-ui, sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--tekst, #fbfbfa);
	padding: 15px 14px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.tabela-rozmiarow tbody td {
	padding: 15px 14px;
	text-align: center;
	color: var(--tekst-cichy, rgba(251, 251, 250, .72));
	white-space: nowrap;
}

/* Naprzemienne tła — przy pięciu kolumnach oko gubi wiersz bez tego. */
.tabela-rozmiarow tbody tr:nth-child(odd) {
	background: rgba(251, 251, 250, .028);
}

.tabela-rozmiarow tbody tr:hover {
	background: rgba(207, 169, 98, .07);
}

.tabela-rozmiarow tbody tr + tr th,
.tabela-rozmiarow tbody tr + tr td {
	border-top: 1px solid var(--linia, rgba(251, 251, 250, .10));
}

/* Podpowiedź o przewijaniu ma sens tylko wtedy, gdy tabela się nie mieści. */
.tabela-podpowiedz {
	font-size: .8125rem;
	color: var(--tekst-cichszy, rgba(251, 251, 250, .46));
	margin: -24px 0 32px;
	text-align: center;
}

@media (min-width: 860px) {
	.tabela-podpowiedz { display: none; }
}

@media (max-width: 620px) {
	.tabela-rozmiarow { font-size: .9375rem; }
	.tabela-rozmiarow thead th,
	.tabela-rozmiarow tbody th,
	.tabela-rozmiarow tbody td { padding: 12px 11px; }
	.tabela-rozmiarow thead th:first-child,
	.tabela-rozmiarow tbody th { min-width: 140px; }
}