/* TRENING — tokeny, siatka, komponenty, header, loader, overlaye
   Makieta demonstracyjna ThisConnected. Zero CDN. */

/* ---------- FONT — oba subsety obowiazkowe.
   Podzial Google rozrywa polskie znaki: "o z kreska" siedzi w latin
   (U+00F3), cale "acelnszz" w latin-ext. Jeden plik = fallback w srodku wyrazu. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-var-latin.woff2) 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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-var-latin-ext.woff2) 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;
}

/* ---------- TOKENY ---------- */

:root {
  --ink: #0e0f12;
  --ink-raise: #191b20;
  --paper: #edefe9;
  --paper-pure: #ffffff;
  --volt: #b6ff2e;
  /* Oliwka, nie neon. Zmierzone: 4,58:1 na --paper, 5,31:1 na bialym.
     Neon (#b6ff2e) daje na jasnym 1,05:1 — nie nadaje sie tam na nic. */
  --volt-dim: #577510;
  --steel: #63697a;
  --steel-up: #9aa2ae;
  --rule: #d3d7cd;
  --rule-up: rgba(237, 239, 233, .14);

  --r-edge: 2px;
  --r-pill: 62.5rem;

  /* PODLOGI SA W PX, NIE W REM.
     Root font-size kurczy sie z viewportem, wiec "max(.95rem, .95vw)" nie jest
     zadna podloga — przy 375 px dawalo 9,5 px body i 7,2 px mikro-etykiet.
     Absolutny px to jedyna jednostka, ktora tu trzyma. */
  --fs-display: clamp(44px, 10.5vw, 8.5rem);
  --fs-h2: clamp(28px, 5.4vw, 4.25rem);
  --fs-h3: max(20px, 1.55rem);
  --fs-lead: max(16px, .98vw);
  --fs-body: max(15px, 1.05vw);
  --fs-micro: max(12px, .72vw);

  --pad-x: clamp(20px, 4vw, 5rem);
  --pad-y: clamp(56px, 7vw, 8.5rem);

  --d-fast: 180ms;
  --d-base: 420ms;
  --d-slow: 760ms;
  --d-reveal: 620ms;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-snap: cubic-bezier(.34, 1.42, .64, 1);

  --stag-word: 80ms;
  --stag-line: 100ms;
  --stag-card: 70ms;
}

/* ---------- SIATKA ADAPTACYJNA — baza 1600 ----------
   Uklad w rem/vw, ale kazdy rozmiar tekstu ma podloge w px (--fs-*),
   inaczej przy 1000-1400 px body ladowalo na ~11 px. */

html { font-size: 16px; }
@media (max-width: 1600px) { html { font-size: 1vw; } }
@media (max-width: 1200px) { html { font-size: 1.3333vw; } }
@media (max-width: 900px)  { html { font-size: 1.7778vw; } }
@media (max-width: 600px)  { html { font-size: 2.6667vw; } }

/* NISKI VIEWPORT — telefon w poziomie, okno przyciete do polowy ekranu.
   Rozmiar display liczony tylko z szerokosci rozpychal dwuwierszowy naglowek
   tak, ze razem z leadem i przyciskami nie miescil sie w hero i wjezdzal pod
   header — kreska nad S uciekala za gorna krawedz. Zapytanie o WYSOKOSC, a nie
   svh wpisane w clamp, bo to drugie zbijaloby tez tytul na normalnym desktopie. */
@media (max-height: 640px) {
  :root {
    --fs-display: clamp(36px, 11svh, 5rem);
    --fs-lead: max(15px, 1vw);
  }
  .hero { min-height: 100svh; }
  .hero__foot { gap: .9rem; margin-top: 1rem; }
}

/* ---------- RESET ---------- */

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

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

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* ---------- FOKUS — dwuwarstwowy, bo neon na jasnym nie daje 3:1 ---------- */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--volt);
  border-radius: var(--r-edge);
}
.on-dark :focus-visible {
  outline-color: var(--volt);
  box-shadow: 0 0 0 4px var(--ink);
}

/* ---------- POMOCNIKI ---------- */

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

.skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 300;
  transform: translateY(-200%);
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; font-size: var(--fs-micro);
  font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
}
.skip:focus { transform: none; }

.num { font-variant-numeric: tabular-nums; font-stretch: 112%; font-weight: 700; }

/* Placeholder — miejsce na dane, ktorych makieta swiadomie nie zawiera.
   Ma wygladac na nieuzupelnione, a nie na prawdziwa tresc. */
.ph {
  display: inline-block;
  color: var(--steel);
  font-size: var(--fs-micro);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.on-dark .ph { color: var(--steel-up); opacity: .8; }

.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.ic--sm { width: 1rem; height: 1rem; }
.ic--lg { width: 1.6rem; height: 1.6rem; }

/* ---------- TYPOGRAFIA ---------- */

.h2 {
  font-size: var(--fs-h2);
  font-stretch: 118%;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: .9rem;
}
.h2 > span { display: block; }

.eb {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-micro); font-stretch: 88%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--steel);
}
.eb__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--volt-dim); }
.eb--light { color: var(--steel-up); }
.eb--light .eb__dot { background: var(--volt); }

/* ---------- PRZYCISKI ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.3rem;
  /* Podloga w px, nie w rem — przy 375 px rootFs to 10 px, wiec sam padding
     dawal przycisk wysoki na 32 px. Pod myszą trzymamy kompaktowo, przy
     dotyku pelny cel 44 px, bo tam palec nie ma gdzie trafic. */
  min-height: 38px;
  border-radius: var(--r-edge);
  font-size: var(--fs-micro); font-stretch: 92%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  transition: transform var(--d-fast) var(--e-snap),
              background-color var(--d-fast) linear,
              color var(--d-fast) linear;
}
.btn--volt { background: var(--volt); color: var(--ink); }
.btn--ink  { background: var(--ink);  color: var(--paper); }
.btn--ghost {
  color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

.lnk {
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-fast) linear;
}

.rnd {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-pill);
  background: rgba(237, 239, 233, .12);
  color: var(--paper);
  transition: background-color var(--d-fast) linear;
}
.rnd--light { background: var(--paper); color: var(--ink); }

@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .rnd, .burger { width: 2.9rem; height: 2.9rem; min-width: 44px; min-height: 44px; }
}

@media (hover: hover) and (min-width: 901px) {
  .btn:hover { transform: translateY(-2px); }
  .btn--volt:hover { background: #c8ff5c; }
  .btn--ink:hover  { background: var(--ink-raise); }
  .btn--ghost:hover { background: currentColor; }
  .btn--ghost:hover > * { color: var(--ink); }
  .lnk:hover { border-color: currentColor; }
  .rnd:hover { background: rgba(237, 239, 233, .24); }
  .rnd--light:hover { background: var(--volt); }
  .hd__nav a:hover { color: var(--volt); }
}

/* ---------- SEKCJE — edge-to-edge, bez wsunietych kart ---------- */

.sec { padding: var(--pad-y) var(--pad-x); }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink + .sec--ink { border-top: 1px solid var(--rule-up); }
.sec--paper + .sec--paper { border-top: 1px solid var(--rule); }

/* ---------- HEADER ---------- */

.hd {
  /* fixed, nie sticky: sticky zajmowal miejsce w przeplywie, wiec hero bylo
     podciagane ujemnym marginesem — a ten nie trafial w wysokosc headera co do
     piksela i nad hero przeswitywal jasny pasek tla strony. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.5rem;
  /* prawa krawedz ciasniej niz lewa — grupa z prawej ma sie trzymac brzegu */
  padding: .9rem clamp(14px, 1.9vw, 2rem) .9rem var(--pad-x);
  color: var(--paper);
  transition: background-color var(--d-base) linear,
              border-color var(--d-base) linear;
  border-bottom: 1px solid transparent;
}
.hd.is-stuck {
  background: rgba(14, 15, 18, .92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule-up);
}
.hd__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-micro); font-stretch: 100%; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em;
}
.hd__nav { display: none; gap: 1.6rem; margin-inline: auto; }
.hd__nav a {
  font-size: var(--fs-micro); font-stretch: 88%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--steel-up);
  transition: color var(--d-fast) linear;
}
.hd__side { display: flex; align-items: center; gap: .8rem; margin-left: auto; }

