/* Landing Cuzca: tokeny i wspólna baza (DESIGN.md, sekcje 2-7).
   Używana przez wszystkie strony. Komponenty stron (wspinacz.css, scianki.css, home.css)
   korzystają wyłącznie ze zmiennych poniżej; surowy hex poza :root to błąd. */

/* ---------- Fonty (self-hosted, podzbiór latin + latin-ext, WOFF) ---------- */

@font-face { font-family: "Bebas Neue"; src: url(/fonts/BebasNeue_400Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_400Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_600SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter_800ExtraBold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono_500Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokeny ---------- */

:root {
  color-scheme: dark;

  /* Kolory: 1:1 z mobile/src/theme/tokens.ts (colorsDark) i cuzca.ts */
  --c-bg: #000000;
  --c-surface: #0E1620;
  --c-raised: #16212E;
  --c-border: #1E2A38;            /* tylko podziały dekoracyjne (1.44:1) */
  --c-field-border: #646D7A;      /* obrys pól i przycisku drugorzędnego (>= 3:1) */
  --c-text: #EDF2F8;
  --c-text-2: #8A97A6;
  --c-accent: #4A90D9;            /* linki, ikony, obrysy */
  --c-accent-strong: #2A78C8;     /* wyłącznie tło pod --c-on-accent (4.55:1) */
  --c-accent-strong-hover: #2670BC; /* hover: ciemniej, 5.09:1 */
  --c-accent-deep: #1B3A5C;
  --c-accent-soft: #142433;
  --c-on-accent: #FFFFFF;
  --c-warm: #D4B896;
  --c-chalk: #F2EFE8;             /* obrys fokusu */
  --c-success: #5fae72;
  --c-warning: #e0b23e;
  --c-danger: #e2483f;            /* tekst błędu tylko na bg lub surface */
  --c-gold: #F2B01E;
  --c-nav-bg: rgba(0, 0, 0, 0.92);
  --c-device: #0B0E14;            /* rock.rock: tło pod zrzutem w ramce */

  --hold-green: #54BE72;
  --hold-yellow: #F5C93F;
  --hold-orange: #F28C42;
  --hold-red: #E2565A;
  --hold-purple: #9E74D6;
  --hold-cuzca: #4E95DC;

  /* Kroje */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Typografia: mobile first, płynnie do 1440 px */
  --fs-hero: clamp(3rem, 1.9rem + 4.7vw, 5.5rem);
  --fs-h2: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-price: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
  --fs-nav: 0.9375rem;

  --lh-display: 1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --tracking-display: 0.01em;
  --tracking-label: 0.14em;

  /* Odstępy */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 26px;
  --s-8: 32px; --s-10: 48px; --s-12: 64px; --s-16: 96px; --s-20: 128px;
  /* Rytm: jedna myśl na ekran (plan odgracania). 96 px na telefonie, od 768 px 128-220 px. */
  --section-y: 96px;
  --gutter: 16px;
  --grid-gap: 16px;

  /* Siatka */
  --container: 1200px;
  --container-wide: 1320px;
  --measure: 62ch;
  --nav-h: 64px;

  /* Kształt: ostry róg zawsze lewy dolny */
  --r-card: 14px 14px 14px 2px;
  --r-button: 10px 10px 10px 2px;
  --r-field: 8px 8px 8px 1px;
  --r-pill: 999px;
  --meaning-bar: 3px;

  /* Głębia: jedyny cień na stronie, granat */
  --shadow-phone: 0 24px 60px -12px rgba(27, 58, 92, 0.45);

  /* Ruch */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 80ms;
  --t-fast: 160ms;
  --t-toggle: 200ms;
  --t-reveal: 280ms;
  --press-y: 2px;
  --reveal-y: 24px;
  --stagger: 40ms;

  /* Warstwy */
  --z-nav: 10;
  --z-skip: 20;
}

@media (min-width: 48rem) {
  :root { --gutter: 32px; --grid-gap: 24px; --section-y: clamp(128px, 20vh, 220px); }
}
@media (min-width: 64rem) {
  :root { --grid-gap: 32px; }
}

/* ---------- Reset i dokument ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Przezroczyste marginesy póz Cuzco mogą wystawać za krawędź; nie tworzą przewijania w bok. */
main { overflow-x: clip; }

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: var(--c-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
strong { font-weight: 800; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--c-chalk);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-accent-deep); color: var(--c-text); }

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

/* ---------- Link „Przejdź do treści” ---------- */

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent-strong);
  color: var(--c-on-accent);
  font-weight: 600;
  border-radius: var(--r-button);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Siatka i sekcje ---------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.grid > * { grid-column: 1 / -1; min-width: 0; }

