/* Red Hat Display 5.3.0 (@fontsource), licencja SIL OFL 1.1 - patrz licenses/. Pliki lokalne, bez zewnetrznych zrodel. */
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/red-hat-display-latin-ext-400-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:400;src:url("../fonts/red-hat-display-latin-400-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:500;src:url("../fonts/red-hat-display-latin-ext-500-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:500;src:url("../fonts/red-hat-display-latin-500-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/red-hat-display-latin-ext-600-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:600;src:url("../fonts/red-hat-display-latin-600-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/red-hat-display-latin-ext-700-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:700;src:url("../fonts/red-hat-display-latin-700-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:800;src:url("../fonts/red-hat-display-latin-ext-800-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:800;src:url("../fonts/red-hat-display-latin-800-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:900;src:url("../fonts/red-hat-display-latin-ext-900-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Display";font-style:normal;font-display:swap;font-weight:900;src:url("../fonts/red-hat-display-latin-900-normal.woff2?v=519c08ad47") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* SysTech One-Screen: jedna logika wyboru ukladu i tla
   ======================================================================================================================
   PODZIAL WEDLUG PROPORCJI EKRANU r = szerokosc / wysokosc (wzajemnie wykluczajacy, bez nakladania; opis: docs/LAYOUT-SWITCHING.md)

     r <  1          pion       (tlo mobilne, uklad referencyjny 941x1672)
     1 <= r <= 3/2   tablet     (tlo tabletowe, uklad referencyjny 1448x1086)
     r >  3/2        desktop    (tlo desktopowe, uklad referencyjny 1586x912)

   Wewnatrz kazdej rodziny jest dokladnie JEDNA warstwa tla (.bg__base) o jednym zestawie regul, wybieranym zakresem proporcji:
   kolejne reguly dotycza WYLACZNIE tej samej wlasciwosci "background", wiec nie moga aktywowac sie dwa systemy dekoracji.

   TRYBY UKLADU (UI jest zawsze prawdziwym HTML/CSS):
     scena    - uklad referencyjny skalowany jednostka --u = min(szer/W, wys/H): dokladnie jak zatwierdzone mockupy;
                tekst nigdy nie schodzi ponizej 12 px (podlogi max(..., 12px)); brak przewijania z konstrukcji.
     kompakt  - gdy skala sceny dalaby tekst < 12 px: uklad plynny w px (UI w normalnym przeplywie, ilustracja skalowana do wolnego
                miejsca, a nie do szerokosci ekranu), bez ukrywania tresci:
       PC (pion kompaktowy)    r < 1 oraz (szer. <= 417 px lub wys. <= 741 px)
       LC (poziom kompaktowy)  r >= 1 oraz (wys. <= 575 px lub szer. <= 767 px)
   ====================================================================================================================== */

:root {
  color-scheme: dark;
  --navy: #02102b;
  --navy-deep: #020919;
  --text: #f6faff;
  --text-muted: #d3ddf1;
  --safe-x: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  --safe-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  --vw: calc(100vw - var(--safe-x));
  --vh: calc(100vh - var(--safe-y));

  /* ===== DESKTOP (domyslny; r > 3/2): scena 1586 x 912 ===== */
  --W: 1586; --H: 912;
  --logo-top: 64; --logo-w: 479.5;
  --t-top: 210; --t-w: 1200; --t-fs: 61; --t-lh: 70.75; --t2: .99;
  --l-top: 367; --l-w: 900; --l-fs: 24.1; --l-lh: 33;
  --f-top: 467; --f-w: 1047; --f-h: 111; --f-gap: 18; --f-radius: 24; --f-dir: row; --f-pad: 31; --f-jc: flex-start; --f-tflex: 1 1 0;
  --f-ring: 66; --f-ring-b: 2; --f-ring-sh: 0 0 calc(10 * var(--ui)) rgba(6, 212, 245, .35); --f-ico: 45; --f-fs: 20.15; --f-lh: 27; --f-text-pad: 10; --f-icon-gap: 0;
  --ci-top: 605; --ci-fs: 20.7; --ci-line: 80; --ci-gap: 21; --ci-lh: 40;
  --c-top: 663; --c-w: 1053; --c-h: 97; --c-c1: 344; --c-c2: 319; --c-c3: 345; --c-gap: 22.5; --b-fs: 26; --b-radius: 22;
  --b-pad-l: 30; --b-pad-r: 31; --b-icon-col: 70; --b-gap: 26; --b-chev-col: 20; --b-ico-h: 60; --b-ico-g: 60; --b-chev-h: 28;
  --k-top: 792.25; --k-w: 900; --k-h: 44; --k-fs: 23.6; --k-ico: 38; --k-gap: 45; --k-igap: 23;
  --t-ls: 0; --t2-ls: .004; --l-ls: .0365; --f1-ls: .0288; --f2-ls: -.0065; --f3-ls: .0495; --ci-ls: .018; --b-ls: .008; --k1-ls: -.0025; --k2-ls: -.0125;
}

/* ===== TABLET: 1 <= r <= 3/2 (scena 1448 x 1086) ===== */
@media (aspect-ratio <= 3/2) {
  :root {
    --W: 1448; --H: 1086;
    --logo-top: 99; --logo-w: 555.62;
    --t-top: 266; --t-w: 1300; --t-fs: 66.5; --t-lh: 80.5; --t2: 1.06;
    --l-top: 448; --l-w: 900; --l-fs: 26.8; --l-lh: 37;
    --f-top: 562; --f-w: 1063; --f-h: 170; --f-gap: 20; --f-radius: 30; --f-dir: column; --f-pad: 0; --f-jc: center; --f-tflex: 0 1 auto;
    --f-ring: 60; --f-ring-b: 0; --f-ico: 60; --f-fs: 24.9; --f-lh: 34.75; --f-text-pad: 0; --f-icon-gap: 10;
    --ci-top: 760; --ci-fs: 23.2; --ci-line: 86; --ci-gap: 22; --ci-lh: 44;
    --c-top: 818; --c-w: 1135; --c-h: 104; --c-c1: 380; --c-c2: 335; --c-c3: 375; --c-gap: 21; --b-fs: 28; --b-radius: 24;
    --b-pad-l: 30; --b-pad-r: 30; --b-icon-col: 74; --b-gap: 28; --b-chev-col: 22; --b-ico-h: 64; --b-ico-g: 64; --b-chev-h: 30;
    --k-top: 965.5; --k-w: 900; --k-h: 48; --k-fs: 26.84; --k-ico: 42; --k-gap: 46; --k-igap: 24;
  --t-ls: .0028; --t2-ls: -.011; --l-ls: .0275; --f1-ls: .027; --f2-ls: .003; --f3-ls: .041; --ci-ls: .0095; --b-ls: .024; --k1-ls: -.0185; --k2-ls: -.0302;
  }
  .fact--area .fact__l--2, .fact--support .fact__l--2 { color: #0fdcf7; font-weight: 600; }
}

/* ===== PION: r < 1 (scena 941 x 1672) ===== */
@media (aspect-ratio < 1) {
  :root {
    --W: 941; --H: 1672;
    --logo-top: 99; --logo-w: 599;
    --t-top: 279.5; --t-w: 940; --t-fs: 57.25; --t-lh: 70; --t2: 1;
    --l-top: 438; --l-w: 860; --l-fs: 29.48; --l-lh: 40;
    --f-top: 1096; --f-w: 828; --f-h: 185; --f-gap: 16.5; --f-radius: 30; --f-dir: column; --f-pad: 0; --f-jc: center; --f-tflex: 0 1 auto;
    --f-ring: 66; --f-ring-b: 0; --f-ico: 66; --f-fs: 26.4; --f-lh: 36.5; --f-text-pad: 0; --f-icon-gap: 14;
    --ci-top: 1302; --ci-fs: 26.62; --ci-line: 108; --ci-gap: 22; --ci-lh: 35;
    --c-top: 1394; --c-w: 861; --c-h: 106; --c-c1: 286; --c-c2: 264; --c-c3: 279; --c-gap: 16; --b-fs: 28; --b-radius: 26;
    --b-pad-l: 18; --b-pad-r: 12; --b-icon-col: 60; --b-gap: 12; --b-chev-col: 16; --b-ico-h: 56; --b-ico-g: 56; --b-chev-h: 24;
    --k-top: 1543.5; --k-w: 820; --k-h: 56; --k-fs: 29.55; --k-ico: 52; --k-gap: 36; --k-igap: 20;
  --t-ls: -.008; --t2-ls: .0073; --l-ls: .0405; --f1-ls: .021; --f2-ls: .034; --f3-ls: .048; --ci-ls: .0277; --b-ls: .002; --k1-ls: .0265; --k2-ls: -.0248;
  }
}

:root {
  /* skala sceny (jednostka tla i ukladu): zawsze mieszczy sie w oknie, brak przewijania z konstrukcji */
  --u: min(calc(var(--vw) / var(--W)), calc(var(--vh) / var(--H)));
  --ui: var(--u);                                  /* jednostka UI: w trybach kompaktowych 1px */
}
@supports (height: 100svh) { :root { --vh: calc(100svh - var(--safe-y)); } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-deep); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--navy-deep); color: var(--text);
  font-family: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
@supports (height: 100svh) { body { min-height: 100svh; } }

/* ======================================================= TLO ======================================================= */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg__base { position: absolute; inset: 0; background: #01091d; }

/* --- tablet: 1 <= r <= 3/2 (zatwierdzony sposob wyswietlania: cover) --- */
@media (aspect-ratio >= 1) and (aspect-ratio <= 3/2) {
  .bg__base { background: #01091d url("../img/tablet-bg-clean.webp?v=519c08ad47") center / cover no-repeat; }
}

/* --- desktop: r > 3/2; tlo w tej samej skali co scena (--u), pasy brzegowe dopelniaja brakujacy obszar --- */
@media (aspect-ratio > 3/2) and (aspect-ratio < 83/50) {          /* 1,500 < r < 1,66  : pasy u gory i u dolu (80 px, skrajne 60 px rozpuszczone) */
  .bg__base { background: #01091d url("../img/desktop-bg-tall_b.webp?v=519c08ad47") center / calc(1586 * var(--u)) calc(1072 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 83/50) and (aspect-ratio < 1586/912) {    /* 1,66 <= r < 1,739 : pasy 30 px u gory i u dolu */
  .bg__base { background: #01091d url("../img/desktop-bg-tall_a.webp?v=519c08ad47") center / calc(1586 * var(--u)) calc(972 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 1586/912) and (aspect-ratio < 181/100) {  /* 1,739 <= r < 1,81 : pasy 40 px po bokach; 1586x912 = dokladnie zatwierdzony obraz */
  .bg__base { background: #01091d url("../img/desktop-bg-wide_a.webp?v=519c08ad47") center / calc(1666 * var(--u)) calc(912 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 181/100) {                                 /* r >= 1,81 (21:9): pasy 340 px po bokach (skrajne 90 px rozpuszczone) */
  .bg__base { background: #01091d url("../img/desktop-bg-wide_b.webp?v=519c08ad47") center / calc(2266 * var(--u)) calc(912 * var(--u)) no-repeat; }
}

/* --- pion: r < 1; tlo w tej samej skali co scena (--u) --- */
@media (aspect-ratio < 13/25) {                                    /* r < 0,52  : pasy 270 px u gory i u dolu */
  .bg__base { background: #01091d url("../img/mobile-bg-tall_b.webp?v=519c08ad47") center / calc(941 * var(--u)) calc(2212 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 13/25) and (aspect-ratio < 941/1672) {    /* 0,52 <= r < 0,5628: pasy 70 px u gory i u dolu */
  .bg__base { background: #01091d url("../img/mobile-bg-tall_a.webp?v=519c08ad47") center / calc(941 * var(--u)) calc(1812 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 941/1672) and (aspect-ratio < 611/1000) { /* 0,5628 <= r < 0,611: pasy 40 px po bokach; 941x1672 = dokladnie zatwierdzony obraz */
  .bg__base { background: #01091d url("../img/mobile-bg-wide_a.webp?v=519c08ad47") center / calc(1021 * var(--u)) calc(1672 * var(--u)) no-repeat; }
}
@media (aspect-ratio >= 611/1000) and (aspect-ratio < 1) {        /* 0,611 <= r < 1 (do 1:1 wylacznie): pasy 200 px po bokach */
  .bg__base { background: #01091d url("../img/mobile-bg-wide_b.webp?v=519c08ad47") center / calc(1341 * var(--u)) calc(1672 * var(--u)) no-repeat; }
}

/* ===================================================== SCENA ====================================================== */
.page { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; overflow: clip; }
@supports (height: 100svh) { .page { min-height: 100svh; } }
.stage { position: relative; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); }
.top, .bottom { display: contents; }
.mid { display: none; }
.logo-wrap, .title, .lead, .facts, .cta-intro, .cta, .contact { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); }

.logo-wrap { top: calc(var(--logo-top) * var(--ui)); width: calc(var(--logo-w) * var(--ui)); }
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 max(calc(1.5 * var(--ui)), 1px) rgba(160, 235, 255, .7)) drop-shadow(0 0 max(calc(5 * var(--ui)), 2px) rgba(30, 150, 255, .22)); }   /* cienki jasny rim jak w mockupie, bez rozlanej poswiaty */

.title { top: calc(var(--t-top) * var(--ui)); width: calc(var(--t-w) * var(--ui)); text-align: center; font-weight: 900;
  font-size: calc(var(--t-fs) * var(--ui)); line-height: calc(var(--t-lh) * var(--ui)); white-space: nowrap; }
.title__a, .title__b { display: block; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.title__a { letter-spacing: calc(var(--t-ls) * 1em); }
.title__b { font-size: calc(1em * var(--t2)); letter-spacing: calc(var(--t2-ls) * 1em); }
.title__a { background-image: linear-gradient(180deg, #fbfbfb 0%, #fafafa 58%, #e3eaf8 82%, #dbe4f4 100%); }
.title__b { background-image: linear-gradient(180deg, #8afcf8 0%, #76fbfa 30%, #55f5fa 42%, #2cf0fb 56%, #08e3f6 67%, #00d9f7 84%, #00d4f5 100%); }

.lead { top: calc(var(--l-top) * var(--ui)); width: calc(var(--l-w) * var(--ui)); text-align: center; color: var(--text-muted);
  font-weight: 500; font-size: max(calc(var(--l-fs) * var(--ui)), 12px); line-height: max(calc(var(--l-lh) * var(--ui)), 16px); letter-spacing: calc(var(--l-ls) * 1em); white-space: nowrap; }

.facts { top: calc(var(--f-top) * var(--ui)); width: calc(var(--f-w) * var(--ui)); height: calc(var(--f-h) * var(--ui)); list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--f-gap) * var(--ui)); }
.fact { display: flex; flex-direction: var(--f-dir); align-items: center; justify-content: var(--f-jc); height: 100%;
  padding: 0 0 0 calc(var(--f-pad) * var(--ui)); gap: calc(var(--f-icon-gap) * var(--ui));
  border: calc(1.8 * var(--ui)) solid #0ee4fa; border-radius: calc(var(--f-radius) * var(--ui));
  background: linear-gradient(180deg, rgba(0, 26, 66, .86) 0%, rgba(0, 10, 32, .88) 50%, rgba(0, 34, 84, .86) 100%);
  box-shadow: 0 0 calc(16 * var(--ui)) rgba(0, 190, 255, .30), inset 0 0 calc(18 * var(--ui)) rgba(6, 212, 245, .12); }
.fact__icon { flex: none; display: grid; place-items: center; color: #17e0fb;
  width: calc(var(--f-ring) * var(--ui)); height: calc(var(--f-ring) * var(--ui)); border-radius: 50%;
  border: calc(var(--f-ring-b) * var(--ui)) solid #0ee4fa; box-shadow: var(--f-ring-sh, none); }
.fact__icon .ico { width: calc(var(--f-ico) * var(--ui)); height: calc(var(--f-ico) * var(--ui)); filter: drop-shadow(0 0 calc(4 * var(--ui)) rgba(0, 220, 255, .55)); }
.fact__text { flex: var(--f-tflex); text-align: center; font-weight: 700; font-size: max(calc(var(--f-fs) * var(--ui)), 12px); line-height: max(calc(var(--f-lh) * var(--ui)), 16px);
  letter-spacing: calc(var(--f1-ls) * 1em); padding-right: calc(var(--f-text-pad) * var(--ui)); text-wrap: balance; }
.fact__l { display: block; }
.fact__sep { white-space: pre; font-weight: 900; font-size: 1.7em; line-height: 0; vertical-align: -.08em; }
.fact--hours .fact__l { display: inline; }
.fact--support .fact__l--2 { font-weight: 400; color: #dbe6fa; }
.fact--hours .fact__text { letter-spacing: calc(var(--f2-ls) * 1em); }
.fact--support .fact__text { letter-spacing: calc(var(--f3-ls) * 1em); }
.btn--google .btn__label { margin-left: calc(-5 * var(--ui)); }
.contact__item--phone span { letter-spacing: calc(var(--k1-ls) * 1em); }
.contact__item--mail span { letter-spacing: calc(var(--k2-ls) * 1em); }

.cta-intro { top: calc(var(--ci-top) * var(--ui)); width: calc(var(--l-w) * var(--ui)); display: flex; justify-content: center; align-items: center; gap: calc(var(--ci-gap) * var(--ui)); }
.cta-intro::before, .cta-intro::after { content: ""; flex: none; width: calc(var(--ci-line) * var(--ui)); height: calc(2 * var(--ui)); background: linear-gradient(90deg, transparent, #06d4f5 40%, #06d4f5); }
.cta-intro::after { background: linear-gradient(270deg, transparent, #06d4f5 40%, #06d4f5); }
.cta-intro__text { font-weight: 500; font-size: max(calc(var(--ci-fs) * var(--ui)), 12px); line-height: max(calc(var(--ci-lh) * var(--ui)), 16px); letter-spacing: calc(var(--ci-ls) * 1em); color: #dbe6fa; white-space: nowrap; text-align: center; }
.br-m { display: none; }

.cta { top: calc(var(--c-top) * var(--ui)); width: calc(var(--c-w) * var(--ui)); height: calc(var(--c-h) * var(--ui)); display: grid;
  grid-template-columns: calc(var(--c-c1) * var(--ui)) calc(var(--c-c2) * var(--ui)) calc(var(--c-c3) * var(--ui)); column-gap: calc(var(--c-gap) * var(--ui)); }
.btn { position: relative; display: grid; align-items: center; text-decoration: none; color: #fff;
  grid-template-columns: calc(var(--b-icon-col) * var(--ui)) 1fr calc(var(--b-chev-col) * var(--ui)); column-gap: calc(var(--b-gap) * var(--ui));
  padding: 0 calc(var(--b-pad-r) * var(--ui)) 0 calc(var(--b-pad-l) * var(--ui)); border-radius: calc(var(--b-radius) * var(--ui));
  font-weight: 800; font-size: max(calc(var(--b-fs) * var(--ui)), 12px); letter-spacing: calc(var(--b-ls) * 1em); border: calc(2 * var(--ui)) solid rgba(120, 220, 255, .9); }
.btn__icon { display: grid; place-items: center; }
.btn__icon .ico-brand { height: calc(var(--b-ico-h) * var(--ui)); width: auto; max-width: calc(var(--b-icon-col) * var(--ui)); }
.btn--google .btn__icon .ico-brand { height: calc(var(--b-ico-g) * var(--ui)); }
.btn--facebook .btn__icon .ico-brand { height: calc(var(--b-ico-h) * .8 * var(--ui)); }
.btn__chev .ico-chev { display: block; width: calc(var(--b-chev-h) * 1.1 * .75 * var(--ui)); height: calc(var(--b-chev-h) * 1.1 * var(--ui)); stroke-width: 2.6; }
.btn--facebook { background: linear-gradient(90deg, rgba(40, 190, 255, .20) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgb(8, 150, 252) 4%, rgb(0, 120, 252) 12%, rgb(0, 100, 253) 25%, rgb(0, 82, 252) 40%, rgb(0, 62, 244) 62%, rgb(0, 54, 237) 80%, rgb(2, 62, 245) 92%, rgb(4, 99, 253) 98%); box-shadow: 0 0 calc(22 * var(--ui)) rgba(40, 150, 255, .85), 0 0 calc(4 * var(--ui)) rgba(140, 220, 255, .8); }
.btn--google { background: linear-gradient(180deg, rgb(238, 243, 249) 3%, rgb(244, 246, 250) 12%, rgb(244, 246, 248) 37%, rgb(240, 244, 248) 62%, rgb(231, 239, 249) 79%, rgb(220, 235, 250) 92%, rgb(200, 228, 249) 98%); color: #0a1226; box-shadow: 0 0 calc(22 * var(--ui)) rgba(150, 215, 255, .9), 0 0 calc(4 * var(--ui)) rgba(190, 235, 255, .9); border-color: rgba(190, 235, 255, .95); }
.btn--whatsapp .btn__label { text-shadow: 0 1px 2px rgba(0, 55, 28, .65); }
.btn--whatsapp { background: linear-gradient(rgba(0, 0, 0, .21), rgba(0, 0, 0, .21)), linear-gradient(180deg, rgb(23, 200, 118) 4%, rgb(6, 194, 106) 12%, rgb(3, 183, 100) 20%, rgb(2, 172, 94) 29%, rgb(0, 160, 88) 37%, rgb(0, 140, 78) 54%, rgb(0, 121, 70) 71%, rgb(0, 118, 69) 79%, rgb(0, 126, 73) 87%, rgb(2, 153, 98) 96%); box-shadow: 0 0 calc(22 * var(--ui)) rgba(10, 230, 130, .7), 0 0 calc(4 * var(--ui)) rgba(150, 255, 200, .8); }
.btn:focus-visible, .contact__item:focus-visible { outline: max(calc(3 * var(--ui)), 2px) solid #fff; outline-offset: max(calc(3 * var(--ui)), 2px); }

.contact { top: calc(var(--k-top) * var(--ui)); width: calc(var(--k-w) * var(--ui)); height: calc(var(--k-h) * var(--ui)); font-style: normal; display: flex; justify-content: center; align-items: center; gap: calc(var(--k-gap) * var(--ui)); }
.contact__item { display: inline-flex; align-items: center; min-height: 44px; gap: calc(var(--k-igap) * var(--ui)); color: #fff; text-decoration: none; font-weight: 700; font-size: max(calc(var(--k-fs) * var(--ui)), 12px); }
.contact__item .ico { width: calc(var(--k-ico) * .82 * var(--ui)); height: calc(var(--k-ico) * .82 * var(--ui)); color: #f4fbff; filter: drop-shadow(0 0 calc(6 * var(--ui)) rgba(70, 200, 255, .9)); }
.contact__item--mail .ico { width: calc(var(--k-ico) * 1.12 * var(--ui)); height: calc(var(--k-ico) * 1.12 * var(--ui)); }
.contact__sep { width: calc(2 * var(--ui)); height: calc(var(--k-ico) * var(--ui)); background: linear-gradient(180deg, transparent, #06d4f5, transparent); }

/* uklad pionowy (scena): lamanie wierszy zgodne z referencja */
@media (aspect-ratio < 1) {
  .br-m { display: inline; }
  .fact__sep { display: none; }
  .fact--hours .fact__l { display: block; }
  .cta-intro__text { white-space: normal; }
}

/* ================================== KOMPAKT: PC (pion), UI w przeplywie, ilustracja do wolnego miejsca ================================== */
@media (aspect-ratio < 1) and ((max-width: 417px) or (max-height: 741px)) {
  :root { --ui: 1px; --pf: clamp(12px, min(3.2vw, 1.55svh), 14px); }
  .bg__base { background: #010a20; }
  .page { display: flex; flex-direction: column; align-items: stretch; place-items: initial; }
  .stage { width: 100%; height: auto; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .top, .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 2; }
  .logo-wrap, .title, .lead, .facts, .cta-intro, .cta, .contact { position: static; transform: none; margin: 0; }

  /* ilustracja: element .mid zajmuje wolne miejsce miedzy grupami; tlo (wariant xl) jest skalowane do tego miejsca (jednostki cq) */
  .mid { display: block; flex: 1 1 0; min-height: 110px; width: 100%; position: relative; z-index: 1; container-type: size; }
  .mid::before {
    content: ""; position: absolute; left: 50%; top: 100%; pointer-events: none;
    --s: min(calc(100cqw / 941), calc(100cqh / 574));            /* skala ilustracji: nie wiecej niz szerokosc, nie wiecej niz wolne miejsce */
    width: calc(1561 * var(--s)); height: calc(2712 * var(--s));      /* --s = dlugosc (px na 1 px obrazu), wiec mnozymy przez liczbe */
    background: url("../img/mobile-bg-xl.webp?v=519c08ad47") 0 0 / 100% 100% no-repeat;
    transform: translate(-50%, calc(-1616 * var(--s)));          /* dol ilustracji (y = 1096 + 520 px pasa) przy dolnej krawedzi .mid: plyta pod kafelkami zostaje pod nimi */
  }

  .lead, .cta-intro__text, .fact__text, .contact__item { text-shadow: 0 0 6px rgba(1, 9, 29, .85), 0 1px 2px rgba(1, 9, 29, .85); }
  .contact__item--phone span, .contact__item--mail span { letter-spacing: 0; }
  .logo-wrap { width: min(264px, 72vw); margin-top: 4px; }
  .title { width: auto; margin-top: 6px; font-size: min(25px, calc((100vw - 24px) / 14.9)); line-height: 1.2; }
  .lead { width: auto; max-width: 100%; margin-top: 8px; white-space: normal; font-size: var(--pf); line-height: 1.4; letter-spacing: 0.012em; text-wrap: balance; }

  .facts { width: 100%; max-width: 560px; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .fact { flex-direction: column; justify-content: flex-start; height: auto; gap: 3px; padding: 8px 2px 9px; border-radius: 14px; border-width: 1.5px; }
  .fact__icon { width: 28px; height: 28px; border: 0; box-shadow: none; }
  .fact__icon .ico { width: 26px; height: 26px; }
  .fact__text, .fact--hours .fact__text, .fact--support .fact__text { padding: 0; font-size: var(--pf); line-height: 1.3; letter-spacing: 0; }
  .fact__sep { display: none; }
  .fact--hours .fact__l { display: block; }
  .fact--area .fact__l--2, .fact--support .fact__l--2 { color: #0fdcf7; font-weight: 600; }

  .cta-intro { width: 100%; margin-top: 10px; gap: 8px; }
  .cta-intro::before, .cta-intro::after { width: 20px; height: 1.5px; }
  .cta-intro__text { font-size: var(--pf); line-height: 1.35; white-space: normal; letter-spacing: 0.01em; }
  .br-m { display: inline; }

  .cta { width: 100%; max-width: 560px; height: auto; margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .btn { height: 46px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 5px; padding: 0 7px 0 8px; border-radius: 14px; border-width: 1.5px; font-size: var(--pf); }
  .btn__icon .ico-brand { height: 20px; max-width: 22px; }
  .btn--facebook .btn__icon .ico-brand { height: 18px; }
  .btn--google .btn__icon .ico-brand { height: 20px; }
  .btn--google .btn__label { margin-left: 0; }
  .btn__chev .ico-chev { width: 9px; height: 12px; }
  .btn__label { text-align: center; white-space: nowrap; }

  .contact { width: 100%; height: auto; margin-top: 4px; flex-wrap: wrap; gap: 0 10px; }
  .contact__item { gap: 5px; font-size: clamp(12px, calc((100vw - 72px) / 20.6), 13.5px); }
  .contact__item .ico, .contact__item--mail .ico { width: 15px; height: 15px; }
  .contact__item--mail .ico { width: 17px; height: 17px; }
  .contact__sep { height: 18px; width: 1.5px; }
}
@media (aspect-ratio < 1) and ((max-width: 417px) or (max-height: 741px)) and (max-width: 400px) {
  .btn { padding: 0 4px 0 6px; column-gap: 4px; }
  .btn__chev { display: none; }
  .btn__icon .ico-brand { height: 18px; max-width: 20px; }
  .btn--facebook .btn__icon .ico-brand { height: 16px; }
  .btn--google .btn__icon .ico-brand { height: 18px; }
}
@media (aspect-ratio < 1) and ((max-width: 417px) or (max-height: 741px)) and (max-width: 330px) {
  .stage { padding-left: 8px; padding-right: 8px; }
  .btn { padding: 0 3px; column-gap: 3px; }
  .btn__icon .ico-brand { height: 16px; max-width: 18px; }
  .btn--facebook .btn__icon .ico-brand { height: 14px; }
  .btn--google .btn__icon .ico-brand { height: 16px; }
  .facts, .cta { column-gap: 4px; }
}
@media (aspect-ratio < 1) and ((max-width: 417px) or (max-height: 741px)) and (max-width: 300px) {
  .btn { grid-template-columns: minmax(0, 1fr); }     /* ekstremalnie waskie ekrany (np. zlozony Fold 280 px): etykieta zamiast ikony marki */
  .btn__icon { display: none; }
}

/* =========================== KOMPAKT: LC (poziom), jedna kolumna kompaktowych wierszy, bez ukrywania tresci =========================== */
@media (aspect-ratio >= 1) and ((max-height: 575px) or (max-width: 767px)) {
  :root { --ui: 1px; }
  .page { place-items: center; }
  .stage { width: min(calc(100vw - 24px), 740px); height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(3px, 1.2svh, 9px); padding: max(4px, env(safe-area-inset-top)) 0 max(4px, env(safe-area-inset-bottom)); }
  .top, .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; gap: inherit; }
  .logo-wrap, .title, .lead, .facts, .cta-intro, .cta, .contact { position: static; transform: none; margin: 0; }
  .mid { display: none; }

  .lead, .cta-intro__text, .fact__text, .contact__item { text-shadow: 0 0 6px rgba(1, 9, 29, .9), 0 1px 2px rgba(1, 9, 29, .9); }
  .contact__item--phone span, .contact__item--mail span { letter-spacing: 0; }
  .logo-wrap { width: auto; }
  .logo { width: auto; height: clamp(30px, 11svh, 64px); }
  .title { width: auto; font-size: clamp(16px, 5.4svh, 28px); line-height: 1.2; }
  .lead { width: auto; max-width: 100%; white-space: normal; font-size: clamp(12px, 2.5svh, 15px); line-height: 1.35; letter-spacing: 0.012em; text-wrap: balance; }
  .lead br { display: none; }

  .facts { width: 100%; height: auto; column-gap: clamp(5px, 1.2vw, 10px); }
  .fact { flex-direction: row; justify-content: flex-start; height: auto; min-height: 44px; gap: 8px; padding: 5px 8px; border-radius: clamp(10px, 2.6svh, 16px); border-width: 1.5px; }
  .fact__icon { width: 26px; height: 26px; border: 0; box-shadow: none; }
  .fact__icon .ico { width: 24px; height: 24px; }
  .fact__text, .fact--hours .fact__text, .fact--support .fact__text { flex: 1 1 auto; text-align: left; padding: 0; font-size: clamp(12px, 2.4svh, 15px); line-height: 1.25; letter-spacing: 0.015em; }
  .fact__sep { display: none; }
  .fact--hours .fact__l { display: block; }
  .fact--area .fact__l--2, .fact--support .fact__l--2 { color: #0fdcf7; font-weight: 600; }

  .cta-intro { width: 100%; gap: 10px; }
  .cta-intro::before, .cta-intro::after { width: clamp(20px, 6vw, 56px); height: 1.5px; }
  .cta-intro__text { white-space: normal; font-size: clamp(12px, 2.4svh, 15px); line-height: 1.3; letter-spacing: 0.01em; }
  .br-m { display: none; }

  .cta { width: 100%; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(5px, 1.2vw, 10px); }
  .btn { height: clamp(44px, 9svh, 54px); grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; padding: 0 8px; border-radius: clamp(11px, 2.6svh, 16px); border-width: 1.5px; font-size: clamp(12px, 2.5svh, 15px); }
  .btn__icon .ico-brand { height: 22px; max-width: 26px; }
  .btn--facebook .btn__icon .ico-brand { height: 20px; }
  .btn--google .btn__icon .ico-brand { height: 22px; }
  .btn--google .btn__label { margin-left: 0; }
  .btn__chev .ico-chev { width: 10px; height: 14px; }
  .btn__label { text-align: center; white-space: nowrap; }

  .contact { width: 100%; height: auto; gap: 0 14px; }
  .contact__item { gap: 6px; font-size: clamp(12px, 2.5svh, 15px); }
  .contact__item .ico, .contact__item--mail .ico { width: 18px; height: 18px; }
  .contact__item--mail .ico { width: 20px; height: 20px; }
  .contact__sep { height: 20px; width: 1.5px; }
}

/* ============================================================ 404 ============================================================ */
.err-page { background: radial-gradient(120% 90% at 50% 38%, #04234b 0%, #02102b 55%, #020919 100%) fixed; }
.err { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 28px; padding: 24px; text-align: center; }
.err__logo { width: min(420px, 70vw); height: auto; filter: drop-shadow(0 0 12px rgba(30, 160, 255, .5)); }
.err__title { margin: 0; font-weight: 900; font-size: clamp(26px, 5vw, 44px); line-height: 1.2; }
.err__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 18px; text-decoration: none;
  background: linear-gradient(180deg, rgb(8, 150, 252), rgb(0, 82, 252) 40%, rgb(0, 54, 237)); border: 2px solid rgba(120, 220, 255, .9); box-shadow: 0 0 18px rgba(40, 150, 255, .7); }
.err__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }