/* ==========================================================================
   Vizicard – strona produktu (vizicard.app)
   Czysty CSS, bez zależności. Wszystkie kolory w zmiennych dla obu motywów.

   Spis treści
    1. Fonty kart (tylko kreator i makiety)
    2. Właściwości animowane (@property)
    3. Tokeny: strona, makiety aplikacji, kolory wizytówek
    4. Podstawy, typografia, dostępność
    5. Układ, nagłówki sekcji, przyciski, odznaki sklepów
    6. Nawigacja
    7. Wizytówka (.vc) – wierna kopia app/src/components/BusinessCard.tsx
    8. iPhone i interfejs aplikacji (.phone, .ios-*, .a-*)
    9. Sekcje: hero, kroki, kreator (wizytówka i kod QR), funkcje, dla firm,
       cennik, pytania, wezwanie, stopka
   10. Ruch i preferencje użytkownika
   ========================================================================== */

/* ---------- 1. Fonty -------------------------------------------------------
   Krój strony: Schibsted Grotesk – jeden plik zmienny na wszystkie grubości (400–900). */

@font-face { font-family: "Schibsted Grotesk"; src: url("/static/site/fonts/SchibstedGrotesk.woff2?v=fbb5ff9e2b") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

/* ---------- Fonty kart ----------------------------------------------------
   Te same kroje co w aplikacji (app/src/lib/fonts.ts), odchudzone do liter
   łacińskich z polskimi znakami (tools/fonts.py). Pobierają się dopiero,
   gdy przeglądarka narysuje tekst w danym kroju. */

@font-face { font-family: "Montserrat"; src: url("/static/site/fonts/Montserrat_700Bold.woff2?v=353365e2dd") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/static/site/fonts/Montserrat_500Medium.woff2?v=2029ad1bed") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/static/site/fonts/PlayfairDisplay_700Bold.woff2?v=f79855af78") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/static/site/fonts/PlayfairDisplay_400Regular.woff2?v=17486085ec") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/static/site/fonts/Lora_700Bold.woff2?v=577a8c4055") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/static/site/fonts/Lora_400Regular.woff2?v=2e661d51df") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/site/fonts/Nunito_800ExtraBold.woff2?v=6c5d732ceb") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/site/fonts/Nunito_600SemiBold.woff2?v=ac44244985") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/site/fonts/SpaceGrotesk_700Bold.woff2?v=d3d092165f") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/site/fonts/SpaceGrotesk_400Regular.woff2?v=00bb0a21d7") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/static/site/fonts/Caveat_700Bold.woff2?v=59cc686ad6") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- 2. Właściwości animowane --------------------------------------
   Zarejestrowane kolory pozwalają płynnie przejść gradientowi karty
   z jednego koloru w drugi. --u, --pt i --px to jednostki makiet:
   1/343 szerokości karty, 1 punkt ekranu iPhone'a, 1 piksel strony w oknie. */