.section { padding-block: var(--section-y); }
.section--surface {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
}
.section + .section--surface, .section--surface + .section { margin-top: 0; }

/* ---------- Typografia ---------- */

.display, h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose p { text-wrap: pretty; }
.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.label {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.mono { font-family: var(--font-mono); font-weight: 500; }

/* Hasło marki (hero strony głównej i stopka): mrugnięcie Cuzco w drugiej części zdania. */
.tagline {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text);
  max-width: 44ch;
  text-wrap: pretty;
}
.tagline__wink { color: var(--c-warm); font-style: italic; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

/* ---------- Przyciski ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-button);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(var(--press-y)); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--c-accent-strong); color: var(--c-on-accent); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: var(--c-field-border); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--c-accent-strong-hover); }
  .btn--secondary:hover { border-color: var(--c-text-2); background: var(--c-surface); }
}

.btn[aria-busy="true"], .btn:disabled { cursor: progress; }
.btn:disabled { opacity: 0.8; }

.link-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
  padding: 0;
}
@media (hover: hover) and (pointer: fine) {
  .link-action:hover { text-decoration-thickness: 2px; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

/* ---------- Ikony (inline SVG, obrys jak ICON_STROKE apki) ---------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--24 { width: 24px; height: 24px; }

/* ---------- Nagłówek strony ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--c-nav-bg);
  border-bottom: 1px solid var(--c-border);
}
/* Rozmycie tylko na desktopie z myszą; na telefonie (DPR 2-3, 120 Hz) pełne tło bez blura,
   bo GPU liczyłby rozmycie na każdej klatce przewijania. */
@media (min-width: 64rem) and (hover: hover) {
  .site-header { background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--c-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--nav-h);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text);
}
.wordmark svg { height: 22px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--s-6); }
.site-nav__links { display: none; }
.site-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text-2);
  font-size: var(--fs-nav);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.site-nav__links a[aria-current="page"],
.site-nav__links a[aria-current="location"] { color: var(--c-text); }
/* Gdy aktywna jest sekcja tej strony (Cennik, FAQ), link strony traci podkreślenie. */
.site-nav__links.has-section a[aria-current="page"] { color: var(--c-text-2); }
.site-nav__links.has-section a[aria-current="page"]::after { content: none; }
.site-nav__links a[aria-current="page"]::after,
.site-nav__links a[aria-current="location"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--c-accent);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__links a:hover { color: var(--c-text); }
}
.site-header .btn { min-height: 44px; padding: 10px 18px; }
/* Poniżej 768 px nagłówek to wordmark + przycisk główny (DESIGN.md 4.1, bez hamburgera);
   linki ścieżek są w hero / i w stopce. Na każdej szerokości przycisk w nagłówku chowa się,
   dopóki ten sam przycisk z hero jest w widoku (klasa z common.js): nigdy dwa naraz. */
.site-header .btn { transition: opacity var(--t-fast) ease, visibility var(--t-fast); }
.is-hero-cta-visible .site-header .btn { opacity: 0; visibility: hidden; }
@media (min-width: 48rem) {
  .site-nav__links { display: flex; gap: var(--s-6); }
}
@media (max-width: 23.4375rem) {
  .site-header .btn { padding-inline: 14px; font-size: var(--fs-small); }
}

