/* ==========================================================================
   Next Level (udoskonalaj.pl) – base.css
   Fundament wersji 1:1: fonty, tokeny, płynna skala rem, reset zgodny
   z bazą Webflow, kontenery, komponenty współdzielone (nawigacja, przycisk
   „glow”, stopka, rozwijane sekcje, tytuł hero), animacje wejścia.

   Wartości przeniesione z docs/original/webflow.css i osadzonych <style>.
   Komentarz „← .klasa” wskazuje źródłową klasę Webflow.

   Breakpointy (desktop-first jak w Webflow; dodatkowo min-width 1280/1440,
   bo oryginał ich używa):
     ≥1440 px   @media (min-width: 1440px)
     ≥1280 px   @media (min-width: 1280px)
     ≤991 px    @media (max-width: 991px)   – tablet, menu hamburgerowe
     ≤767 px    @media (max-width: 767px)   – mobile landscape
     ≤479 px    @media (max-width: 479px)   – mobile portrait
   NIE edytuj tego pliku z poziomu stron – zmiany wspólne zgłaszaj w raporcie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonty – Satoshi (tylko kroje realnie używane na stronach:
      300, 400, 400 italic, 500, 700; 600 w CSS → przeglądarka bierze 700)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokeny (z :root oryginału; nazwy oryginalne w komentarzach)
   -------------------------------------------------------------------------- */
:root {
  /* Kolory */
  --color-black: #101011;        /* --color--black (domyślne tło body w Webflow) */
  --color-white: #fbfbfb;        /* --color--white (kolor tekstu) */
  --color-bg: #11161f;           /* --color--bg-color (tło stron, stopki, nawigacji po przewinięciu) */
  --color-surface: #181e29;      /* --color--content-bg (karty, panel menu mobilnego, hover pozycji) */
  --color-border: #232a36;       /* --color--border (obramowania, kafelki social, aktywny hamburger) */
  --color-primary: #49aee8;      /* --color--test (niebieski: hover social, poświata przycisku) */
  --color-accent: #a1d5f3;       /* --color--accent (jasnoniebieski) */
  --color-text-muted: #c6c7c9;   /* --color--text-hover (hover linków stopki, leady) */
  --color-navy: #081c43;         /* --color--button-hover */
  --color-grey-dark: #1f1f1f;    /* --color--dark-grey */
  --color-grey: #353535;         /* --color--grey */
  --color-orange: #ed5145;       /* --color--orange */
  --color-icon: #b5b5b5;         /* ← .menu-icon (ikona hamburgera) */
  --color-on-dark-10: rgb(255 255 255 / .1); /* ← obramowanie .glowing-wrapper-button */

  /* Typografia */
  --font-sans: "Satoshi", sans-serif;
  --text-tiny: .75rem;           /* --text-size--tiny */
  --text-small: .875rem;         /* --text-size--small */
  --text-regular: 1rem;          /* --text-size--regular */
  --text-medium: 1.125rem;       /* --text-size--medium */
  --text-large: 1.5rem;          /* --text-size--large */
  --heading-h1: 10.5rem;         /* --heading--h1 */
  --heading-h2: 5rem;            /* --heading--h2 */
  --heading-h3: 4rem;            /* --heading--h3 (tytuły hero) */
  --heading-h4: 3rem;            /* --heading--h4 */
  --heading-h5: 2.5rem;          /* --heading--h5 */
  --heading-h6: 2rem;            /* --heading--h6 */

  /* Kształty */
  --radius-pill: 62.5rem;        /* przyciski „glow” */
  --radius-card: 1rem;           /* ← .testimonial-item, .offer-item */

  /* Ruch (easingi IX2 przełożone na cubic-bezier) */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);      /* IX2 „outQuart” – presety wejścia, akordeony */
  --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);  /* IX2 „inOutQuart” */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);       /* IX2 „outExpo” */
  --dur-reveal: 1000ms;          /* presety fadeIn / slideInBottom / growIn */
  --dur-menu: 400ms;             /* menu mobilne (data-duration="400", ease) */

  /* Nawigacja – wysokość paska (main.js nadpisuje dokładną wartością) */
  --nav-h: 107.67px;
}
@media (max-width: 991px) { :root { --nav-h: 84.5px; } }
@media (max-width: 767px) { :root { --nav-h: 66.6px; } }
@media (max-width: 479px) { :root { --nav-h: 66.1px; } }