@property --c { syntax: "<color>"; inherits: true; initial-value: #4338ca; }
@property --c-from { syntax: "<color>"; inherits: true; initial-value: #5248ce; }
@property --c-to { syntax: "<color>"; inherits: true; initial-value: #251f6f; }
@property --u { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --pt { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --px { syntax: "<length>"; inherits: true; initial-value: 1px; }

/* ---------- 3. Tokeny ------------------------------------------------------ */

:root {
  color-scheme: light;

  --font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  /* Czcionka „Systemowa” wizytówek – w aplikacji to krój systemowy telefonu */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Strona – jasny papier, atramentowy tekst i cztery pastele (jak w aplikacji) */
  --ink: #131313;
  --bg: #f5f4ef;
  --bg-alt: #efeee8;
  --surface: #ffffff;
  --tile: #f3f2ed;
  --tile-2: #e9e8e1;
  --text: #131313;
  --text-2: #55554f;
  --text-3: #6a6a64;
  --line: rgb(19 19 19 / 0.09);
  --line-2: rgb(19 19 19 / 0.16);
  --green: #8ddd8d;
  --yellow: #e0e055;
  --blue: #6066ee;
  --periwinkle: #a5a8ff;
  --pink: #faaafa;
  --brand: #6066ee;
  --brand-2: #4b50d6;
  --brand-hover: #4b50d6;
  --brand-soft: rgb(96 102 238 / 0.12);
  --brand-ink: #4b50d6;
  --focus: #4b50d6;
  --ok: #1b7a37;
  --bad: #c2372b;
  --seg-on: #131313;
  /* Wybrana opcja i główny przycisk: atramentowa pigułka z jasnym tekstem */
  --sel-bg: #131313;
  --sel-fg: #ffffff;
  --shadow-1: 0 0 0 1px rgb(19 19 19 / 0.06);
  --shadow-2: 0 0 0 1px rgb(19 19 19 / 0.08);
  --shadow-3: 0 0 0 1px rgb(19 19 19 / 0.06), 0 30px 60px -24px rgb(19 19 19 / 0.28);

  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --radius-xl: 40px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --nav-h: 72px;
}

/* Interfejs aplikacji w makietach – app/src/lib/theme.ts (motyw ciemny) */
.app {
  --a-bg: #131313;
  --a-surface: #1c1c1c;
  --a-text: #f5f5f2;
  --a-text2: #a3a39e;
  --a-ph: #77776f;
  --a-sep: #2a2a2a;
  --a-tint: #a5a8ff;
  --a-chip: #262626;
  --a-seg: #f5f5f2;
  --a-outline: rgb(255 255 255 / 0.35);
  --a-glass: rgb(48 48 48 / 0.72);
  --a-glass-edge: rgb(255 255 255 / 0.16);
  --a-company: #faaafa;
  font-family: var(--font);
}
/* Kod na pełnym ekranie jest zawsze biały – tak jak w aplikacji */
.app.app--white { --a-bg: #ffffff; --a-text: #0b0b0f; }

/* Dwanaście kolorów wizytówek (app/src/lib/types.ts). Gradient: kolor
   rozjaśniony o 8% → przyciemniony o 45%, tak jak shade() w aplikacji. */
[data-color="granat"]   { --c: #1e3a8a; --c-from: #304a93; --c-to: #11204c; }
[data-color="indygo"]   { --c: #4338ca; --c-from: #5248ce; --c-to: #251f6f; }
[data-color="fiolet"]   { --c: #6d28d9; --c-from: #7939dc; --c-to: #3c1677; }
[data-color="ocean"]    { --c: #0369a1; --c-from: #1775a9; --c-to: #023a59; }
[data-color="turkus"]   { --c: #0f766e; --c-from: #22817a; --c-to: #08413d; }
[data-color="szmaragd"] { --c: #047857; --c-from: #188364; --c-to: #024230; }
[data-color="oliwka"]   { --c: #3f6212; --c-from: #4e6f25; --c-to: #23360a; }
[data-color="miedz"]    { --c: #b45309; --c-from: #ba611d; --c-to: #632e05; }
[data-color="roz"]      { --c: #be185d; --c-from: #c32a6a; --c-to: #690d33; }
[data-color="bordo"]    { --c: #9f1239; --c-from: #a72549; --c-to: #570a1f; }
[data-color="grafit"]   { --c: #1f2937; --c-from: #313a47; --c-to: #11171e; }
[data-color="czern"]    { --c: #0a0a0a; --c-from: #1e1e1e; --c-to: #060606; }

/* ---------- 4. Podstawy ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; }
svg { fill: currentColor; }
ul, ol { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

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

.skip {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}
.skip:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { flex: none; width: 1.25em; height: 1.25em; }

/* Pasek przewijania w kolorach marki (Chrome, Edge, Safari: ::-webkit-scrollbar; Firefox: scrollbar-color) */
:root { --scroll-thumb: #4f46e5; --scroll-thumb-hover: #4338ca; }

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--scroll-thumb) var(--bg); }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border: 3px solid var(--bg); border-radius: 999px; background: var(--scroll-thumb); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- 5. Układ --------------------------------------------------------- */

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

.section { position: relative; padding-block: clamp(44px, 2vw + 32px, 72px); overflow-x: clip; }
.section--alt { background: var(--bg-alt); }
/* Sekcje poza ekranem nie są rysowane, dopóki nie trzeba – szybszy start na telefonach.
   Przed przejściem do kotwicy skrypt włącza je wszystkie (.cv-off), żeby przewijanie trafiało dokładnie. */
.section { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.cv-off .section { content-visibility: visible; }

.section-head { max-width: 760px; margin: 0 0 clamp(24px, 1vw + 18px, 36px); }
@media (min-width: 900px) {
  .section-head:has(.lead) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 56px; max-width: none; }
  .section-head .lead { margin-top: 0; padding-bottom: 0.3em; }
}

.section-head h2,
.biz__copy h2,
.faq__head h2 {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lead {
  margin-top: 14px;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}
.lead strong { color: var(--text); font-weight: 600; }

/* Przyciski */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: 600 1rem/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 16px; font-size: 0.9375rem; }
/* Mały przycisk, ale cel dotyku 44 px */
.btn--sm::after { content: ""; position: absolute; inset: -4px -2px; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--brand-hover); }
}

/* Odznaki sklepów */
.stores { margin-top: 32px; }
.stores__label { color: var(--text-2); font-size: 0.9375rem; font-weight: 500; }
.stores__list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; list-style: none; }
.badge { width: auto; height: 48px; }

/* ---------- 6. Nawigacja ---------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 0.3s ease;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.nav__inner { display: flex; align-items: center; gap: 20px; height: 100%; }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.nav__brand img { border-radius: 22.5%; }

.nav__links ul { display: flex; gap: 2px; list-style: none; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.nav__links a[aria-current] { color: var(--brand-ink); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: var(--tile); }
}

.nav__menu { display: none; }
.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__burger { position: relative; width: 18px; height: 12px; }
.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: translate 0.3s var(--ease-out), rotate 0.3s var(--ease-out);
}
.nav__burger::before { top: 1px; }
.nav__burger::after { bottom: 1px; }
.nav__menu[open] .nav__burger::before { translate: 0 4px; rotate: 45deg; }
.nav__menu[open] .nav__burger::after { translate: 0 -4px; rotate: -45deg; }

.nav__sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 4px var(--gutter) 24px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line), 0 32px 48px -24px rgb(0 0 0 / 0.3);
  animation: sheet-in 0.28s var(--ease-out);
}
.nav__sheet ul { list-style: none; }
.nav__sheet-links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
@keyframes sheet-in { from { opacity: 0; translate: 0 -8px; } }

@media (max-width: 819px) {
  :root { --nav-h: 56px; }
  .nav__inner { gap: 8px; }
}
/* Sześć linków mieści się w pasku dopiero od 1080 px (po hiszpańsku i ukraińsku są najdłuższe) – węższe okna mają menu */
@media (max-width: 1079px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
}
@media (max-width: 379px) {
  .nav__cta-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Ukraiński: „Завантажити застосунок” nie mieści się w pasku telefonu – zostaje samo „Завантажити” */
@media (max-width: 819px) {
  :lang(uk) .nav__cta-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 7. Wizytówka -----------------------------------------------------
   Wymiary z aplikacji (karta 343 pt szerokości) przeliczane jednostką --u,
   więc karta wygląda tak samo w każdym rozmiarze. Proporcje karty
   kredytowej 1,586 : 1. */

.vc {
  --t1: #ffffff;                    /* imię, kontakt */
  --t2: rgb(255 255 255 / 0.85);    /* stanowisko */
  --t3: rgb(255 255 255 / 0.7);     /* NIP, REGON */
  --tc: rgb(255 255 255 / 0.85);    /* nazwa firmy */
  --ti: rgb(255 255 255 / 0.75);    /* ikonki */
  --mono-bg: rgb(255 255 255 / 0.18);
  --photo-border: rgb(255 255 255 / 0.85);
  --ink-l: rgb(255 255 255 / 0.09);
  --ink-d: rgb(255 255 255 / 0.18);
  --ink-g: rgb(255 255 255 / 0.1);
  --glow-1: rgb(255 255 255 / 0.1);
  --glow-2: rgb(255 255 255 / 0.06);

  /* Kroje: nagłówek (imię, inicjały), wersaliki (firma), tekst */
  --f-head: var(--font-system);  --w-head: 700;
  --f-caps: var(--font-system);  --w-caps: 700;
  --f-body: var(--font-system);  --w-body: 400;  --w-strong: 600;
  --ns: 1; /* mnożnik wielkości imienia */
  --fit: 1;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.586;
  container-type: inline-size;
  transition: --c 0.5s var(--ease-out), --c-from 0.5s var(--ease-out), --c-to 0.5s var(--ease-out);
}

.vc[data-style="light"] {
  --t1: #0b0b0f;
  --t2: #4b4b52;
  --t3: #6b6b73;
  --tc: var(--c);
  --ti: var(--c);
  --mono-bg: var(--c);
  --photo-border: #ffffff;
  --ink-l: color-mix(in srgb, var(--c) 12%, transparent);
  --ink-d: color-mix(in srgb, var(--c) 22%, transparent);
  --ink-g: color-mix(in srgb, var(--c) 12%, transparent);
  --glow-1: color-mix(in srgb, var(--c) 7%, transparent);
  --glow-2: color-mix(in srgb, var(--c) 5%, transparent);
}

/* Kroje kart włącza skrypt (.fonts-on), gdy sekcja zbliża się do ekranu – pliki nie konkurują wtedy
   z pierwszym wyświetleniem strony. Bez skryptu karty używają kroju systemowego. */
:root {
  --ff-modern: var(--font-system);
  --ff-elegant: var(--font-system);
  --ff-classic: var(--font-system);
  --ff-rounded: var(--font-system);
  --ff-tech: var(--font-system);
  --ff-signature: var(--font-system);
}
.fonts-on {
  --ff-modern: "Montserrat", var(--font-system);
  --ff-elegant: "Playfair Display", var(--font-system);
  --ff-classic: "Lora", var(--font-system);
  --ff-rounded: "Nunito", var(--font-system);
  --ff-tech: "Space Grotesk", var(--font-system);
  --ff-signature: "Caveat", var(--font-system);
}

.vc[data-font="modern"]    { --f-head: var(--ff-modern); --f-caps: var(--f-head); --f-body: var(--f-head); --w-body: 500; --w-strong: 500; --ns: 0.94; }
.vc[data-font="elegant"]   { --f-head: var(--ff-elegant); --f-caps: var(--f-head); --f-body: var(--f-head); --w-strong: 400; --ns: 1.06; }
.vc[data-font="classic"]   { --f-head: var(--ff-classic); --f-caps: var(--f-head); --f-body: var(--f-head); --w-strong: 400; }
.vc[data-font="rounded"]   { --f-head: var(--ff-rounded); --w-head: 800; --f-caps: var(--f-head); --w-caps: 800; --f-body: var(--f-head); --w-body: 600; --w-strong: 600; }
.vc[data-font="tech"]      { --f-head: var(--ff-tech); --f-caps: var(--f-head); --f-body: var(--f-head); --w-strong: 400; --ns: 0.98; }
/* Odręczna: tylko imię i inicjały; firma w wersalikach zostaje systemowa. Caveat ma niskie litery,
   więc wiersz imienia jest ciaśniejszy niż 1,4× – pełna karta mieści się wtedy w ramce. */
.vc[data-font="signature"] { --f-head: var(--ff-signature); --ns: 1.4; }
.vc[data-font="signature"] .vc__name { min-height: calc(33 * var(--u)); line-height: calc(33 * var(--u)); }

.vc__face {
  --u: calc(100cqw / 343);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto auto auto;
  grid-template-areas:
    "co   av"
    ".    ."
    "name name"
    "job  job"
    "lines lines"
    "ids  ids";
  column-gap: calc(12 * var(--u));
  padding: calc(20 * var(--u));
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / 0.18);
  color: var(--t1);
  font-family: var(--f-body);
  font-weight: var(--w-body);
  line-height: 1.2;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Kolor pod warstwami tła – niewidoczny, ale pozwala narzędziom (axe, Lighthouse) policzyć kontrast tekstu */
.vc__face { background-color: var(--c-to); }
.vc[data-style="solid"] .vc__face { background-color: var(--c); }
.vc[data-style="light"] .vc__face { background-color: #ffffff; }

/* Tło: gradient, kolor jednolity i biała karta – warstwy przenikają się */
.vc__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(to bottom right, var(--c-from), var(--c-to));
}
.vc__bg::before,
.vc__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.vc__bg::before { background: var(--c); }
/* Jasny: biała karta, cienka ramka i pionowy pasek w kolorze akcentu */
.vc__bg::after {
  background: #ffffff;
  box-shadow: inset calc(7 * var(--u)) 0 0 var(--c), inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.vc[data-style="solid"] .vc__bg::before { opacity: 1; }
.vc[data-style="light"] .vc__bg::after { opacity: 1; }

/* Zdjęcie: własne tło, przyciemnione tak jak w aplikacji (BACKGROUND_DIM w BusinessCard.tsx) – zabarwione kolorem
   karty u góry, ciemniejsze na dole, więc biały tekst zawsze jest czytelny. Bez zdjęcia karta wygląda jak gradient. */
.vc { --tint: 32%; --dark: 0.6; }
.vc[data-dim="light"] { --tint: 18%; --dark: 0.4; }
.vc[data-dim="strong"] { --tint: 50%; --dark: 0.78; }
.vc__bgimg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.vc:not([data-style="image"]) .vc__bgimg { display: none; }
.vc__shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--c) var(--tint), transparent), rgb(0 0 0 / var(--dark)));
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), background 0.45s var(--ease-out);
}
.vc[data-style="image"][data-bg="on"] .vc__shade { opacity: 1; }
.vc[data-style="image"][data-bg="on"] .vc__face { text-shadow: 0 1px 2px rgb(0 0 0 / 0.22); }

/* Wzory tła (Koła, Linie, Kropki, Siatka, Gładkie) */
.vc__pat { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vc__p { position: absolute; inset: 0; }

.vc[data-pattern="circles"] .vc__pat:not(.vc__pat--all)::before,
.vc[data-pattern="circles"] .vc__pat:not(.vc__pat--all)::after,
.vc__p[data-p="circles"]::before,
.vc__p[data-p="circles"]::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.vc[data-pattern="circles"] .vc__pat:not(.vc__pat--all)::before,
.vc__p[data-p="circles"]::before {
  top: calc(-140 * var(--u));
  right: calc(-90 * var(--u));
  width: calc(260 * var(--u));
  height: calc(260 * var(--u));
  background: var(--glow-1);
}
.vc[data-pattern="circles"] .vc__pat:not(.vc__pat--all)::after,
.vc__p[data-p="circles"]::after {
  right: calc(40 * var(--u));
  bottom: calc(-90 * var(--u));
  width: calc(160 * var(--u));
  height: calc(160 * var(--u));
  background: var(--glow-2);
}
/* Linie co 11 pt pod kątem 45° – kierunek „/”, jak w aplikacji */
.vc[data-pattern="lines"] .vc__pat:not(.vc__pat--all),
.vc__p[data-p="lines"] {
  background: repeating-linear-gradient(135deg, var(--ink-l) 0 calc(1.2 * var(--u)), transparent calc(1.2 * var(--u)) calc(11 * var(--u)));
}
.vc[data-pattern="dots"] .vc__pat:not(.vc__pat--all),
.vc__p[data-p="dots"] {
  background: radial-gradient(circle, var(--ink-d) calc(1.3 * var(--u)), transparent calc(1.3 * var(--u) + 0.6px)) 0 0 / calc(14 * var(--u)) calc(14 * var(--u));
}
.vc[data-pattern="grid"] .vc__pat:not(.vc__pat--all),
.vc__p[data-p="grid"] {
  background:
    linear-gradient(to bottom, var(--ink-g) calc(1 * var(--u)), transparent 0) 0 0 / calc(20 * var(--u)) calc(20 * var(--u)),
    linear-gradient(to right, var(--ink-g) calc(1 * var(--u)), transparent 0) 0 0 / calc(20 * var(--u)) calc(20 * var(--u));
}

/* Kreator: wszystkie wzory leżą na sobie, widoczny jest wybrany */
.vc__pat--all .vc__p {
  opacity: 0;
  scale: 1.06;
  transition: opacity 0.45s var(--ease-out), scale 0.6s var(--ease-out);
}
.vc__p[data-p="circles"]::before,
.vc__p[data-p="circles"]::after { scale: 0.7; transition: scale 0.7s var(--ease-out); }
.vc[data-pattern="circles"] .vc__p[data-p="circles"],
.vc[data-pattern="lines"] .vc__p[data-p="lines"],
.vc[data-pattern="dots"] .vc__p[data-p="dots"],
.vc[data-pattern="grid"] .vc__p[data-p="grid"] { opacity: 1; scale: 1; }
.vc[data-pattern="circles"] .vc__p[data-p="circles"]::before,
.vc[data-pattern="circles"] .vc__p[data-p="circles"]::after { scale: 1; }

/* Treść karty */
.vc__company {
  grid-area: co;
  align-self: start;
  min-height: calc(15 * var(--u));
  overflow: hidden;
  color: var(--tc);
  font-family: var(--f-caps);
  font-size: calc(12 * var(--u));
  font-weight: var(--w-caps);
  letter-spacing: calc(1.4 * var(--u));
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.vc__avatar { grid-area: av; display: grid; justify-self: end; align-self: start; }
.vc__avatar > * { grid-area: 1 / 1; justify-self: end; align-self: start; }
.vc__mono {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--mono-bg);
  box-shadow: inset 0 0 0 max(1px, calc(0.5 * var(--u))) rgb(255 255 255 / 0.35);
  color: #ffffff;
  font-family: var(--f-head);
  font-size: calc(15 * var(--u));
  font-weight: var(--w-head);
  line-height: 1;
}
.vc__photo {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border: calc(2 * var(--u)) solid var(--photo-border);
  border-radius: 50%;
  object-fit: cover;
  background: #f3ece3;
}
.vc[data-shape="rounded"] .vc__photo { border-radius: calc(14 * var(--u)); }
.vc[data-style="light"] .vc__photo { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.vc[data-photo="mono"] .vc__photo,
.vc[data-photo="logo"] .vc__mono { display: none; }

.vc__name {
  grid-area: name;
  min-height: calc(28 * var(--ns) * var(--u));
  overflow: hidden;
  color: var(--t1);
  font-family: var(--f-head);
  font-size: calc(22 * var(--ns) * var(--fit) * var(--u));
  font-weight: var(--w-head);
  line-height: calc(28 * var(--ns) * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc__job {
  grid-area: job;
  min-height: calc(16.8 * var(--u));
  margin-top: calc(2 * var(--u));
  overflow: hidden;
  color: var(--t2);
  font-size: calc(14 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc__co { display: none; }
.vc__co[hidden],
.vc__sep[hidden] { display: none !important; }
.vc__lines { grid-area: lines; display: grid; gap: calc(3 * var(--u)); margin-top: calc(10 * var(--u)); min-width: 0; }
.vc__line {
  overflow: hidden;
  color: var(--t1);
  font-size: calc(12.5 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc__ico {
  display: inline-block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-right: calc(6 * var(--u));
  vertical-align: calc(-1.6 * var(--u));
  fill: var(--ti);
}
.vc__ids {
  grid-area: ids;
  min-height: calc(13.2 * var(--u));
  margin-top: calc(6 * var(--u));
  overflow: hidden;
  color: var(--t3);
  font-size: calc(11 * var(--u));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-strong);
  letter-spacing: calc(0.5 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Układ wyśrodkowany */
.vc[data-layout="centered"] .vc__face {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  grid-template-areas: "." "av" "name" "job" "lines" "ids" ".";
  justify-items: center;
  row-gap: calc(8 * var(--u));
  padding-block: calc(16 * var(--u));
  text-align: center;
}
.vc[data-layout="centered"] .vc__company { display: none; }
.vc[data-layout="centered"] .vc__avatar { justify-self: center; }
.vc[data-layout="centered"] .vc__avatar > * { justify-self: center; }
.vc[data-layout="centered"] .vc__photo { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.vc[data-layout="centered"] .vc__name { max-width: 100%; }
.vc[data-layout="centered"] .vc__job { max-width: 100%; margin-top: calc(-6 * var(--u)); }
.vc[data-layout="centered"] .vc__co { display: inline; }
.vc[data-layout="centered"] .vc__lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(3 * var(--u)) calc(14 * var(--u));
  max-width: 100%;
  margin-top: 0;
}
.vc[data-layout="centered"] .vc__ids { max-width: 100%; margin-top: 0; }

/* Kreator: płynne przejścia tekstu, zdjęcia i inicjałów */
.vc--live .vc__company,
.vc--live .vc__name,
.vc--live .vc__job,
.vc--live .vc__line,
.vc--live .vc__ids { transition: color 0.45s var(--ease-out); }
.vc--live .vc__ico { transition: fill 0.45s var(--ease-out); }
.vc--live .vc__mono { transition: opacity 0.35s ease, scale 0.45s var(--ease-out), background-color 0.45s var(--ease-out); }
.vc--live .vc__photo { transition: opacity 0.35s ease, scale 0.45s var(--ease-out), border-radius 0.35s var(--ease-out), width 0.35s var(--ease-out), height 0.35s var(--ease-out); }
.vc--live[data-photo="mono"] .vc__photo,
.vc--live[data-photo="logo"] .vc__mono { display: block; opacity: 0; scale: 0.6; pointer-events: none; }
.vc--live[data-photo="logo"] .vc__mono { display: grid; }
.vc--live .vc__face.is-swapping .vc__company,
.vc--live .vc__face.is-swapping .vc__name,
.vc--live .vc__face.is-swapping .vc__job,
.vc--live .vc__face.is-swapping .vc__lines,
.vc--live .vc__face.is-swapping .vc__ids,
.vc--live .vc__face.is-swapping .vc__mono { animation: font-swap 0.32s var(--ease-out); }
@keyframes font-swap { from { opacity: 0.35; filter: blur(2px); } }

/* Odblask przy pochyleniu karty */
.vc__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(60% 80% at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / 0.42), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: var(--go, 0);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* ---------- 8. iPhone i interfejs aplikacji ---------------------------------
   Ekran 402 × 874 pt (iPhone 17), ramka 11 pt. Wszystko w środku liczone
   w punktach ekranu (--pt), więc makieta skaluje się bez rozmycia. */

.phone {
  --phone-w: 300px;
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 424 / 896;
  container-type: inline-size;
  border-radius: 16.3% / 7.7%;
  background: linear-gradient(150deg, #5d5d63 0%, #2c2c30 18%, #19191b 50%, #2c2c30 82%, #55555b 100%);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.25),
    0 2px 4px rgb(0 0 0 / 0.08),
    0 32px 64px -24px rgb(0 0 0 / 0.42),
    0 16px 32px -16px rgb(0 0 0 / 0.22);
}
/* Czarna ramka wokół ekranu */
.phone::before {
  content: "";
  position: absolute;
  inset: 0.71% / 0.34%;
  border-radius: 15.7% / 7.43%;
  background: #050506;
}
/* Przyciski głośności (lewa krawędź) */
.phone::after {
  content: "";
  position: absolute;
  top: 24%;
  left: -0.75%;
  width: 0.9%;
  height: 7%;
  border-radius: 2px 0 0 2px;
  background: #3a3a3e;
  box-shadow: 0 17cqw 0 #3a3a3e;
}
@media all {
  .phone {
    background: linear-gradient(150deg, #8a8a92 0%, #3c3c41 18%, #222225 50%, #3c3c41 82%, #7c7c84 100%);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.06),
      0 32px 64px -24px rgb(0 0 0 / 0.9);
  }
}

.phone__screen {
  --pt: calc(100cqw / 424);
  --px: var(--pt);
  position: absolute;
  inset: 1.228% 2.594%;
  overflow: hidden;
  border-radius: 14.4% / 6.65%;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--font);
  font-size: calc(17 * var(--pt));
  line-height: 1.25;
  letter-spacing: calc(-0.2 * var(--pt));
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.phone__screen svg { fill: currentColor; }

/* Pasek stanu, Dynamic Island, wskaźnik ekranu głównego */
.ios-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(56 * var(--pt));
  padding: calc(6 * var(--pt)) calc(32 * var(--pt)) 0 calc(52 * var(--pt));
  color: var(--a-text);
}
.ios-status__time { font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: calc(-0.4 * var(--pt)); }
.ios-status__icons { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.ios-status__icons svg { width: calc(17 * var(--pt)); height: calc(12 * var(--pt)); }
.ios-status__icons .ios-status__battery { width: calc(27 * var(--pt)); height: calc(13 * var(--pt)); color: var(--a-text); }
.ios-island {
  position: absolute;
  top: calc(11 * var(--pt));
  left: 50%;
  z-index: 4;
  width: calc(124 * var(--pt));
  height: calc(36 * var(--pt));
  translate: -50% 0;
  border-radius: 999px;
  background: #000000;
}
.ios-home {
  position: absolute;
  bottom: calc(8 * var(--pt));
  left: 50%;
  z-index: 4;
  width: calc(140 * var(--pt));
  height: calc(5 * var(--pt));
  translate: -50% 0;
  border-radius: 999px;
  background: var(--a-text);
}

/* Pasek nawigacji iOS 26: przyciski w szklanych kapsułach */
.ios-nav {
  position: absolute;
  top: calc(56 * var(--pt));
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(8 * var(--pt));
  height: calc(56 * var(--pt));
  padding: 0 calc(16 * var(--pt));
}
.ios-nav > :first-child { justify-self: start; }
.ios-nav > :last-child { justify-self: end; }
.ios-nav__title { font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: calc(-0.4 * var(--pt)); white-space: nowrap; }
.glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--pt));
  min-width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  border-radius: 999px;
  background: var(--a-glass);
  box-shadow:
    inset 0 calc(1 * var(--pt)) 0 var(--a-glass-edge),
    0 0 0 calc(0.5 * var(--pt)) rgb(0 0 0 / 0.06),
    0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgb(0 0 0 / 0.08);
  color: var(--a-tint);
  font-size: calc(17 * var(--pt));
  white-space: nowrap;
}
.glass--bold { font-weight: 600; }
.glass--round { width: calc(44 * var(--pt)); padding: 0; color: var(--a-text); }
.glass svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.glass--pair svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.ios-avatar {
  display: grid;
  place-items: center;
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
  border-radius: 50%;
  background: var(--a-tint);
  color: #ffffff;
  font-size: calc(14 * var(--pt));
  font-weight: 700;
}

/* Treść ekranu */
.app__body {
  position: absolute;
  top: calc(112 * var(--pt));
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--pt));
  padding: calc(8 * var(--pt)) calc(16 * var(--pt)) 0;
}
.app__body--tight { gap: calc(12 * var(--pt)); }
.app__body--list { gap: calc(16 * var(--pt)); }
.app__body--org { gap: calc(22 * var(--pt)); padding-top: calc(4 * var(--pt)); }
.app__body > .vc { flex: none; }

.a-title { font-size: calc(22 * var(--pt)); font-weight: 700; letter-spacing: calc(-0.3 * var(--pt)); margin: 0 calc(2 * var(--pt)) calc(-4 * var(--pt)); }
.a-title span { margin-left: calc(8 * var(--pt)); color: var(--a-text2); font-weight: 500; }
.a-title--spaced { margin-top: calc(12 * var(--pt)); }

/* Panel z kodem QR (app/src/components/QrPanel.tsx) */
.a-qr {
  display: grid;
  justify-items: center;
  gap: calc(14 * var(--pt));
  padding: calc(22 * var(--pt)) calc(16 * var(--pt)) calc(18 * var(--pt));
  border-radius: calc(24 * var(--pt));
  background: var(--a-surface);
}
.a-qr__tile {
  display: block;
  padding: calc(12 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: #ffffff;
  box-shadow: 0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgb(0 0 0 / 0.06), 0 calc(8 * var(--pt)) calc(22 * var(--pt)) rgb(0 0 0 / 0.1);
}
.a-qr__tile img { width: calc(172 * var(--pt)); height: auto; }
.a-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  padding: calc(7 * var(--pt)) calc(14 * var(--pt));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  font-size: calc(14 * var(--pt));
  font-weight: 600;
}
.a-pill svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
@media all {
  .a-pill { background: color-mix(in srgb, var(--c) 28%, transparent); color: color-mix(in srgb, var(--c) 45%, #ffffff); }
}

.a-chips { display: flex; justify-content: center; gap: calc(10 * var(--pt)); margin-top: calc(-8 * var(--pt)); }
.a-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  min-height: calc(40 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  border-radius: 999px;
  background: var(--a-surface);
  font-size: calc(15 * var(--pt));
  font-weight: 500;
}
.a-chip svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: var(--a-tint); }

.a-stack { display: grid; gap: calc(10 * var(--pt)); }
.a-airdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--pt));
  height: calc(52 * var(--pt));
  border-radius: calc(14 * var(--pt));
  background: #0b63e5;
  color: #ffffff;
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}
.a-airdrop svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }

/* Przycisk główny aplikacji */
.a-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pt));
  min-height: calc(50 * var(--pt));
  border-radius: 999px;
  background: var(--a-text);
  color: var(--a-bg);
  font-size: calc(17 * var(--pt));
  font-weight: 500;
}
.a-btn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }

/* Grupy list (app/src/components/List.tsx) */
.a-section { display: grid; gap: calc(6 * var(--pt)); }
.a-section__title {
  margin: 0 calc(16 * var(--pt));
  color: var(--a-text2);
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  letter-spacing: calc(0.4 * var(--pt));
  text-transform: uppercase;
}
.a-group { display: block; overflow: hidden; border-radius: calc(14 * var(--pt)); background: var(--a-surface); }
.a-row {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--pt));
  min-height: calc(52 * var(--pt));
  padding: calc(10 * var(--pt)) calc(16 * var(--pt));
  font-size: calc(16 * var(--pt));
}
.a-row + .a-row { box-shadow: inset calc(52 * var(--pt)) calc(0.5 * var(--pt)) 0 var(--a-surface), inset 0 calc(0.5 * var(--pt)) 0 var(--a-sep); }
.a-row > svg { flex: none; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); color: var(--a-tint); }
.a-row small { display: block; margin-top: calc(2 * var(--pt)); color: var(--a-text2); font-size: calc(13 * var(--pt)); }

/* Przełącznik segmentowy */
.a-seg {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: calc(3 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: var(--a-chip);
}
.a-seg > span {
  display: grid;
  place-items: center;
  min-height: calc(36 * var(--pt));
  border-radius: calc(8 * var(--pt));
  color: var(--a-text2);
  font-size: calc(14 * var(--pt));
}
.a-seg > .is-on { background: var(--a-seg); color: var(--a-text); font-weight: 600; box-shadow: 0 calc(1 * var(--pt)) calc(3 * var(--pt)) rgb(0 0 0 / 0.15); }
.a-seg--in { margin: calc(12 * var(--pt)); }

/* Kolory w kółkach */
.a-swatches { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); padding: calc(12 * var(--pt)); }
.a-swatch {
  display: grid;
  place-items: center;
  width: calc(46 * var(--pt));
  height: calc(46 * var(--pt));
  border: calc(2 * var(--pt)) solid transparent;
  border-radius: 50%;
  background: var(--c) content-box;
  padding: calc(3 * var(--pt));
  box-shadow: inset 0 0 0 calc(3 * var(--pt)) var(--a-surface);
}
.a-swatch.is-on { border-color: var(--a-text); }
.a-swatch svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: #ffffff; }

/* Kod na pełnym ekranie (QrFullScreen.tsx) */
.a-full {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--pt));
  padding: 0 calc(28 * var(--pt));
  color: #0b0b0f;
}
.a-full__name { font-size: calc(26 * var(--pt)); font-weight: 700; }
.a-full__qr { width: calc(346 * var(--pt)); height: auto; }
.a-full__caption { color: #3a3a3c; font-size: calc(17 * var(--pt)); }

/* Karta kontaktu iOS po zeskanowaniu kodu */
.a-contact {
  position: absolute;
  top: calc(112 * var(--pt));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(16 * var(--pt));
}
.a-contact__photo { width: calc(96 * var(--pt)); height: calc(96 * var(--pt)); border-radius: 50%; }
.a-contact__name { margin-top: calc(12 * var(--pt)); font-size: calc(28 * var(--pt)); font-weight: 600; letter-spacing: calc(-0.6 * var(--pt)); }
.a-contact__sub { margin-top: calc(2 * var(--pt)); color: var(--a-text2); font-size: calc(15 * var(--pt)); }
.a-contact__save {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: calc(50 * var(--pt));
  margin-top: calc(18 * var(--pt));
  border-radius: 999px;
  background: var(--a-tint);
  color: #ffffff;
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}
/* Ślad dotknięcia */
.a-contact__save.is-tapped::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22%;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  translate: 0 -50%;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  box-shadow: 0 0 0 calc(10 * var(--pt)) rgb(255 255 255 / 0.14);
}
.a-contact__fields { align-self: stretch; margin-top: calc(16 * var(--pt)); }
.a-field { display: grid; gap: calc(2 * var(--pt)); padding: calc(10 * var(--pt)) calc(16 * var(--pt)); font-size: calc(13 * var(--pt)); }
.a-field + .a-field { box-shadow: inset calc(16 * var(--pt)) calc(0.5 * var(--pt)) 0 var(--a-surface), inset 0 calc(0.5 * var(--pt)) 0 var(--a-sep); }
.a-field b { color: var(--a-tint); font-size: calc(17 * var(--pt)); font-weight: 400; }

/* Lista wizytówek i firma */
.a-org {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--pt));
  padding: calc(14 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: var(--a-surface);
}
.a-org img { width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: 26%; }
.a-org__text { display: grid; flex: 1; gap: calc(2 * var(--pt)); }
.a-org__text b { font-size: calc(17 * var(--pt)); font-weight: 600; }
.a-org__text small { color: var(--a-text2); font-size: calc(14 * var(--pt)); }
.a-org__chev { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); color: var(--a-text2); }

.a-orghero { display: grid; justify-items: center; gap: calc(6 * var(--pt)); padding-top: calc(4 * var(--pt)); }
.a-orghero img { width: calc(76 * var(--pt)); height: calc(76 * var(--pt)); border-radius: 26%; }
.a-orghero b { margin-top: calc(6 * var(--pt)); font-size: calc(24 * var(--pt)); font-weight: 700; }
.a-orghero small { color: var(--a-text2); font-size: calc(15 * var(--pt)); }

.a-emp { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(10 * var(--pt)) calc(12 * var(--pt)) calc(10 * var(--pt)) calc(14 * var(--pt)); }
.a-emp + .a-emp { box-shadow: inset calc(52 * var(--pt)) calc(0.5 * var(--pt)) 0 var(--a-surface), inset 0 calc(0.5 * var(--pt)) 0 var(--a-sep); }
.a-emp img { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; }
.a-emp__text { display: grid; flex: 1; min-width: 0; gap: calc(1 * var(--pt)); }
.a-emp__text b { font-size: calc(16 * var(--pt)); font-weight: 600; }
.a-emp__text small { overflow: hidden; color: var(--a-text2); font-size: calc(13 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; }
.a-emp__send { display: grid; flex: none; place-items: center; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; background: var(--a-chip); color: var(--a-tint); }
.a-emp__send svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }

/* Ekran Profil: konto, „Twój plan”, licznik wizytówek (app/src/app/settings.tsx) */
.app__body--profile { gap: calc(26 * var(--pt)); }
.a-account {
  position: relative;
  display: grid;
  gap: calc(16 * var(--pt));
  padding: calc(22 * var(--pt));
  overflow: hidden;
  border-radius: calc(24 * var(--pt));
  background: linear-gradient(to bottom right, #4f46e5, #3730a3);
  color: #ffffff;
}
.a-account::before,
.a-account::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.a-account::before { top: calc(-80 * var(--pt)); right: calc(-60 * var(--pt)); width: calc(200 * var(--pt)); height: calc(200 * var(--pt)); }
.a-account::after { bottom: calc(-60 * var(--pt)); left: calc(-40 * var(--pt)); width: calc(140 * var(--pt)); height: calc(140 * var(--pt)); }
.a-account > * { position: relative; }
.a-account__row { display: flex; align-items: center; gap: calc(14 * var(--pt)); }
.a-account__avatar { display: grid; flex: none; place-items: center; width: calc(68 * var(--pt)); height: calc(68 * var(--pt)); border-radius: 50%; background: #ffffff; color: #4f46e5; font-size: calc(30 * var(--pt)); font-weight: 800; }
.a-account__text { display: grid; justify-items: start; gap: calc(2 * var(--pt)); }
.a-account__text b { font-size: calc(22 * var(--pt)); font-weight: 700; }
.a-account__text small { color: rgb(255 255 255 / 0.85); font-size: calc(15 * var(--pt)); }
.a-wpill {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--pt));
  margin-top: calc(6 * var(--pt));
  padding: calc(5 * var(--pt)) calc(10 * var(--pt));
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  font-size: calc(13 * var(--pt));
  font-weight: 600;
}
.a-wpill svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.a-account__divider { height: calc(0.5 * var(--pt)); background: rgb(255 255 255 / 0.3); }
.a-account__sync { display: flex; align-items: center; gap: calc(10 * var(--pt)); font-size: calc(15 * var(--pt)); }
.a-account__sync > svg { flex: none; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.a-account__sync > span:first-of-type { flex: 1; }
.a-account__sync .a-wpill { margin-top: 0; }
.a-section--plan { gap: calc(8 * var(--pt)); }
.a-plan { display: grid; gap: calc(16 * var(--pt)); padding: calc(16 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--a-surface); }
.a-plan__head { display: flex; align-items: center; gap: calc(14 * var(--pt)); }
.a-plan__icon { display: grid; flex: none; place-items: center; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: calc(14 * var(--pt)); background: color-mix(in srgb, var(--a-tint) 14%, transparent); color: var(--a-tint); }
.a-plan__icon svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.a-plan__text { display: grid; gap: calc(3 * var(--pt)); }
.a-plan__text b { font-size: calc(19 * var(--pt)); font-weight: 700; }
.a-plan__text small { color: var(--a-text2); font-size: calc(14 * var(--pt)); line-height: 1.35; }
.a-plan__trial { display: block; height: calc(6 * var(--pt)); margin-top: calc(-4 * var(--pt)); overflow: hidden; border-radius: 999px; background: var(--a-chip); }
.a-plan__trial i { display: block; width: 3%; height: 100%; border-radius: inherit; background: var(--a-tint); }
.a-pool { display: grid; gap: calc(12 * var(--pt)); padding: calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--a-bg); }
.a-pool__head { display: flex; align-items: center; gap: calc(10 * var(--pt)); }
.a-pool__icon { display: grid; flex: none; place-items: center; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: calc(10 * var(--pt)); background: color-mix(in srgb, var(--a-tint) 14%, transparent); color: var(--a-tint); }
.a-pool__icon svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.a-pool__head b { flex: 1; font-size: calc(16 * var(--pt)); font-weight: 600; }
.a-pool__value { font-size: calc(24 * var(--pt)); font-variant-numeric: tabular-nums; font-weight: 800; }
.a-pool__value small { color: var(--a-text2); font-size: calc(16 * var(--pt)); font-weight: 600; }
.a-pool__chev { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); color: var(--a-ph); }
.a-pool__track { display: flex; gap: calc(2 * var(--pt)); height: calc(8 * var(--pt)); overflow: hidden; border-radius: 999px; background: var(--a-chip); }
.a-pool__track i { border-radius: 999px; }
.a-pool__own { flex: 2; background: var(--a-tint); }
.a-pool__company { flex: 3; background: var(--a-company); }
.a-pool__legend { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pt)) calc(14 * var(--pt)); color: var(--a-text2); font-size: calc(13 * var(--pt)); font-weight: 500; }
.a-pool__legend > span { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); }
.a-pool__dot { width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 50%; }
.a-pool__dot--own { background: var(--a-tint); }
.a-pool__dot--company { background: var(--a-company); }
.a-pool__caption { color: var(--a-text2); font-size: calc(13 * var(--pt)); font-weight: 500; }
.a-plan__manage { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); color: var(--a-tint); font-size: calc(15 * var(--pt)); font-weight: 600; }
.a-plan__manage svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }

/* Pasek adresu Safari (iOS 26) */
.safari-bar {
  position: absolute;
  left: calc(14 * var(--pt));
  right: calc(14 * var(--pt));
  bottom: calc(26 * var(--pt));
  z-index: 3;
  display: grid;
  place-items: center;
  height: calc(50 * var(--pt));
  border-radius: 999px;
  background: var(--a-glass);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 calc(1 * var(--pt)) 0 var(--a-glass-edge), 0 calc(4 * var(--pt)) calc(18 * var(--pt)) rgb(0 0 0 / 0.14);
  font-size: calc(16 * var(--pt));
  font-weight: 500;
}

/* ---------- 9. Sekcje ------------------------------------------------------- */

/* --- Hero --- */
.hero { position: relative; overflow: clip; padding-block: clamp(24px, 3vw, 56px) clamp(40px, 4vw, 80px); }
.hero__glow {
  position: absolute;
  inset: -20% -10% -10%;
  pointer-events: none;
  background:
    radial-gradient(40% 46% at 74% 46%, rgb(99 102 241 / 0.14), transparent 72%);
}
@media all {
  .hero__glow {
    background:
      radial-gradient(40% 46% at 74% 46%, rgb(99 102 241 / 0.2), transparent 72%);
  }
}
.hero__grid { position: relative; display: grid; gap: 64px; align-items: center; }
.hero__copy { max-width: 620px; margin-inline: auto; text-align: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 1rem; font-weight: 600; }
.hero__kicker img { border-radius: 22.5%; }
.hero__title {
  margin-top: 24px;
  font-size: clamp(2.75rem, 1.35rem + 5.6vw, 5.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero__title-accent { display: block; padding-bottom: 0.06em; color: var(--brand-ink); }
.hero__lead {
  max-width: 34em;
  margin: 22px auto 0;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}
.hero .stores__list { justify-content: center; }
.hero__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 22px;
  color: var(--text-2);
  font-size: 1rem;
}
.hero__price .icon { color: var(--brand-ink); }
.hero__price strong { color: var(--text); font-weight: 600; }

.hero__stage {
  --card-w: clamp(212px, 40vw, 300px);
  position: relative;
  width: 100%;
  max-width: 640px;
  height: clamp(480px, 30vw + 340px, 660px);
  margin-inline: auto;
}
.hero__phone { position: absolute; inset: 0; z-index: 4; --phone-w: clamp(236px, 18vw + 170px, 316px); margin: auto; }
.hero__card { position: absolute; z-index: 1; width: var(--card-w); }
.hero__card--a { top: 7%; left: -4%; rotate: -11deg; }
.hero__card--b { top: 34%; right: -6%; z-index: 2; rotate: 8deg; }
.hero__card--c { bottom: 7%; left: 2%; z-index: 3; rotate: -4deg; }
.hero__phone .app__body { gap: calc(22 * var(--pt)); }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; }
  .hero__copy { margin: 0; text-align: left; }
  .hero__lead { margin-left: 0; }
  .hero .stores__list { justify-content: flex-start; }
  .hero__stage { margin-right: -24px; }
}

/* --- Jak to działa --- */
.steps__list { display: grid; gap: 14px; list-style: none; }
.step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--tile);
}
.step__text { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 22px 24px 24px; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}
.step h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; }
.step p { grid-column: 1 / -1; margin-top: 6px; color: var(--text-2); font-size: 1rem; }

@media (max-width: 719px) {
  .step__text { padding: 18px 20px 20px; }
  .step h3 { font-size: 1.25rem; }
  .step p { font-size: 0.9375rem; }
}
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Karuzela na telefonie (funkcje): przewijana w bok, z widocznym brzegiem następnej karty */
.scroller { scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }

/* --- Kreator --- */
.creator__grid { display: grid; grid-template-areas: "preview" "fields" "panel"; gap: 20px; align-items: start; }
.creator__preview { grid-area: preview; }
.creator__fields { grid-area: fields; padding: 18px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-2); }
.creator__panel { grid-area: panel; }
.creator__preview { position: sticky; top: var(--nav-h); z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 16px; background: color-mix(in srgb, var(--bg-alt) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.creator__stage { position: relative; max-width: 560px; margin-inline: auto; }
.creator__glow {
  position: absolute;
  inset: 18% 8% -8%;
  border-radius: 50%;
  background: var(--c, #4338ca);
  filter: blur(56px);
  opacity: 0.18;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.creator__stage { transition: --c 0.5s var(--ease-out); }
.tilt { position: relative; perspective: 1100px; }
.tilt > .vc { transform-style: preserve-3d; will-change: transform; }
.creator__summary {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.creator__note { display: none; margin-top: 10px; color: var(--text-3); font-size: 0.875rem; text-align: center; }

@media (min-width: 1024px) {
  .creator__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "preview panel" "fields panel"; gap: 24px 56px; }
  .creator__fields { align-self: start; max-width: 560px; width: 100%; justify-self: center; }
  .creator__preview { position: static; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .creator__sticky { padding-top: 8px; }
  .creator__summary { display: flex; }
  .creator__note { display: block; }
}

/* Panel z kontrolkami kreatora */
.panel {
  padding: clamp(18px, 1.5vw + 8px, 28px);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.ctrl { min-width: 0; margin: 0; padding: 0; border: 0; }
.ctrl + .ctrl { margin-top: 20px; }
.ctrl[hidden] { display: none; }

/* Wgrywanie własnego zdjęcia – plik zostaje w przeglądarce */
.upload {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: var(--tile-2);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.upload__thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  color: var(--brand-ink);
}
.upload__thumb--wide { width: 76px; height: 48px; border-radius: 8px; }
.upload__thumb svg { width: 24px; height: 24px; }
.upload__thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload__text { display: grid; gap: 2px; min-width: 0; }
.upload__text b { color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.upload__text span { color: var(--text-2); font-size: 0.8125rem; line-height: 1.35; }
.upload__input:focus-visible + .upload { outline: 3px solid var(--focus); outline-offset: 2px; }
.upload__error { margin-top: 8px; color: var(--bad); font-size: 0.875rem; }
.upload__error[hidden] { display: none; }
.seg--dim { margin-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .upload:hover { background: color-mix(in srgb, var(--tile-2) 82%, var(--brand)); }
}
.ctrl__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ctrl__value { color: var(--text); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.ctrl__hint { margin-top: 10px; color: var(--text-2); font-size: 0.875rem; }

/* Pola tekstowe */
.fields { overflow: hidden; border-radius: var(--radius-s); background: var(--tile); }
.field { display: grid; gap: 1px; padding: 9px 16px 8px; cursor: text; transition: box-shadow 0.2s ease; }
.field + .field { box-shadow: inset 0 1px 0 var(--line); }
.field__label { color: var(--text-2); font-size: 0.8125rem; font-weight: 500; }
.field__input {
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.0625rem;
  outline: none;
}
.fields--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fields--2 .field--wide { grid-column: 1 / -1; }
.fields--2 .field:nth-child(3) { box-shadow: inset 0 1px 0 var(--line), inset 1px 0 0 var(--line); }
.field:focus-within { border-radius: var(--radius-s); box-shadow: inset 0 0 0 2px var(--focus); }

/* Przełącznik segmentowy (radio) */
.seg {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--tile-2);
}
.seg__opt { position: relative; z-index: 1; display: block; }
.seg__opt input,
.tile input,
.swatch input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg__opt span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.seg__opt input:checked + span { background: var(--brand); box-shadow: 0 2px 8px rgb(79 70 229 / 0.3); color: #ffffff; font-weight: 600; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg__opt input:disabled { cursor: not-allowed; }
.seg__opt input:disabled + span { opacity: 0.45; }
/* Z JS: suwak przesuwa się pod wybraną opcją */
.seg__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  width: var(--w, 0);
  translate: var(--x, 0) 0;
  border-radius: 9px;
  background: var(--brand);
  box-shadow: 0 2px 8px rgb(79 70 229 / 0.3);
  transition: translate 0.38s var(--ease-out), width 0.38s var(--ease-out);
}
.seg:not(.is-placed) .seg__thumb { opacity: 0; }
.seg.is-placed .seg__opt input:checked + span { background: transparent; box-shadow: none; }
.seg--js.is-disabled .seg__thumb { opacity: 0.45; }

/* Kolory */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; display: block; padding: 3px; border-radius: 50%; }
.swatch__dot {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition: transform 0.2s var(--ease-out);
}

.swatch input:checked + .swatch__dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.swatch input:checked + .swatch__dot::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 15px;
  width: 7px;
  height: 13px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
}
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--focus); outline-offset: 5px; }
.swatch::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity 0.15s ease, translate 0.15s var(--ease-out);
}
.swatch:has(input:focus-visible)::after { opacity: 1; translate: -50% 0; }
@media (hover: hover) and (pointer: fine) {
  .swatch:hover::after { opacity: 1; translate: -50% 0; }
  .swatch:hover .swatch__dot { transform: scale(1.06); }
}

/* Kafelki: czcionki, wzory, układy */
.tiles { display: grid; gap: 10px; }
.tiles--fonts { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tile--font .tile__box { padding: 8px 2px; }
.tile--font::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity 0.15s ease, translate 0.15s var(--ease-out);
}
.tile--font:has(input:focus-visible)::after { opacity: 1; translate: -50% 0; }
@media (hover: hover) and (pointer: fine) {
  .tile--font:hover::after { opacity: 1; translate: -50% 0; }
}
.tile--font input:checked + .tile__box::after { top: 3px; right: 3px; width: 14px; height: 14px; background-size: 10px; }
.tiles--patterns { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.tiles--layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: block; }
.tile__box {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  height: 100%;
  padding: 10px 6px 8px;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  background: var(--tile);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.16s var(--ease-out);
}
.tile__label { color: var(--text-2); font-size: 0.8125rem; font-weight: 500; text-align: center; }
.tile input:checked + .tile__box { border-color: var(--brand-ink); background: var(--surface); }
.tile input:checked + .tile__box .tile__label { color: var(--brand-ink); font-weight: 700; }
.tile input:checked + .tile__box::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 2px var(--surface);
}

.tile input:focus-visible + .tile__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile:active .tile__box { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover input:not(:checked) + .tile__box { background: var(--tile-2); }
}

.tile__aa { height: 34px; color: var(--text); font-family: var(--f-head); font-size: calc(26px * var(--ns)); font-weight: var(--w-head); line-height: 34px; }
.tile__aa[data-font="system"]    { --f-head: var(--font-system); --w-head: 700; --ns: 1; }
.tile__aa[data-font="modern"]    { --f-head: var(--ff-modern); --w-head: 700; --ns: 0.94; }
.tile__aa[data-font="elegant"]   { --f-head: var(--ff-elegant); --w-head: 700; --ns: 1.06; }
.tile__aa[data-font="classic"]   { --f-head: var(--ff-classic); --w-head: 700; --ns: 1; }
.tile__aa[data-font="rounded"]   { --f-head: var(--ff-rounded); --w-head: 800; --ns: 1; }
.tile__aa[data-font="tech"]      { --f-head: var(--ff-tech); --w-head: 700; --ns: 0.98; }
.tile__aa[data-font="signature"] { --f-head: var(--ff-signature); --w-head: 700; --ns: 1.4; }

/* Miniatury wzorów – kolor i styl bieżącej karty, wzory w punktach jak w aplikacji */
.mini {
  --u: 1px;
  --t-ink: #ffffff;
  position: relative;
  display: block;
  width: 60px;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(to bottom right, var(--c-from), var(--c-to));
  transition: --c 0.5s var(--ease-out), --c-from 0.5s var(--ease-out), --c-to 0.5s var(--ease-out);
}
[data-style="solid"] > .tile > .tile__box > .mini { background: var(--c); }
[data-style="light"] > .tile > .tile__box > .mini { background: #ffffff; box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.mini::before,
.mini::after { content: ""; position: absolute; }
.tiles--patterns { --ink-l: rgb(255 255 255 / 0.09); --ink-d: rgb(255 255 255 / 0.18); --ink-g: rgb(255 255 255 / 0.1); --glow-1: rgb(255 255 255 / 0.1); --glow-2: rgb(255 255 255 / 0.06); }
.tiles--patterns[data-style="light"] {
  --ink-l: color-mix(in srgb, var(--c) 12%, transparent);
  --ink-d: color-mix(in srgb, var(--c) 22%, transparent);
  --ink-g: color-mix(in srgb, var(--c) 12%, transparent);
  --glow-1: color-mix(in srgb, var(--c) 7%, transparent);
  --glow-2: color-mix(in srgb, var(--c) 5%, transparent);
}
.mini[data-pattern="circles"]::before { top: -140px; right: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--glow-1); }
.mini[data-pattern="circles"]::after { right: 40px; bottom: -90px; width: 160px; height: 160px; border-radius: 50%; background: var(--glow-2); }
.mini[data-pattern="lines"]::before { inset: 0; background: repeating-linear-gradient(135deg, var(--ink-l) 0 1.2px, transparent 1.2px 11px); }
.mini[data-pattern="dots"]::before { inset: 0; background: radial-gradient(circle, var(--ink-d) 1.3px, transparent 1.9px) 0 0 / 14px 14px; }
.mini[data-pattern="grid"]::before { inset: 0; background: linear-gradient(var(--ink-g) 1px, transparent 0) 0 0 / 20px 20px, linear-gradient(90deg, var(--ink-g) 1px, transparent 0) 0 0 / 20px 20px; }

/* --- Funkcje (bento) --- */
.bento { display: grid; gap: 20px; }
.feat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.feat__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 160px;
  overflow: hidden;
  background: radial-gradient(80% 70% at 50% 100%, var(--brand-soft), transparent 70%);
}
.feat__text { padding: 18px 22px 22px; }
.feat h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; }
.feat p { margin-top: 6px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 899px) {
  .features .scroller {
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .bento { display: flex; gap: 14px; width: max-content; padding-inline: var(--gutter); }
  .feat { width: min(78vw, 320px); scroll-snap-align: start; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Przepustka Wallet (server/src/apple-pass.js + pass-art.js): tło = kolor karty przyciemniony o 38% */
.feat__art--wallet {
  background: radial-gradient(70% 70% at 50% 110%, color-mix(in srgb, #4338ca 18%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.feat__art--wallet .pass { width: min(250px, 86%); font-size: 12px; }
.feat__art--wallet .pass__hf { font-size: 12px; }
.feat__art--wallet .pass__org { font-size: 14px; }
.feat__art--wallet .pass__name { font-size: 20px; }
.feat__art--wallet .pass__strip { height: 68px; }
.feat__art--wallet .pass__fields { gap: 12px; font-size: 12.5px; }
.feat__art--wallet .pass__photo img { width: 46px; height: 46px; }
.pass {
  --pass-bg: color-mix(in srgb, var(--c) 62%, #000000);
  --pass-label: color-mix(in srgb, var(--c) 28%, #ffffff);
  position: absolute;
  top: 58px;
  left: 50%;
  width: 280px;
  translate: -50% 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--pass-bg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 24px 48px -16px rgb(0 0 0 / 0.45);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
}
.pass--stack1 { top: 14px; height: 110px; filter: brightness(0.92); }
.pass--stack2 { top: 44px; height: 110px; filter: brightness(0.96); }
.pass--front { top: 74px; }
.pass__head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; }
.pass__head img { border-radius: 5px; }
.pass__org { flex: 1; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pass__hf { display: grid; justify-items: end; font-size: 14px; font-weight: 500; }
.pass small { display: block; color: var(--pass-label); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pass__strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 14px;
  background:
    radial-gradient(60% 100% at 30% 50%, color-mix(in srgb, var(--c) 82%, #ffffff), transparent 70%),
    radial-gradient(34% 70% at 82% 50%, rgb(255 255 255 / 0.14), transparent 70%);
}
.pass__name { font-size: 23px; font-weight: 400; letter-spacing: -0.02em; }
.pass__name small { margin-bottom: 2px; color: rgb(255 255 255 / 0.88); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pass__photo { position: relative; }
.pass__photo::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.2px rgb(255 255 255 / 0.2), 0 0 0 13px rgb(255 255 255 / 0), 0 0 0 14.2px rgb(255 255 255 / 0.12);
}
.pass__photo img { width: 52px; height: 52px; border: 2.5px solid rgb(255 255 255 / 0.9); border-radius: 50%; }
.pass__fields { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
.pass__code { display: grid; justify-items: center; gap: 6px; padding: 2px 0 14px; }
.pass__qr { padding: 6px; border-radius: 6px; background: #ffffff; }
.pass__qr img { width: 64px; height: 64px; }
.pass__code small { color: rgb(255 255 255 / 0.88); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Mała przeglądarka */
.mini-browser {
  position: absolute;
  top: 24px;
  width: min(420px, 88%);
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line-2);
}
.mini-browser__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; background: var(--tile); box-shadow: inset 0 -1px 0 var(--line); }
.mini-browser__dots { display: flex; gap: 6px; }
.mini-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mini-browser__dots i:nth-child(2) { background: #febc2e; }
.mini-browser__dots i:nth-child(3) { background: #28c840; }
.mini-browser__url { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 5px; height: 24px; border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12px; box-shadow: 0 0 0 1px var(--line); }
.mini-browser__url svg { width: 10px; height: 10px; }
.mini-browser__view {
  display: grid;
  gap: 10px;
  padding: 14px 12% 20px;
  background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, #4338ca 30%, transparent), transparent 72%), var(--bg-alt);
}
.mini-browser__save { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; background: #4338ca; color: #ffffff; font-size: 13px; font-weight: 600; }
.mini-browser__save svg { width: 15px; height: 15px; }
.mini-browser__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-browser__btn { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 9px; background: #000000; color: #ffffff; font-size: 11px; font-weight: 600; }
.mini-browser__btn svg { width: 13px; height: 13px; }
@media all { .mini-browser__btn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); } }

/* AirDrop */
.ripple { position: absolute; inset: 0; display: grid; place-items: center; }
.ripple i { position: absolute; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, #0b63e5 40%, transparent); }
.ripple i:nth-child(2) { width: 176px; height: 176px; opacity: 0.6; }
.ripple i:nth-child(3) { width: 250px; height: 250px; opacity: 0.3; }
.feat__art--airdrop { background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, #0b63e5 14%, transparent), transparent 70%); }
.airdrop-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
}
.airdrop-card img { border-radius: 50%; }
.airdrop-card img { width: 40px; height: 40px; }
.airdrop-card b { display: block; font-size: 14px; }
.airdrop-card small { color: var(--text-2); font-size: 12px; }
.airdrop-card__btn { margin-left: 4px; padding: 6px 12px; border-radius: 999px; background: #0b63e5; color: #ffffff; font-size: 14px; font-weight: 600; }

/* NIP, REGON, KRS */
.feat__art--ids { align-content: center; justify-items: center; gap: 8px; padding: 0 18px; }
.idrow {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 8px;
  width: min(280px, 100%);
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.idrow small { color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.idrow b { font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: 0.02em; }
.idrow__ok svg { width: 22px; height: 22px; color: var(--ok); }
.idrow--err { box-shadow: 0 0 0 2px var(--bad); }
.idrow--err b i { color: var(--brand-ink); font-style: normal; font-weight: 300; animation: caret 1.1s steps(1) infinite; }
.idrow__msg { width: min(280px, 100%); padding-left: 14px; color: var(--bad); font-size: 12px; font-weight: 600; }
@keyframes caret { 50% { opacity: 0; } }

/* Udostępnianie */
.feat__art--share { padding: 0 18px; }
.share-list { --pt: 1px; --a-surface: var(--surface); --a-sep: var(--line-2); --a-tint: #2563eb; width: min(300px, 100%); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
@media all { .share-list { --a-tint: #60a5fa; } }
.share-list .a-row { min-height: 42px; padding-block: 8px; font-size: 14px; }

/* Konto */
.brandcard {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(280px, 88%);
  padding: 16px 14px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(to bottom right, #4f46e5, #3730a3);
  box-shadow: 0 20px 40px -16px rgb(55 48 163 / 0.55);
  color: #ffffff;
}
.brandcard::before,
.brandcard::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.brandcard::before { top: -80px; right: -60px; width: 200px; height: 200px; }
.brandcard::after { bottom: -60px; left: -40px; width: 140px; height: 140px; }
.brandcard__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ffffff; color: #4f46e5; }
.brandcard__icon svg { width: 22px; height: 22px; }
.brandcard__title { position: relative; font-size: 20px; font-weight: 800; }
.brandcard__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  border-radius: 11px;
  background: #ffffff;
  color: #000000;
  font-size: 11.5px;
  font-weight: 500;
}
.brandcard__btn svg { width: 16px; height: 16px; }
.brandcard__btn--google { box-shadow: inset 0 0 0 1px #747775; color: #1f1f1f; font-weight: 600; }

/* Tryb jasny i ciemny (ThemePicker.tsx) */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(320px, 100%); padding: 0 12px; }
.theme {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 2px 12px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.theme.is-on { border-color: #2563eb; }
@media all { .theme.is-on { border-color: #60a5fa; } }
.theme__phone { position: relative; width: 58px; height: 96px; overflow: hidden; border: 2.5px solid #8e8e96; border-radius: 12px; }
.tp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 5px; padding: 14px 6px 6px; background: #f2f2f7; }
.tp--dark { background: #000000; }
/* Automatyczny: ciemny ekran na prawej połowie */
.tp--half { clip-path: inset(0 0 0 50%); }
.tp__island { position: absolute; top: 4px; left: 50%; width: 16px; height: 5px; translate: -50% 0; border-radius: 3px; background: #1c1c1e; }
.tp--dark .tp__island { background: #3a3a3e; }
.tp__card { display: flex; flex: none; align-items: center; gap: 4px; height: 26px; padding: 0 5px; border-radius: 5px; background: #4f46e5; }
.tp__card::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ffffff; }
.tp__card::after { content: ""; flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.75); }
.tp__line { flex: none; height: 5px; border-radius: 3px; background: #d4d4dc; }
.tp--dark .tp__line { background: #3a3a3e; }
.tp__line--short { width: 60%; }
.theme__label { font-size: 11.5px; font-weight: 500; }
.theme.is-on .theme__label { color: #2563eb; font-weight: 700; }
@media all { .theme.is-on .theme__label { color: #60a5fa; } }
.theme__check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--surface); border-radius: 50%; background: #2563eb; color: #ffffff; }
.theme__check svg { width: 12px; height: 12px; }

/* Pełny ekran */
.fullqr {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 172px;
  padding: 14px 14px 12px;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 0 0 6px #111113, 0 0 0 7px #3a3a3e, 0 24px 48px -12px rgb(0 0 0 / 0.4);
  color: #0b0b0f;
}
.fullqr__name { font-size: 15px; font-weight: 700; }
.fullqr img { width: 104px; height: 104px; }
.fullqr__cap { color: #3a3a3c; font-size: 11px; }
.brightness { position: absolute; right: 22px; top: 50%; display: grid; justify-items: center; gap: 8px; translate: 0 -50%; color: #f59e0b; }
.brightness svg { width: 22px; height: 22px; }
.brightness__bar { position: relative; width: 8px; height: 110px; overflow: hidden; border-radius: 999px; background: var(--tile-2); }
.brightness__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top, #f59e0b, #fcd34d); }

/* --- Dla firm --- */
.biz__grid { display: grid; gap: 40px; align-items: center; }
.biz__copy .lead { margin-top: 14px; }

.biz__looks { margin-top: 26px; padding: 18px 20px; border-radius: var(--radius-l); background: var(--tile); }
.biz__looks-title { margin-bottom: 12px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.team__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-2); font-size: 0.875rem; }
.team__note .icon { color: var(--brand-ink); }

/* Telefon z ekranem firmy i talia wizytówek zespołu w jednym wyglądzie */
.biz__stage { position: relative; display: grid; justify-items: center; }
.biz__phone { position: relative; z-index: 1; --phone-w: clamp(184px, 12vw + 140px, 290px); }
.team__cards { position: relative; z-index: 2; width: min(280px, 66%); margin-top: -62%; aspect-ratio: 0.65; }
.team__cards .vc { position: absolute; left: 0; width: 100%; }
.team__cards .vc:nth-child(1) { top: 0; rotate: -4deg; }
.team__cards .vc:nth-child(2) { top: 29.5%; left: 5%; rotate: 3deg; }
.team__cards .vc:nth-child(3) { top: 59%; left: 1%; rotate: -1.5deg; }

@media (max-width: 1023px) {
  .biz__phone { display: none; }
  .team__cards { margin-top: 0; }
}
@media (min-width: 1024px) {
  .biz__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  .biz__stage { display: block; height: clamp(600px, 20vw + 330px, 640px); }
  .biz__phone { position: absolute; top: 0; left: 0; }
  .team__cards { position: absolute; top: 96px; right: 0; width: 54%; margin-top: 0; }
}

/* --- Cennik --- */

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 22px; }
.price__value { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }

.price__per { color: var(--text-2); font-size: 1.125rem; font-weight: 500; }
.checks { display: grid; gap: 10px; margin-top: 14px; list-style: none; }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.checks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); box-sizing: content-box; }

/* --- Pytania --- */
.faq__grid { display: grid; gap: 32px; }
.faq__contact { margin-top: 18px; color: var(--text-2); font-size: 1.0625rem; }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item:first-child { border-top: 1px solid var(--line-2); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 17px 4px;
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: solid var(--text-2);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.faq__item[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq__item summary:focus-visible { outline-offset: 2px; border-radius: 8px; }
.faq__a { overflow: hidden; }
.faq__a p { max-width: 64ch; padding: 0 4px 20px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }

.faq__grid { gap: 0; }
@media (min-width: 1024px) {
  .faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 14px; }
}

/* --- Końcowe wezwanie --- */
.cta { padding-top: clamp(24px, 2vw + 16px, 56px); }
.cta-card {
  position: relative;
  display: grid;
  gap: 40px;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 3vw + 12px, 60px);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #4f46e5, #3730a3);
  color: #ffffff;
}
.cta-card h2 { color: #ffffff; font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.cta-card__copy > p { margin-top: 16px; color: rgb(255 255 255 / 0.9); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); }
.stores--on-brand .stores__label { color: rgb(255 255 255 / 0.9); }
.cta-card__art { position: relative; min-height: 220px; }
@media (min-width: 720px) and (max-width: 959px) { .cta-card__art { margin-top: 40px; } }
@media (max-width: 719px) { .cta-card__art { display: none; } }
.cta-card__deck { position: absolute; inset: 0; display: grid; place-items: center; }
.cta-card__deck .vc { position: absolute; width: min(300px, 78%); }
.cta-card__deck .vc:nth-child(1) { translate: -14% -30%; rotate: -10deg; }
.cta-card__deck .vc:nth-child(2) { translate: 14% -6%; rotate: 7deg; }
.cta-card__deck .vc:nth-child(3) { translate: -4% 22%; rotate: -2deg; }
.cta-card__deck .vc__face { box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgb(15 10 70 / 0.45); }
@media (min-width: 960px) {
  .cta-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .cta-card__art { min-height: 280px; }
}

/* --- Stopka --- */
.footer { padding-block: 44px 32px; background: var(--bg-alt); color: var(--text-2); font-size: 0.9375rem; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand b { display: block; color: var(--text); font-size: 1.0625rem; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.footer__legal { display: grid; gap: 8px; padding-top: 24px; font-size: 0.8125rem; line-height: 1.6; }

/* ---------- 10. Ruch i preferencje ------------------------------------------ */

/* Pojawianie się przy przewijaniu – tylko elementy jeszcze niewidoczne */
[data-reveal] { transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.js [data-reveal].is-pending { opacity: 0; translate: 0 28px; }

/* Wejście hero */
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes float-in { from { opacity: 0; translate: 0 48px; } }
.hero__kicker,
.hero__lead,
.hero .stores,
.hero__price { animation: rise 0.6s var(--ease-out) both; }
.hero__lead { animation-delay: 0.08s; }
.hero .stores { animation-delay: 0.16s; }
.hero__price { animation-delay: 0.22s; }
.hero__phone { animation: float-in 0.6s var(--ease-out) 0.1s both; }
.hero__card { animation: float-in 0.6s var(--ease-out) both; }
.hero__card--a { animation-delay: 0.22s; }
.hero__card--b { animation-delay: 0.3s; }
.hero__card--c { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  [data-reveal] { transition: opacity 0.2s linear; }
  .js [data-reveal].is-pending { translate: none; }
  .vc, .mini { transition: none; }
  .seg__thumb, .switch__track::after, .vc__pat--all .vc__p, .vc__p::before, .vc__p::after { transition-property: opacity; }
  .idrow--err b i { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav__sheet, .creator__preview { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .creator__preview { background: var(--bg-alt); }
}

@media (prefers-contrast: more) {
  :root { --line: rgb(0 0 0 / 0.3); --line-2: rgb(0 0 0 / 0.45); --text-2: #3f3f46; }
  .panel, .feat, .step, .team { box-shadow: 0 0 0 1px var(--line-2); }
}

@media (forced-colors: active) {
  .hero__title-accent { color: CanvasText; background: none; }
  .seg__thumb { display: none; }
  .seg__opt input:checked + span { outline: 2px solid Highlight; }
}

/* ---------- 11. Styl strony: papier, grotesk i pastele ---------------------
   Jasna warstwa nad całą stroną: jeden krój (Schibsted Grotesk) – pogrubione, ciasne nagłówki i spokojny
   tekst, pigułki ze strzałką w zielonym kółku, obrysowane bloki i miękkie poświaty. */

body { font-weight: 400; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; }
em { font-style: normal; }

.section-head h2,
.biz__copy h2,
.faq__head h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.lead { font-weight: 400; letter-spacing: -0.01em; }
.lead strong { font-weight: 600; }

/* Strzałka w zielonym kółku – na końcu głównych przycisków */
:root {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.btn { font: 600 1rem/1 var(--font); letter-spacing: -0.01em; }
.btn--primary { gap: 14px; padding: 0 6px 0 22px; background: var(--sel-bg); color: var(--sel-fg); }
.btn--primary::before {
  content: "";
  order: 2;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green) var(--arrow) center / 17px no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.btn--sm.btn--primary { gap: 10px; padding: 0 4px 0 16px; }
.btn--sm.btn--primary::before { width: 28px; height: 28px; background-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #2c2c2c; }
  .btn--primary:hover::before { transform: rotate(-45deg); }
}

/* Nawigacja: logo po lewej, linki w białej kapsule na środku, przycisk po prawej. Pasek zlewa się ze stroną,
   po przewinięciu dostaje rozmycie i cienką linię. Aktualna sekcja: czarna pigułka, jak wybrana opcja w kreatorze. */
.nav { background: var(--bg); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); box-shadow: 0 1px 0 var(--line); }
.nav__brand { gap: 10px; font: 700 1.3125rem/1 var(--font); letter-spacing: -0.04em; }
.nav__brand img { width: 28px; height: 28px; }
.nav__links ul {
  position: relative;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(19 19 19 / 0.04), 0 10px 24px -18px rgb(19 19 19 / 0.35);
}
.nav__links a {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.nav__links a[aria-current] { background: var(--sel-bg); color: var(--sel-fg); }
/* Pigułka przesuwa się płynnie między linkami (site.js ustawia jej miejsce w zmiennych) */
.nav__links ul.has-pill a[aria-current] { background: transparent; }
.nav__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: 999px;
  background: var(--sel-bg);
  opacity: 0;
  translate: var(--pill-x, 0) 0;
  transition: translate 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.25s ease;
  pointer-events: none;
}
.nav__links ul.has-pill .nav__pill { opacity: 1; }
.nav__links ul.pill-instant .nav__pill { transition: opacity 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: var(--tile); color: var(--text); }
  .nav__links a[aria-current]:hover { background: var(--sel-bg); color: var(--sel-fg); }
  .nav__links ul.has-pill a[aria-current]:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__pill { transition: opacity 0.2s ease; }
}
/* Węższe okna: „Pobierz” bez „aplikację” i ciaśniejsze linki, żeby pasek się mieścił */
@media (min-width: 1080px) and (max-width: 1199px) {
  .nav__links a { padding: 0 11px; }
  .nav__cta-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.nav__cta.btn--primary { gap: 8px; min-height: 40px; padding: 0 16px 0 18px; font-size: 0.9375rem; }
.nav__cta.btn--primary::before { width: 16px; height: 16px; border-radius: 0; background: var(--arrow-light) center / 16px no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .nav__cta.btn--primary:hover::before { transform: translateX(3px); }
}
/* Linki na środku strony, a gdy brakuje miejsca (długie nazwy) – przesuwają się, zamiast wchodzić pod przycisk */
@media (min-width: 1080px) {
  .nav__inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 24px; }
  .nav__brand { justify-self: start; }
  .nav__cta { justify-self: end; }
}

/* Hero: pogrubiony tytuł z przygaszoną drugą linią. Poświata gaśnie przy górnej i dolnej krawędzi,
   więc nie widać jej granic pod paskiem ani nad następną sekcją. */
.hero__glow {
  inset: 0;
  background:
    radial-gradient(36% 44% at 72% 44%, rgb(141 221 141 / 0.13), transparent 70%),
    radial-gradient(30% 38% at 90% 74%, rgb(96 102 238 / 0.22), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
}
.hero__kicker { color: var(--text-2); font: 500 0.9375rem/1.2 var(--font); letter-spacing: -0.005em; text-wrap: balance; }
.hero__copy { width: 100%; max-width: 660px; container-type: inline-size; }
/* Wielkość tytułu zależy od szerokości kolumny – każde zdanie zawsze mieści się w jednej linii. Najdłuższe zdania mają
   ok. 9 em („Votre carte de visite.”), po włosku 10 em („Il tuo biglietto da visita.”) – stąd osobna skala. */
.hero__title {
  font-size: clamp(1.75rem, 10.5cqi, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
}
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hero__title-accent { color: var(--text-3); }
.hero__lead { font-weight: 400; }
.hero__price .icon { color: var(--ok); }
.hero__price strong { font-weight: 600; }
:lang(it) > .hero__title,
.hero__title:lang(it) { font-size: clamp(1.75rem, 9.4cqi, 4rem); }

/* Hero na telefonie: podpis w pigułce, krótszy opis, odznaki w jednym rzędzie (napis „Do pobrania…” powtarzał odznaki).
   Pod spodem grafika po przekątnej: bordowa wizytówka wystaje zza góry telefonu, miedziana leży przed jego dołem.
   Obie w całości na ekranie, a telefon zasłania tylko pusty brzeg tylnej karty – żaden wiersz tekstu nie jest ucięty. */
@media (max-width: 639px) {
  .hero { padding-block: 18px 12px; }
  .hero__grid { gap: 34px; }
  .hero__kicker {
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgb(19 19 19 / 0.25);
    color: var(--text);
    font-size: 0.8125rem;
    text-align: left;
  }
  .hero__kicker img { width: 22px; height: 22px; }
  .hero__title { margin-top: 20px; }
  .hero__lead { max-width: 30em; margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
  .hero .stores { margin-top: 24px; }
  .hero .stores__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero .stores__list { gap: 10px; margin-top: 0; }
  /* Ikona w wierszu tekstu: gdy dłuższy tekst (np. po ukraińsku) łamie się na dwie linie, ikona zostaje przy pierwszym słowie */
  .hero__price { display: block; margin-top: 16px; font-size: 0.9375rem; text-wrap: balance; }
  .hero__price .icon { display: inline-block; margin-right: 6px; vertical-align: -0.2em; }

  .hero__glow { background: radial-gradient(70% 28% at 50% 64%, rgb(96 102 238 / 0.16), transparent 70%); }
  /* Telefon zaczyna się na 84% wysokości tylnej karty – pod jej ostatnim wierszem także po obrocie o 6°. Przednia karta
     zaczyna się pod arkuszem z kodem QR i przyciskiem Apple Wallet (80,5% telefonu) z zapasem na obrót i ruch przy
     przewijaniu (podjeżdża o ok. 20 px) – zasłania tylko stos kart. */
  .hero__stage {
    --card-w: min(58vw, 260px);
    --card-h: calc(var(--card-w) / 1.586);
    --phone-w: min(60vw, 264px);
    --phone-h: calc(var(--phone-w) * 896 / 424);
    --phone-top: calc(var(--card-h) * 0.84);
    --front-top: calc(var(--phone-top) + var(--phone-h) * 0.865);
    height: calc(var(--front-top) + var(--card-h) + 28px);
    pointer-events: none;
  }
  .hero__phone { inset: var(--phone-top) 0 auto; --phone-w: inherit; margin: 0 auto; }
  .hero__card--b { top: 0; right: auto; left: calc(50% - var(--card-w) / 2 + 8vw); z-index: 1; rotate: 6deg; }
  .hero__card--a { top: var(--front-top); left: calc(50% - var(--card-w) / 2 - 10vw); z-index: 5; rotate: -5deg; }
  .hero__card--a .vc__face { box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(19 19 19 / 0.34); }
  /* Rząd „pełny ekran · NFC · Otwórz” i tak leży pod przednią kartą – bez niego wystaje spod niej tylko stos kart */
  .hero__phone .a-actions { display: none; }
  .hero__card--c { display: none; }
}
/* Pasek na wąskim telefonie: przy 320 px na przycisk „Pobierz” zostaje ok. 120 px, a „Télécharger” czy „Завантажити”
   z pełnym odstępem i strzałką mają 143–155 px i wypychały przycisk menu za ekran */
@media (max-width: 379px) {
  .nav__cta.btn--primary { gap: 6px; padding: 0 12px 0 14px; font-size: 0.875rem; }
}
@media (max-width: 359px) {
  .hero__kicker { font-size: 0.75rem; }
  .hero .badge { height: 42px; }
  .nav__cta.btn--primary { padding: 0 14px; }
  .nav__cta.btn--primary::before { display: none; }
}

/* Kroki: obrysowane bloki, numery w pastelowych kółkach */
.step { background: var(--surface); border: 1px solid var(--line); }
.step__num { background: var(--green); color: var(--ink); font: 700 1rem/1 var(--font); }
.step:nth-child(2) .step__num { background: var(--yellow); }
.step:nth-child(3) .step__num { background: var(--pink); }
.step h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }

/* Panele kreatora i przełączniki: białe pigułki na ciemnym torze */
.panel,
.creator__fields { border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.seg { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--tile); }
.seg__opt span { border-radius: 999px; color: var(--text-2); font-weight: 500; }
.seg__opt input:checked + span { background: var(--sel-bg); box-shadow: none; color: var(--sel-fg); font-weight: 600; }
.seg.is-placed .seg__opt input:checked + span { color: var(--sel-fg); }
.seg__thumb { top: 4px; bottom: 4px; border-radius: 999px; background: var(--sel-bg); box-shadow: none; }
.creator__glow { opacity: 0.8; }

/* Funkcje: pastelowe bloki z ciemnym tekstem */
.feat { border: 0; box-shadow: none; color: var(--ink); }
.feat:nth-of-type(1) { background: var(--green); }
.feat:nth-of-type(2) { background: var(--yellow); }
.feat:nth-of-type(3) { background: var(--pink); }

.feat h3 { color: var(--ink); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.feat p { color: rgb(19 19 19 / 0.8); font-weight: 400; }

/* Dla firm, cennik */
.biz__looks { border: 1px solid var(--line); background: var(--surface); }
.biz__looks-title { font: 700 1.25rem/1.15 var(--font); letter-spacing: -0.03em; }

.price__value { font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: normal; } /* cyfry tabelaryczne tego kroju mają szeroki przecinek */

/* Pytania: obrysowane wiersze ze strzałką w kwadracie */
.faq__item,
.faq__item:first-child { margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.faq__item summary { padding: 12px 12px 12px 18px; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.faq__item summary::after {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--arrow) center / 15px no-repeat;
  rotate: 90deg;
  translate: 0;
}
.faq__item[open] summary::after { rotate: 270deg; translate: 0; }
.faq__a p { padding: 0 18px 18px; font-size: 1rem; font-weight: 400; color: var(--text-2); }

/* Wezwanie: barwinkowy blok z białym tytułem */
.cta-card { background: var(--blue); }
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 70% at 0% 0%, rgb(141 221 141 / 0.35), transparent 70%);
}
.cta-card h2 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; }
.cta-card__copy > p { font-weight: 400; }

/* Stopka: ciemny blok z nazwą */
.footer { background: var(--bg); }
.footer__top { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); }
.footer__brand b { font: 700 1.25rem/1 var(--font); letter-spacing: -0.04em; }

/* Makieta nowego ekranu głównego: stos wizytówek z wysuniętą kartą (app/src/components/WalletStack.tsx) */
.glass--mono { color: var(--a-text); }
.app__body--home { gap: calc(18 * var(--pt)); padding-top: 0; }
.a-hero { margin: 0 0 calc(-2 * var(--pt)); font: 700 calc(36 * var(--pt))/1.05 var(--font); letter-spacing: calc(-1.4 * var(--pt)); }
.a-hero em { font-size: inherit; font-style: normal; }
/* Pod wysuniętą kartą: arkusz z kodem QR i podpisem, w jego stopce przycisk Apple „Dodaj do Apple Wallet”
   (PKAddPassButton w naturalnym rozmiarze, na środku – jak odznaka Apple), pod arkuszem okrągłe „pełny ekran” i NFC
   obok „Otwórz” */
.a-sheet { overflow: hidden; border-radius: calc(28 * var(--pt)); background: var(--a-surface); box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgb(255 255 255 / 0.1); }
.a-home-qr { display: grid; justify-items: center; gap: calc(10 * var(--pt)); padding: calc(18 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt)); }
.a-home-qr .a-qr__tile { padding: calc(11 * var(--pt)); border-radius: calc(22 * var(--pt)); }
.a-home-qr .a-qr__tile img { width: calc(124 * var(--pt)); }
.a-home-qr__caption { color: var(--a-text2); font-size: calc(14 * var(--pt)); font-weight: 500; }
.a-sheet__wallet { display: grid; place-items: center; padding: calc(14 * var(--pt)) calc(16 * var(--pt)); box-shadow: inset 0 calc(0.5 * var(--pt)) 0 rgb(255 255 255 / 0.12); }
.a-addpass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(11 * var(--pt));
  width: calc(236 * var(--pt));
  height: calc(52 * var(--pt));
  border-radius: calc(11 * var(--pt));
  background: #000000;
  box-shadow: inset 0 0 0 calc(0.75 * var(--pt)) rgb(255 255 255 / 0.26), 0 calc(6 * var(--pt)) calc(16 * var(--pt)) rgb(0 0 0 / 0.35);
  color: #ffffff;
  font-family: var(--font-system);
}
.a-addpass__icon { flex: none; width: calc(35 * var(--pt)); height: calc(26 * var(--pt)); }
.a-addpass__text { display: grid; font-size: calc(19 * var(--pt)); font-weight: 600; line-height: 1.08; letter-spacing: calc(-0.3 * var(--pt)); white-space: nowrap; }
.a-addpass__text small { font-size: calc(12 * var(--pt)); font-weight: 400; letter-spacing: 0; }
.a-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: calc(10 * var(--pt)); }
.a-round {
  display: grid;
  place-items: center;
  width: calc(54 * var(--pt));
  height: calc(54 * var(--pt));
  border-radius: 50%;
  background: var(--a-surface);
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgb(255 255 255 / 0.1);
  color: var(--a-text);
  font-size: calc(14 * var(--pt));
  font-weight: 700;
  letter-spacing: calc(0.4 * var(--pt));
}
.a-round svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.a-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pt));
  height: calc(54 * var(--pt));
  border-radius: 999px;
  font-size: calc(17 * var(--pt));
  font-weight: 500;
}
.a-btn svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.a-btn--primary { justify-content: space-between; padding: 0 calc(7 * var(--pt)) 0 calc(22 * var(--pt)); background: var(--a-text); color: var(--a-bg); }
.a-btn__arrow { display: grid; place-items: center; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; background: var(--green); color: var(--ink); }
.a-btn--ghost { border: calc(1 * var(--pt)) solid var(--a-sep); background: transparent; color: var(--a-text); }
.a-tuck { position: relative; height: calc(60 * var(--pt)); margin-top: calc(4 * var(--pt)); }
.a-tuck__card {
  position: absolute;
  inset: 0 calc(10 * var(--pt)) auto;
  height: calc(200 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: linear-gradient(135deg, var(--c-from), var(--c-to));
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgb(255 255 255 / 0.18), 0 calc(-4 * var(--pt)) calc(14 * var(--pt)) rgb(0 0 0 / 0.35);
  padding: calc(14 * var(--pt)) calc(18 * var(--pt));
  color: rgb(255 255 255 / 0.86);
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  letter-spacing: calc(1.4 * var(--pt));
  text-transform: uppercase;
}
.a-tuck__card + .a-tuck__card { top: calc(12 * var(--pt)); inset-inline: calc(4 * var(--pt)); }
/* Ilustracje w pastelowych blokach mają własne, ciemne tło – tekst w nich zostaje jasny */
.feat__art { color: var(--text); }

/* ---------- 12. Dopracowane sekcje ------------------------------------------
   Kroki z ilustracjami, kreator na kropkowanym stole z pełnymi danymi, funkcje w ramkach, wygląd firmy
   w kafelkach, cennik z wezwaniem, menu na cały ekran i stopka z paskiem wykonawcy (N3O System). */

:root {
  --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle at 1px 1px, rgb(19 19 19 / 0.08) 1px, transparent 0) 0 0 / 16px 16px;
  --frame: #f3f2ed;
  --float-bg: rgb(255 255 255 / 0.96);
  --float-shadow: 0 0 0 1px var(--line), 0 12px 28px -12px rgb(19 19 19 / 0.3);
}

/* --- Kroki ------------------------------------------------------------------ */
.steps__list { gap: 16px; }
.step { position: relative; overflow: visible; }
.step--make { --step-c: var(--green); }
.step--show { --step-c: var(--yellow); }
.step--swap { --step-c: var(--pink); }
.step__art {
  position: relative;
  height: 216px;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: calc(var(--radius-l) - 10px);
  background:
    radial-gradient(70% 80% at 50% 115%, color-mix(in srgb, var(--step-c) 24%, transparent), transparent 70%),
    var(--dots),
    var(--frame);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step__text { grid-template-columns: 32px minmax(0, 1fr); padding: 20px 22px 24px; }
.step__num { width: 32px; height: 32px; font-size: 0.9375rem; }
.step p { font-size: 0.9375rem; line-height: 1.55; }
/* Strzałka między krokami */
@media (min-width: 900px) {
  .step + .step::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(10px + 108px - 15px);
    left: -23px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface) var(--arrow) center / 14px no-repeat;
    box-shadow: 0 0 0 1px var(--line-2);
  }
}

/* Ilustracje w ramce: pływające elementy interfejsu */
.step__field,
.step__swatches,
.step__chip,
.step__toast {
  position: absolute;
  z-index: 2;
  background: var(--float-bg);
  box-shadow: var(--float-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.step__card { position: absolute; top: 50%; left: 50%; width: min(64%, 250px); translate: -42% -36%; rotate: -5deg; }
.step__card .vc__face { box-shadow: 0 22px 40px -16px rgb(19 19 19 / 0.4); }
.step__field { top: 16px; left: 14px; display: grid; gap: 1px; padding: 7px 12px 8px; border-radius: 12px; color: var(--text); font-size: 13px; font-weight: 500; }
.step__field small { color: var(--text-2); font-size: 10.5px; }
.step__field i { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--green); animation: caret 1.1s steps(1) infinite; }
.step__swatches { right: 14px; bottom: 14px; display: flex; gap: 6px; padding: 7px; border-radius: 999px; }
.step__swatches i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.step__swatches i.is-on { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--text); }

.step__qr {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 12px 9px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 7px rgb(224 224 85 / 0.22), 0 24px 50px -18px rgb(19 19 19 / 0.35);
  translate: -50% -50%;
}
.step__qr img { width: 104px; height: 104px; }
.step__qr small { color: #3a3a3a; font-size: 10px; font-weight: 600; letter-spacing: -0.01em; }
.step__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; color: var(--text); font-size: 12.5px; font-weight: 600; }
.step__chip svg { width: 15px; height: 15px; color: #8a7f00; }
.step__chip--wallet { top: 17%; left: 5%; rotate: -6deg; }
.step__chip--airdrop { top: 40%; right: 5%; rotate: 5deg; }
.step__chip--nfc { bottom: 14%; left: 6%; rotate: 4deg; }

.contact {
  position: absolute;
  top: 56px;
  left: 50%;
  display: grid;
  width: min(248px, 80%);
  padding: 12px 14px 12px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line), 0 24px 50px -18px rgb(19 19 19 / 0.35);
  translate: -50% 0;
  font-size: 12px;
  line-height: 1.3;
}
.contact__head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.contact__head img { width: 38px; height: 38px; border-radius: 50%; }
.contact__head b { display: block; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.contact__head small { display: block; color: var(--text-2); font-size: 10.5px; }
.contact__row { display: grid; padding: 4px 0; border-top: 1px solid var(--line); color: var(--brand-ink); font-size: 12.5px; }
.contact__row small { color: var(--text-2); font-size: 10px; }
.contact__save { display: grid; place-items: center; height: 28px; margin-top: 6px; border-radius: 10px; background: #0b63e5; color: #ffffff; font-size: 12.5px; font-weight: 600; }
.step__toast { top: 16px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--pink); box-shadow: 0 12px 26px -12px rgb(19 19 19 / 0.35); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; rotate: -2deg; }
.step__toast svg { width: 16px; height: 16px; }

@media (max-width: 899px) {
  .step__art { height: 200px; }
}

/* --- Kreator --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .creator__stage {
    max-width: none;
    padding: 40px 36px;
    border-radius: var(--radius-xl);
    background: radial-gradient(70% 60% at 50% 100%, rgb(255 255 255 / 0.6), transparent 70%), var(--dots), var(--frame);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .creator__glow { inset: 26% 16% 6%; }
  .creator__summary { margin-top: 16px; }
}
.creator__fields { padding: 18px 18px 16px; }
@media (min-width: 1024px) { .creator__fields { max-width: none; } }
/* Kreator na telefonie: duży podgląd stoi w treści (bez przyklejania i ucinania), a przy przewijaniu ustawień
   u góry wysuwa się pasek z małą kartą i opisem wyglądu – odświeżany na żywo */
@media (max-width: 1023px) {
  .creator__preview { position: relative; top: auto; z-index: auto; margin-inline: 0; padding: 4px 0 6px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.studio-mini { display: none; }
@media (max-width: 1023px) {
  .studio-mini { position: sticky; top: var(--nav-h); z-index: 6; display: block; height: 0; margin-inline: calc(-1 * var(--gutter)); }
  .studio-mini__bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px var(--gutter);
    background: color-mix(in srgb, var(--bg-alt) 94%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--line), 0 16px 28px -20px rgb(19 19 19 / 0.35);
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    transition: opacity 0.2s ease, translate 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .studio-mini.is-on .studio-mini__bar { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.2s ease, translate 0.3s var(--ease-out); }
  .studio-mini__preview { flex: none; width: 124px; }
  .studio-mini__preview .vc { width: 100%; }
  .studio-mini__text { display: grid; gap: 3px; min-width: 0; }
  .studio-mini__text b { color: var(--text-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
  .studio-mini__text span { color: var(--text); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
  /* Przy wpisywaniu danych pasek nie zasłania pola nad klawiaturą */
  .creator:has(.creator__fields:focus-within) .studio-mini { display: none; }
}
.creator__fields .ctrl__legend { align-items: center; }
.ctrl__hint-inline { color: var(--text-3); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Pola w siatce z liniami 1 px (tło przebija przez odstęp) */
.creator__fields .fields--2 { gap: 1px; background: var(--line); }
.creator__fields .field,
.creator__fields .fields--2 .field:nth-child(3) { background: var(--tile); box-shadow: none; }
.creator__fields .field:focus-within { border-radius: 0; box-shadow: inset 0 0 0 2px var(--focus); }
.creator__fields .field__input { font-size: 1rem; }
.field__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field__state { font-size: 0.75rem; font-weight: 600; }
.field--id.is-ok .field__state { color: var(--ok); }
.field--id.is-ok .field__state::before { content: "✓ "; }
.field--id.is-bad .field__state { color: var(--bad); }
.field--id.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 70%, transparent) !important; }
.field--id .field__input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.fields__note { margin-top: 12px; color: var(--text-3); font-size: 0.8125rem; line-height: 1.5; }
.vc__line[hidden], .vc__ids[hidden] { display: none; }

/* --- Kod QR ------------------------------------------------------------------
   Jeden wygląd jak w aplikacji (QrCode.tsx): płynne punkty i zaokrąglone narożniki w kolorze wizytówki na białym
   kafelku. Na kropkowanym stole duży kod z podpisem w ramce celownika aparatu, za nim kody w innych kolorach kart.
   Rozmiary w jednostkach kontenera (cqi) – kompozycja wygląda tak samo w wąskiej kolumnie i na całej szerokości. */
.qrcode__grid { display: grid; gap: 28px; align-items: center; }
.qrcode__stage {
  --spread: 29cqi;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 0.94;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 46% at 50% 52%, color-mix(in srgb, var(--c) 18%, transparent), transparent 72%),
    var(--dots),
    var(--frame);
  box-shadow: inset 0 0 0 1px var(--line);
  container-type: inline-size;
}
.qrcode__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  padding: var(--pad);
  border-radius: var(--radius);
  background: #ffffff;
}
.qrcode__tile img { display: block; width: var(--size); height: var(--size); }
.qrcode__tile--main {
  --size: clamp(148px, 47cqi, 236px);
  --pad: clamp(12px, 3.6cqi, 18px);
  --radius: clamp(20px, 6cqi, 30px);
  z-index: 2;
  gap: clamp(6px, 1.6cqi, 10px);
  padding-bottom: clamp(10px, 2.6cqi, 14px);
  box-shadow: 0 0 0 1px var(--line), 0 34px 64px -24px rgb(19 19 19 / 0.45);
  translate: -50% -50%;
}
.qrcode__tile--main small { color: #3a3a3a; font-size: clamp(0.6875rem, 2.3cqi, 0.8125rem); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
/* Ramka celownika aparatu wokół dużego kodu: same zaokrąglone narożniki */
.qrcode__tile--main::before {
  --gap: clamp(9px, 2.6cqi, 14px);
  --arm: clamp(24px, 7cqi, 40px);
  content: "";
  position: absolute;
  inset: calc(-1 * var(--gap));
  border: 3px solid var(--ink);
  border-radius: calc(var(--radius) + var(--gap));
  /* Widać tylko cztery kwadraty w rogach (--arm × --arm) */
  -webkit-mask: conic-gradient(at var(--arm) var(--arm), #0000 75%, #000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm));
  mask: conic-gradient(at var(--arm) var(--arm), #0000 75%, #000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm));
  pointer-events: none;
}
.qrcode__tile--back {
  --size: clamp(92px, 27cqi, 168px);
  --pad: clamp(8px, 2.2cqi, 12px);
  --radius: clamp(14px, 4cqi, 22px);
  z-index: 1;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -22px rgb(19 19 19 / 0.4);
}
.qrcode__tile--left { translate: calc(-50% - var(--spread)) -60%; rotate: -9deg; }
.qrcode__tile--right { translate: calc(-50% + var(--spread)) -40%; rotate: 8deg; }

/* Lista jak w cenniku (.checks), ale z dłuższymi opisami */
.qrcode .checks { gap: 24px; margin-top: 0; }
.qrcode .checks li { align-items: flex-start; }
.qrcode .checks li > span { gap: 4px; padding-top: 1px; }
.qrcode .checks b { font-size: 1.125rem; letter-spacing: -0.02em; }
.qrcode .checks small { font-size: 0.9375rem; line-height: 1.5; }
.qrcode__scan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.9375rem;
}
.qrcode__scan .icon { flex: none; color: var(--brand-ink); }
/* Na telefonie nie zeskanujesz kodu z jego własnego ekranu */
@media (max-width: 719px) {
  .qrcode__scan { display: none; }
}
@media (min-width: 900px) {
  .qrcode__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .qrcode__stage { aspect-ratio: 4 / 3; --spread: 27cqi; }
}

/* --- Funkcje: ilustracje w ciemnych ramkach --------------------------------- */
.feat .feat__art {
  height: 208px;
  margin: 10px 10px 0;
  border-radius: calc(var(--radius-l) - 10px);
  background: var(--dots), #fbfbf8;
  box-shadow: inset 0 0 0 1px rgb(19 19 19 / 0.08);
}
.feat .feat__art--wallet { -webkit-mask-image: none; mask-image: none; }
.feat__art--wallet::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(rgb(251 251 248 / 0), #fbfbf8 92%); pointer-events: none; }
.feat__art--wallet .pass--stack1 { top: 20px; }
.feat__art--wallet .pass--stack2 { top: 50px; }
.feat__art--wallet .pass--front { top: 80px; }
.feat .feat__art--airdrop { background: radial-gradient(55% 60% at 50% 50%, rgb(11 99 229 / 0.12), transparent 70%), var(--dots), #fbfbf8; }
.feat__art--ids .idrow { background: #ffffff; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgb(19 19 19 / 0.25); }
.feat__art--ids .idrow--err { box-shadow: 0 0 0 2px var(--bad); }
.feat__text { padding: 18px 20px 22px; }
.feat p { margin-top: 8px; }

/* --- Dla firm ---------------------------------------------------------------- */
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look { position: relative; display: block; }
.look input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.look__box {
  display: grid;
  gap: 10px;
  padding: 8px 8px 12px;
  border-radius: 18px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.16s var(--ease-out);
}
.look__swatch {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1.586;
  padding: 8px 10px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--c-from), var(--c-to));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
.look__swatch[data-font="classic"] { font-family: var(--ff-classic); }
.look__swatch[data-font="modern"] { font-family: var(--ff-modern); }
.look__swatch[data-font="elegant"] { font-family: var(--ff-elegant); }
.look__name { display: grid; gap: 1px; padding-inline: 4px; }
.look__name b { color: var(--text); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.look__name small { color: var(--text-2); font-size: 0.8125rem; }
.look input:checked + .look__box { background: var(--tile-2); box-shadow: inset 0 0 0 2px var(--text); }
.look input:focus-visible + .look__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.look:active .look__box { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .look:hover input:not(:checked) + .look__box { background: var(--tile-2); }
}
.biz__looks { padding: 20px; }
.biz__looks-title { margin-bottom: 14px; font-size: 1.125rem; }

/* Wizytówki zespołu: równa kaskada jak w Wallet – każda pokazuje firmę, imię i stanowisko */
.team__cards { width: min(360px, 88%); aspect-ratio: 0.7; }
.team__cards .vc { width: 88%; }
.team__cards .vc:nth-child(1) { top: 0; left: 0; rotate: none; }
.team__cards .vc:nth-child(2) { top: 26%; left: 6%; rotate: none; }
.team__cards .vc:nth-child(3) { top: 52%; left: 12%; rotate: none; }
/* Na kartach pod spodem dane kontaktowe i tak są zasłonięte – bez nich nie wystają skrawki tekstu */
.team__cards .vc:not(:last-child) :is(.vc__lines, .vc__ids) { visibility: hidden; }
@media (min-width: 1024px) {
  .biz__stage { height: clamp(600px, 20vw + 340px, 640px); }
  .biz__phone { top: 0; left: 2%; }
  .team__cards { top: 64px; right: 0; width: 55%; }
  .team__cards .vc__face { box-shadow: 0 -8px 24px -14px rgb(19 19 19 / 0.35), 0 24px 40px -20px rgb(19 19 19 / 0.4); }
}

/* --- Cennik ------------------------------------------------------------------ */

.price { margin-top: 10px; }
.price__value { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); }

.checks { gap: 18px; margin-top: 20px; }
.checks li { align-items: center; gap: 14px; }
.checks li > span { display: grid; gap: 2px; }
.checks b { color: var(--text); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.checks small { color: var(--text-2); font-size: 0.875rem; }
.checks svg { --k: var(--green); width: 20px; height: 20px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--k) 38%, transparent); color: color-mix(in srgb, var(--k) 35%, #131313); }
.checks li:nth-child(2) svg { --k: var(--yellow); }
.checks li:nth-child(3) svg { --k: var(--periwinkle); }
.checks li:nth-child(4) svg { --k: var(--pink); }
.checks li:nth-child(5) svg { --k: var(--green); }

/* --- Menu na telefonie i tablecie: cały ekran ------------------------------------ */
.nav__toggle:focus-visible { outline-width: 2px; outline-offset: 0; }
.menu-open { overflow: hidden; }
@media (max-width: 1079px) {
  /* Rozmycie paska tworzyłoby blok zawierający dla menu – przy otwartym menu pasek jest pełny */
  .nav:has(.nav__menu[open]) { background: var(--bg); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Pasek telefonu nie mieści kuli języka obok „Pobierz” (po francusku i ukraińsku już przy 320–360 px), a lista języków
     w menu leży pod paskiem Safari – przy otwartym menu kula z kodem języka staje w miejscu „Pobierz”, który jest w menu */
  .nav:has(.nav__menu[open]) .nav__cta { display: none; }
  .nav:has(.nav__menu[open]) .nav__lang { display: block; }
  .nav__sheet {
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 8px var(--gutter) max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    box-shadow: none;
    animation: menu-fade 0.25s ease;
  }
}
.nav__sheet-links { list-style: none; }
.nav__sheet-links a {
  gap: 16px;
  min-height: 68px;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.nav__sheet-links small { min-width: 24px; color: var(--text-3); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.nav__sheet-links li { animation: menu-in 0.45s var(--ease-out) both; }
.nav__sheet-links li:nth-child(2) { animation-delay: 0.03s; }
.nav__sheet-links li:nth-child(3) { animation-delay: 0.06s; }
.nav__sheet-links li:nth-child(4) { animation-delay: 0.09s; }
.nav__sheet-links li:nth-child(5) { animation-delay: 0.12s; }
.nav__sheet-foot { display: grid; gap: 16px; animation: menu-in 0.45s 0.15s var(--ease-out) both; }
.nav__sheet-cta.btn--primary { justify-content: space-between; width: 100%; min-height: 58px; font-size: 1.0625rem; }
.nav__sheet-note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.9375rem; }
.nav__sheet-note .icon { color: var(--ok); }
.nav__sheet-note strong { color: var(--text); }
.nav__sheet-mail { justify-self: start; color: var(--text-2); font-size: 0.9375rem; text-decoration: none; }
/* Wykonawca na dole menu – mała wersja paska N3O ze stopki: czerń, podpis jak zakładka i zielony akcent */
.nav__sheet-n3o {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
  margin-top: 4px;
  padding: 14px 14px 14px 18px;
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  background: radial-gradient(ellipse 60% 90% at 0% 100%, rgb(0 255 65 / 0.09), transparent 70%) #000000;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.15s var(--ease-out);
}
.nav__sheet-n3o-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a1a1aa;
  font: 500 0.6875rem/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav__sheet-n3o-tab::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #00ff41; box-shadow: 0 0 10px rgb(0 255 65 / 0.8); }
.nav__sheet-n3o img { grid-column: 1; width: auto; height: 16px; }
.nav__sheet-n3o .n3o__arrow { grid-row: 1 / 3; grid-column: 2; width: 36px; height: 36px; padding: 10px; }
.nav__sheet-n3o:focus-visible { outline-color: #00ff41; outline-offset: 3px; }
.nav__sheet-n3o:active { transform: scale(0.98); }
@media (hover: hover) {
  .nav__sheet-n3o:hover .n3o__arrow { background-color: #00ff41; color: #000000; }
}
@keyframes menu-fade { from { opacity: 0; } }
@keyframes menu-in { from { opacity: 0; translate: 0 14px; } }

/* --- Stopka -------------------------------------------------------------------- */
.footer { padding: 0; background: var(--bg); color: var(--text-2); }
.footer > .container { padding-top: clamp(48px, 4vw + 24px, 80px); }
.footer__main { display: grid; gap: 36px 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.footer .footer__brand { display: block; }
.footer__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.045em; text-decoration: none; }
.footer__logo img { border-radius: 22.5%; }
.footer__brand > p { max-width: 36ch; margin-top: 16px; font-size: 0.9375rem; line-height: 1.55; }

.footer__col h2 { margin-bottom: 12px; color: var(--text); font: 600 0.8125rem/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.footer__col ul { display: grid; list-style: none; }
.footer__col a,
.footer__col li > span { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); font-size: 0.9375rem; text-decoration: none; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--text); }
.footer__legal { display: grid; gap: 8px; padding-block: 24px 0; color: var(--text-3); font-size: 0.8125rem; line-height: 1.6; }
@media (max-width: 639px) {
  .footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand, .footer__main > .footer__col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .footer__main { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
}

/* Pasek wykonawcy – jak na stronach realizowanych przez N3O System: czerń, zakładka i jeden zielony akcent */
.n3o {
  --n3o-accent: #00ff41;
  --n3o-line: #1f1f1f;
  --n3o-text: #a1a1aa;
  --n3o-tab-h: 30px;
  margin-top: calc(var(--n3o-tab-h) + 40px);
  border-top: 1px solid var(--n3o-line);
  background: #000000;
}
.n3o__inner { position: relative; padding-block: 20px max(16px, env(safe-area-inset-bottom)); }
.n3o__tab {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--n3o-tab-h);
  padding: 0 calc(16px - 0.2em) 0 16px;
  border: 1px solid var(--n3o-line);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: #000000;
  color: var(--n3o-text);
  font: 500 0.6875rem/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Wklęsłe narożniki u podstawy zakładki */
.n3o__tab::before {
  content: "";
  position: absolute;
  right: -11px;
  bottom: 0;
  left: -11px;
  height: 11px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M11 11H0A11 11 0 0 0 11 0z'/%3E%3Cpath d='M0 10.5A10.5 10.5 0 0 0 10.5 0' fill='none' stroke='%231f1f1f'/%3E%3C/svg%3E") left bottom / 11px 11px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M0 11h11A11 11 0 0 1 0 0z'/%3E%3Cpath d='M11 10.5A10.5 10.5 0 0 1 .5 0' fill='none' stroke='%231f1f1f'/%3E%3C/svg%3E") right bottom / 11px 11px no-repeat;
  pointer-events: none;
}
/* Krótka świecąca kreska – znak aktywnej zakładki z n3osystem.io */
.n3o__tab::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 20px;
  height: 1px;
  border-radius: 999px;
  background: var(--n3o-accent);
  box-shadow: 0 0 8px rgb(0 255 65 / 0.9);
  translate: -50% 0;
}
.n3o__link { display: flex; align-items: center; gap: 28px; min-height: 44px; color: #ffffff; text-decoration: none; }
.n3o__link:focus-visible { outline-color: var(--n3o-accent); outline-offset: 6px; border-radius: 12px; }
.n3o__brand { position: relative; display: flex; flex: none; }
.n3o__brand::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgb(0 255 65 / 0.16), transparent 70%);
  filter: blur(8px);
  opacity: 0.7;
  transition: opacity 0.3s;
  pointer-events: none;
}
.n3o__brand img { position: relative; width: auto; height: 20px; }
.n3o__about { min-width: 0; padding-left: 28px; border-left: 1px solid rgb(255 255 255 / 0.1); color: var(--n3o-text); font-size: 0.875rem; line-height: 1.5; text-wrap: balance; transition: color 0.2s; }
.n3o__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin-left: auto;
  padding: 0 6px 0 15px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent) rgb(255 255 255 / 0.03);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.15s var(--ease-out);
}
.n3o__go::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--n3o-accent); box-shadow: 0 0 10px rgb(0 255 65 / 0.8); }
.n3o__arrow { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.1); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background-color 0.25s, color 0.25s; }
.n3o__arrow path { transition: transform 0.25s var(--ease-out); }
.n3o__link:active .n3o__go { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .n3o__link:hover .n3o__brand::before { opacity: 1; }
  .n3o__link:hover .n3o__about { color: #d4d4d8; }
  .n3o__link:hover .n3o__go { border-color: rgb(0 255 65 / 0.45); background-color: rgb(0 255 65 / 0.09); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 26px -8px rgb(0 255 65 / 0.55); }
  .n3o__link:hover .n3o__arrow { background-color: var(--n3o-accent); color: #000000; }
  .n3o__link:hover .n3o__arrow path { transform: translate(1.5px, -1.5px); }
}
@media (max-width: 760px) {
  .n3o__inner { padding-block: 22px max(18px, env(safe-area-inset-bottom)); }
  .n3o__link { flex-direction: column; align-items: flex-start; gap: 0; }
  .n3o__about { max-width: 36ch; margin-top: 14px; padding-left: 0; border-left: 0; }
  .n3o__go { margin: 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sheet, .nav__sheet-links li, .nav__sheet-foot { animation: none; }
}

/* Wąskie ekrany: przełączniki z czterema opcjami („Jednolity”, „Logo – kwadrat”) mieszczą napis w jednej linii */
@media (max-width: 479px) {
  .panel .seg__opt span { padding-inline: 3px; font-size: 0.875rem; }
}

/* ---------- 13. Jasny motyw: drobne poprawki -----------------------------------
   Telefony w makietach zostają ciemne (aplikacja w trybie ciemnym) – na jasnej stronie dostają lżejszy cień. */
.phone { box-shadow: 0 0 0 1px rgb(19 19 19 / 0.1), 0 30px 60px -30px rgb(19 19 19 / 0.5); }
.faq__item, .faq__item:first-child { background: var(--surface); }

/* ---------- 14. Języki ----------------------------------------------------------
   Wybór języka: w pasku (od 1080 px) biała pigułka z kulą ziemską i listą po kliknięciu, w menu telefonu i w stopce
   zwykłe linki. Nazwy języków w ich własnym brzmieniu; bieżący ma zieloną kropkę, a na liście w pasku – czarną pigułkę,
   jak aktualna sekcja w linkach obok.
   Listę wypełnia server/scripts/site-i18n.mjs – tylko języki, które mają tłumaczenie. */
.nav__end { display: flex; align-items: center; gap: 4px; }
@media (min-width: 1080px) {
  .nav__end { justify-self: end; }
}
.lang { position: relative; }
.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(19 19 19 / 0.04);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle .icon { width: 18px; height: 18px; color: var(--text-2); }
/* Strzałka w dół – po otwarciu listy obraca się w górę */
.lang__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -4px 0 0 2px;
  border: solid var(--text-3);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  transition: rotate 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.lang[open] .lang__toggle { background: var(--tile); box-shadow: 0 0 0 1px var(--line-2); }
.lang[open] .lang__toggle::after { margin-top: 3px; rotate: 225deg; }
@media (hover: hover) and (pointer: fine) {
  .lang__toggle:hover { background: var(--tile); }
}
.lang__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 204px;
  padding: 6px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(19 19 19 / 0.04), 0 22px 48px -20px rgb(19 19 19 / 0.4);
  list-style: none;
  transform-origin: top right;
  animation: lang-in 0.22s var(--ease-out);
}
.lang__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.lang__list a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .lang__list a:hover { background: var(--tile); color: var(--text); }
}
@keyframes lang-in { from { opacity: 0; translate: 0 -6px; scale: 0.97; } }
@media (max-width: 1079px) {
  .nav__lang { display: none; }
}
/* 1080–1199 px: pasek jest ciasny (dłuższe nazwy w innych językach) – sama kula, bez kodu języka */
@media (min-width: 1080px) and (max-width: 1199px) {
  .lang__toggle { padding: 0 13px 0 11px; }
  .lang__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Zwykła lista linków: menu telefonu i stopka */
.langs ul { display: flex; flex-wrap: wrap; gap: 2px 20px; list-style: none; }
.langs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--text-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.langs a:hover { color: var(--text); }
.lang__list a[aria-current],
.langs a[aria-current] { color: var(--text); font-weight: 600; }
.langs a[aria-current]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.lang__list a[aria-current]::before,
.langs a[aria-current]::before { background: var(--green); box-shadow: 0 0 10px rgb(141 221 141 / 0.8); }
.lang__list a[aria-current] { background: var(--sel-bg); color: var(--sel-fg); }
.nav__sheet-langs { padding-top: 12px; border-top: 1px solid var(--line); }
.footer__langs { display: flex; align-items: flex-start; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.footer__langs > .icon { width: 18px; height: 18px; margin-top: 11px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .lang__list { animation: none; }
}

/* ==========================================================================
   Wejściówki do biura (#wejsciowki, docs/wejsciowki.md). Nagłówek jak w innych sekcjach (numer, „Nowość dla firm”,
   tytuł, obok opis). Pod nim pastelowa karta jak w „Funkcjach”: na kropkowanym stole ekran biura z aplikacji
   (app/src/app/office/[id].tsx) i wejściówka w Apple Wallet (wallet/src/access/pass.js), obok trzy kroki.
   Niżej cztery zalety w kafelkach i to, jak wejściówka otwiera drzwi. Na wąskich telefonach zostaje sama wejściówka.
   ========================================================================== */
.access__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.access__tags > .eyebrow { margin: 0; }
@media (min-width: 900px) {
  .section-head:has(.lead) > .access__tags { grid-area: 1 / 1; }
}
.access__kicker { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; }
.access__kicker .icon { width: 16px; height: 16px; }

.access__panel { display: grid; gap: 10px; padding: 10px; border-radius: var(--radius-xl); background: var(--periwinkle); color: var(--ink); }
/* Telefon i wejściówka (zachodzą na siebie o 96 px) tworzą grupę na środku stołu, najmniej 24 px od lewego brzegu;
   obrócona wejściówka zostaje 40 px od prawego, a na węższym stole bardziej nachodzi na telefon. Dół telefonu chowa
   się za krawędzią stołu, wejściówka (ok. 340 px wysokości) mieści się na nim cała. */
.access__stage {
  --phone-w: clamp(220px, 12vw + 112px, 290px);
  --pass-w: min(300px, 100% - 200px);
  --phone-x: max(24px, (100% - var(--phone-w) - var(--pass-w) + 96px) / 2);
  position: relative;
  min-height: clamp(480px, 6vw + 420px, 520px);
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 10px);
  background: var(--dots), #fbfbf8;
  box-shadow: inset 0 0 0 1px rgb(19 19 19 / 0.08);
}
.access__phone { position: absolute; top: 44px; left: var(--phone-x); --phone-w: inherit; }
.access__stage .pass--access { position: absolute; top: 104px; left: min(var(--phone-x) + var(--phone-w) - 96px, 100% - var(--pass-w) - 40px); width: var(--pass-w); rotate: 5deg; }

.access__steps { display: grid; align-content: center; padding: clamp(12px, 2.4vw - 4px, 36px) clamp(14px, 2.6vw, 40px); list-style: none; counter-reset: access-step; }
.access__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-block: 20px; counter-increment: access-step; }
.access__steps li + li { border-top: 1px solid rgb(19 19 19 / 0.14); }
.access__steps li::before {
  content: counter(access-step);
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}
.access__steps b { align-self: center; font-size: clamp(1.1875rem, 0.4vw + 1.05rem, 1.375rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.access__steps span { color: rgb(19 19 19 / 0.78); font-size: 1rem; line-height: 1.5; }
@media (min-width: 1024px) {
  .access__panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* Zalety: białe kafelki z pastelowymi ikonami – na telefonie ikona obok tekstu */
.access__points { display: grid; gap: 10px; margin-top: 10px; list-style: none; }
.access__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px; border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.access__points li > span { display: grid; gap: 3px; }
.access__points b { color: var(--text); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.access__points small { color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.access__points svg { --k: var(--periwinkle); flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--k) 38%, transparent); color: color-mix(in srgb, var(--k) 35%, #131313); }
.access__points li:nth-child(2) svg { --k: var(--green); }
.access__points li:nth-child(3) svg { --k: var(--pink); }
.access__points li:nth-child(4) svg { --k: var(--yellow); }
@media (min-width: 560px) {
  .access__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access__points li { grid-template-columns: none; align-content: start; gap: 18px; padding: 22px; }
}
@media (min-width: 1024px) {
  .access__points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Drzwi: QR albo NFC – cicha ramka z czarną ikoną */
.access__door { display: flex; align-items: flex-start; gap: 14px; margin-top: 10px; padding: 18px 22px 18px 18px; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.access__door .icon { flex: none; box-sizing: content-box; width: 18px; height: 18px; margin-top: -4px; padding: 7px; border-radius: 50%; background: var(--ink); color: #ffffff; }

/* Telefony: sama wejściówka na środku stołu */
@media (max-width: 599px) {
  .access__stage { display: grid; place-items: center; min-height: 0; padding: 36px 0 40px; }
  .access__phone { display: none; }
  .access__stage .pass--access { position: relative; top: auto; left: auto; width: min(300px, 100% - 40px); rotate: 3deg; }
}

/* Ekran biura */
.app__body--office { gap: calc(18 * var(--pt)); padding-top: calc(2 * var(--pt)); }
.a-office { display: grid; justify-items: center; gap: calc(4 * var(--pt)); text-align: center; }
.a-office__mark { display: grid; place-items: center; width: calc(72 * var(--pt)); height: calc(72 * var(--pt)); border-radius: 50%; background: var(--c); color: #ffffff; }
.a-office__mark svg { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.a-office b { margin-top: calc(6 * var(--pt)); font-size: calc(24 * var(--pt)); font-weight: 700; letter-spacing: calc(-0.6 * var(--pt)); }
.a-office small { color: var(--a-text2); font-size: calc(14 * var(--pt)); }
.a-plancard { display: grid; gap: calc(5 * var(--pt)); padding: calc(16 * var(--pt)) calc(18 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--a-surface); }
.a-plancard b { font-size: calc(19 * var(--pt)); font-weight: 700; letter-spacing: calc(-0.3 * var(--pt)); }
.a-plancard small { color: var(--a-text2); font-size: calc(13 * var(--pt)); line-height: 1.35; }
.a-plancard__usage { font-size: calc(15 * var(--pt)); font-weight: 600; }
.a-btn--quiet { min-height: calc(42 * var(--pt)); margin-top: calc(10 * var(--pt)); background: var(--a-chip); color: var(--a-text); font-size: calc(15 * var(--pt)); }
.a-btn--quiet svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.a-passrow { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(10 * var(--pt)) calc(12 * var(--pt)) calc(10 * var(--pt)) calc(14 * var(--pt)); }
.a-passrow + .a-passrow { box-shadow: inset calc(66 * var(--pt)) calc(0.5 * var(--pt)) 0 var(--a-surface), inset 0 calc(0.5 * var(--pt)) 0 var(--a-sep); }
.a-passrow__avatar { display: grid; flex: none; place-items: center; width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; background: var(--c); color: #ffffff; }
.a-passrow__avatar svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.a-passrow__text { display: grid; flex: 1; min-width: 0; gap: calc(1 * var(--pt)); }
.a-passrow__text b { font-size: calc(16 * var(--pt)); font-weight: 600; }
.a-passrow__text small { overflow: hidden; color: var(--a-text2); font-size: calc(13 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; }
.a-passrow__chev { flex: none; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: var(--a-text2); }

/* Wejściówka w Apple Wallet (karta „store card”): logo z inicjałami firmy, nazwa biura i „Wejściówka” u góry, pasek
   w kolorze firmy z kropkowaną falą (art.js), pod nim imię i nazwisko z datą, na dole kod QR z numerem */
.pass--access {
  --pass-bg: var(--c-to);
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  width: min(300px, 88%);
  translate: none;
  rotate: 3deg;
}
.pass--access { container-type: inline-size; }
/* Nagłówek rośnie z szerokością wejściówki: przy 300 px mieści „Escritório São Paulo” obok „Passe de acesso”, a na
   wąskim telefonie zmniejsza się razem z kartą, zamiast ucinać nazwę biura */
.pass--access .pass__head { gap: 2.6cqi; height: 14.6cqi; padding: 0 4.6cqi; }
.pass--access .pass__logo { width: 8cqi; height: 8cqi; font-size: 3.15cqi; }
.pass--access .pass__org,
.pass--access .pass__kind { font-size: 4.4cqi; }
.pass__logo { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; color: var(--c); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; }
.pass__kind { font-size: 15px; font-weight: 500; }
.pass__strip--waves { height: 92px; background: linear-gradient(135deg, var(--c-from), var(--c-to)); }
.pass__strip--waves::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgb(255 255 255 / 0.4) 1.1px, transparent 1.5px) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(168deg, transparent 18%, #000 42%, #000 58%, transparent 82%);
  mask-image: linear-gradient(168deg, transparent 18%, #000 42%, #000 58%, transparent 82%);
}
.pass__fields--split { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px 14px; font-size: 16px; }
.pass__end { text-align: right; }
.pass--access .pass__code { padding: 6px 0 18px; }
.pass--access .pass__qr { display: grid; justify-items: center; gap: 4px; padding: 8px 8px 6px; border-radius: 8px; }
.pass--access .pass__qr img { width: 92px; height: 92px; }
.pass--access .pass__qr small { color: #131313; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; }

/* Szósty punkt list z ikonami (np. „Własny wygląd” w cenniku) */
.checks li:nth-child(6) svg { --k: var(--yellow); }

/* ==========================================================================
   Kontakt (#kontakt): karta jak w cenniku – po lewej adres e-mail i to, co warto wiedzieć (lista .checks z pastelowymi
   kafelkami), po prawej formularz, który wysyła wiadomość przez /api/contact (wallet/src/contact.js). Temat wiadomości
   to pigułki – wybrana jest czarna, jak opcja w kreatorze. W pasku na górze „Kontakt” to ostatni link w białej kapsule.
   ========================================================================== */
.msg__card {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
/* Poświata jak w cenniku, tu w barwinku */
.msg__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 60% at 0% 0%, rgb(165 168 255 / 0.16), transparent 70%);
  pointer-events: none;
}
.msg__side,
.msg__form { min-width: 0; padding: clamp(24px, 2vw + 14px, 40px); }
/* Adres skaluje się do szerokości kolumny (cqi), żeby nie łamał się w pół słowa */
.msg__side { container-type: inline-size; border-bottom: 1px solid var(--line); }
.msg__direct { padding-bottom: 30px; }
.msg__more { padding-top: 28px; border-top: 1px solid var(--line); }
/* Od 900 px dwie kolumny; „Dobrze wiedzieć” na dole karty, równo z przyciskiem – jak pakiety w cenniku */
@media (min-width: 900px) {
  .msg__card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .msg__side { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 0; }
}
.msg__caption { color: var(--text-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.msg__address {
  display: block;
  width: fit-content;
  margin-top: 12px;
  color: var(--text);
  font-size: clamp(1.125rem, 7.6cqi, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.msg__address:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.msg__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 16px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.msg__copy[hidden] { display: none; }
.msg__copy.is-done { border-color: transparent; background: color-mix(in srgb, var(--green) 45%, transparent); }
.msg__facts { margin-top: 20px; }
/* Wizytówka zespołu między adresem a „Dobrze wiedzieć”: rośnie i maleje z wolnym miejscem (kontener size), a gdy
   miejsca jest za mało – znika. Za nią druga, obrócona karta w barwinku. Na telefonie jej nie ma: formularz ma być blisko. */
.msg__art { display: none; }
@media (min-width: 900px) {
  .msg__art { container: msg-art / size; flex: 1 1 0; display: grid; place-items: center; min-height: 0; }
  .msg__deck {
    position: relative;
    width: min(100cqw - 32px, (100cqh - 46px) * 1.586, 340px);
    aspect-ratio: 1.586;
    translate: 0 -6px; /* karta z tyłu wystaje w dół – całość lekko w górę */
  }
  .msg__deck::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--periwinkle) 85%, #ffffff), color-mix(in srgb, var(--periwinkle) 55%, var(--green)));
    translate: 5% 7%;
    rotate: 6deg;
    transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  }
  .msg__deck .vc { rotate: -4deg; transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out); }
  .msg__deck .vc__face { box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgb(19 19 19 / 0.32); }
  .msg__deck .vc__photo { border-color: rgb(255 255 255 / 0.2); background: none; }
  .msg__mark { display: block; width: auto; height: calc(12 * var(--u)); }
  @container msg-art (max-height: 150px) {
    .msg__deck { display: none; }
  }
}

.msg__topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.msg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.msg__chip { position: relative; display: flex; }
.msg__chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Temat: pastylka z ikoną; wybrana – czarna, ikona w zielonym kółku (jak strzałka w głównych przyciskach) */
.msg__chip-face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tile);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-out);
}
.msg__chip-face .icon {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  box-shadow: 0 0 0 1px var(--line);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.msg__chip:active .msg__chip-face { transform: scale(0.97); }
.msg__chip input:checked + .msg__chip-face { border-color: var(--sel-bg); background: var(--sel-bg); color: var(--sel-fg); }
.msg__chip input:checked + .msg__chip-face .icon { background: var(--green); color: var(--ink); box-shadow: none; }
.msg__chip input:focus-visible + .msg__chip-face { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Od 520 px równa siatka 2 × 2 – cztery tematy nie łamią się 3 + 1 */
@media (min-width: 520px) {
  .msg__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg__chip-face { width: 100%; line-height: 1.25; }
}

.msg__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 14px; margin-top: 28px; }
.msg__field { display: grid; gap: 8px; min-width: 0; }
.msg__field--wide { grid-column: 1 / -1; }
@media (max-width: 559px) {
  .msg__fields { grid-template-columns: minmax(0, 1fr); }
}
.msg__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text); font-size: 0.875rem; font-weight: 600; }
.msg__opt { color: var(--text-3); font-size: 0.8125rem; font-weight: 500; }
.msg__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tile);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.msg__input:focus { border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px var(--brand-soft); }
.msg__input:user-invalid { border-color: var(--bad); }
.msg__area { min-height: 148px; resize: vertical; }
@media (hover: hover) and (pointer: fine) {
  .msg__copy:hover { background: var(--tile); }
  .msg__copy.is-done:hover { background: color-mix(in srgb, var(--green) 45%, transparent); }
  .msg__chip-face:hover { border-color: var(--line-2); background: var(--tile-2); }
  .msg__chip input:checked + .msg__chip-face:hover { border-color: var(--sel-bg); background: var(--sel-bg); }
  .msg__input:hover:not(:focus) { border-color: var(--line-2); }
}
/* Wizytówka zespołu prostuje się, a karta za nią rozchyla, gdy kursor jest nad panelem z adresem */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .msg__side:hover .msg__deck .vc { rotate: -1deg; translate: 0 -4px; }
  .msg__side:hover .msg__deck::before { rotate: 9deg; translate: 7% 8%; }
}

/* Pole-pułapka na boty: poza ekranem, niedostępne z klawiatury i dla czytników ekranu */
.msg__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; }
.msg__note { flex: 1 1 260px; max-width: 46ch; color: var(--text-3); font-size: 0.8125rem; line-height: 1.5; }
.msg__note a { color: inherit; }
.msg__send[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
/* Na telefonie przycisk na całą szerokość; długi napis (np. po ukraińsku) łamie się, zamiast wychodzić poza kartę */
@media (max-width: 559px) {
  .msg__send { justify-content: space-between; width: 100%; padding-block: 6px; line-height: 1.2; text-align: left; white-space: normal; }
}
/* Komunikat po wysłaniu – pusty zostaje w drzewie dostępności, żeby czytnik ekranu go ogłosił */
.msg__status { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-s); font-size: 0.9375rem; line-height: 1.45; }
.msg__status:empty { margin: 0; padding: 0; }
.msg__status[data-state="busy"] { padding-inline: 0; color: var(--text-2); }
.msg__status[data-state="ok"] { background: color-mix(in srgb, var(--green) 35%, var(--surface)); color: var(--ink); }
.msg__status[data-state="error"] { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); }

/* Hiszpański i ukraiński mają najdłuższe nazwy: siedem linków z „Kontaktem” szeroki pasek mieści dopiero z krótszym
   przyciskiem („Descargar”, „Завантажити” – kontener ma najwyżej 1180 px), a do 1259 px także z ciaśniejszymi linkami;
   portugalski potrzebuje ich tylko od 1200 px, gdy wraca pełne „Baixar o app” i kod języka
   (po zmianie nazw w pasku sprawdź przy 1080, 1200 i 1260 px, czy linki nie łamią się na dwie linie) */
@media (min-width: 1080px) {
  :lang(es) .nav__cta-more,
  :lang(uk) .nav__cta-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1080px) and (max-width: 1259px) {
  :lang(es) .nav__links a,
  :lang(uk) .nav__links a { padding: 0 8px; }
}
@media (min-width: 1200px) and (max-width: 1259px) {
  :lang(pt) .nav__links a { padding: 0 13px; }
}
@media (min-width: 1080px) and (max-width: 1199px) {
  :lang(es) .nav__inner,
  :lang(uk) .nav__inner { gap: 16px; }
  :lang(es) .nav__links a { font-size: 0.875rem; }
}

/* ---------- 15. Dopracowanie: nagłówki sekcji, cennik, pytania i stopka --------- */

/* Numer i nazwa sekcji nad tytułem – te same co w menu (01 Kreator … 07 Kontakt) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.eyebrow small {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Tytuł z opisem: numer nad tytułem, opis po prawej – jego dół równo z ostatnią linią tytułu */
@media (min-width: 900px) {
  .section-head:has(.lead) { grid-template-rows: auto auto; row-gap: 0; }
  .section-head:has(.lead) > .eyebrow { grid-area: 1 / 1; }
  .section-head:has(.lead) > h2 { grid-area: 2 / 1; }
  .section-head:has(.lead) > .lead { grid-area: 1 / 2 / 3 / 3; align-self: end; max-width: 46ch; }
}

/* Cennik: dwa plany obok siebie – biała karta (własna wizytówka) i czarna (pakiet dla firmy). Od 900 px wiersze
   obu kart (nazwa, cena, opis, przyciski, lista) leżą na tej samej wysokości (subgrid). */
.plans { display: grid; gap: 16px; }
.plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2vw + 14px, 40px);
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.plan--free { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.plan--free::before { background: radial-gradient(60% 50% at 0% 0%, rgb(141 221 141 / 0.14), transparent 70%); }
.plan--biz { background: var(--ink); color: #f5f5f2; box-shadow: 0 30px 60px -30px rgb(19 19 19 / 0.55); }
.plan--biz::before { background: radial-gradient(55% 45% at 100% 0%, rgb(165 168 255 / 0.24), transparent 70%), radial-gradient(45% 35% at 0% 100%, rgb(141 221 141 / 0.1), transparent 70%); }
.plan__name { display: flex; align-items: center; gap: 10px; color: var(--text-2); font: 600 0.8125rem/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.plan__name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgb(141 221 141 / 0.8); }
/* Cena rośnie z kartą, a najdłuższa („Безкоштовно”, ok. 6 em) mieści się w karcie już na telefonie 320 px.
   Kontenerem jest wiersz ceny, nie karta – karta z container-type przestałaby być subgridem. */
.plan .price { container-type: inline-size; margin-top: 18px; }
.plan .price__value { font-size: clamp(2.25rem, 16cqi, 4.5rem); }
.plan__text { max-width: 46ch; margin-top: 14px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 26px; }
.plan__body { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.plan__caption { color: var(--text-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
/* Czarna karta: jasne napisy, ikony w pastelowych kolorach na ciemnym tle */
.plan--biz .plan__name,
.plan--biz .plan__caption,
.plan--biz .price__per,
.plan--biz .checks small { color: #a3a39e; }
.plan--biz .plan__name::before { background: var(--periwinkle); box-shadow: 0 0 10px rgb(165 168 255 / 0.8); }
.plan--biz .price__value,
.plan--biz .checks b { color: #ffffff; }
.plan--biz .plan__text { color: #c8c8c2; }
.plan--biz .plan__body { border-top-color: rgb(255 255 255 / 0.1); }
.plan--biz .checks svg { background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.btn--light { background: #ffffff; color: var(--ink); }
.plan__more { display: inline-flex; align-items: center; min-height: 44px; color: #ffffff; font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; }
.plans__notes { display: grid; gap: 10px; margin-top: 22px; padding-inline: 8px; list-style: none; color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.plans__notes li { display: flex; align-items: flex-start; gap: 10px; }
.plans__notes .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }
/* Telefony: przycisk na całą szerokość karty, a długi tekst (np. „Se renseigner sur la formule”) łamie się */
@media (max-width: 519px) {
  .plan .btn--primary { width: 100%; min-height: 52px; padding-block: 6px; justify-content: space-between; line-height: 1.25; text-align: left; white-space: normal; }
}
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 20px; }
  .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .plan__actions { align-self: start; }
  .plans__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; margin-top: 28px; }
}
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: #e9e8e1; }
  .plan__more:hover { text-decoration-color: #ffffff; }
}

/* Pytania: białe karty, plus w kółku zamienia się w krzyżyk; otwarta karta lekko się unosi */
.faq__item,
.faq__item:first-child {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.faq__item[open] { border-color: var(--line-2); box-shadow: 0 18px 40px -30px rgb(19 19 19 / 0.45); }
.faq__item summary { min-height: 60px; padding: 12px 12px 12px 20px; border-radius: 20px; font-size: 1.0625rem; font-weight: 500; }
.faq__item summary::after {
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--tile);
  color: var(--text);
  rotate: 0deg;
  translate: 0;
  transition: rotate 0.35s var(--ease-out), background-color 0.2s ease, color 0.2s ease;
}
.faq__item[open] summary::after { rotate: 135deg; translate: 0; background-color: var(--ink); color: #ffffff; }
.faq__item summary:focus-visible { outline: none; }
.faq__item:has(> summary:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.faq__a p { max-width: 62ch; padding: 0 20px 20px; line-height: 1.6; }

/* Stopka: odznaki sklepów pod opisem, ikony przy kontakcie; godziny to informacja, nie link */
.footer__badges { gap: 10px; margin-top: 22px; }
.footer__badges .badge { height: 40px; }
.footer__col h2 { margin-bottom: 10px; color: var(--text-3); font-size: 0.75rem; letter-spacing: 0.08em; }
.footer__col a { gap: 10px; color: var(--text); text-decoration-color: transparent; text-underline-offset: 4px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.footer__col a .icon { flex: none; width: 18px; height: 18px; color: var(--text-3); }
.footer__hours { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-top: 4px; color: var(--text-3); font-size: 0.875rem; }
.footer__hours .icon { flex: none; width: 18px; height: 18px; color: var(--ok); }
.footer__col .footer__hours > span { min-height: 0; color: inherit; font-size: inherit; }

@media (hover: hover) {
  .faq__item:not([open]):hover { border-color: var(--line-2); }
  .faq__item:not([open]) summary:hover::after { background-color: var(--tile-2); }
  .footer__col a:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
}

/* Wąskie telefony: kolumny stopki jedna pod drugą (długie słowa, np. „Datenschutzerklärung”) */
@media (max-width: 379px) {
  .footer__main { grid-template-columns: minmax(0, 1fr); }
}