/* ---------- Ramka telefonu ---------- */
/* Ramka to assets/device/phone-frame.svg (viewBox 422 x 868, ekran x 16, y 12, 390 x 844,
   promień 55) położona NAD zrzutem. Proporcje ekranu w procentach ramki. */

.device {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "phone phone" "meta cuzco";
  align-items: center;
  column-gap: var(--s-3);
  width: var(--phone-w, clamp(220px, 62vw, 300px));
  margin-inline: auto;
}
.phone {
  grid-area: phone;
  position: relative;
  aspect-ratio: 422 / 868;
  width: 100%;
}
.phone__screen {
  position: absolute;
  left: 3.7915%;
  top: 1.3825%;
  width: 92.417%;
  height: 97.235%;
  border-radius: 14.1% / 6.517%;
  overflow: hidden;
  background: var(--c-device);
  box-shadow: var(--shadow-phone);
}
.phone__screen .phone__poster,
.phone__screen .phone__video { position: absolute; inset: 0; }
.phone__screen img,
.phone__screen video,
.phone__screen picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Poziomy kadr bez ramki telefonu (device-loop.html z parametrem wide): sam ekran,
   proporcje nagrania z --screen-ar, cały kadr widoczny (bez przycinania). */
.device--wide { width: var(--phone-w, min(100%, 460px)); }
.device--wide .phone { aspect-ratio: var(--screen-ar, 600 / 514); }
.device--wide .phone__screen {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card);
  border: 1px solid rgba(138, 151, 166, 0.22);
}
.device--wide .phone__screen img,
.device--wide .phone__screen video { object-position: center; }
.device__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
  min-width: 0;
}
.device__meta--center { justify-content: center; }
.caption {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-text-2);
}

/* Cuzco przy ramce: na telefonie pod ramką obok podpisu (88 px), od 768 px przy krawędzi
   ramki, zachodzi na nią maks. 24 px. */
.device__cuzco {
  grid-area: cuzco;
  --cz: 52px;
  align-self: start;
  translate: 0 var(--s-3);
}
@media (min-width: 48rem) {
  .device { grid-template-areas: "phone phone" "meta meta"; }
  .device__cuzco {
    position: absolute;
    --cz: var(--cuzco-w, 96px);
    translate: none;
    bottom: var(--cuzco-bottom, 18%);
  }
  .device__cuzco--right { right: calc(-1 * var(--cuzco-w, 96px) + 20px); }
  .device__cuzco--left { left: calc(-1 * var(--cuzco-w, 96px) + 20px); }
}

/* ---------- Przycisk pętli wideo ---------- */
/* Okrągły, 44 x 44 (cel dotyku). Przy telefonie i ramce przeglądarki z partiali stoi w wierszu
   podpisu (.device__meta), na początku wiersza: zawsze w tym samym miejscu, nie zasłania nagrania
   (na 390 px wisząc na rogu przykrywał pasek zakładek apki), nie odpływa od pochylonej ramki
   w hero i nie skacze na lewy róg przy Cuzco. Ramki złożone ręcznie (bez partiala) trzymają go
   w prawym dolnym rogu, w środku ramki, żeby nie wychodził poza margines strony.
   Półprzezroczysty, żeby nie konkurował z nagraniem. Nazwa tylko dla czytnika. */