/* --------------------------------------------------------------------------
   3. Płynna skala rem (osadzony styl oryginału – kluczowe dla wierności).
      1440 px → 16 px, 768 px → 14,60 px, 390 px → 15,26 px.
   -------------------------------------------------------------------------- */
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
@media screen and (max-width: 1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

/* Wygładzanie fontów (osadzony styl oryginału) */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   4. Reset zgodny z bazą Webflow (normalize + domyślne style witryny),
      żeby wartości z webflow.css dało się przenosić 1:1.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--color-bg);   /* ← .body-2…5; kontakt: patrz SPEC (tło #101011 > 479 px) */
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

main, header, footer, nav, section, article, aside, figure, figcaption { display: block; }
[hidden] { display: none !important; }

/* Nagłówki – domyślne wartości witryny Webflow (strony nadpisują klasami) */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; font-weight: 700; }
h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }
h4 { font-size: 18px; line-height: 24px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 18px; }

p { margin-top: 0; margin-bottom: 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
b, strong { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 80%; }
figure { margin: 0 0 10px; }
blockquote {
  margin: 0 0 10px;
  padding: 10px 20px;
  border-left: 5px solid #e2e2e2;
  font-size: 18px;
  line-height: 22px;
}

a {
  background-color: transparent;
  color: inherit;              /* w oryginale wszystkie linki mają kolor nadany klasą */
  text-decoration: none;
}

/* Obrazy – globalny styl witryny Webflow: wypełniają rodzica (object-fit: cover).
   Nadawaj width/height w HTML (proporcje) – height:100% przy rodzicu „auto” działa jak auto. */
img {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
svg:not(:root) { overflow: hidden; }

button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; }
button { overflow: visible; text-transform: none; cursor: pointer; }
button[disabled] { cursor: default; }
label { display: block; margin-bottom: 5px; font-weight: 700; }

/* Widoczny focus z klawiatury (oryginał go wyłączał – tu przywrócony) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }   /* cel linku „przejdź do treści” (<main tabindex="-1">) */

/* --------------------------------------------------------------------------
   5. Klasy pomocnicze
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.btn-reset {
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  color: inherit; font: inherit; text-align: inherit;
  cursor: pointer;
}
.list-reset { margin: 0; padding: 0; list-style: none; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }          /* ← .text-weight-medium */
.fw-700 { font-weight: 700; }          /* ← .text-weight-bold */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.nowrap { white-space: nowrap; }

/* Link „przejdź do treści” */
.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 2000;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  background-color: var(--color-white);
  color: var(--color-bg);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   6. Kontenery i siatka (odpowiedniki kontenerów Webflow)
   -------------------------------------------------------------------------- */
/* ← .w-layout-blockcontainer: 940 → 728 (≤991) → brak limitu (≤767) */
.l-container { display: block; max-width: 940px; margin-left: auto; margin-right: auto; }
/* ← .w-container: 940 → 728 (≤991) → brak limitu (≤479) */
.l-container-w { max-width: 940px; margin-left: auto; margin-right: auto; }
/* ← .container-default (stopka): 1218 px + 24 px marginesu (20 px ≤479) */
.l-container-wide { max-width: 1218px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
/* ← .container-small (hero strony głównej i „Zespół”) */
.l-container-small { width: 100%; max-width: 43rem; margin-left: auto; margin-right: auto; }
/* ← .padding-global (sekcje treści: tło #11161f; ≥1280 flex + 24 px; ≤767 1.25rem; ≤479 0) */
.l-pad { position: relative; background-color: var(--color-bg); }
/* ← .padding-global-2 (hero: 2.5rem; ≤767 1.25rem) */
.l-pad-2 { padding-left: 2.5rem; padding-right: 2.5rem; }
/* ← .w-layout-grid (2 kolumny, odstęp 16 px) */
.l-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; gap: 16px; }

@media (min-width: 1280px) {
  .l-pad { display: flex; justify-content: center; align-items: center; padding-left: 24px; padding-right: 24px; }
  .l-pad-2 { width: 100%; }
}
@media (max-width: 991px) {
  .l-container, .l-container-w { max-width: 728px; }
}
@media (max-width: 767px) {
  .l-container { max-width: none; }
  .l-pad { padding-left: 1.25rem; padding-right: 1.25rem; }
  .l-pad-2 { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 479px) {
  .l-container-w { max-width: none; }
  .l-container-wide { padding-left: 20px; padding-right: 20px; }
  .l-pad { padding-left: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   7. Tytuł hero (h1) – ← .heading-4.text-weight-medium > strong.bold-text-4
      Wspólny dla: index, zespol, oferta, kontakt.
   -------------------------------------------------------------------------- */
.hero-title {
  width: 100%;
  margin: 0;
  font-size: var(--heading-h3);    /* 4rem = 64 px przy 1440 */
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}
@media (max-width: 991px) { .hero-title { font-size: 55px; } }
@media (max-width: 767px) { .hero-title { font-size: var(--heading-h3); } }
@media (max-width: 479px) { .hero-title { font-size: 3rem; } }

/* --------------------------------------------------------------------------
   8. Przycisk „glow” – ← .glowing-wrapper + .glowing-wrapper-button
      Pigułka 50 px z obracającym się (2,5 s) niebieskim łukiem na obwódce
      i poświatą od dołu na hover. Działa na <a> i <button>.
      Markup: <a class="btn-glow" href="…"><span class="btn-glow__label">Tekst</span></a>
   -------------------------------------------------------------------------- */
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn-glow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: .5rem 1.5rem;
  border: 1px solid transparent;          /* miejsce na obwódkę rysowaną w ::before */
  border-radius: var(--radius-pill);
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.42;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Obwódka: 10% biel na obracającym się gradiencie stożkowym (← .glowing-wrapper-borders-masker) */
.btn-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background:
    linear-gradient(var(--color-on-dark-10), var(--color-on-dark-10)),
    conic-gradient(from var(--glow-angle) at 50% 50%,
      rgb(73 174 232 / .5) 0deg,
      rgb(73 174 232 / 0) 60deg,
      rgb(73 174 232 / 0) 310deg,
      rgb(73 174 232 / .5) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  animation: btn-glow-turn 2.5s linear infinite;
  pointer-events: none;
}
/* Poświata na hover (← .glowing-wrapper-button:after) */
.btn-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(85% 120% at 50% 120%, rgb(73 174 232 / .24) 0%, rgb(73 174 232 / 0) 100%);
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}
.btn-glow:hover::after { opacity: .7; }
.btn-glow:focus-visible { outline-offset: 4px; }

/* Etykieta (← .button-text-2): 16 px; 20 px ≥1440; 14 px ≤767; medium */
.btn-glow__label {
  position: relative;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: calc(-.01 * .88rem);
}
@keyframes btn-glow-turn { to { --glow-angle: 360deg; } }

@media (min-width: 1440px) { .btn-glow__label { font-size: 20px; } }
@media (max-width: 767px)  { .btn-glow__label { font-size: 14px; } }
/* ≤479: wszystkie przyciski „glow” mają 70% szerokości kontenera (← .glowing-wrapper-active) */
@media (max-width: 479px)  { .btn-glow { width: 70%; } }

/* --------------------------------------------------------------------------
   9. Nawigacja – ← .navbar-2.w-nav (fixed, przezroczysta → #11161f po
      przewinięciu ≥1% strony: IX2 a-52, sterowane przez main.js)
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: rgb(17 22 31 / var(--nav-bg-alpha, 0));
  transition: background-color .15s linear, transform .4s var(--ease-out-quart);
}
html:not(.js) .nav { background-color: var(--color-bg); }   /* bez JS: pełne tło */
.nav.is-hidden { transform: translateY(-100%); }            /* opcjonalne auto-chowanie */

/* ← .padding-global.transparent-navbar */
.nav__inner { position: static; }
/* ← .container (wewnątrz nawigacji) */
.nav__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7px;
}
/* ← .navbar-component + .nav-menu-wrap (lewa grupa · logo · prawa grupa, space-between) */
.nav__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 24px;
}
/* ← .div-block-7 */
.nav__start { display: flex; flex-direction: column; }

/* Hamburger (← .menu-button.w-nav-button) – widoczny ≤991 */
.nav__toggle {
  display: none;
  width: 60px;
  height: 60px;
  padding: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-icon);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle svg { display: block; width: 24px; height: 24px; }
.nav__toggle[aria-expanded="true"] { background-color: var(--color-border); }

/* Panel menu (desktop: zwykły wiersz linków) */
.nav__panel { position: static; }
/* ← .nav-menu */
.nav__menu {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.875rem;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 2.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ← .nav-link */
.nav__link {
  position: relative;
  display: block;
  padding-top: .2rem;
  padding-bottom: .2rem;
  color: var(--color-white);
  transition: opacity .25s, transform .25s;
}
.nav__link:hover { opacity: .8; transform: translate(0, 1px); }
/* ← .mobile-navbar-content (przycisk „Kontakt” w menu mobilnym) */
.nav__menu-cta { display: none; align-items: center; gap: 1rem; }

/* Logo (← .navbar-logo-wrapper / .navbar-logo) */
.nav__logo { display: block; max-width: 100%; }
.nav__logo img {
  display: block;
  width: 110px;
  height: auto;
  transform-style: preserve-3d;
  transition: transform .3s;
}
.nav__logo:hover img { transform: scale3d(.92, .92, 1.01); }

/* Prawa grupa (← .right-navbar-content) */
.nav__end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .8rem;
  min-width: 25rem;
}

@media (min-width: 1280px) {
  .nav__inner { display: flex; justify-content: center; align-items: center; padding-left: 24px; padding-right: 24px; }
  .nav__container { margin-left: 0; margin-right: 0; }
  .nav__bar { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1440px) {
  .nav__container { padding-top: 0; }
}

/* Menu mobilne ≤991: panel wysuwa się spod paska (translateY, 400 ms ease) */
@media (max-width: 991px) {
  .nav__bar { padding: .6rem 24px .6rem 0; }
  .nav__toggle { display: block; }
  .nav__end { display: none; }
  .nav__logo img { width: auto; height: 50px; }

  /* Odpowiednik .w-nav-overlay: przycina wysuwające się menu na dolnej krawędzi paska.
     Zajmuje ekran pod paskiem – klik poza menu je zamyka (jak w Webflow). */
  .nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--dur-menu);
  }
  .nav.is-open .nav__panel {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav__menu {
    display: block;
    width: 100%;
    min-width: 200px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--color-surface);
    color: #fff;
    text-align: center;
    transform: translateY(calc(-100% - var(--nav-h)));
    transition: transform var(--dur-menu) ease;
  }
  .nav.is-open .nav__menu { transform: translateY(0); }
  .nav__list { display: block; }
  .nav__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2rem;
  }
  .nav__menu-cta {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2rem;
  }
}
.nav.no-transition .nav__menu,
.nav.no-transition .nav__panel { transition: none !important; }
/* Bez JS (≤991): menu rozwinięte pod paskiem, pasek w normalnym przepływie */
@media (max-width: 991px) {
  html:not(.js) .nav { position: relative; }
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__bar { flex-wrap: wrap; padding-left: 24px; }
  html:not(.js) .nav__start { order: 2; width: 100%; }
  html:not(.js) .nav__panel { position: static; height: auto; overflow: visible; visibility: visible; pointer-events: auto; }
  html:not(.js) .nav__menu { transform: none; }
}
@media (max-width: 767px) {
  .nav__inner { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav__container { padding-top: 0; }
  .nav__bar { padding-top: .3rem; padding-bottom: .3rem; }
  .nav__logo img { height: 40px; }
}
@media (max-width: 479px) {
  .nav__inner { padding-left: 0; padding-right: 0; }
  .nav__bar { padding-top: .2rem; padding-bottom: .2rem; }
  .nav__menu { padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .nav__menu-cta { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav__logo img { max-width: 240px; }
}

/* --------------------------------------------------------------------------
   10. Stopka – ← .footer-wrapper
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-bg);
  background-color: var(--color-bg);
}
/* ← .container-default */
.footer__container { max-width: 1218px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
/* ← .footer-top.pd-72px */
.footer__top { padding-top: 50px; padding-bottom: 50px; }
/* ← .grid-footer-3-columns */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(200px, .25fr) 1fr minmax(200px, .25fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 16px;
}
/* ← .footer-logo-wrapper / .footer-logo */
.footer__logo { display: inline-block; justify-self: start; max-width: 100%; }
.footer__logo img {
  display: block;
  width: 100px;
  height: auto;
  transform-style: preserve-3d;
  transition: transform .3s;
}
.footer__logo:hover img { transform: scale3d(.92, .92, 1.01); }
/* ← .footer-list-wrapper.horizontal / .footer-list-item.horizontal */
.footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links li { padding-left: 20px; padding-right: 20px; }
/* ← .footer-link-2 */
.footer__link { color: var(--color-white); }
.footer__link:hover { color: var(--color-text-muted); }
/* ← .social-media-grid-top.right.center-tablet */
.footer__social {
  display: grid;
  grid-template-columns: repeat(auto-fit, 36px);
  grid-template-rows: minmax(auto, .5fr);
  justify-content: end;
  justify-items: end;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ← .social-icon-square */
.footer__social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  background-color: var(--color-border);
  transition: background-color .3s, color .3s;
}
.footer__social-link:hover { background-color: var(--color-primary); color: #fff; }
.footer__social-link img { display: block; width: 24px; height: 24px; }   /* ← .image-4 */
/* ← .footer-bottom */
.footer__bottom {
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 2px solid var(--color-border);
  text-align: center;
}
.footer__bottom p { margin: 0; }

@media (min-width: 1280px) {
  .footer__social { display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; }
}
@media (max-width: 991px) {
  .footer__top { padding-top: 64px; padding-bottom: 64px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer__logo { justify-self: center; }
  .footer__social { column-gap: 10px; justify-content: center; }
  .footer__bottom { padding-top: 24px; padding-bottom: 24px; }
}
@media (max-width: 767px) {
  .footer__top { padding-top: 48px; padding-bottom: 48px; }
  .footer__logo img { width: auto; height: 60px; }
  .footer__social { place-items: stretch end; }
}
@media (max-width: 479px) {
  .footer__container { padding-left: 20px; padding-right: 20px; }
  .footer__links { flex-direction: column; }
  .footer__links li { margin-bottom: 6px; padding-left: 0; padding-right: 0; }
  .footer__logo img { max-width: 240px; }
  .footer__social { grid-template-columns: repeat(auto-fit, 30px); }
  .footer__social-link { width: 30px; min-width: 30px; height: 30px; min-height: 30px; border-radius: 6px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   11. Rozwijana sekcja (akordeon) – zachowanie z IX2 a-43/a-44 (Zespół:
       opinie klientów, Oferta: obszary). Domyślnie OTWARTA (jak w oryginale),
       klik zwija: wysokość → 0 i strzałka 180° → 0°, 500 ms outQuart.
       Wygląd pudełka (ramka, tło, odstępy) – w CSS strony.
   -------------------------------------------------------------------------- */
.disclosure__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.disclosure__icon {
  flex: none;
  transform: rotate(0deg);
  transition: transform .5s var(--ease-out-quart);
}
.disclosure.is-open .disclosure__icon { transform: rotate(180deg); }
.disclosure__panel { overflow: hidden; }

/* --------------------------------------------------------------------------
   12. Animacje wejścia (odpowiedniki presetów IX2) – start wyzwala main.js (§3).
       data-reveal="slide-up" ← slideInBottom: opacity 0→1 + translateY(100px→0)
       data-reveal="fade"     ← fadeIn: opacity 0→1
       data-reveal="grow"     ← growIn: opacity 0→1 + scale(.75→1)
       data-reveal="rise"     ← a-54 „Slide To Top 0.4s”: translateY(10%→0) + opacity, 500 ms ease
       Czas 1000 ms, easing outQuart; data-reveal-delay="ms", data-reveal-offset="%".
       Przebieg jak w IX2 (useFirstGroupAsInitialState):
         1) przed startem TYLKO opacity 0 – bez przesunięcia i skali, więc moment
            startu liczy się z prawdziwego położenia (rise ma translateY(10%) już
            w stanie początkowym, jak a-54);
         2) .is-revealed: przez data-reveal-delay element stoi w miejscu
            (opacity 0), potem skacze do klatki „from” (100px / scale .75)
            i animuje do stanu końcowego – fill „forwards”, nie „both”;
         3) .reveal-done (main.js po delay + czas) zdejmuje animację.
       Bez JS i przy prefers-reduced-motion treść jest widoczna od razu.
   -------------------------------------------------------------------------- */
.js [data-reveal]:not(.reveal-done) { opacity: 0; }
.js [data-reveal="rise"]:not(.reveal-done) { transform: translate3d(0, 10%, 0); }
/* awaryjnie, gdy main.js się nie wczyta (main.js od razu dodaje <html class="reveal-ready">) */
.js:not(.reveal-ready) [data-reveal]:not(.reveal-done) { animation: reveal-failsafe 0s linear 4s forwards; }

.js [data-reveal].is-revealed:not(.reveal-done) {
  animation: reveal-fade var(--reveal-duration, var(--dur-reveal)) var(--reveal-easing, var(--ease-out-quart)) var(--reveal-delay, 0ms) forwards;
}
.js [data-reveal="slide-up"].is-revealed:not(.reveal-done) { animation-name: reveal-slide-up; }
.js [data-reveal="grow"].is-revealed:not(.reveal-done) { animation-name: reveal-grow; }
.js [data-reveal="rise"].is-revealed:not(.reveal-done) { animation-name: reveal-rise; }
[data-reveal="rise"] { --reveal-duration: 500ms; --reveal-easing: ease; }
/* Jednorazowe przemalowanie (main.js, start przy wczytaniu) – Chrome rejestruje wtedy LCP na
   początku animacji, a nie dopiero po .reveal-done. Przezroczysty cień i obrys tekstu (2 klatki)
   niczego nie zmieniają w wyglądzie. Obrys obejmuje też tekst z własnym text-shadow. */
.reveal-repaint { text-shadow: 0 0 0 transparent; -webkit-text-stroke-color: transparent; }

@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-slide-up { from { opacity: 0; transform: translate3d(0, 100px, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-grow { from { opacity: 0; transform: scale3d(.75, .75, 1); } to { opacity: 1; transform: none; } }
@keyframes reveal-rise { from { opacity: 0; transform: translate3d(0, 10%, 0); } to { opacity: 1; transform: none; } }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   13. Płótna efektów tła
   -------------------------------------------------------------------------- */
/* WebGL „splash” strony głównej (splash.js): fixed, 100vw × 85% wysokości okna, pod treścią */
.splash-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 85%;
  pointer-events: none;
}
/* Cząsteczki za kursorem (main.js, opcjonalne – patrz SPEC) */
.cursor-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Ograniczenie ruchu i druk
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.reveal-done),
  .js [data-reveal].is-revealed:not(.reveal-done) { opacity: 1; transform: none; animation: none; }
  .btn-glow::before { animation: none; }
  .btn-glow::after, .nav, .nav__menu, .nav__panel, .nav__link, .disclosure__icon,
  .nav__logo img, .footer__logo img { transition: none; }
  .nav.is-hidden { transform: none; }
}
@media print {
  .nav { position: static; background: none; }
  .nav__toggle, .splash-canvas, .cursor-canvas, .skip-link { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
}