.hours {
  display: none; align-items: center; gap: .45rem;
  font-size: var(--fs-micro); font-stretch: 88%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--steel-up);
}
.hours__dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--steel);
}
.hours.is-open .hours__dot { background: var(--volt); }
.hours.is-open { color: var(--paper); }

.lang {
  font-size: var(--fs-micro); font-stretch: 88%; font-weight: 600;
  letter-spacing: .12em; color: var(--steel-up);
  padding: .35rem .5rem;
}

.burger {
  display: grid; place-items: center; gap: 5px;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-pill);
  background: rgba(237, 239, 233, .12);
}
.burger > span {
  display: block; width: 1rem; height: 1px; background: var(--paper);
  transition: transform var(--d-fast) var(--e-out);
}

@media (min-width: 901px) {
  .hd__nav { display: flex; }
  .hours { display: inline-flex; }
  .burger { display: none; }
}
@media (max-width: 600px) {
  .hd__cta { display: none; }
}

/* ---------- LOADER ----------
   Ukryty domyslnie, pokazywany dopiero gdy modul doda .js na <html>.
   Bez tego awaria skryptu zostawia czarna plansze na zawsze. */

.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.8rem;
  background: var(--ink); color: var(--paper);
  transform: translateY(0);
  transition: transform var(--d-slow) var(--e-inout);
}
.js .loader.is-out { transform: translateY(-102%); }
/* Loader nie jest usuwany z DOM — chowa sie, zeby dalo sie go odegrac
   jeszcze raz przy zmianie jezyka. */
.js .loader.is-gone { display: none; }
.loader__mark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: max(20px, 1.4rem); font-stretch: 100%; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.loader.is-lit .loader__mark { opacity: 1; transform: none; }
.loader__track {
  width: 12rem; height: 2px; overflow: hidden;
  background: var(--rule-up);
}
.loader__fill {
  display: block; width: 100%; height: 100%;
  background: var(--volt);
  transform: scaleX(0); transform-origin: left;
}

/* ---------- REVEALE ----------
   Stan poczatkowy tylko przy .js — bez skryptu tresc jest po prostu widoczna. */