.video-toggle {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(14, 22, 32, 0.72);
  color: var(--c-text);
  border: 1px solid rgba(138, 151, 166, 0.35);
  border-radius: 50%;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.device__meta:has(> .video-toggle) { flex-wrap: nowrap; }
.device__meta > .video-toggle {
  position: relative;
  right: auto;
  bottom: auto;
  flex: none;
}
/* Długi podpis łamie się obok przycisku, zamiast spychać przycisk do osobnego wiersza. */
.device__meta > .video-toggle ~ .caption { flex: 0 1 auto; min-width: 0; }
/* Na telefonie przy Cuzco wiersz podpisu jest węższy o kolumnę kozicy: podpis schodzi pod
   przycisk, zamiast łamać się w wąską kolumnę po kilka słów. */
@media (max-width: 47.99rem) {
  .device:has(> .device__cuzco) .device__meta:has(> .video-toggle) { flex-wrap: wrap; }
}
.video-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .video-toggle:hover { border-color: var(--c-text-2); background: rgba(14, 22, 32, 0.9); }
}
.video-toggle > .icon { grid-area: 1 / 1; width: 16px; height: 16px; }
.video-toggle .icon--play { display: none; }
.video-toggle:not([data-state="playing"]) .icon--pause { display: none; }
.video-toggle:not([data-state="playing"]) .icon--play { display: block; }
/* Trójkąt w viewBox leży od x 7 do 19.9 (środek 13.45 zamiast 12), więc stał ~1 px na prawo.
   Przesunięcie zostawia 0.3 px optycznego wychylenia w prawo (środek ciężkości trójkąta). */
.video-toggle > .icon--play { translate: -0.65px 0; }
/* Etykiety: wszystkie w DOM, widoczna (dla czytnika) tylko ta ze stanu. Kontener poza siatką:
   jako element siatki tworzył drugi wiersz i ikona lądowała nad środkiem przycisku. */
.video-toggle__label { position: absolute; }
.video-toggle__label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  visibility: hidden;
}
.video-toggle[data-state="playing"] [data-label="pause"],
.video-toggle[data-state="paused"] [data-label="resume"],
.video-toggle[data-state="start"] [data-label="start"] { visibility: visible; }

/* ---------- Ramka przeglądarki (partial browser-loop.html) ---------- */
/* Panel ścianki nagrany w 1440 x 900. Ramka to cienki pasek z trzema kropkami i tytułem,
   bez paska adresu (nie udajemy domeny). Szerokość z --browser-w (domyślnie 100 % kolumny). */

.device--browser {
  width: var(--browser-w, 100%);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "phone" "meta";
}
.browser {
  grid-area: phone;
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 12px 12px 12px 2px;
  background: var(--c-surface);
  box-shadow: var(--shadow-phone);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 32px;
  padding-inline: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.browser__dots { display: inline-flex; gap: 6px; }
.browser__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-field-border); opacity: 0.6; }
.browser__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding-right: 44px; /* optyczne wyśrodkowanie względem kropek */
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-text-2);
}
.browser__screen {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 0 0 11px 1px;
  background: var(--c-bg);
}
.browser__poster,
.browser__video { position: absolute; inset: 0; }
.browser__screen img,
.browser__screen video,
.browser__screen picture { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Karuzela [data-carousel] (wspólna: /wspinacz, /) ---------- */
/* Tor to zwykły poziomy scroll ze snapem (palec, trackpad, klawiatura); przyciski i
   wybór slajdu dopina common.js. Bez JS (html bez .js) slajdy stoją jeden pod drugim.
   Ruch: tylko scroll toru i pasek aktywnego wyboru (transform). */


.carousel { margin-top: var(--s-10); }
.carousel__bar { display: none; }

.carousel__track { display: grid; gap: var(--s-16); }

.carousel__slide {
  display: grid;
  row-gap: var(--s-8);
  align-items: center;
  min-width: 0;
}
.carousel__copy { display: grid; gap: var(--s-4); align-content: start; max-width: 52ch; }
.carousel__copy > p { color: var(--c-text-2); font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.carousel__title { text-wrap: balance; }
.carousel__media { --phone-w: clamp(200px, 54vw, 270px); }
@media (max-width: 29.99rem) {
  .carousel__pick-num { display: none; }
  .carousel__pick { padding-inline: var(--s-2); }
  .carousel__pick::after { left: var(--s-2); right: var(--s-2); }
}

.carousel__facts { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.carousel__facts li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  color: var(--c-text);
  line-height: 1.5;
}
.carousel__facts .icon { color: var(--c-accent); margin-top: 2px; }

.carousel__stat { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-2); }
.carousel__num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  line-height: 0.9;
  color: var(--c-text);
}
.carousel__unit { display: grid; font-weight: 800; font-size: var(--fs-h3); color: var(--c-text); }
.carousel__unit-note { font-weight: 400; font-size: var(--fs-caption); color: var(--c-text-2); letter-spacing: 0.02em; }


/* Wariant z JS: karuzela. */
html.js .carousel__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
html.js .carousel__picker { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
html.js .carousel__picker::-webkit-scrollbar { display: none; }
.carousel__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  color: var(--c-text-2);
  font-weight: 600;
  font-size: var(--fs-nav);
  white-space: nowrap;
  transition: color var(--t-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.carousel__pick-num { font-size: var(--fs-caption); color: var(--c-text-2); }
.carousel__pick::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: -1px;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-toggle) var(--ease-out);
}
.carousel__pick[aria-current="true"] { color: var(--c-text); }
.carousel__pick[aria-current="true"] .carousel__pick-num { color: var(--c-accent); }
.carousel__pick[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .carousel__pick:hover { color: var(--c-text); }
}

.carousel__arrows { display: none; gap: var(--s-2); padding-bottom: var(--s-2); }
.carousel__arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) ease, opacity var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.carousel__arrow--prev .icon { transform: scaleX(-1); }
.carousel__arrow:active { transform: scale(0.94); }
.carousel__arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .carousel__arrow:not(:disabled):hover { border-color: var(--c-text-2); background: var(--c-raised); }
}

html.js .carousel__track {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html.js .carousel__track::-webkit-scrollbar { display: none; }
/* Na telefonie widać skrawek następnego slajdu: sygnał, że można przesunąć. */
html.js .carousel__slide {
  flex: 0 0 calc(100% - var(--s-8));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
html.js .carousel__track:focus-visible { outline: 2px solid var(--c-chalk); outline-offset: 6px; }
html.js.motion-ok .carousel__track { scroll-behavior: smooth; }

@media (min-width: 48rem) {
  html.js .carousel__arrows { display: flex; }
  html.js .carousel__slide { flex-basis: 100%; }
}

@media (min-width: 64rem) {
  .carousel__slide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--s-12);
  }
  /* Telefon mieści się w ekranie razem z paskiem wyboru (ramka ma proporcje 422 x 868). */
  .carousel__media { --phone-w: clamp(230px, calc((100svh - 280px) * 0.486), 310px); justify-self: center; }
  html.js .carousel__track { gap: var(--s-12); }
}

/* ---------- Cuzco (klatki z rigu) ---------- */
/* Pozy mają w viewBoxie pusty margines (ok. 23 % z boków, 17 % u góry, 7 % u dołu).
   --cz to szerokość WIDOCZNEJ sylwetki; ujemne marginesy sprowadzają pudełko układu
   do sylwetki, więc odstępy i nakładanie na ramkę liczą się od kozy, nie od pustki. */

.cuzco {
  --cz: 88px;
  width: calc(var(--cz) * 1.852);
  max-width: none;
  height: auto;
  margin: calc(var(--cz) * -0.335) calc(var(--cz) * -0.426) calc(var(--cz) * -0.138);
  pointer-events: none;
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon {
  width: 22px;
  height: 22px;
  color: var(--c-accent);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__answer {
  padding-bottom: var(--s-6);
  max-width: var(--measure);
  color: var(--c-text-2);
}
.faq__answer > * + * { margin-top: var(--s-3); }

/* ---------- Formularze ---------- */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label { font-size: var(--fs-nav); font-weight: 600; color: var(--c-text); }
.field__label .opt { font-weight: 400; color: var(--c-text-2); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-field);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) ease;
}
.field__input::placeholder { color: var(--c-text-2); opacity: 1; }
.field__input:focus-visible { border-color: var(--c-accent); }
.field__input[aria-invalid="true"] { border-color: var(--c-danger); }
select.field__input {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-2) 50%), linear-gradient(135deg, var(--c-text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-danger);
}
.field__error .icon { width: 18px; height: 18px; margin-top: 1px; }
.field__error:empty { display: none; }