.js [data-reveal="fade"],
.js [data-reveal="rise"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-reveal) var(--e-out),
              transform var(--d-reveal) var(--e-out);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal="fade"] { transform: translateY(12px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* clip-mask: JS pakuje slowa/wiersze w .clip > .clip__i
   Padding MUSI byc z obu stron. Polskie znaki wychodza w dwie strony:
   kreska nad S/Z/O i kropka nad Z ponad wysokosc wersalika, ogonek A/E pod
   linie bazowa. Przy line-height .86 jedno i drugie wpada pod krawedz maski.
   Marginesy zdejmuja padding z ukladu, wiec odstepy wierszy zostaja ciasne. */
.clip {
  display: inline-block; overflow: hidden;
  padding-top: .2em; margin-top: -.2em;
  padding-bottom: .16em; margin-bottom: -.16em;
  vertical-align: bottom;
}
.clip__i {
  display: inline-block;
  /* 150%, nie 105%: box jest teraz wyzszy od wnetrza o 0,36em, wiec 105%
     wysokosci wnetrza nie zakrywalo go w calosci i tekst przeciekal u dolu. */
  transform: translateY(150%);
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
  transition-delay: var(--cd, 0ms);
  opacity: 0;
}
.is-in .clip__i { transform: none; opacity: 1; }

/* ---------- OVERLAYE ---------- */

.ov { position: fixed; inset: 0; z-index: 70; }
.ov[hidden] { display: none; }
.ov__bg {
  position: absolute; inset: 0;
  background: rgba(14, 15, 18, .68);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--d-base) linear;
}
.ov.is-open .ov__bg { opacity: 1; }

.ov--menu { z-index: 70; }
.ov--menu .ov__bg { background: var(--ink); backdrop-filter: none; }
.ov__panel {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: .9rem var(--pad-x) var(--pad-y);
  color: var(--paper);
  opacity: 0; transform: translateY(-20px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.ov.is-open .ov__panel { opacity: 1; transform: none; }
.ov__top { display: flex; align-items: center; justify-content: space-between; }
.ov__nav {
  display: flex; flex-direction: column; gap: .3rem;
  margin: auto 0;
}
.ov__nav a {
  display: block;
  font-size: clamp(34px, 11vw, 5rem); font-stretch: 118%; font-weight: 700;
  line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase;
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out),
              color var(--d-fast) linear;
  transition-delay: var(--rd, 0ms);
}
.ov.is-open .ov__nav a { opacity: 1; transform: none; }
.ov__bot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  padding-top: 1.8rem; border-top: 1px solid var(--rule-up);
}
.ov__hours { margin-left: auto; color: var(--steel-up); font-size: var(--fs-micro); }

@media (hover: hover) and (min-width: 901px) {
  .ov__nav a:hover { color: var(--volt); }
}

/* ---------- MODAL ---------- */

.ov--modal { z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: .75rem; }
.md {
  position: relative;
  width: 100%; max-width: 34rem;
  max-height: 92svh; overflow-y: auto;
  background: var(--paper-pure); color: var(--ink);
  border-radius: var(--r-edge);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 2rem 4rem rgba(14, 15, 18, .35);
  opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.ov.is-open .md { opacity: 1; transform: none; }
.md__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.md__t {
  font-size: clamp(24px, 3.4vw, 2.4rem);
  font-stretch: 115%; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; text-transform: uppercase;
  margin-top: .6rem;
}
.md__form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.6rem; }

.fld { display: flex; flex-direction: column; gap: .35rem; }
.fld label {
  font-size: var(--fs-micro); font-stretch: 88%; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--steel);
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-edge);
  font-size: var(--fs-body);
}
.fld textarea { resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--volt-dim); }
.fld--chk { flex-direction: row; align-items: flex-start; gap: .6rem; }
.fld--chk input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem; }
.fld--chk label { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.fld.is-bad input, .fld.is-bad select, .fld.is-bad textarea { border-color: #b4341a; }

.md__err { color: #b4341a; font-size: var(--fs-micro); }
.md__submit { margin-top: .4rem; }
.md__mailto { font-size: var(--fs-micro); color: var(--steel); }

.md__ok { text-align: center; padding: 1.5rem 0 .5rem; }
.md__ok-ic {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; margin: 0 auto 1rem;
  border-radius: var(--r-pill); background: var(--volt); color: var(--ink);
}
.md__ok-t { font-size: var(--fs-h3); font-stretch: 112%; font-weight: 700; text-transform: uppercase; }
.md__ok-d { color: var(--steel); margin: .5rem 0 1.4rem; }

@media (min-width: 601px) {
  .ov--modal { align-items: center; padding: 1.5rem; }
}

/* ---------- REDUKCJA RUCHU ----------
   Gasimy ruch, ale nie ukrywamy tresci: kazdy stan koncowy jest wymuszony. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .clip__i { transform: none !important; opacity: 1 !important; }
  .ov__nav a { opacity: 1 !important; transform: none !important; }
}