.check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
}
.check input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--c-accent-strong);
}
.check input[aria-invalid="true"] { outline: 2px solid var(--c-danger); outline-offset: 1px; }

.form__summary {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-danger);
}
.form__summary:empty { display: none; }
/* Bez JS formularz nic by nie zrobił (nie ma backendu), więc nie udajemy wysyłki. */
html:not(.js) form[data-local-form] [type="submit"] { display: none; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
/* Sukces: ikona check przed nagłówkiem (kolor --c-success), bez paska na krawędzi. */
.form-success h3 { display: flex; align-items: center; gap: var(--s-2); }
.form-success h3::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--c-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-success h3:focus { outline: none; }
.form-success h3:focus-visible { outline: 2px solid var(--c-chalk); outline-offset: 4px; }
.form-success p { margin-top: var(--s-2); color: var(--c-text-2); max-width: var(--measure); }

/* ---------- Stopka ---------- */

.site-footer {
  border-top: 1px solid var(--c-border);
  padding-block: var(--s-12) var(--s-10);
  background: var(--c-bg);
}
.site-footer__grid { row-gap: var(--s-8); }
.site-footer__brand .wordmark svg { height: 24px; }
.site-footer__brand p { margin-top: var(--s-3); color: var(--c-text-2); max-width: 36ch; }
.site-footer__brand .site-footer__tagline { color: var(--c-text); }
/* „Zrobione w Polsce”: znak (dwa pasy flagi, dekoracja) i jedno krótkie zdanie. */
.site-footer__brand .made-in-pl {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.made-in-pl strong { color: var(--c-text); font-weight: 600; }
.made-in-pl__flag {
  flex: none;
  width: 18px;
  height: 12px;
  margin-top: 0.25em;
  border-radius: 2px 2px 2px 1px;
  background: linear-gradient(#F4F4F4 50%, #DC143C 50%);
  box-shadow: 0 0 0 1px var(--c-border);
}
.site-footer__cuzco { --cz: 64px; margin-top: calc(var(--s-6) + 64px * -0.335); }
.site-footer__note { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-small); max-width: 34ch; }
.site-footer h2, .site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-2);
  line-height: 1.4;
}
.site-footer ul { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.site-footer li a, .site-footer li span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-nav);
}
.site-footer__social { gap: var(--s-2); }
.site-footer__social .icon { flex: none; }
/* Zwykły tekst w stopce (administrator, e-mail) w tym samym kolorze co linki. Blok zamiast flex:
   jako element flex etykieta „E-mail:” rozjeżdżała się przy myślniku. */
.site-footer li span { display: inline-block; line-height: 44px; color: var(--c-text); }
@media (hover: hover) and (pointer: fine) {
  .site-footer li a:hover { color: var(--c-accent); text-decoration: underline; }
}
.site-footer__bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
  display: grid;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}
@media (min-width: 48rem) {
  .site-footer__brand { grid-column: span 8; }
  .site-footer__col { grid-column: span 4; }
}
@media (min-width: 64rem) {
  .site-footer__brand { grid-column: span 3; }
  .site-footer__col { grid-column: span 3; }
}

/* ---------- Wejście sekcji (reveal) ---------- */
/* Treść jest widoczna bez JS. Ukrywa ją dopiero klasa .js-reveal (ustawiana w <head>);
   gdy common.js się nie wczyta, bezpiecznik w <head> zdejmuje klasę po 2.5 s. */

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
}
html.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* ---------- Reduced motion ---------- */

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

/* Obowiązek informacyjny RODO pod zgodą: drobny, ale czytelny (kontrast jak tekst drugorzędny). */
.form__privacy {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-2);
}