/* ═══════════════════════════════════════════════════════
   FONTS – self-hosted, polskie znaki
   ═══════════════════════════════════════════════════════ */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../../pliki/fonts/inter-tight-pl.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../pliki/fonts/instrument-serif-pl.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../../pliki/fonts/instrument-serif-italic-pl.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../../pliki/fonts/jetbrains-mono-pl.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100 800; font-display: swap; src: url('../../pliki/fonts/jetbrains-mono-italic-pl.woff2') format('woff2'); }

/* ═══════════════════════════════════════════════════════
   TOKENS – spójne z resztą strony + dodatki narzędzia
   ═══════════════════════════════════════════════════════ */
:root {
  --bg: #EFE8DA;
  --bg-deep: #E7DECC;
  --paper: #FBF8F2;
  --paper-pure: #FFFFFF;
  --gen-surface: #F9F4ED; /* generator interactive elements */
  --ink: #1A1814;
  --ink-soft: #3D3833;
  --ink-mid: #6B6259;
  --ink-dim: #807769;     /* WCAG AA: 4.7:1 na tle paper */
  --ink-faint: #BCB2A4;
  --rule: rgba(26, 24, 20, 0.05);          /* lżejsze ramki, mniej brązu */
  --rule-strong: rgba(26, 24, 20, 0.09);
  --rule-deep: rgba(26, 24, 20, 0.16);

  --accent: #2C5446;
  --accent-soft: #DDEAE2;
  --amber: #E8A33D;
  --amber-soft: #FBEAD0;
  --rose: #B85565;
  --rose-soft: #F5DDDF;
  --green: #2C5446;
  --green-soft: #DDEAE2;

  --shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.03), 0 2px 5px -1px rgba(60, 40, 20, 0.04);
  --shadow-md: 0 1px 2px rgba(60, 40, 20, 0.03), 0 3px 8px -2px rgba(60, 40, 20, 0.04), 0 8px 18px -6px rgba(60, 40, 20, 0.05);
  --shadow-lg: 0 1px 2px rgba(60, 40, 20, 0.03), 0 5px 12px -4px rgba(60, 40, 20, 0.04), 0 14px 28px -10px rgba(60, 40, 20, 0.05);
  --shadow-xl: 0 1px 1px rgba(60, 40, 20, 0.03), 0 6px 14px -6px rgba(60, 40, 20, 0.04), 0 22px 40px -20px rgba(60, 40, 20, 0.05);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.5, 1.6, 0.5, 0.9);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); text-shadow: none; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  accent-color: var(--accent);
  caret-color: var(--accent);
  hyphens: manual;
  /* Rezerwuj miejsce dla scrollbara od początku – eliminuje layout shift
     gdy scrollbar pojawia się/znika (content rośnie po fonts-ready). */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  font-feature-settings: "tnum", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  /* Sticky footer pattern – body to flex column, main rośnie do wypełnienia,
     footer ląduje zawsze na końcu. Naprawia "rozjeżdżanie stopki" przy initial load
     (font swap / scroll-bar appearance shift). */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
#main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(232, 163, 61, 0.07), transparent 50%),
    radial-gradient(ellipse at 100% 30%, rgba(44, 84, 70, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4, [id] { scroll-margin-top: 5.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Anti-FOUT */
html:not(.fonts-ready) body { opacity: 0; }
html.fonts-ready body { transition: opacity 0.3s var(--ease); }

.skip-link {
  position: fixed;
  top: 0.85rem;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 1000;
  padding: 0.65rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease-snap);
}
.skip-link:focus, .skip-link:focus-visible { transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════ */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: 920px; }
.wrap--wide { max-width: 1480px; }

/* ═══════════════════════════════════════════════════════
   NAV (sticky pill, spójny z resztą strony)
   ═══════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0.85rem;
  z-index: 100;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  pointer-events: none;
}
.nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  /* Grid 1fr/auto/1fr – brand EXACT 50% viewport, spójne z podstrony.css */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  background: rgba(251, 248, 242, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition: padding 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav.is-scrolled .nav__inner {
  padding: 0.4rem 0.6rem 0.4rem 0.95rem;
  box-shadow: var(--shadow-md);
  background: rgba(251, 248, 242, 0.92);
}
/* Grid items: brand exact-center, back left, right end */
.nav__inner > :first-child { justify-self: start; }
.nav__inner > .brand       { justify-self: center; }
.nav__inner > :last-child  { justify-self: end; }
.brand {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  transform: translateY(1px);
}
.brand__name {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.brand__name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0.08em;
  color: var(--ink-mid);
}
.brand__ai {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
  margin-left: 0.1em;
}
.nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  border-radius: 999px;
  background: rgba(26, 24, 20, 0.04);
  transition: color 0.2s var(--ease);
}
.nav__back:hover { color: var(--ink); }
.nav__back-arrow {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FCF8F2;
  font-size: 11px;
  transition: transform 0.25s var(--ease-snap);
}
.nav__back:hover .nav__back-arrow { transform: translateX(-3px); }
.nav__cta {
  --lift: 0px; --press: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(26,24,20,0.18);
  transform: translateY(var(--lift)) scale(var(--press));
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.nav__cta:hover { --lift: -1px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(26,24,20,0.25); }
.nav__cta:active { --lift: 0px; --press: 0.97; transition-duration: 80ms; }

.arrow-circle {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-snap);
}
.arrow-circle svg { width: 11px; height: 11px; display: block; }
.arrow-circle--sm { width: 20px; height: 20px; }
.arrow-circle--sm svg { width: 9.5px; height: 9.5px; }
.nav__cta:hover .arrow-circle { transform: rotate(-30deg); }

/* Nav right side: lang switch + mail CTA */
.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 1rem;          /* większy oddech między PL/EN a buttonem */
}
/* PL/EN – pod nav, center, 40px gap, 30% niższy niż theme buttons.
   Switch usunięty (rozdział na /kolory-marki/ + /brand-colors/), ale lang-bar
   zachowany z min-height = realna wysokość switcha w ux-kopia (34px = button 26px
   border-box + parent padding 0.2rem*2 + border 1px*2). Hero NIE podskoczy. */
.lang-bar {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  min-height: 34px;
}
.lang-switch {
  display: inline-flex;
  padding: 0.2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  gap: 0.15rem;
  align-items: center;
}
.lang-switch__btn {
  position: relative;
  min-height: 26px;            /* 36 × 0.7 = ~25 → 26 */
  padding: 0.3rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink-mid);
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lang-switch__btn::before { content: ''; position: absolute; inset: -7px; }    /* hit area 40+ */
.lang-switch__btn:hover { color: var(--ink); }
.lang-switch__btn[aria-pressed="true"] {
  background: var(--paper-pure);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
}

@media (max-width: 720px) {
  .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; }
  .nav__back { justify-self: start; padding: 0.5rem 0.85rem; background: var(--bg-deep); }
  .nav__back span:not(.nav__back-arrow) { display: none; }
  .nav__back-arrow { width: auto; height: auto; background: transparent; font-size: 18px; line-height: 1; }
  .brand { justify-self: center; padding: 0.25rem; }
  .nav__right { justify-self: end; }
  /* lang-switch jest teraz w hero (nie w nav) – patrz .hero__lang */
}

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
}
@media (max-width: 860px) {
  /* Mniejszy padding-top hero gdy hero__grid przechodzi w 1-col layout (≤860px) */
  .hero { padding-top: 1rem; }
}
.hero__copy {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}
/* Desktop: dwa-kolumny – tytuł lewo, lead prawo (last-baseline alignment, Linear/Vercel/Stripe) */
.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;     /* dolne krawędzie kolumn */
}
.hero__grid .hero__title {
  margin: 0;
  text-align: left;
  text-wrap: balance;
  max-width: none;
}
.hero__grid .hero__lead {
  margin: 0;
  padding-bottom: 0.35em;     /* offset descenders + line-height leadu (1.5 vs 0.96 tytułu) */
  line-height: 1.5;           /* zwartsze niż 1.6 – lepsze wyrównanie last-baseline */
  text-align: left;
  max-width: 44ch;
}
@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: center;
    align-items: start;
  }
  .hero__grid .hero__title,
  .hero__grid .hero__lead { text-align: center; max-width: 100%; }
  .hero__grid .hero__title { margin: 0 auto; }
  .hero__grid .hero__lead { margin: 0 auto; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
}
.hero__eyebrow-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--green-soft);
  flex-shrink: 0;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--green-soft); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 18%, transparent); }
}
.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
  max-width: 18ch;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.hero__lead {
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.hero__lead strong { color: var(--ink); font-weight: 600; }
.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__kbd {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  padding: 0.25rem 0.5rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1;
}
.hero__hint-sep { opacity: 0.5; }
.btn__kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(251, 248, 242, 0.6);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  margin-left: 0.1rem;
}

/* ═══════════════════════════════════════════════════════
   STUDIO – główne narzędzie (controls + workspace)
   ═══════════════════════════════════════════════════════ */
.studio {
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 5vw, 5rem);
}
.studio__shell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 640px;
}
@media (max-width: 1080px) {
  .studio__shell { grid-template-columns: 1fr; }
}

/* ─── CONTROLS PANEL ─── */
.controls {
  border-right: 1px solid var(--rule);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1080px) {
  .controls { border-right: 0; border-bottom: 1px solid var(--rule); }
}
.controls__head {
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.controls__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.controls__label::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--ink-mid);
}
.controls__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}
.controls__sub {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Mode tabs */
.mode-tabs {
  display: flex;
  padding: 0.35rem;
  margin: 1rem 1rem 0;
  background: var(--gen-surface);
  border-radius: 12px;
  gap: 0.2rem;
}
.mode-tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-mid);
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;       /* zawsze w jednej linii */
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.mode-tab:active { transform: scale(0.96); }
.mode-tab:hover { color: var(--ink); }
.mode-tab[aria-pressed="true"] {
  background: var(--paper-pure);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.06), 0 0 0 1px rgba(26,24,20,0.04);
}

/* Field group */
.field-group {
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.field-group:last-of-type { border-bottom: 0; }
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.field__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  text-transform: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Color picker row */
.picker {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.6rem;
  align-items: stretch;
}
.picker__swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--rule-strong);
  background: var(--accent);
  box-shadow: var(--shadow-xs), inset 0 0 0 3px var(--gen-surface);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.picker__swatch:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm), inset 0 0 0 3px var(--gen-surface); }
.picker__swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.picker__hex {
  display: flex;
  align-items: center;
  background: var(--paper-pure);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 0 0.6rem 0 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.picker__hex:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.picker__hex-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 500;
  margin-right: 0.15rem;
}
.picker__hex-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  padding: 0.6rem 0;
  width: 100%;
  min-width: 0;
}
.picker__random {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-deep);
  color: var(--ink);
  margin: -0.05rem -0.2rem -0.05rem 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease-snap);
}
.picker__random::before { content: ''; position: absolute; inset: -4px; }
.picker__random:hover { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.picker__random:active { transform: rotate(45deg) scale(0.96); transition-duration: 80ms; }
.picker__random svg { width: 15px; height: 15px; }

/* Pretty select */
.select {
  position: relative;
  display: block;
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.7rem 2.4rem 0.7rem 0.85rem;
  background: var(--paper-pure);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  cursor: pointer;
}
.select select:focus { border-color: var(--accent); }
.select select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: 2px solid transparent; outline-offset: 2px; }
.select::after {
  content: '';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-mid);
  border-bottom: 1.5px solid var(--ink-mid);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Slider */
.slider {
  position: relative;
}
.slider__bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 999px;
  cursor: pointer;
}
.slider__bar:focus { outline: 0; }
.slider__bar:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow-md);
  border-color: var(--accent);
}
.slider__bar:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow-md);
  border-color: var(--accent);
}
.slider__bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--paper-pure);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.slider__bar::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--paper-pure);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.slider__bar:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: var(--shadow-md); }
.slider__bar:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(0.98); }
.slider__value {
  position: absolute;
  right: 0;
  top: -22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Number stepper */
.stepper {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  background: var(--paper-pure);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
}
.stepper__btn {
  position: relative;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  transition: background 0.2s var(--ease), transform 0.12s var(--ease);
}
.stepper__btn::before { content: ''; position: absolute; inset: -2px; }
.stepper__btn:hover { background: var(--bg-deep); }
.stepper__btn:active { transform: scale(0.94); transition-duration: 60ms; }
.stepper__val {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  height: 40px;
  display: grid;
  place-items: center;
}

/* Naming pattern segmented */
.segments {
  display: flex;
  padding: 0.3rem;
  background: var(--bg-deep);
  border-radius: 12px;
  gap: 0.2rem;
}
.segments__btn {
  flex: 1;
  padding: 0.55rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  border-radius: 8px;
  text-align: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.segments__btn:hover { color: var(--ink); }
.segments__btn[aria-pressed="true"] {
  background: var(--paper-pure);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.06);
}

/* Action button */
.controls__actions {
  margin-top: auto;
  padding: 1.2rem 1.5rem 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Library mode: slidery wygaszone bo generate() ich nie respektuje gdy paleta z biblioteki */
.is-library-locked .field-group[data-mode-show="brand"] {
  opacity: 0.45;
  pointer-events: none;
}
/* Reset icon-btn – animacja rotate na hover (workspace__tools) */
#action-reset svg { transition: transform 0.45s var(--ease); }
#action-reset:hover svg { transform: rotate(-180deg); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  --lift: 0; --press: 1;
  transform: translateY(calc(var(--lift) * 1px)) scale(var(--press));
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(26,24,20,0.18);
}
.btn--primary:hover { --lift: -1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(26,24,20,0.26); }
.btn--primary:active { --lift: 0; --press: 0.97; transition-duration: 80ms; }
.btn--ghost {
  background: var(--paper-pure);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--gen-surface); border-color: var(--rule-deep); }
.btn--small { padding: 0.6rem 0.95rem; font-size: 12.5px; border-radius: 10px; }
.btn svg { width: 14px; height: 14px; }

/* ─── WORKSPACE ─── */
.workspace {
  display: flex;
  flex-direction: column;
  background: var(--paper-pure);
  position: relative;
}
.workspace__head {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
}
.workspace__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.workspace__title-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.25rem 0.55rem;
  background: var(--bg-deep);
  border-radius: 6px;
}
.workspace__tools {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--ink-mid);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
/* Hit area extension – minimum 44×44 (WCAG 2.2 AA) */
.icon-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
}
.icon-btn:hover { background: var(--gen-surface); color: var(--ink); border-color: var(--rule-strong); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn--ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Palette canvas */
.palette {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--shades, 11), 1fr);
  min-height: 480px;
  position: relative;
}
@media (max-width: 720px) {
  .palette {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* ──────── PALETTE w trybie SYSTEM (4 grupy: brand/neutral/accent/semantic) ──────── */
.palette--system {
  display: flex;
  flex-direction: column;
  min-height: auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
}
.palette__group {
  border-bottom: 1px solid var(--rule);
}
.palette__group:last-child { border-bottom: 0; }
.palette__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem 0.6rem;
  background: rgba(26, 24, 20, 0.02);
  border-bottom: 1px solid var(--rule);
}
.palette__group-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.palette__group-desc {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-mid);
  letter-spacing: -0.005em;
  min-width: 0;
}
.palette__group-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.palette__group-row {
  display: grid;
  grid-template-columns: repeat(var(--c, 5), 1fr);
  gap: 0;
  min-height: 140px;
}
@media (max-width: 720px) {
  .palette__group-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* Swatch w trybie System – zawiera label + hex + role */
.swatch--system {
  padding: 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  cursor: pointer;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.18s var(--ease), z-index 0s linear 0.2s;
  isolation: isolate;
  overflow: hidden;
  animation: swatchIn 0.4s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}
.swatch--system:last-child { border-right: 0; }
@media (max-width: 720px) {
  .swatch--system {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.85rem 1rem;
  }
}
.swatch--system:active { transform: scale(0.985); transition-duration: 60ms; }
.swatch--system::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.05));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.swatch--system:hover::before { opacity: 1; }
.swatch__top { position: relative; z-index: 1; min-height: 1.2em; }
.swatch__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.swatch__label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.78;
  background: rgba(255, 255, 255, 0.14);
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.swatch--system .swatch__hex {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.swatch__role {
  font-size: 11.5px;
  line-height: 1.35;
  opacity: 0.78;
  letter-spacing: -0.005em;
  max-width: 100%;
  font-weight: 500;
}
.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 0.85rem 1.1rem;
  cursor: pointer;
  transition: flex 0.4s var(--ease), z-index 0s linear 0.2s, transform 0.12s var(--ease);
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  /* Enter animation – stagger przez --i ustawiane w JS */
  animation: swatchIn 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes swatchIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.swatch:active { transform: scale(0.985); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .swatch { animation: none; }
}
.swatch:last-child { border-right: 0; }
@media (max-width: 720px) {
  .swatch {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .swatch:last-child { border-bottom: 0; }
  /* HEX padding-right żeby nie wchodził pod kłódkę */
  .swatch__hex { padding-right: 38px; }
  /* Kłódka zawsze widoczna na mobile (touch device, brak hover) */
  .swatch__lock { opacity: 0.5; transform: translateY(0); }
  .swatch:active .swatch__lock { opacity: 1; }
}
.swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.06));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.swatch:hover { z-index: 2; }
.swatch:hover::before { opacity: 1; }
.swatch__step {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.72;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.swatch__hex {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.swatch__lock {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s var(--ease);
  z-index: 2;
}
.swatch:hover .swatch__lock,
.swatch.is-locked .swatch__lock { opacity: 1; transform: translateY(0); }
.swatch.is-locked .swatch__lock { background: rgba(255, 255, 255, 0.85); }
.swatch__lock svg { width: 11px; height: 11px; }
.swatch__lock:hover { background: rgba(255, 255, 255, 0.4); }
.swatch.is-locked .swatch__lock:hover { background: rgba(255, 255, 255, 1); }
.swatch__copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  z-index: 3;
}
.swatch.is-copied .swatch__copy { opacity: 1; }

/* Workspace bar (info, contrast, name) */
.workspace__bar {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  font-size: 12px;
}
.workspace__bar-l {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.workspace__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
}
.workspace__chip strong { color: var(--ink); font-weight: 700; }
.workspace__chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.workspace__bar-r {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   PREVIEW – realne mockupy (strona www, kreacja, mail)
   ═══════════════════════════════════════════════════════ */
.preview {
  padding: calc(clamp(3rem, 5vw, 5rem) + 10px) 0 clamp(3rem, 5vw, 5rem);
}
/* Desktop: tytuł lewy + kontrolki prawy (jak .library__head) */
.preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  margin-bottom: 2.125rem;
  text-align: left;
}
.preview__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem 1.5rem;
}
.preview__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.preview__group-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.preview__theme,
.preview__color,
.preview__font {
  display: inline-flex;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  gap: 0.2rem;
  flex-shrink: 0;
}
.preview__title {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-wrap: balance;
}
.preview__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.preview__sub {
  font-size: 14.5px;
  color: var(--ink-mid);
  max-width: 56ch;
  margin-top: 0.5rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.preview__theme {
  display: inline-flex;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  gap: 0.2rem;
  flex-shrink: 0;
}
.preview__theme-btn {
  position: relative;
  min-height: 36px;
  padding: 0.55rem 1rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-mid);
  border-radius: 9px;        /* concentric: 12 (parent) − 0.3rem padding ≈ 7-8 */
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.preview__theme-btn::before { content: ''; position: absolute; inset: -4px; }   /* hit area 44×44 */
.preview__theme-btn:hover { color: var(--ink); }
.preview__theme-btn:active { transform: scale(0.96); }
.preview__theme-btn[aria-pressed="true"] {
  background: var(--paper-pure);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
}

/* MOCKUP – wspólne */
.mockup {
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(26,24,20,0.03),
    0 8px 18px -8px rgba(26,24,20,0.06),
    0 18px 36px -16px rgba(26,24,20,0.08);
  background: var(--paper-pure);
  transition: background 0.4s var(--ease);
  position: relative;
  isolation: isolate;
}

/* SITE mockup (browser chrome + landing) – większy oddech do reklam pod spodem */
.mockup--site { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mockup__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: rgba(26, 24, 20, 0.03);
  border-bottom: 1px solid rgba(26, 24, 20, 0.035);
  position: relative;
}
.mockup__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(26, 24, 20, 0.15);
}
.mockup__url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mid);
  background: var(--paper-pure);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.mockup__body {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--p-50, #F8FAFC);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.mockup--dark .mockup__body { background: var(--p-950, #0E1D19); }

.mockup__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.4rem 0.45rem 0.4rem 0.95rem;
  margin: clamp(0.5rem, 1.2vw, 1rem) auto clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: min(1080px, 94%);
  border-radius: 999px;
  border: 1px solid rgba(26, 24, 20, 0.05);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.025);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}
.mockup--dark .mockup__nav {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.mockup--white .mockup__nav {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(26, 24, 20, 0.06);
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.03);
}
.mockup__brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p-900, var(--ink));
  transition: color 0.4s var(--ease);
}
.mockup--dark .mockup__brand-logo { color: var(--p-50, var(--paper)); }
.mockup__brand-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-500, var(--p-600));
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mockup__nav-links {
  display: inline-flex;
  gap: 1.8rem;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--p-700, var(--ink-soft));
}
.mockup__nav-link {
  position: relative;
  cursor: pointer;
  transition: color 0.4s var(--ease);
}
.mockup__nav-link::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: -6px;
  height: 1.5px;
  background: var(--p-700, var(--ink));
  border-radius: 999px;
  opacity: 0;
  transition: left 0.28s var(--ease), right 0.28s var(--ease), opacity 0.2s var(--ease);
}
.mockup__nav-link:hover { color: var(--p-900, var(--ink)); }
.mockup__nav-link:hover::after { left: 0; right: 0; opacity: 0.45; }
.mockup__nav-link--active {
  color: var(--p-900, var(--ink));
  font-weight: 600;
}
.mockup__nav-link--active::after {
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent-500, var(--p-600));
  opacity: 1;
}
.mockup--dark .mockup__nav-link--active { color: var(--p-50, var(--paper)); }
.mockup__card--featured {
  position: relative;
}
.mockup__card-tag--accent {
  background: var(--accent-50, var(--p-100)) !important;
  color: var(--accent-500, var(--p-700)) !important;
}
.mockup--dark .mockup__card-tag--accent {
  background: color-mix(in srgb, var(--accent-500, white) 22%, transparent) !important;
  color: var(--accent-500, var(--p-300)) !important;
}
.mockup--dark .mockup__nav-links { color: var(--p-300, var(--ink-faint)); }
@media (max-width: 720px) { .mockup__nav-links { display: none; } }
.mockup__nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  font-weight: 600;
  padding: 0.45rem 0.45rem 0.45rem 1rem;
  border-radius: 999px;
  background: var(--p-900, var(--ink));
  color: var(--p-50, var(--paper));
  letter-spacing: -0.005em;
  box-shadow: 0 1px 3px rgba(26,24,20,0.12);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mockup__nav-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-50, white) 20%, transparent);
  color: var(--p-50, white);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.mockup__nav-cta-arrow svg { width: 11px; height: 11px; }
.mockup--dark .mockup__nav-cta-arrow {
  background: color-mix(in srgb, var(--p-900, black) 18%, transparent);
  color: var(--p-900, var(--ink));
}
.mockup--dark .mockup__nav-cta { background: var(--p-50, var(--paper)); color: var(--p-900, var(--ink)); }

.mockup__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mockup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-50, white) 60%, transparent);
  color: var(--p-800, var(--ink));
  border: 1px solid color-mix(in srgb, var(--p-300, var(--ink-faint)) 35%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 24, 20, 0.03);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.mockup--dark .mockup__eyebrow {
  background: rgba(255, 255, 255, 0.05);
  color: var(--p-100, var(--ink-faint));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mockup__eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-500, var(--p-600));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, white 30%, transparent);
}
.mockup__h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--p-900, var(--ink));
  text-wrap: balance;
  max-width: 13ch;
}
.mockup--dark .mockup__h1 { color: var(--p-50, var(--paper)); }
.mockup__h1-em {
  /* jedna czcionka z h1 – zachowuje sans, tylko subtelnie inny kolor dla akcentu */
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--p-600, var(--accent));
}
.mockup__lead {
  font-size: clamp(16.5px, 1.5vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--p-700, var(--ink-soft));
  max-width: 48ch;
  text-wrap: pretty;
  margin-top: 0.3125rem !important;
}
.mockup--dark .mockup__lead { color: var(--p-300, rgba(255,255,255,0.66)); }
.mockup__ctas {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.mockup__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--p-600, var(--accent));
  color: var(--p-50, var(--paper));
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--p-600, var(--accent)) 40%, transparent);
}
.mockup__btn-arrow { display: inline-block; transform: translateY(-0.5px); }
.mockup__btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--p-200, rgba(26,24,20,0.1));
  color: var(--p-700, var(--ink));
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.mockup--dark .mockup__btn-ghost { border-color: rgba(255, 255, 255, 0.16); color: var(--p-100, var(--paper)); }

.mockup__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: 30px;
  margin: 0 auto;
  width: 100%;
  max-width: min(1080px, 94%);
  position: relative;
}
/* Cienka linia separator – tej samej szerokości co karty */
.mockup__cards::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 24, 20, 0.08) 15%,
    rgba(26, 24, 20, 0.08) 85%,
    transparent 100%
  );
}
.mockup--dark .mockup__cards::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 15%,
    rgba(255, 255, 255, 0.1) 85%,
    transparent 100%
  );
}
@media (max-width: 720px) { .mockup__cards { grid-template-columns: 1fr; gap: 0.7rem; } }

/* PREMIUM CARDS – tło zawsze widoczne (paleta), hover = lift + większy cień */
.mockup__card {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 2.2vw, 1.8rem);
  background: var(--p-100, rgba(26,24,20,0.05));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.025),
    0 0 0 1px rgba(26, 24, 20, 0.03);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.mockup__card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 8px 24px -8px rgba(26, 24, 20, 0.12),
    0 0 0 1px rgba(26, 24, 20, 0.04);
}
.mockup--dark .mockup__card {
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.mockup--dark .mockup__card:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 24px -8px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Badge'e jako kolorowe kółka – wizualizacja palety */
.mockup__card-tag {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Trzy różne kolory palety – pokazują paletę "w działaniu" */
.mockup__card:nth-child(1) .mockup__card-tag {
  background: var(--accent-500, var(--p-600));
  color: var(--p-50, white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-500, var(--p-600)) 35%, transparent);
}
.mockup__card:nth-child(2) .mockup__card-tag {
  background: var(--p-200, rgba(26,24,20,0.08));
  color: var(--p-800, var(--ink));
  box-shadow: inset 0 0 0 1px var(--p-300, rgba(26,24,20,0.06));
}
.mockup__card:nth-child(3) .mockup__card-tag {
  background: var(--p-900, var(--ink));
  color: var(--p-50, white);
  box-shadow: 0 1px 3px rgba(26, 24, 20, 0.18);
}
.mockup--dark .mockup__card:nth-child(2) .mockup__card-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--p-100, var(--paper));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mockup--dark .mockup__card:nth-child(3) .mockup__card-tag {
  background: var(--p-50, white);
  color: var(--p-900, var(--ink));
}

.mockup__card-h {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  color: var(--p-900, var(--ink));
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.mockup--dark .mockup__card-h { color: var(--p-50, var(--paper)); }

.mockup__card-p {
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  line-height: 1.55;
  color: var(--p-700, var(--ink-soft));
  letter-spacing: -0.003em;
}
.mockup--dark .mockup__card-p { color: var(--p-300, rgba(255,255,255,0.6)); }

/* Mini swatches palety u dołu karty – zawsze widoczne (ring + skip p-100/950) */
.mockup__card-swatches {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: clamp(0.9rem, 1.6vw, 1.2rem);
}
.mockup__card-swatches span {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  /* Ring zapewnia separację gdy kolor swatcha = kolor tła karty */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-900, var(--ink)) 12%, transparent);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mockup__card-swatches span[data-sw="100"] { background: var(--p-200, rgba(26,24,20,0.12)); }
.mockup__card-swatches span[data-sw="300"] { background: var(--p-400, rgba(26,24,20,0.28)); }
.mockup__card-swatches span[data-sw="500"] { background: var(--accent-500, var(--p-500, var(--accent))); }
.mockup__card-swatches span[data-sw="700"] { background: var(--p-700, var(--ink-soft)); }
.mockup__card-swatches span[data-sw="900"] { background: var(--p-900, var(--ink)); }
.mockup--dark .mockup__card-swatches span {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.mockup--dark .mockup__card-swatches span[data-sw="100"] { background: rgba(255, 255, 255, 0.18); }
.mockup--dark .mockup__card-swatches span[data-sw="300"] { background: rgba(255, 255, 255, 0.32); }
.mockup__card:hover .mockup__card-swatches span { transform: translateY(-1.5px); }
.mockup__card:hover .mockup__card-swatches span:nth-child(1) { transition-delay: 0s; }
.mockup__card:hover .mockup__card-swatches span:nth-child(2) { transition-delay: 0.04s; }
.mockup__card:hover .mockup__card-swatches span:nth-child(3) { transition-delay: 0.08s; }
.mockup__card:hover .mockup__card-swatches span:nth-child(4) { transition-delay: 0.12s; }
.mockup__card:hover .mockup__card-swatches span:nth-child(5) { transition-delay: 0.16s; }

/* MOCKUP ROW (3 warianty reklamy) */
.mockup__row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 1rem;
  margin-top: 1rem;
}
.mockup__row--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 980px) { .mockup__row { grid-template-columns: 1fr; } .mockup__row--three { grid-template-columns: 1fr; } }
@media (min-width: 981px) and (max-width: 1180px) {
  .mockup__row--three { grid-template-columns: 1fr 1fr; }
}

/* MOCKUP – AD (kreacja kwadratowa) */
.mockup--ad {
  background: var(--p-600, var(--accent));
  color: var(--p-50, var(--paper));
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative;
  overflow: hidden;
}
.mockup__ad-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.mockup__ad-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.mockup__ad-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}
.mockup__ad-h {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.mockup__ad-p {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 28ch;
}
.mockup__ad-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--p-50, var(--paper));
  color: var(--p-900, var(--ink));
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  align-self: flex-start;
  margin-top: 0.5rem;
}
.mockup__ad-decor {
  position: absolute;
  inset: auto -10px -20px auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 0;
}
.mockup__ad-decor span {
  display: block;
  width: 90px; height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.mockup__ad-decor span:nth-child(2) { width: 130px; }
.mockup__ad-decor span:nth-child(3) { width: 70px; }
/* V1/V2/V3 ad warianty – patrz: blok "v6 · AD WARIANTY" na końcu pliku (specifity wymaga kolejności po .mockup--ad) */

/* MOCKUP – MAIL (mailing) */
.mockup--mail {
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  background: var(--paper-pure);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mockup__mail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(26, 24, 20, 0.08);
}
.mockup__mail-from {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 13px;
  color: var(--ink-mid);
}
.mockup__mail-from strong { display: block; color: var(--ink); font-size: 13.5px; letter-spacing: -0.005em; }
.mockup__mail-from em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.02em; }
.mockup__mail-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--p-600, var(--accent));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.mockup__mail-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.mockup__mail-subj {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.mockup__mail-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mockup__mail-body p { margin: 0; }
.mockup__mail-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.2rem;
  background: var(--p-600, var(--accent));
  color: var(--p-50, var(--paper));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 0.4rem;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--p-600, var(--accent)) 40%, transparent);
}

/* Contrast section header – eyebrow caps + tytuł, dwa wiersze, czytelny rytm */
.contrast__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 4.5rem 0 1.5rem;
}
.contrast__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.contrast__sub {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

/* Contrast preview ribbon */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.contrast__cell {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 130px;
  justify-content: space-between;
}
.contrast__h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.contrast__sample {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.contrast__sample-sm {
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.85;
}
.contrast__score {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.contrast__score-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-weight: 800;
}
.contrast__score-badge--pass {
  background: rgba(16, 122, 76, 0.16);
  color: #0F6E45;
}
.contrast__score-badge--fail {
  background: rgba(184, 85, 101, 0.16);
  color: #9A3D4F;
}

/* ═══════════════════════════════════════════════════════
   EXPORT
   ═══════════════════════════════════════════════════════ */
.export {
  padding: calc(clamp(3rem, 5vw, 5rem) + 20px) 0 clamp(3rem, 5vw, 5rem);
}
.export__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.125rem;
  text-align: center;
}
.export__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.export__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.export__sub {
  font-size: 14px;
  color: var(--ink-mid);
  max-width: 50ch;
}
.export__shell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.export__tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  gap: 0.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.export__tab {
  padding: 0.55rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border-radius: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s var(--ease);
}
.export__tab:hover { color: var(--ink); }
.export__tab:active { transform: scale(0.96); }
.export__tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(26,24,20,0.16);
}
/* Wyróżnienie „dla wszystkich" – list + brand kit */
.export__tab--simple {
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 12.5px;
}
.export__tab--simple[aria-pressed="true"] {
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.export__body {
  position: relative;
  background: #1A1814;
  color: #E8E4DD;
}
.export__code {
  padding: 1.4rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  max-height: 460px;
  letter-spacing: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.export__code::-webkit-scrollbar { height: 8px; width: 8px; }
.export__code::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.export__code::-webkit-scrollbar-track { background: transparent; }
.export__code .tk { color: #FBBF7C; }
.export__code .pp { color: #B5C7BD; }
.export__code .vl { color: #E8E4DD; }
.export__code .cm { color: #948B80; font-style: italic; }
.export__code .kw { color: #F5DDDF; }

.export__copy {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255,255,255,0.08);
  color: #FBF8F2;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.export__copy:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.export__copy svg { width: 12px; height: 12px; }
.export__copy.is-copied {
  background: var(--accent);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   SAVED + TRENDS
   ═══════════════════════════════════════════════════════ */
.library {
  padding: calc(clamp(3rem, 5vw, 5rem) + 20px) 0 clamp(3rem, 5vw, 5rem);
}
.library__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.125rem;
}
/* .library__bar – usunięte (legenda przeniesiona pod grid jako modes-legend--tags) */
.library__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.library__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.library__sub {
  font-size: 14px;
  color: var(--ink-mid);
  max-width: 50ch;
}
.library__tabs {
  display: inline-flex;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  gap: 0.2rem;
}
.library__tab {
  padding: 0.55rem 1rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mid);
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.library__tab[aria-pressed="true"] {
  background: var(--paper-pure);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
}
.library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.lib-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);                            /* 14 */
  padding: 0.5rem 0.5rem 0.85rem;                        /* 8 */
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  cursor: pointer;
  animation: cardIn 0.5s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lib-card { animation: none; }
}
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.lib-card:active { transform: translateY(-1px) scale(0.99); transition-duration: 80ms; }
.lib-card__strip {
  display: grid;
  grid-template-columns: repeat(var(--c, 5), 1fr);
  height: 88px;
  border-radius: 6px;                                    /* concentric: 14 − 8 = 6 */
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);       /* image-edge outline */
}
.lib-card__strip span { display: block; height: 100%; }
.lib-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.4rem;
  gap: 0.6rem;
}
.lib-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.lib-card__del {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--ink-dim);
  background: transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.lib-card__del:hover { background: var(--bg-deep); color: var(--ink); }
.lib-card__del svg { width: 11px; height: 11px; }
.library__empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink-mid);
  font-size: 13.5px;
}
.library__empty strong { color: var(--ink); display: block; margin-bottom: 0.3rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   HOWTO – instrukcja dla nieprogramisty
   ═══════════════════════════════════════════════════════ */
.howto {
  padding: calc(clamp(3rem, 5vw, 5rem) + 10px) 0 clamp(3rem, 5vw, 5rem);
}
.howto__head {
  text-align: center;
  margin-bottom: 2.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
}
.howto__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.howto__label::before, .howto__label::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--ink-faint);
}
.howto__title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  max-width: 22ch;
  text-wrap: balance;
}
.howto__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }
.howto__sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
  line-height: 1.55;
}
/* HOWTO STEPS – ol/li z numer + body (clean, top UX) */
.howto__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
}
@media (max-width: 920px) { .howto__steps { grid-template-columns: 1fr; } }
.howto__step {
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  animation: cardIn 0.45s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) { .howto__step { animation: none; } }
.howto__step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.howto__step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.5;
}
.howto__step-num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;       /* concentric: 16 (parent) − 1.5rem padding ≈ 12 (zaokrąglone do skali) */
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 10px -4px rgba(26,24,20,0.18);
}
.howto__step-body { display: flex; flex-direction: column; gap: 0.45rem; }
.howto__step-h {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}
.howto__step-p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Legend – co znaczą odcienie */
.howto__legend {
  margin-top: 1.5rem;
  padding: 1.7rem 1.7rem 1.5rem;
  background: linear-gradient(160deg, var(--paper) 0%, var(--bg-deep) 130%);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
}
.howto__legend-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.howto__legend-h::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--ink-mid);
}
.howto__legend-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
  padding: 0;
  margin: 0;
}
@media (max-width: 720px) { .howto__legend-list { grid-template-columns: 1fr; } }
.howto__legend-row {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.45rem 0;
}
.howto__legend-swatch {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);     /* pure-black image outline */
}
.howto__legend-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.howto__legend-row strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.howto__legend-row span {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* OLD legend tag (zostaje dla wstecznej kompatybilności) */
.howto__legend-tag {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
  padding: 0.4rem 0;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.howto__legend-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.howto__legend-desc strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   UX-CTA – zaproszenie do strony PRO
   ═══════════════════════════════════════════════════════ */
.ux-cta {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 5rem);
}
.ux-cta__shell {
  background: linear-gradient(140deg, var(--ink) 0%, #2A2620 100%);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ux-cta__shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(232, 163, 61, 0.18), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(44, 84, 70, 0.22), transparent 55%);
  z-index: -1;
}
@media (max-width: 820px) {
  .ux-cta__shell { grid-template-columns: 1fr; }
}
.ux-cta__l {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ux-cta__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.ux-cta__title {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: #FBF8F2;
  text-wrap: balance;
}
.ux-cta__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(251, 248, 242, 0.72);
}
.ux-cta__p {
  font-size: 15px;
  color: rgba(251, 248, 242, 0.7);
  line-height: 1.55;
  max-width: 50ch;
  text-wrap: pretty;
}
.ux-cta__btn {
  --lift: 0px; --press: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem 0.85rem 1.4rem;
  margin-top: 0.5rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: translateY(var(--lift)) scale(var(--press));
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.ux-cta__btn:hover { --lift: -1px; box-shadow: 0 8px 22px rgba(0,0,0,0.32); }
.ux-cta__btn:active { --lift: 0; --press: 0.97; transition-duration: 80ms; }
.ux-cta__btn .arrow-circle { background: var(--ink); color: var(--paper); }
.ux-cta__r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.ux-cta__chip {
  padding: 0.95rem 1.05rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(251, 248, 242, 0.82);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  animation: cardIn 0.5s cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) { .ux-cta__chip { animation: none; } }
.ux-cta__chip strong {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #FBF8F2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.15rem;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════
   PRINCIPLES (krótka sekcja edukacyjna)
   ═══════════════════════════════════════════════════════ */
.principles {
  padding: calc(clamp(3rem, 5vw, 5rem) + 10px) 0 clamp(3rem, 5vw, 5rem);
}
.principles__head {
  text-align: center;
  margin-bottom: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
}
.principles__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.principles__label::before, .principles__label::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--ink-faint);
}
.principles__title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  max-width: 22ch;
  text-wrap: balance;
}
.principles__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.principles__sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 920px) {
  .principles__grid { grid-template-columns: 1fr; }
}
.principle {
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.principle__num {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.06);
}
.principle__h {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
}
.principle__p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s var(--ease-snap), opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  pointer-events: none;
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s var(--ease-snap), opacity 0.25s var(--ease), visibility 0s;
}
/* Mobile: toast szerszy, jednolinijkowy gdy mozliwe (max viewport - 1rem) */
@media (max-width: 720px) {
  .toast {
    max-width: calc(100vw - 1rem);
    width: max-content;
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
  }
}
.toast__check {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.toast__check svg { width: 10px; height: 10px; color: white; }

/* ═══════════════════════════════════════════════════════
   FOOTER (minimalny – jak na audyt/polityka)
   ═══════════════════════════════════════════════════════ */
.footer {
  padding: 2rem 0 1.3rem;
  color: var(--ink-mid);
  font-size: 13px;
  position: relative;
}
.footer__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent);
  margin-bottom: 1.4rem;
}
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-top: 0.4rem;
}
.footer__bottom-year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
.footer__bottom-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.8;
  text-align: center;
}
.footer__bottom-credits-eyebrow { color: var(--ink-dim); font-weight: 500; }
.footer__bottom-credits-main { color: var(--ink); font-weight: 600; }
.footer__bottom-meta {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-self: end;
}
.footer__bottom-meta li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--paper);
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(26, 24, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (max-width: 720px) {
  .footer__bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
  .footer__bottom-meta { justify-content: center; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════
   REVEAL
   ═══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-stagger] { transition-delay: calc(var(--stagger, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .studio__shell { grid-template-columns: 1fr; }
  .palette { min-height: 360px; }
}
@media (max-width: 720px) {
  .preview__grid { grid-template-columns: 1fr; }
  .contrast { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   PILLS PREMIUM v3 · spójność z index.html i podstronami

   Dodaje: border-top na footer__bottom + 3-warstwowy shadow na pillkach
   ═══════════════════════════════════════════════════════════════════ */

/* Footer bottom – border-top hardkodowany 1:1 z index (rgba 0.08).
   Zmienna --rule w palety.css jest jaśniejsza (0.05), dlatego inline. */
.footer__bottom {
  border-top: 1px solid rgba(26, 24, 20, 0.08);
  margin-top: 1.4rem;
  padding-top: 1.4rem;
}

/* Footer bottom meta li – 3-warstwowy shadow (premium pill) */
.footer__bottom-meta li {
  box-shadow:
    inset 0 0 0 1px rgba(26, 24, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(26, 24, 20, 0.03);
}
/* ═══════════════════════════════════════════════════════════════════
   END · PILLS PREMIUM v3
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   FULL FOOTER COPY (1:1 z main.css) – spójność cross-site
   ═══════════════════════════════════════════════════════════════════ */
    .footer {
      padding: 5rem 0 1.3rem;
      color: var(--ink-mid);
      font-size: 13px;
      position: relative;
    }
    .footer__rule {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent);
      margin-bottom: 3.5rem;
    }
    .footer__inner {
      display: grid;
      grid-template-columns: 1.5fr 1.25fr 1.25fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      padding-bottom: 2.25rem;
    }
    .footer__brand {
      display: flex;
      flex-direction: column;
    }
    /* Lewa kolumna: identyczne odstępy nagłówka jak w prawych footer__col, by features wyrównały się z pierwszym itemem prawej listy */
    .footer__brand .footer__group-h--link { margin-bottom: 1.2rem; }
    .footer__brand .footer__legal { margin-top: 0.55rem; margin-left: -2px; }
    .footer__brand .footer__sig { margin-top: auto; }
    .footer__brand .brand {
      align-self: flex-start;
    }
    .footer__pitch {
      max-width: 38ch;
      color: var(--ink-soft);
      line-height: 1.6;
      font-size: 14px;
    }
    .footer__features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      max-width: 40ch;
    }
    .footer__features li {
      font-size: 13.5px;
      color: var(--ink-soft);
      line-height: 1.5;
      padding-left: 1.2rem;
      position: relative;
    }
    .footer__features li::before {
      content: '';
      position: absolute;
      left: 1px; top: calc(0.4rem + 1px);
      width: 8px; height: 4px;
      border-left: 1.5px solid var(--ink);
      border-bottom: 1.5px solid var(--ink);
      transform: rotate(-45deg);
    }
    .footer__sig {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.55rem 1.1rem 0.55rem 0.55rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 999px;
      align-self: flex-start;
      box-shadow: var(--shadow-xs);
      text-decoration: none;
      color: inherit;
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
    }
    .footer__sig:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .footer__sig-pic {
      width: 40px; height: 40px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-deep);
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    }
    .footer__sig-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .footer__sig-meta {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .footer__sig-role {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-dim);
      line-height: 1;
    }
    .footer__sig-name {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      letter-spacing: -0.012em;
      line-height: 1.1;
    }
    .footer__col {
      display: flex;
      flex-direction: column;
    }
    .footer__group-h {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 1.2rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid var(--rule);
    }
    .footer__group-h::before {
      content: '';
      width: 14px; height: 1px;
      background: var(--ink-mid);
      flex-shrink: 0;
    }
    .footer__group-h--link {
      text-decoration: none;
      color: var(--ink-soft);
      margin-bottom: 0;
      transition: color 0.2s var(--ease);
    }
    .footer__group-h--link:hover { color: var(--ink); }
    .footer__group-h--link:focus-visible {
      outline: 2px solid var(--ink-mid);
      outline-offset: 4px;
      border-radius: 2px;
    }
    .footer__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .footer__list a, .footer__list span {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      letter-spacing: -0.005em;
    }
    .footer__list .footer__item {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.85rem;
      width: 100%;
    }
    .footer__list a:hover { color: var(--ink); }
    .footer__list a::after {
      content: '↗';
      font-size: 0.85em;
      color: var(--ink-dim);
      opacity: 0;
      transform: translate(-4px, 4px);
      transition: opacity 0.2s var(--ease), transform 0.25s var(--ease-snap);
    }
    .footer__list a:hover::after { opacity: 1; transform: translate(0, 0); }
    .footer__list a.no-arrow::after { display: none; }

    /* Service items: nazwa + cena (czysta typografia, bez dashed lines) */
    .footer__list li a {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.85rem;
    }
    .footer__price {
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-mid);
      letter-spacing: 0.02em;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .footer__list a:hover .footer__price { color: var(--ink); }
    .footer__legal {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: -0.005em;
      color: var(--ink);
      text-decoration: none;
    }
    .footer__legal-icon {
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      color: currentColor;
    }
    .footer__legal-icon svg { width: 15px; height: 15px; display: block; }
    .footer__legal-text {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink) 10%, transparent);
      text-underline-offset: 4px;
      transition: text-decoration-color 0.2s var(--ease);
    }
    .footer__legal:hover .footer__legal-text {
      text-decoration-color: var(--ink);
    }

    .footer__weight {
      margin: 2rem 0 0;
      padding: 1.2rem 1.5rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--r-md);
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--ink-soft);
      max-width: 100%;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      box-shadow: var(--shadow-xs);
    }
    .footer__weight-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      box-shadow:
        0 2px 6px rgba(26, 24, 20, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .footer__weight strong { color: var(--ink); font-weight: 600; }
    .footer__weight-num {
      font-family: var(--font-mono);
      color: var(--ink);
      font-weight: 600;
    }

    .footer__bottom-nav {
      margin-top: 2rem;
      padding: 1.4rem 0 1.4rem;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(1.2rem, 3vw, 2.5rem);
      font-family: var(--font-mono);
      font-size: 11.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .footer__bottom-nav a {
      color: var(--ink-soft);
      transition: color 0.2s var(--ease);
      position: relative;
    }
    .footer__bottom-nav a:hover { color: var(--ink); }
    .footer__bottom-nav a:hover::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: -4px;
      height: 1.5px;
      background: var(--ink);
    }

    .footer__bottom {
      margin-top: 1.5rem;
      padding-top: 1.4rem;
      border-top: 1px solid rgba(26, 24, 20, 0.08);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
    }
    .footer__bottom-year {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-variant-numeric: tabular-nums;
      justify-self: start;
    }
    .footer__bottom-credits {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      line-height: 1.8;
      text-align: center;
    }
    .footer__bottom-credits-eyebrow {
      color: var(--ink-dim);
      font-weight: 500;
    }
    .footer__bottom-credits-main {
      color: var(--ink);
      font-weight: 600;
    }
    .footer__bottom-site {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      transition: color 0.2s var(--ease);
      justify-self: end;
    }
    .footer__bottom-site:hover { color: var(--ink); }
    @media (max-width: 720px) {
      .footer__bottom { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
      .footer__bottom-year, .footer__bottom-site { justify-self: center; }
    }

    .footer__bottom-meta {
      list-style: none;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
      margin: 0;
      padding: 0;
      justify-self: end;
    }
    .footer__bottom-meta li {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      background: var(--paper);
      line-height: 1;
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    }
    .footer__bottom-meta li:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 0 0 1px rgba(26, 24, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(26, 24, 20, 0.06);
    }

    @media (max-width: 820px) {
      .footer__inner { grid-template-columns: 1fr; gap: 2.4rem; }
      .footer__brand { max-width: 520px; }
      .footer__brand .footer__sig { margin-top: 1.6rem; }
    }
    @media (max-width: 720px) {
      .footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
      }
      .footer__bottom-meta {
        justify-content: center;
        flex-wrap: wrap;
      }
    }

/* Footer minimal (bez cennika) – override po pełnej kopii .footer.
   Pomniejszony padding stopki, margin-top kreski jak na index. */
.footer.footer--minimal {
  padding: 2rem 0 1.3rem;
}

/* END · FOOTER COPY */


/* ═══════════════════════════════════════════════════════════════════
   v4 · POPRAWKI UX (typografia, nawigacja, kontrolki, plakietki, CTA)
   ─────────────────────────────────────────────────────────────────────
   1) Wyśrodkowanie loga w nawigacji (desktop grid 1fr auto 1fr)
   2) Mobile fix: PL/EN nie powinno łamać CTA "Napisz maila"
   3) Hero typography 1:1 z audyt.html
   4) Section heads (preview/library/export) z cięższym hero feel
   5) Tła kontrolek (mode-tabs, segments, slider, stepper, picker__random) jaśniejsze
   6) workspace__title-tag jaśniejsze tło
   7) swatch--system: label w prawym GÓRNYM rogu, hex i role po lewej
   8) WCAG badge na akcentach: kontrastowe białe tło z ciemnym tekstem
   9) Preview/library/export head: wyrównanie nagłówka z buttonami
  10) Wariant "Białe tło" w preview (mockup--white)
  11) Contrast cells: gap między płytkami zamiast styku
  12) 3 alternatywy CTA "Zamów stronę"
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) NAV: wyśrodkowanie loga (desktop) ────────────────────────── */
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__back { justify-self: start; }
.brand     { justify-self: center; }
.nav__right { justify-self: end; }

/* ─── 2) MOBILE: spójne ikony nawigacji – identyczne kółka 36×36 ── */
.nav__cta { white-space: nowrap; }
.nav__cta #nav-cta-text { white-space: nowrap; }
.nav__cta-mail-mobile { display: none; }
@media (max-width: 720px) {
  .nav__cta-arrow-desktop { display: none; }
  .nav__cta-mail-mobile { display: inline-grid; }
}
@media (max-width: 720px) {
  .nav__inner { padding: 0.5rem; gap: 0.5rem; }
  .brand__name { font-size: 16.5px; }
  .lang-switch { padding: 0.18rem; }
  .lang-switch__btn { min-width: 36px; padding: 0.45rem 0.55rem; font-size: 12px; }
  /* Oba kółka (← i →): identyczny rozmiar 36×36, ten sam styl */
  .nav__back {
    padding: 0;
    width: 36px; height: 36px;
    display: inline-grid;
    place-items: center;
    background: rgba(26, 24, 20, 0.04);
    border-radius: 50%;
  }
  .nav__back span:not(.nav__back-arrow) { display: none; }
  .nav__back-arrow {
    width: auto; height: auto;
    background: transparent;
    font-size: 0;
    line-height: 1;
    display: inline-grid;
    place-items: center;
  }
  .nav__back-arrow::after {
    content: '';
    display: block;
    width: 14px; height: 14px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3m4-4L3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3m4-4L3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .nav__cta {
    padding: 0;
    width: 36px; height: 36px;
    display: inline-grid;
    place-items: center;
    gap: 0;
    min-width: unset; min-height: unset;
  }
  .nav__cta #nav-cta-text { display: none; }
  .nav__cta .arrow-circle--sm {
    width: 36px; height: 36px;
    background: var(--ink);
    color: var(--paper);
  }
  .nav__cta .arrow-circle--sm svg { width: 16px; height: 16px; stroke-width: 1.5; }
  .nav__back:hover .nav__back-arrow { transform: none; }
  .nav__cta:hover .arrow-circle { transform: none; }
}
@media (max-width: 380px) {
  .nav__inner { gap: 0.35rem; }
  .lang-switch__btn { min-width: 32px; padding: 0.4rem 0.45rem; font-size: 11.5px; }
  .brand__name { font-size: 15px; }
  .nav__back, .nav__cta, .nav__cta .arrow-circle--sm { width: 34px; height: 34px; }
  .nav__back-arrow::after, .nav__cta .arrow-circle--sm svg { width: 13px; height: 13px; }
}

/* ─── 3) HERO: top +20px (-60px łącznie), bottom 30px ─────── */
.hero {
  padding: max(0px, calc(clamp(5rem, 9vw, 8rem) - 60px)) 0 30px;
}
@media (max-width: 860px) {
  /* ≤860px (mobile + tablet portrait): mniejszy padding-top, mniej pustej przestrzeni nad H1 */
  .hero { padding-top: 0.4rem; }
}
.hero__title {
  font-size: clamp(56px, 7.4vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.96;
  font-weight: 800;
  max-width: 18ch;
}
@media (max-width: 540px) {
  .hero__title {
    font-size: clamp(48px, 12vw, 64px);
    letter-spacing: -0.04em;
    line-height: 0.98;
  }
}
.hero__lead {
  font-size: clamp(18px, 1.95vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.006em;
  max-width: 56ch;
}
@media (max-width: 540px) {
  .hero__lead { font-size: 18px; line-height: 1.55; }
}

/* ─── 4) SECTION HEADS (preview / export / library) ───────────────── */
.preview__title,
.export__title,
.library__title {
  font-size: clamp(34px, 4.6vw, 60px);
  letter-spacing: -0.028em;
  line-height: 1.04;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 540px) {
  .preview__title,
  .export__title,
  .library__title {
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.06;
  }
}
.preview__title em,
.export__title em,
.library__title em { letter-spacing: -0.015em; }

.howto__title {
  font-size: clamp(34px, 4.6vw, 60px);
  letter-spacing: -0.028em;
  line-height: 1.04;
  font-weight: 800;
}
@media (max-width: 540px) {
  .howto__title { font-size: clamp(32px, 8vw, 42px); letter-spacing: -0.025em; line-height: 1.06; }
}

/* ─── 9) Wyrównanie nagłówków sekcji ─────── */
.library__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.125rem;
}
/* preview__head – column z tytułem na górze + 3 grupami pod (patrz linia 1273) */
.export__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 2.125rem;
}
/* Średni ekran (~tablet): tytuł i kontrolki center, kontrolki w wrapie */
@media (max-width: 1100px) {
  .preview__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }
  .preview__title { text-align: center; }
  .preview__controls {
    justify-content: center;
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  /* Spójny układ na mobile: tytuł + buttony WSZYSTKO w center */
  .library__head,
  .export__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }
  .library__title,
  .export__title { text-align: center; }
  .library__tabs {
    align-self: center;
    margin: 0 auto;
  }
  /* Preview controls: 3 grupy jeden pod drugim, każda center */
  .preview__controls {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    width: 100%;
  }
  .preview__group {
    align-items: center;
    width: 100%;
  }
}

/* ─── 5) UJEDNOLICONE TŁA KONTROLEK – wszystko paper jak preview-theme ──── */
:root {
  --bg-soft: #FBF8F2;          /* = paper – wszystkie segmented controls */
  --bg-softer: #F6F1E5;        /* slightly darker dla slider track */
}

/* Mode tabs: tool zone */
.mode-tabs {
  background: var(--gen-surface);
  border: 1px solid var(--rule);
  padding: 0.3rem;
  gap: 0.2rem;
  border-radius: 12px;
}
.mode-tab {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 9px;
}
.mode-tab[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
}

/* Segments (50-950 / 1-11 / A-K) – generator surface */
.segments {
  background: var(--gen-surface);
  border: 1px solid var(--rule);
}

/* Slider track: subtle paper-darker */
.slider__bar {
  background: var(--bg-softer);
}

/* Picker random button: generator surface */
.picker__random {
  background: var(--paper);
  border: 1px solid var(--rule);
}
.picker__random:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Lang switch (PL/EN) – spójne paper tło */
.lang-switch {
  background: var(--paper);
  border: 1px solid var(--rule);
}

/* Btn ghost (Zapisz w bibliotece) – hover na generator surface */
.btn--ghost:hover {
  background: var(--gen-surface);
  border-color: var(--rule-deep);
  box-shadow: 0 1px 2px rgba(26,24,20,0.06);
}

/* Stepper btn hover: generator surface */
.stepper__btn:hover { background: var(--gen-surface); }

/* Icon button hover: generator surface */
.icon-btn:hover {
  background: var(--gen-surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}

/* Library card delete hover: generator surface */
.lib-card__del:hover { background: var(--paper); color: var(--ink); }

/* ─── 6) workspace__title-tag: segmented pills (mode + algo) ─────── */
.workspace__title { gap: 0.7rem; }
.workspace__title-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem;
  background: var(--gen-surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  gap: 0.15rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  color: inherit;
  box-shadow: none;
}
.workspace__title-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0.34rem 0.6rem;
  border-radius: 6px;
  line-height: 1;
}
.workspace__title-pill--active {
  background: var(--paper-pure);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(26, 24, 20, 0.05),
    0 1px 2px rgba(26, 24, 20, 0.06);
}

/* ─── 7) swatch--system: LABEL W PRAWYM GÓRNYM ROGU ───────────────── */
.swatch--system {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* hex/role na dole */
  padding: 1rem 1rem 1rem 1rem;
}
.swatch--system .swatch__top {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 1;
}
.swatch--system .swatch__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.swatch--system .swatch__hex { font-size: 14px; line-height: 1; }
.swatch--system .swatch__role {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.82;
  max-width: calc(100% - 0.5rem);
}
@media (max-width: 720px) {
  .swatch--system { padding: 0.85rem 1rem; }
  .swatch--system .swatch__top { top: 50%; transform: translateY(-50%); right: 1rem; }
}

/* ─── 8) WCAG BADGE: kontrastowe na każdym tle ────────────────────── */
.contrast__score {
  /* badge ma być widoczny niezależnie od tła komórki */
}
.contrast__score-badge {
  background: rgba(255, 255, 255, 0.96);
  color: #0F6E45;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.contrast__score-badge--pass {
  background: rgba(255, 255, 255, 0.96);
  color: #0F6E45;
}
.contrast__score-badge--fail {
  background: rgba(255, 255, 255, 0.96);
  color: #9A3D4F;
}

/* ─── A11Y / TOUCH / iOS premium quality of life ─────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], input[type="range"], input[type="color"] {
  touch-action: manipulation;  /* zapobiega 300ms delay na mobile, double-tap zoom */
}

/* Safe area dla notch iPhone – tylko skip-link (nav używa top:0.85rem ze sticky) */
.skip-link { top: max(0.85rem, env(safe-area-inset-top)); }

/* Hit area extension dla .segments__btn (WCAG 2.2 AAA 44×44) */
.segments__btn { position: relative; }
.segments__btn::before {
  content: '';
  position: absolute;
  inset: -6px;
}

/* Field help – wyjaśnienie pod selectem (algorithm description) */
.field__help {
  font-size: 12px;
  color: var(--ink-mid);
  line-height: 1.5;
  margin-top: 0.4rem;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* Library tag legend – taka sama forma jak modes-legend w studio (bez kreski nad) */
.modes-legend--lib {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
}
@media (max-width: 720px) {
  .modes-legend--lib { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .modes-legend--lib { grid-template-columns: 1fr; }
}

/* Swatch hover – wyrazistsze (zachęca do klikania) */
.swatch {
  cursor: pointer;
}
.swatch:hover::before { opacity: 1; }
.swatch:hover .swatch__hex,
.swatch:hover .swatch__step {
  opacity: 1;
}
.swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.swatch:hover::after { opacity: 1; }

/* Workspace chip improvement – zaakcentowane current mode */
.workspace__chip strong + span,
.workspace__chip span + strong {
  margin-left: 0.1rem;
}

/* ─── 11) CONTRAST CELLS: rozdzielenie zamiast styku, 3 kolumny ──── */
.contrast {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr 1fr; /* było 1fr 1fr (pusty 4. slot) */
  margin-top: 1rem; /* odstęp od mockupów wyżej */
}
.contrast__cell {
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-xs);
  padding: 1.2rem 1.3rem;
  gap: 0.7rem;
  min-height: 140px;
}
@media (max-width: 920px) {
  .contrast { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}
@media (max-width: 600px) {
  .contrast { grid-template-columns: 1fr; }
}

/* ─── 10) PREVIEW: wariant "Białe tło" ────────────────────────────── */
/* Specificzność (0,2,0) – nadpisuje --p-50 fallback i .mockup--dark */
.mockup.mockup--white .mockup__body {
  background: #FFFFFF;
}
.mockup.mockup--white .mockup__chrome {
  background: rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
/* Ramka 1px wokół całego mockup + oryginalny delikatny ambient shadow */
.mockup--site.mockup--white {
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.08),
    0 1px 2px rgba(26, 24, 20, 0.03),
    0 6px 14px -8px rgba(26, 24, 20, 0.05),
    0 12px 22px -16px rgba(26, 24, 20, 0.05);
}
.mockup--site.mockup--white:hover {
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.1),
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 8px 18px -10px rgba(26, 24, 20, 0.08),
    0 16px 28px -18px rgba(26, 24, 20, 0.08);
}
.mockup.mockup--white .mockup__url {
  background: #FFFFFF;
}
.mockup.mockup--white.mockup--mail {
  background: #FFFFFF;
}
/* .mockup--white nav island – handled by .mockup--white .mockup__nav above */
.mockup.mockup--white .mockup__cards { border-top-color: rgba(26, 24, 20, 0.06); }
/* white theme czyta z preview__theme-btn[data-theme="white"] */

/* ─── 12) ALTERNATYWY CTA "Zamów stronę" ──────────────────────────── */
.ux-cta__variant-tag,
.cta-alt2__variant-tag,
.cta-alt3__variant-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

/* ALT 2 – cichy paper, 1 linia (paper, minimalistyczny) */
.cta-alt2 {
  padding: calc(clamp(2rem, 4vw, 3rem) - 30px) 0 calc(clamp(2rem, 4vw, 3rem) + 40px);
}
.cta-alt2__shell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) {
  .cta-alt2__shell { grid-template-columns: 1fr; align-items: flex-start; }
}
.cta-alt2__copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cta-alt2__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cta-alt2__title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.cta-alt2__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.cta-alt2__p {
  font-size: 15.5px;
  color: var(--ink-mid);
  line-height: 1.55;
  max-width: 56ch;
}
.cta-alt2__btn {
  --lift: 0; --press: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 14px rgba(26,24,20,0.18);
  transform: translateY(calc(var(--lift) * 1px)) scale(var(--press));
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.cta-alt2__btn:hover { --lift: -1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(26,24,20,0.26); }
.cta-alt2__btn:active { --lift: 0; --press: 0.97; transition-duration: 80ms; }
.cta-alt2__btn .arrow-circle { background: var(--paper); color: var(--ink); }
.cta-alt2__btn:hover .arrow-circle { transform: rotate(-30deg); }

/* ALT 3 – magazynowy split, ink panel + paper data */
.cta-alt3 {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 5rem);
}
.cta-alt3__shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule);
}
@media (max-width: 820px) {
  .cta-alt3__shell { grid-template-columns: 1fr; }
}
.cta-alt3__l {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  isolation: isolate;
}
.cta-alt3__l::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(232, 163, 61, 0.14), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(44, 84, 70, 0.18), transparent 55%);
  z-index: -1;
}
.cta-alt3__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.cta-alt3__title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 0.98;
  color: #FBF8F2;
  margin: 0;
  text-wrap: balance;
}
.cta-alt3__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(251, 248, 242, 0.7);
  letter-spacing: -0.015em;
}
.cta-alt3__btn {
  --lift: 0; --press: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem 0.85rem 1.4rem;
  margin-top: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: translateY(calc(var(--lift) * 1px)) scale(var(--press));
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.cta-alt3__btn:hover { --lift: -1; box-shadow: 0 8px 22px rgba(0,0,0,0.32); }
.cta-alt3__btn:active { --lift: 0; --press: 0.97; transition-duration: 80ms; }
.cta-alt3__btn .arrow-circle { background: var(--ink); color: var(--paper); }
.cta-alt3__r {
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.2rem) clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-alt3__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.cta-alt3__row:last-child { border-bottom: 0; }
.cta-alt3__row span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cta-alt3__row strong {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   END · v4 POPRAWKI
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v5 · MOCKUPY JAK MINI-STRONA (mikroanimacje, cienie, hover)
   ═══════════════════════════════════════════════════════════════════ */

/* SITE: container ze "lift" hoverem + mikro border-top (poprzedni stan, bez inner highlight) */
.mockup--site {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  border-top: 1px solid rgba(26, 24, 20, 0.08);
  /* default – tylko delikatny dolny cień */
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.03),
    0 6px 14px -8px rgba(26, 24, 20, 0.05),
    0 12px 22px -16px rgba(26, 24, 20, 0.05);
}
.mockup--site:hover {
  transform: translateY(-2px);
  /* hover – minimalistyczny lift, border-top bez zmian */
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.03),
    0 6px 14px -8px rgba(26, 24, 20, 0.05),
    0 14px 26px -18px rgba(26, 24, 20, 0.06);
}

/* SITE chrome: realistyczne dot-y z subtelnym kolorem (jak Mac) */
.mockup__chrome {
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.02) 100%);
  border-bottom: 1px solid rgba(26, 24, 20, 0.04);
}
.mockup__dot {
  width: 11px; height: 11px;
  background: rgba(26, 24, 20, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mockup__dot:nth-child(1) { background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25); }
.mockup__dot:nth-child(2) { background: #FEBC2E; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25); }
.mockup__dot:nth-child(3) { background: #28C840; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.25); }
.mockup__url {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(26, 24, 20, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 0.32rem 0.95rem;
  transition: background 0.2s var(--ease);
}
.mockup--dark .mockup__url { background: rgba(26, 24, 20, 0.4); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.mockup--white .mockup__url { background: #FFFFFF; }

/* SITE primary button: lift + glow przy hoverze */
.mockup__btn-primary {
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px -4px color-mix(in srgb, var(--p-600, var(--accent)) 45%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--p-600, var(--accent)) 25%, transparent);
}
.mockup__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -6px color-mix(in srgb, var(--p-600, var(--accent)) 55%, transparent),
    0 4px 8px -2px color-mix(in srgb, var(--p-600, var(--accent)) 30%, transparent);
}
.mockup__btn-arrow {
  transition: transform 0.3s var(--ease-snap);
}
.mockup__btn-primary:hover .mockup__btn-arrow {
  transform: translate(3px, -0.5px);
}

/* SITE ghost button: subtle hover */
.mockup__btn-ghost {
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.mockup__btn-ghost:hover {
  background: rgba(26, 24, 20, 0.04);
  border-color: rgba(26, 24, 20, 0.2);
  transform: translateY(-1px);
}
.mockup--dark .mockup__btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.24); }

/* SITE eyebrow z pulsującym dot-em */
.mockup__eyebrow-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-600, var(--accent)) 18%, transparent);
  animation: mockupPulse 2.4s var(--ease) infinite;
}
@keyframes mockupPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-600, var(--accent)) 18%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--p-600, var(--accent)) 8%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .mockup__eyebrow-dot { animation: none; }
}

/* SITE nav cta: lift */
.mockup__nav-cta {
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 1px 2px rgba(26,24,20,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}
.mockup__nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(26,24,20,0.14), inset 0 1px 0 rgba(255,255,255,0.14); }

/* SITE cards: cursor only, hover handled in main definition above */
.mockup__card {
  cursor: pointer;
}

/* AD: gradient + decor animation */
.mockup--ad {
  transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.45s cubic-bezier(0.2, 0, 0, 1);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--p-400, var(--accent)) 30%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--p-800, var(--ink)) 25%, transparent), transparent 55%),
    var(--p-600, var(--accent));
}
.mockup--ad:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26,24,20,0.04),
    0 14px 28px -10px rgba(26,24,20,0.12),
    0 28px 50px -22px rgba(26,24,20,0.14);
}
/* Decor pulsuje permanentnie (nie tylko hover) – żywe karty */
.mockup--ad .mockup__ad-decor span {
  animation: adDecor 2.4s var(--ease) infinite;
}
.mockup--ad .mockup__ad-decor span:nth-child(2) { animation-delay: 0.2s; }
.mockup--ad .mockup__ad-decor span:nth-child(3) { animation-delay: 0.4s; }
.mockup--ad:hover .mockup__ad-decor span {
  animation-duration: 1.4s;  /* hover = szybciej */
}
@keyframes adDecor {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%       { transform: translateX(-10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mockup--ad:hover .mockup__ad-decor span { animation: none; }
}
.mockup__ad-cta {
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18);
}
.mockup__ad-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(0,0,0,0.24);
}

/* MAIL: hover lift, lekka rozjaśnienie */
.mockup--mail {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mockup--mail:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(26,24,20,0.04),
    0 18px 40px -12px rgba(26,24,20,0.14),
    0 40px 70px -28px rgba(26,24,20,0.18);
}
.mockup__mail-avatar {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--p-400, var(--accent)) 30%, transparent), transparent 55%),
    var(--p-600, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.mockup__mail-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 11px; height: 11px;
  background: #28C840;
  border: 2px solid var(--paper-pure);
  border-radius: 50%;
}
.mockup__mail-cta {
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.mockup__mail-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px -6px color-mix(in srgb, var(--p-600, var(--accent)) 55%, transparent),
    0 4px 8px -2px color-mix(in srgb, var(--p-600, var(--accent)) 30%, transparent);
}

/* CONTRAST cells: hover subtle */
.contrast__cell {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contrast__cell:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   END · v5 MOCKUPY JAK MINI-STRONA
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v6 · INTERAKCJE – nav links w mockupie + karty biblioteki
   ═══════════════════════════════════════════════════════════════════ */

/* MOCKUP NAV LINKS (Oferta / O nas / Kontakt) – underline od dołu, color hover */
.mockup__nav-links {
  gap: 1.6rem;
  align-items: center;
}
.mockup__nav-links span {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 0.3rem 0;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--p-700, var(--ink-soft));
  transition: color 0.4s var(--ease);
}
.mockup__nav-links span:first-child {
  color: var(--p-900, var(--ink));
  font-weight: 600;
}
.mockup__nav-links span:first-child::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p-600, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-600, var(--accent)) 18%, transparent);
}
.mockup__nav-links span::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--p-600, var(--accent));
  border-radius: 1px;
  transition: right 0.35s var(--ease);
}
.mockup__nav-links span:hover { color: var(--p-900, var(--ink)); }
.mockup__nav-links span:hover::after { right: 0; }
.mockup--dark .mockup__nav-links span { color: var(--p-300, rgba(255,255,255,0.66)); }
.mockup--dark .mockup__nav-links span:first-child { color: var(--p-50, var(--paper)); }
.mockup--dark .mockup__nav-links span:hover { color: var(--p-50, var(--paper)); }

/* BIBLIOTEKA – karty palet z premium hover + glow */
.lib-card {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.25s var(--ease);
}
.lib-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, transparent 30%, rgba(26,24,20,0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26,24,20,0.04),
    0 8px 22px -8px rgba(26,24,20,0.12),
    0 22px 40px -22px rgba(26,24,20,0.18);
  border-color: var(--rule-deep);
}
.lib-card:hover::before { opacity: 1; }
.lib-card:active { transform: translateY(-1px) scale(0.992); transition-duration: 100ms; }

/* Strip kolorów – lift + reveal odcieni przy hoverze */
.lib-card__strip {
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.lib-card:hover .lib-card__strip {
  transform: scale(1.015);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 6px 14px -6px rgba(26,24,20,0.18);
}
.lib-card__strip span {
  transition: flex 0.4s var(--ease);
}

/* Meta (nazwa + tag) – lekka migracja koloru */
.lib-card__meta { position: relative; z-index: 1; }
.lib-card__name {
  transition: color 0.2s var(--ease);
}
.lib-card:hover .lib-card__name { color: var(--accent); }
.lib-card__tag {
  transition: color 0.2s var(--ease), letter-spacing 0.2s var(--ease);
}
.lib-card:hover .lib-card__tag {
  color: var(--ink-mid);
}

/* Delete button (X) – wjazd od prawej + akcent na hover */
.lib-card__del {
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease-snap), background 0.2s var(--ease), color 0.2s var(--ease);
}
.lib-card:hover .lib-card__del {
  opacity: 1;
  transform: translateX(0);
}
.lib-card__del:hover {
  background: rgba(184, 85, 101, 0.12) !important;
  color: var(--rose) !important;
}

/* Card-in animacja stagger – już jest, ale dodajemy delicate scale */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   END · v6 INTERAKCJE
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v7 · DOPRACOWANIA UX
   1) "Zapisz w bibliotece" – czysty hover/active bez brzydkiego borderu
   2) Mockupy nie ruszają się przy hoverze (tylko mikrointerakcje wewnątrz)
   3) "Oferta" bez kropki indicator
   4) Ciemne tło: pasek adresu (URL chrome) zostaje jasny
   5) Karty biblioteki: cienie hover delikatniejsze
   7) Mockup site lead i mail body – krótsze max-width (szybsze zwijanie)
   8) Buttony: weight 500/600 (top-UX standard) zamiast wszędzie 600
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) BTN GHOST (Zapisz w bibliotece) – clean hover/active ──────── */
.btn--ghost {
  background: var(--paper-pure);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.btn--ghost:hover {
  background: var(--paper);
  border-color: var(--rule-strong);
  box-shadow: 0 1px 2px rgba(26,24,20,0.04);
  transform: translateY(-1px);
}
.btn--ghost:active {
  background: var(--paper);
  border-color: var(--rule-strong);
  box-shadow: inset 0 1px 2px rgba(26,24,20,0.05);
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}
.btn--ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── 2) MOCKUPY hover: subtelny lift (overrides patrz blok v13/14 na końcu) ─── */
/* Stara reguła "no lift" zastąpiona – cienie są zarządzane w v13 (.mockup--site, .mockup--ad). */

/* ─── 3) "OFERTA" bez kropki indicator ─────────────────────────────── */
.mockup__nav-links span:first-child::before { display: none; }
.mockup__nav-links { gap: 1.4rem; }

/* ─── 4) CIEMNE TŁO: pasek adresu zostaje jasny ───────────────────── */
.mockup--dark .mockup__chrome {
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.02) 100%);
  border-bottom: 1px solid rgba(26, 24, 20, 0.08);
}
.mockup--dark .mockup__url {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(26, 24, 20, 0.06);
  color: var(--ink-mid);
}
.mockup--dark .mockup__dot:nth-child(1) { background: #FF5F57; }
.mockup--dark .mockup__dot:nth-child(2) { background: #FEBC2E; }
.mockup--dark .mockup__dot:nth-child(3) { background: #28C840; }

/* ─── 5) BIBLIOTEKA: lżejsze shadow przy hoverze ──────────────────── */
.lib-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(26,24,20,0.03),
    0 4px 10px -4px rgba(26,24,20,0.08),
    0 10px 22px -12px rgba(26,24,20,0.10);
  border-color: var(--rule-strong);
}
.lib-card:hover .lib-card__strip {
  transform: scale(1.008);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 2px 6px -2px rgba(26,24,20,0.10);
}

/* ─── 7) MOCKUPY: krótsze linie tekstowe (szybsze zwijanie) ───────── */
.mockup__lead {
  max-width: 38ch;
  text-wrap: pretty;
}
.mockup__mail-body {
  max-width: 56ch;
}
.mockup__mail-body p {
  max-width: 48ch;
  line-height: 1.55;
  text-wrap: pretty;
}
/* AD: zapobiegaj sierotom (pojedynczy wyraz na drugiej linii) */
.mockup__ad-p {
  text-wrap: balance;
}
.mockup__ad-h {
  text-wrap: balance;
}

/* ─── 8) BUTTONY: 500 dla nieaktywnych, 600 dla aktywnych (top-UX) ── */
.mode-tab,
.preview__theme-btn,
.library__tab,
.segments__btn,
.lang-switch__btn {
  font-weight: 500;
}
.mode-tab[aria-pressed="true"],
.preview__theme-btn[aria-pressed="true"],
.library__tab[aria-pressed="true"],
.segments__btn[aria-pressed="true"],
.lang-switch__btn[aria-pressed="true"] {
  font-weight: 600;
}

/* btn primary/ghost – 500 (jak Stripe / Linear / Vercel) */
.btn { font-weight: 500; }
.btn--primary { font-weight: 600; }            /* CTA głośne – 600 dla wagi */

/* Action ikony (kopiuj/share) – 500 */
.icon-btn { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   END · v7 DOPRACOWANIA UX
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v8 · "JAK UŻYĆ" – jednolita sekcja, top UX
   Layout: jeden paper shell, lewa = kroki list, prawa = legenda
   ═══════════════════════════════════════════════════════════════════ */

.howto {
  padding: calc(clamp(3rem, 5vw, 5rem) + 10px) 0 clamp(3rem, 5vw, 5rem);
}

/* Header – tylko tytuł, bez labelu i sub */
.howto__head {
  text-align: center;
  margin-bottom: 2.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.howto__head .howto__label,
.howto__head .howto__sub {
  display: none; /* usuwam ze starej wersji */
}

/* Shell: paper, jedna ramka, dwie kolumny */
.howto__shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 920px) {
  .howto__shell { grid-template-columns: 1fr; }
}

/* RESET starych styli kart */
.howto__steps {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem) !important;
  list-style: none;
  border-right: 1px solid var(--rule);
}
@media (max-width: 920px) {
  .howto__steps { border-right: 0; border-bottom: 1px solid var(--rule); }
}
.howto__step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.2rem !important;
  padding: 1.2rem 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
  transition: none !important;
}
.howto__step:first-child { padding-top: 0 !important; }
.howto__step:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }
.howto__step:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--rule) !important;
}
.howto__step::before { display: none !important; }

.howto__step-num {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-dim) !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  padding-top: 0.35rem;
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}

.howto__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}
.howto__step-h {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.014em;
  line-height: 1.3;
  margin: 0;
}
.howto__step-p {
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* LEGENDA – prawy panel, gradient subtelny */
.howto__legend {
  margin: 0 !important;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem) !important;
  background: linear-gradient(160deg, var(--paper) 0%, color-mix(in srgb, var(--bg-deep) 50%, var(--paper)) 130%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.howto__legend-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.howto__legend-label::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--ink-mid);
}

.howto__legend-list {
  list-style: none;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0.7rem !important;
  padding: 0;
  margin: 0;
}

.howto__legend-row {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.35rem 0;
}
.howto__legend-swatch {
  width: 40px; height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.04);
}
.howto__legend-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.howto__legend-row strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.howto__legend-row span {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   END · v8 JAK UŻYĆ – jednolita sekcja
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v9 · MOCKUP ROW: 3 kolumny (Ad / Mail / Stat) + standardowy mail CTA
   ═══════════════════════════════════════════════════════════════════ */

/* 3-kolumnowy row – domyślnie 3 RÓWNE kolumny (3 warianty reklamy) */
.mockup__row {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1080px) {
  .mockup__row { grid-template-columns: 1fr 1fr; }
  .mockup--stat { grid-column: span 2; }
}
@media (max-width: 720px) {
  .mockup__row { grid-template-columns: 1fr; }
  .mockup--stat { grid-column: auto; }
}

/* MAIL: button na akcent palety (spójność ze stroną – primary CTA) */
.mockup__mail-cta {
  background: var(--p-600, var(--accent));
  color: var(--p-50, var(--paper));
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 14px -4px color-mix(in srgb, var(--p-600, var(--accent)) 40%, transparent);
}

/* MAIL: link inline w akcencie (paleta) */
.mockup__mail-link {
  color: var(--p-600, var(--accent));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--p-600, var(--accent)) 40%, transparent);
  font-weight: 500;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mockup__mail-link:hover {
  color: var(--p-700, var(--accent));
  text-decoration-color: var(--p-600, var(--accent));
}

/* MOCKUP STAT: dashboard tile (akcent jako trend, big number, progress bar) */
.mockup--stat {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.4rem, 2.6vw, 1.8rem);
  background: var(--paper-pure);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mockup--stat::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background:
    radial-gradient(circle at 100% 0%,
      color-mix(in srgb, var(--p-200, var(--accent)) 50%, transparent),
      transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.mockup--white.mockup--stat,
.mockup.mockup--white.mockup--stat { background: #FFFFFF; }
.mockup--dark.mockup--stat,
.mockup.mockup--dark.mockup--stat { background: var(--p-950, #0E1D19); }

.mockup__stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.mockup__stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-700, var(--ink-dim));
}
.mockup--dark .mockup__stat-label { color: var(--p-300, rgba(255,255,255,0.6)); }
.mockup__stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  background: color-mix(in srgb, var(--p-600, var(--accent)) 14%, transparent);
  color: var(--p-700, var(--accent));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.mockup--dark .mockup__stat-trend { color: var(--p-200, var(--accent)); background: color-mix(in srgb, var(--p-400, var(--accent)) 22%, transparent); }

.mockup__stat-value {
  font-size: clamp(36px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--p-900, var(--ink));
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.mockup--dark .mockup__stat-value { color: var(--p-50, var(--paper)); }

.mockup__stat-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: var(--p-700, var(--ink-mid));
  position: relative;
  z-index: 1;
}
.mockup--dark .mockup__stat-meta { color: var(--p-300, rgba(255,255,255,0.6)); }
.mockup__stat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--p-600, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-600, var(--accent)) 20%, transparent);
  animation: mockupPulse 2.4s var(--ease) infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .mockup__stat-dot { animation: none; } }

.mockup__stat-bar {
  position: relative;
  z-index: 1;
  height: 6px;
  background: color-mix(in srgb, var(--p-200, rgba(0,0,0,0.06)) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.mockup--dark .mockup__stat-bar { background: rgba(255,255,255,0.08); }
.mockup__stat-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--p-500, var(--accent)), var(--p-700, var(--accent)));
  border-radius: 999px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--p-600, var(--accent)) 50%, transparent);
  transition: width 0.6s var(--ease);
}

.mockup__stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(26, 24, 20, 0.06);
  position: relative;
  z-index: 1;
  font-size: 12.5px;
}
.mockup--dark .mockup__stat-foot { border-top-color: rgba(255,255,255,0.08); }
.mockup__stat-foot-label {
  color: var(--p-700, var(--ink-mid));
}
.mockup--dark .mockup__stat-foot-label { color: var(--p-300, rgba(255,255,255,0.6)); }
.mockup__stat-foot-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--p-900, var(--ink));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.mockup--dark .mockup__stat-foot-val { color: var(--p-50, var(--paper)); }

/* ═══════════════════════════════════════════════════════════════════
   END · v9 MOCKUP ROW 3 KOLUMNY
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v10 · MOCKUP NAV: grid 1fr auto 1fr – linki idealnie wyśrodkowane
   ═══════════════════════════════════════════════════════════════════ */
.mockup__brand-logo { justify-self: start; }
.mockup__nav-links  { justify-self: center; }
.mockup__nav-cta    { justify-self: end; }

@media (max-width: 720px) {
  .mockup__nav { grid-template-columns: 1fr auto; }
  .mockup__nav-links { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   END · v10
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v11 · MOCKUP PRICING CARD (zamiast stat card) + MODES LEGENDA
   ═══════════════════════════════════════════════════════════════════ */

/* PRICING CARD – top UX pricing tier z paletą */
.mockup--pricing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.6vw, 1.8rem);
  background: var(--paper-pure);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mockup--pricing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p-400, var(--accent)), var(--p-600, var(--accent)), var(--p-400, var(--accent)));
  z-index: 1;
}
.mockup.mockup--white.mockup--pricing { background: #FFFFFF; }
.mockup.mockup--dark.mockup--pricing { background: var(--p-950, #0E1D19); }

.mockup__pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.mockup__pricing-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-700, var(--ink-soft));
  padding: 0.28rem 0.6rem;
  background: color-mix(in srgb, var(--p-200, var(--accent-soft)) 65%, transparent);
  border-radius: 999px;
}
.mockup--dark .mockup__pricing-tag { color: var(--p-100, var(--paper)); background: color-mix(in srgb, var(--p-700, var(--accent)) 50%, transparent); }
.mockup__pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-700, var(--accent));
  letter-spacing: -0.005em;
}
.mockup--dark .mockup__pricing-badge { color: var(--p-200, var(--accent)); }
.mockup__pricing-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-600, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-600, var(--accent)) 18%, transparent);
  animation: mockupPulse 2.4s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) { .mockup__pricing-badge-dot { animation: none; } }

.mockup__pricing-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.2rem;
}
.mockup__pricing-amount {
  font-size: clamp(36px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--p-900, var(--ink));
  font-variant-numeric: tabular-nums;
}
.mockup--dark .mockup__pricing-amount { color: var(--p-50, var(--paper)); }
.mockup__pricing-period {
  font-size: 13.5px;
  color: var(--p-700, var(--ink-mid));
  font-weight: 500;
}
.mockup--dark .mockup__pricing-period { color: var(--p-300, rgba(255,255,255,0.6)); }

.mockup__pricing-list {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid rgba(26, 24, 20, 0.06);
}
.mockup--dark .mockup__pricing-list { border-top-color: rgba(255,255,255,0.08); }
.mockup__pricing-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 13px;
  color: var(--p-800, var(--ink-soft));
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.mockup--dark .mockup__pricing-list li { color: var(--p-200, rgba(255,255,255,0.78)); }
.mockup__pricing-check {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-600, var(--accent)) 16%, transparent);
  color: var(--p-700, var(--accent));
  flex-shrink: 0;
}
.mockup--dark .mockup__pricing-check { color: var(--p-200, var(--accent)); background: color-mix(in srgb, var(--p-500, var(--accent)) 28%, transparent); }
.mockup__pricing-check svg { width: 11px; height: 11px; }

.mockup__pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  margin-top: auto;
  background: var(--p-600, var(--accent));
  color: var(--p-50, var(--paper));
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 14px -4px color-mix(in srgb, var(--p-600, var(--accent)) 40%, transparent);
}
.mockup__pricing-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px -6px color-mix(in srgb, var(--p-600, var(--accent)) 55%, transparent);
}

/* Pricing card w 3-kolumnowym row */
@media (max-width: 1080px) {
  .mockup--pricing { grid-column: span 2; }
}
@media (max-width: 720px) {
  .mockup--pricing { grid-column: auto; }
  /* Pricing card zachowuje standardowy layout left-aligned (Stripe/Linear style):
     tag po lewej, badge po prawej w head, cena/lista/button kolejno po lewej */
}

/* ─── MODES LEGENDA – block centered, opis left-aligned (top UX) ─── */
.modes-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: 2.625rem;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
  justify-items: center;     /* GLOBALNIE – wymusza center na kazdym breakpoincie */
}
.modes-legend__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: none;
  width: 28ch;                /* FIXED width – żelazna szerokość */
  max-width: 100%;            /* responsywność na bardzo małych ekranach */
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  text-align: left;
}
.modes-legend__item:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
/* Ikona center */
.modes-legend__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto; height: auto;
  background: transparent !important;
  color: var(--ink-dim);
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0.15rem;
}
.modes-legend__icon svg { width: 18px; height: 18px; }
.modes-legend__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  /* width: 100% USUNIĘTE – wymuszało stretch itemu i blokowało margin auto */
}
/* Tytuł – left (do tej samej krawędzi co opis) */
.modes-legend__body strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-align: left;
}
/* Opis – left-align (czytelność) */
.modes-legend__body span {
  font-size: 12.5px;
  color: var(--ink-mid);
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  text-align: left;
}
@media (max-width: 920px) {
  .modes-legend {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
}
@media (max-width: 540px) {
  .modes-legend {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
  /* width itemu: dziedziczone z głównej deklaracji (min(28ch, 100%)) */
}

/* ═══════════════════════════════════════════════════════════════════
   END · v11
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v12 · MOCKUP SITE: hero centered (desktop + mobile)
   ═══════════════════════════════════════════════════════════════════ */
.mockup__hero {
  align-items: center;
  text-align: center;
  padding-top: max(0px, calc(clamp(2.5rem, 6vw, 4.5rem) - 20px));
  padding-bottom: clamp(4rem, 8.5vw, 6.5rem);
  gap: 1.1rem;
}
.mockup__h1 {
  margin: 0 auto;
}
.mockup__lead {
  margin: 0 auto;
}
.mockup__ctas {
  justify-content: center;
  margin-top: 0.6rem;
}
.mockup__eyebrow {
  align-self: center;
  margin-bottom: 0.3rem;
}

/* Lead break – widoczny TYLKO na mobile */
.mockup__lead-break { display: none; }
@media (max-width: 720px) {
  .mockup__lead-break { display: inline; }
  .mockup__h1, .mockup__lead { max-width: 100%; }
  .mockup__hero {
    /* Mobile też dostaje porządny oddech – ale mniejszy niż desktop */
    padding-top: clamp(2rem, 7vw, 3rem);
    padding-bottom: clamp(3rem, 9vw, 4.5rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v13 · AD WARIANTY (V1/V2/V3) – celowo na końcu, żeby wygrać specifity
   z wcześniejszym .mockup--ad gradientem (linia ~3837)
   ═══════════════════════════════════════════════════════════════════ */

/* Wszystkie 3 warianty mają tę samą bryłę: aspect 4/5, równa geometria */
.mockup--ad,
.mockup--ad--bold,
.mockup--ad--accent {
  aspect-ratio: 4 / 5;
  align-self: start;       /* aspect-ratio wygrywa nad grid stretch */
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  /* Ujednolicony cień + subtelna ramka żeby light bg się nie zlał z paper */
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.06),
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 6px 14px -6px rgba(26, 24, 20, 0.08),
    0 16px 28px -14px rgba(26, 24, 20, 0.1);
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.mockup--ad:hover,
.mockup--ad--bold:hover,
.mockup--ad--accent:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.07),
    0 1px 2px rgba(26, 24, 20, 0.05),
    0 14px 28px -10px rgba(26, 24, 20, 0.12),
    0 28px 50px -22px rgba(26, 24, 20, 0.14);
}

/* ── V1: Klasyk – radial gradient na p-600 (default, juz jest w .mockup--ad) ── */

/* ── V2: Brutalist statement – jasne tło, mega monolith headline, geometric grid ── */
.mockup.mockup--ad--bold {
  background:
    linear-gradient(180deg, var(--p-50, var(--paper-pure)) 0%, var(--p-100, rgba(26,24,20,0.04)) 100%);
  color: var(--p-50-fg, var(--p-900, var(--ink)));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}

.mockup.mockup--ad--bold .mockup__ad-tag {
  grid-row: 1;
  color: color-mix(in srgb, var(--p-50-fg, var(--p-900, var(--ink))) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.mockup.mockup--ad--bold .mockup__ad-body {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  z-index: 2;
}
.mockup.mockup--ad--bold .mockup__ad-lead {
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--p-50-fg, var(--p-900, var(--ink))) 65%, transparent);
  margin: 0;
  max-width: 100%;
}
/* META row jako absolute flex – align-items: center wyrówna grid i button */
.mockup.mockup--ad--bold .mockup__ad-meta {
  position: absolute;
  left: clamp(1.4rem, 2.6vw, 2rem);
  right: clamp(1.4rem, 2.6vw, 2rem);
  bottom: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}
.mockup--ad--bold .mockup__ad-bold-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.mockup__ad-bold-grid span {
  display: block;
  border-radius: 3px;
}
.mockup__ad-bold-grid span:nth-child(1) { background: var(--p-900, var(--ink)); opacity: 0.85; }
.mockup__ad-bold-grid span:nth-child(2) { background: var(--accent-500, var(--p-500)); }
.mockup__ad-bold-grid span:nth-child(3) { background: var(--p-300, rgba(26,24,20,0.25)); }
.mockup__ad-bold-grid span:nth-child(4) { background: var(--p-700, rgba(26,24,20,0.6)); }
.mockup.mockup--ad--bold .mockup__ad-eyebrow {
  color: var(--p-600, var(--ink-soft));
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* V2 outline pill CTA – flex item w meta (right edge przez justify-content) */
.mockup.mockup--ad--bold .mockup__ad-cta--outline-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.55rem 0.55rem 1.05rem;
  margin: 0;
  background: transparent;
  border: 1.5px solid var(--p-50-fg, var(--p-900, var(--ink)));
  color: var(--p-50-fg, var(--p-900, var(--ink)));
  border-radius: 999px;
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mockup.mockup--ad--bold .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--p-50-fg, var(--p-900, var(--ink)));
  color: var(--p-50, var(--paper));
  transition: transform 0.3s var(--ease);
}
.mockup.mockup--ad--bold .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow svg {
  width: 12px;
  height: 12px;
}
.mockup--ad--bold:hover .mockup__ad-cta--outline-pill {
  background: var(--p-50-fg, var(--p-900, var(--ink)));
  color: var(--p-50, var(--paper));
  transform: translateY(-1px);
}
.mockup--ad--bold:hover .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow {
  background: var(--p-50, var(--paper));
  color: var(--p-50-fg, var(--p-900, var(--ink)));
  transform: translateX(2px);
}
.mockup.mockup--ad--bold .mockup__ad-h--mega {
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.045em;
  line-height: 0.88;
  font-weight: 800;
  color: var(--p-50-fg, var(--p-900, var(--ink)));
  text-wrap: balance;
  margin: 0;
}
/* V2: jednolita czcionka – żaden italic, żaden inny font */
.mockup.mockup--ad--bold .mockup__ad-h--mega em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.mockup.mockup--ad--bold .mockup__ad-cta--outline {
  background: transparent;
  color: var(--p-900, var(--ink));
  border: 1.5px solid var(--p-700, var(--ink-soft));
  align-self: flex-start;
}

/* Dot akcentu w eyebrow (V2 i V3) */
.mockup__ad-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-500, var(--p-500));
  flex-shrink: 0;
}

/* ── V3: Akcent – sredni brand (przeniesione z V1 classic) + akcent jako pasek + CTA ── */
/* V3: Magazine poster – eyebrow top-left, content stacked at bottom */
.mockup.mockup--ad--accent {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p-500, var(--accent)) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--p-900, var(--ink)) 30%, transparent), transparent 60%),
    var(--p-700, var(--accent));
  color: var(--p-50, white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.2rem;
  padding-left: clamp(2rem, 3.6vw, 2.8rem);
}
.mockup__ad-accent-stripe {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 6px;
  background: var(--accent-500, var(--p-500));
  z-index: 0;
}

/* Eyebrow top-LEFT – position absolute żeby był nad content u dołu */
.mockup.mockup--ad--accent .mockup__ad-eyebrow {
  position: absolute;
  top: clamp(1.4rem, 2.6vw, 2rem);
  left: clamp(2rem, 3.6vw, 2.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--accent-500, var(--p-500)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-500, var(--p-500)) 32%, transparent);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-500, var(--p-500));
  margin: 0;
  z-index: 2;
}
/* V3 — tag (przeniesiony z V1) na pozycji eyebrow top-left, neutralny stylem jak w V1 */
.mockup.mockup--ad--accent .mockup__ad-tag {
  position: absolute;
  top: clamp(1.4rem, 2.6vw, 2rem);
  left: clamp(2rem, 3.6vw, 2.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--p-50, white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-50, white) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--p-50, white) 82%, transparent);
  z-index: 2;
}

/* Body content na dole – body + CTA układają się od dołu */
.mockup.mockup--ad--accent .mockup__ad-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.mockup.mockup--ad--accent .mockup__ad-h--mega {
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-weight: 800;
  color: var(--p-50, white);
  text-wrap: balance;
  margin: 0;
}
/* V3: ten sam font sans, inny odcień (accent) – czytelne w każdym kontraście */
/* Em rozjasniony (accent + 25% white) zeby na ciemnym tle V3 byl wyrazny niezaleznie od palety */
.mockup.mockup--ad--accent .mockup__ad-h--mega em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: color-mix(in srgb, var(--accent-500, var(--p-500)) 75%, white 25%);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--p-900, black) 40%, transparent);
}
.mockup.mockup--ad--accent .mockup__ad-lead {
  font-family: var(--mockup-font-sans, var(--font-sans));
  /* Skalowanie per-box (cqw) — narrow 3-col ~13.5px, wide / mobile 1-col ~16px */
  font-size: clamp(13.5px, 4.4cqw, 16px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.3rem 0 0.4rem;
  max-width: 92%;
  text-wrap: balance;
}
.mockup__ad-lead-break { display: block; }

/* CTA – solid accent pill z arrow circle */
.mockup__ad-cta--solid-accent {
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.55rem 0.55rem 1.05rem;
  margin: 0;
  background: var(--accent-500, var(--p-500));
  color: var(--accent-fg, white);
  border-radius: 999px;
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px -2px color-mix(in srgb, var(--accent-500, black) 40%, transparent);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mockup__ad-cta--solid-accent .mockup__ad-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: var(--accent-fg, white);
  transition: transform 0.3s var(--ease);
}
.mockup__ad-cta--solid-accent .mockup__ad-cta-arrow svg {
  width: 12px;
  height: 12px;
}
.mockup--ad--accent:hover .mockup__ad-cta--solid-accent {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -4px color-mix(in srgb, var(--accent-500, black) 50%, transparent);
}
.mockup--ad--accent:hover .mockup__ad-cta--solid-accent .mockup__ad-cta-arrow {
  transform: translateX(2px);
}

/* ───────── V2 (Bold): kropki w prawym GÓRNYM, soft scale-pulse ───────── */
.mockup__ad-decor--bold {
  inset: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem) auto auto !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.45rem !important;
}
.mockup__ad-decor--bold span {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--accent-500, var(--p-500)) !important;
  animation: adDecorBoldPulse 4.2s ease-in-out infinite !important;
}
.mockup__ad-decor--bold span:nth-child(2) { animation-delay: 0.4s !important; }
.mockup__ad-decor--bold span:nth-child(3) { animation-delay: 0.8s !important; }
@keyframes adDecorBoldPulse {
  0%, 100% { transform: scale(0.55); opacity: 0.35; }
  50%      { transform: scale(1);    opacity: 1;    }
}

/* ───────── V3 (Akcent): paski PIONOWE w prawym DOLNYM (CAŁE w karcie, nie wystają) ───────── */
.mockup__ad-decor--accent {
  inset: auto clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem) auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 0.45rem !important;
}
.mockup__ad-decor--accent span {
  width: 14px !important;
  height: 60px !important;
  border-radius: 999px !important;
  background: var(--accent-500, var(--p-500)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--p-900, black) 25%, transparent),
    0 2px 6px -1px color-mix(in srgb, var(--p-900, black) 35%, transparent) !important;
  animation: adDecorAccentRise 3.4s ease-in-out infinite !important;
  transform-origin: bottom center;
}
.mockup__ad-decor--accent span:nth-child(2) { animation-delay: 0.25s !important; }
.mockup__ad-decor--accent span:nth-child(3) { animation-delay: 0.5s !important; }
@keyframes adDecorAccentRise {
  0%, 100% { transform: scaleY(0.4); opacity: 0.55; }
  50%      { transform: scaleY(1);   opacity: 1;    }
}

/* ── Animacje "życia" w V2 i V3 ── */
/* Dot akcentu pulsuje (V2 i V3) – drobne, ciągłe życie */
.mockup--ad--bold .mockup__ad-dot,
.mockup--ad--accent .mockup__ad-dot {
  animation: adDotPulse 2.6s ease-in-out infinite;
}
@keyframes adDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-500, var(--p-500)) 60%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-500, var(--p-500)) 0%, transparent);
    transform: scale(1.18);
  }
}

/* V3: pasek akcentu na górze ma delikatny shimmer (slide gradient) */
.mockup__ad-accent-stripe {
  background: linear-gradient(
    90deg,
    var(--accent-500, var(--p-500)) 0%,
    color-mix(in srgb, var(--accent-500, white) 70%, white) 50%,
    var(--accent-500, var(--p-500)) 100%
  );
  background-size: 220% 100%;
  animation: adStripeShine 4.2s ease-in-out infinite;
}
@keyframes adStripeShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* V2: italic em w mega H1 ma subtelny "fade-in" cyklu (oddech akcentu) */
.mockup.mockup--ad--bold .mockup__ad-h--mega em {
  animation: adEmBreathe 4.5s ease-in-out infinite;
}
@keyframes adEmBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* V3: hover na CTA solid akcent – lift */
.mockup__ad-cta--solid-accent {
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
  cursor: pointer;
}
.mockup__ad-cta--solid-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--accent-500, black) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .mockup--ad--bold .mockup__ad-dot,
  .mockup--ad--accent .mockup__ad-dot,
  .mockup__ad-accent-stripe,
  .mockup.mockup--ad--bold .mockup__ad-h--mega em {
    animation: none;
  }
}

/* ── V2 adaptacja do motywów (white / dark) ── */
.mockup.mockup--ad--bold-white {
  background: #FFFFFF !important;
  color: #1A1814 !important;
}
.mockup.mockup--ad--bold-white .mockup__ad-tag { color: rgba(26, 24, 20, 0.6) !important; }
.mockup.mockup--ad--bold-white .mockup__ad-h--mega { color: #1A1814 !important; }
.mockup.mockup--ad--bold-white .mockup__ad-lead { color: rgba(26, 24, 20, 0.65) !important; }
.mockup.mockup--ad--bold-white .mockup__ad-cta--outline-pill {
  border-color: #1A1814 !important;
  color: #1A1814 !important;
}
.mockup.mockup--ad--bold-white .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow {
  background: #1A1814 !important;
  color: #FAFAFA !important;
}
.mockup.mockup--ad--bold-dark {
  background: linear-gradient(180deg, var(--p-900, var(--ink)) 0%, var(--p-800, var(--ink)) 100%) !important;
  color: #FAFAFA !important;
}
.mockup.mockup--ad--bold-dark .mockup__ad-tag       { color: rgba(255,255,255,0.6) !important; }
.mockup.mockup--ad--bold-dark .mockup__ad-eyebrow   { color: rgba(255,255,255,0.78); }
.mockup.mockup--ad--bold-dark .mockup__ad-h--mega   { color: #FAFAFA !important; }
.mockup.mockup--ad--bold-dark .mockup__ad-h--mega em { color: var(--accent-50, rgba(255,255,255,0.92)); }
.mockup.mockup--ad--bold-dark .mockup__ad-lead       { color: rgba(255,255,255,0.7) !important; }
.mockup.mockup--ad--bold-dark .mockup__ad-cta--outline {
  color: var(--p-50, white);
  border-color: rgba(255, 255, 255, 0.45);
}
/* Dark mode dla NEW outline-pill button */
.mockup.mockup--ad--bold-dark .mockup__ad-cta--outline-pill {
  border-color: #FAFAFA !important;
  color: #FAFAFA !important;
}
.mockup.mockup--ad--bold-dark .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow {
  background: #FAFAFA !important;
  color: #1A1814 !important;
}
.mockup.mockup--ad--bold-dark:hover .mockup__ad-cta--outline-pill {
  background: #FAFAFA !important;
  color: #1A1814 !important;
}
.mockup.mockup--ad--bold-dark:hover .mockup__ad-cta--outline-pill .mockup__ad-cta-arrow {
  background: #1A1814 !important;
  color: #FAFAFA !important;
}
/* Dark mode dla 4-grid kafelków – jaśniejsze warianty */
.mockup.mockup--ad--bold-dark .mockup__ad-bold-grid span:nth-child(1) { background: rgba(255,255,255,0.85); }
.mockup.mockup--ad--bold-dark .mockup__ad-bold-grid span:nth-child(3) { background: rgba(255,255,255,0.4); }
.mockup.mockup--ad--bold-dark .mockup__ad-bold-grid span:nth-child(4) { background: rgba(255,255,255,0.6); }

/* ── Tło SEKCJI preview pod mockupami ── */
.preview { transition: background 0.4s var(--ease); }
.preview--white { background: #FFFFFF; }
.preview--dark  { background: var(--p-950, #0E1D19); }

/* Adaptacja headerów + WSZYSTKIE 3 grupy przełączników na ciemnym tle preview */
.preview--dark .preview__title       { color: var(--paper, #fff); }
.preview--dark .preview__title em    { color: rgba(255, 255, 255, 0.7); }
.preview--dark .preview__group-label { color: rgba(255, 255, 255, 0.5); }
.preview--dark .preview__theme,
.preview--dark .preview__color,
.preview--dark .preview__font {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.preview--dark .preview__theme-btn   { color: rgba(255, 255, 255, 0.62); }
.preview--dark .preview__theme-btn:hover { color: rgba(255, 255, 255, 0.92); }
.preview--dark .preview__theme-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}
.preview--dark .contrast__label      { color: rgba(255, 255, 255, 0.55); }
.preview--dark .contrast__sub        { color: var(--paper, #fff); }
.preview--dark .contrast             { border-color: rgba(255, 255, 255, 0.12); }

/* ── Mikro-hover ad (proste): boks lift + speed-up animacji decor/stripe ── */
/* V2 kropki – szybciej */
.mockup--ad--bold:hover .mockup__ad-decor--bold span {
  animation-duration: 2.4s !important;
}
/* V3 stripe akcent – szybciej */
.mockup--ad--accent:hover .mockup__ad-accent-stripe {
  animation-duration: 2.2s;
}
/* V3 paski decor – szybciej */
.mockup--ad--accent:hover .mockup__ad-decor--accent span {
  animation-duration: 2s !important;
}

/* ── Mobile: typografia w boksach reklamowych większa ── */
@media (max-width: 720px) {
  .mockup--ad .mockup__ad-tag,
  .mockup--ad .mockup__ad-eyebrow { font-size: 11.5px !important; }
  .mockup--ad .mockup__ad-h { font-size: clamp(26px, 6vw, 34px); }
  .mockup--ad .mockup__ad-p { font-size: 14px; }
  .mockup--ad .mockup__ad-cta { font-size: 13.5px; padding: 0.65rem 1.1rem; }
  .mockup.mockup--ad--bold .mockup__ad-h--mega { font-size: clamp(40px, 9vw, 56px); }
  .mockup.mockup--ad--accent .mockup__ad-h--mega { font-size: clamp(42px, 9.5vw, 58px); }
}

/* ═══════════════════════════════════════════════════════════════════
   v15 · MOCKUP SITE – przełączniki kolor tekstu + font (alternatywne)
   ═══════════════════════════════════════════════════════════════════ */

/* CSS variables dla fontów mockupu (scoped na .mockup + .brief__mockup--brand) */
.mockup,
.brief__mockup--brand {
  --mockup-font-sans: var(--font-sans);
  --mockup-font-serif: var(--font-sans);
  --mockup-font-mono: var(--font-mono);
}

/* Font: TECH (Geist – clean Vercel-style, geometryczny grotesque 2026) */
.mockup.font-tech,
.brief__mockup--brand.font-tech {
  --mockup-font-sans: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --mockup-font-serif: 'Geist', sans-serif;
  --mockup-font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
}

/* Font: SERIF (Fraunces – playful variable serif, top trend 2026) */
.mockup.font-serif,
.brief__mockup--brand.font-serif {
  --mockup-font-sans: 'Fraunces', 'Times New Roman', serif;
  --mockup-font-serif: 'Fraunces', serif;
  --mockup-font-mono: 'Geist Mono', monospace;
}

/* Wymuszenie fontów dla wszystkich elementów mockupu site + ad */
.mockup .mockup__h1,
.mockup .mockup__h1-em,
.mockup .mockup__lead,
.mockup .mockup__brand-logo,
.mockup .mockup__nav-link,
.mockup .mockup__btn-primary,
.mockup .mockup__btn-ghost,
.mockup .mockup__card-h,
.mockup .mockup__card-p,
.mockup .mockup__nav-cta,
.mockup .mockup__ad-h,
.mockup .mockup__ad-h--mega,
.mockup .mockup__ad-cta,
.mockup .mockup__ad-p,
.mockup .mockup__ad-num {
  font-family: var(--mockup-font-sans);
}
.mockup .mockup__h1-em,
.mockup .mockup__ad-h--mega em {
  font-family: var(--mockup-font-serif);
}
.mockup .mockup__chrome,
.mockup .mockup__url,
.mockup .mockup__eyebrow,
.mockup .mockup__card-tag,
.mockup .mockup__ad-tag,
.mockup .mockup__ad-eyebrow,
.mockup .mockup__ad-foot,
.mockup .mockup__ad-foot-l,
.mockup .mockup__ad-foot-r {
  font-family: var(--mockup-font-mono);
}

/* Drobny tuning typo dla alternatywnych fontów */
.mockup.font-tech .mockup__h1 { letter-spacing: -0.04em; }
.mockup.font-tech .mockup__ad-h--mega { letter-spacing: -0.045em; }
.mockup.font-serif .mockup__h1 {
  letter-spacing: -0.025em;
  line-height: 1;
  font-weight: 700;     /* Fraunces ma wagi – 700 czyta się elegancko */
}
.mockup.font-serif .mockup__h1-em {
  font-style: italic;   /* w serif italic ma sens – pokazuje variable axis */
}
.mockup.font-serif .mockup__lead {
  letter-spacing: -0.005em;
  font-weight: 400;
}
.mockup.font-serif .mockup__ad-h,
.mockup.font-serif .mockup__ad-h--mega {
  letter-spacing: -0.025em;
  font-weight: 700;
}
.mockup.font-serif .mockup__ad-h--mega em {
  font-style: italic;
}

/* ── KOLOR TEKSTU – nadpisuje kolory tekstowych elementów ── */
/* DARK TEXT – warm black #1A1814 (top web 2026 – najlepszy do oczu) */
.mockup--site.text-dark .mockup__h1,
.mockup--site.text-dark .mockup__h1-em,
.mockup--site.text-dark .mockup__lead,
.mockup--site.text-dark .mockup__brand-logo,
.mockup--site.text-dark .mockup__nav-link,
.mockup--site.text-dark .mockup__nav-link--active,
.mockup--site.text-dark .mockup__eyebrow,
.mockup--site.text-dark .mockup__card-h,
.mockup--site.text-dark .mockup__card-p,
.mockup--site.text-dark .mockup__btn-ghost {
  color: #1A1814 !important;
}

/* LIGHT TEXT – warm white #FAFAFA (top web 2026 – nie pure white, oddycha) */
.mockup--site.text-light .mockup__h1,
.mockup--site.text-light .mockup__h1-em,
.mockup--site.text-light .mockup__lead,
.mockup--site.text-light .mockup__brand-logo,
.mockup--site.text-light .mockup__nav-link,
.mockup--site.text-light .mockup__nav-link--active,
.mockup--site.text-light .mockup__eyebrow,
.mockup--site.text-light .mockup__card-h,
.mockup--site.text-light .mockup__card-p,
.mockup--site.text-light .mockup__btn-ghost {
  color: #FAFAFA !important;
}

/* Subtelne odróżnienie h1-em w kolorach forced (zachowuje hierarchię) */
.mockup--site.text-dark .mockup__h1-em,
.mockup--site.text-light .mockup__h1-em {
  opacity: 0.62;
}

/* Buttony adaptują się do wybranego koloru (zachowanie kontrastu) */
.mockup--site.text-dark .mockup__nav-cta,
.mockup--site.text-dark .mockup__btn-primary {
  background: #1A1814 !important;
  color: #FAFAFA !important;
}
.mockup--site.text-dark .mockup__nav-cta-arrow {
  background: rgba(250, 250, 250, 0.18) !important;
  color: #FAFAFA !important;
}
.mockup--site.text-light .mockup__nav-cta,
.mockup--site.text-light .mockup__btn-primary {
  background: #FAFAFA !important;
  color: #1A1814 !important;
}
.mockup--site.text-light .mockup__nav-cta-arrow {
  background: rgba(26, 24, 20, 0.18) !important;
  color: #1A1814 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   END · v15
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v16 · MOCKUP AD CLASSIC – editorial marketing layout
   ═══════════════════════════════════════════════════════════════════ */
.mockup.mockup--ad--classic {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p-500, var(--accent)) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--p-900, var(--ink)) 30%, transparent), transparent 60%),
    var(--p-700, var(--accent));
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 3.4vw, 34px);
  gap: 0;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  container-type: inline-size;
}
.mockup.mockup.mockup--ad--classic {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p-500, var(--accent)) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--p-900, var(--ink)) 30%, transparent), transparent 60%),
    var(--p-700, var(--accent));
}

/* TOP – oryginalny tag w top section */
.mockup--ad--classic .mockup__ad-top {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}
.mockup--ad--classic .mockup__ad-tag {
  font-family: var(--mockup-font-mono, var(--font-mono));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--p-50, white) 70%, transparent);
}
/* DOTS – wspólne style dla classic (V1) i accent (V3) */
.mockup--ad--accent { container-type: inline-size; }
.mockup--ad--classic .mockup__ad-dots,
.mockup--ad--accent .mockup__ad-dots {
  position: absolute;
  width: clamp(118px, 38cqw, 162px);
  display: grid;
  grid-template-columns: repeat(var(--dot-cols, 8), 1fr);
  gap: clamp(4px, 1.2cqw, 6px);
  pointer-events: none;
  justify-items: center;
  align-items: center;
  z-index: 2;
}
.mockup--ad--classic .mockup__ad-dots {
  top: clamp(22px, 3.4vw, 34px);
  right: clamp(22px, 3.4vw, 34px);
}
.mockup--ad--accent .mockup__ad-dots {
  top: clamp(1.4rem, 2.6vw, 2rem);
  right: clamp(1.4rem, 2.6vw, 2rem);
  width: clamp(50px, 16cqw, 72px);
}
.mockup--ad--classic .mockup__ad-dots span,
.mockup--ad--accent .mockup__ad-dots span {
  display: block;
  width: clamp(11px, 3.5cqw, 15px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-50, white) 7%, transparent);
}
.mockup--ad--classic .mockup__ad-dots span.is-on,
.mockup--ad--accent .mockup__ad-dots span.is-on {
  background: var(--p-300, color-mix(in srgb, var(--p-500, var(--accent)) 45%, var(--p-50, white)));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--p-50, white) 22%, transparent);
}
.mockup__ad-dots span.is-cut { visibility: hidden; }
.mockup--ad--classic .mockup__ad-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-500, var(--p-500, var(--accent)));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.15);
  /* Wyrównanie center z prawą kropką palety na dole (12px) */
  margin-right: -1px;
}

/* BODY – dominująca typografia w środku-lewo */
.mockup--ad--classic .mockup__ad-body {
  grid-row: 2;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
}
.mockup--ad--classic .mockup__ad-eyebrow {
  display: inline-block;
  padding: 0.32rem 0.7rem;
  background: color-mix(in srgb, var(--p-50, white) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-50, white) 18%, transparent);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--mockup-font-mono, var(--font-mono));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--p-50, white) 85%, transparent);
  margin-bottom: 0.4rem;
}
.mockup--ad--classic .mockup__ad-h {
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.94;
  color: var(--p-50, white);
  margin: 0;
  text-wrap: balance;
}
.mockup--ad--classic .mockup__ad-p {
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--p-50, white) 75%, transparent);
  margin: 0.5rem 0 0;
  max-width: 90%;
}

/* BOTTOM – CTA pill + 3 swatches palety – absolute pełna szerokość */
.mockup--ad--classic .mockup__ad-bottom {
  position: absolute;
  left: clamp(22px, 3.4vw, 34px);
  right: clamp(22px, 3.4vw, 34px);
  bottom: clamp(22px, 3.4vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}
.mockup--ad--classic .mockup__ad-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.55rem 0.55rem 1.05rem;
  background: var(--p-50, white);
  color: var(--p-900, var(--ink));
  border-radius: 999px;
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px -1px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mockup--ad--classic:hover .mockup__ad-cta {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px -4px rgba(0, 0, 0, 0.22);
}
.mockup--ad--classic .mockup__ad-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p-900, var(--ink));
  color: var(--p-50, white);
  transition: transform 0.3s var(--ease);
}
.mockup--ad--classic .mockup__ad-cta-arrow svg { width: 12px; height: 12px; }
.mockup--ad--classic:hover .mockup__ad-cta-arrow { transform: translateX(2px); }

/* 3 swatches palety – pokazują kolory generatora w roli accent */
.mockup--ad--classic .mockup__ad-palette {
  display: flex;
  gap: 5px;
  align-items: center;
}
.mockup--ad--classic .mockup__ad-palette span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.mockup--ad--classic .mockup__ad-palette span[data-sw="300"] { background: var(--p-300, rgba(255,255,255,0.35)); }
.mockup--ad--classic .mockup__ad-palette span[data-sw="500"] { background: var(--accent-500, var(--p-500)); }
.mockup--ad--classic .mockup__ad-palette span[data-sw="700"] { background: var(--p-50, white); opacity: 0.95; }

/* Reset – stare elementy ukryte */
.mockup--ad--classic .mockup__ad-decor { display: none; }
.mockup--ad--classic .mockup__ad-frame { display: none; }
.mockup--ad--classic .mockup__ad-foot { display: none; }
.mockup--ad--classic .mockup__ad-num { display: none; }
.mockup--ad--classic .mockup__ad-stripes { display: none; }
.mockup--ad--classic .mockup__ad-panel { display: contents; }

@media (max-width: 540px) {
  .mockup--ad--classic .mockup__ad-mark { width: 22px; height: 22px; border-radius: 6px; }
  /* CTA / arrow: USUNIĘTE — V1 button mial na mobile mniejszy font niz V2/V3.
     Teraz wszystkie 3 boksy maja te same rozmiary buttonów. */
  .mockup--ad--classic .mockup__ad-palette span { width: 10px; height: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v17 · AUDIT WCAG – chowana sekcja (details/summary)
   ═══════════════════════════════════════════════════════════════════ */
.contrast-section {
  margin: clamp(1.5rem, 2.5vw, 2rem) auto 0;
  max-width: 940px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease);
}
.contrast-section:hover { box-shadow: var(--shadow-xs); }
.contrast-section[open] { box-shadow: var(--shadow-sm); }

.contrast-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.3rem, 2.4vw, 1.8rem);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.25s var(--ease);
}
.contrast-section__summary::-webkit-details-marker { display: none; }
.contrast-section__summary:hover { background: rgba(26, 24, 20, 0.025); }

.contrast-section__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contrast-section__h {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
}
.contrast-section__sub {
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  color: var(--ink-mid);
  letter-spacing: -0.003em;
  line-height: 1.45;
}

.contrast-section__chev {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--ink);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.contrast-section__chev svg { width: 13px; height: 13px; stroke-width: 2; }
.contrast-section[open] .contrast-section__chev {
  transform: rotate(180deg);
  background: var(--ink);
  color: var(--paper);
}

.contrast-section__body {
  padding: 0 clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.5rem, 2.6vw, 2rem);
}
.contrast-section[open] .contrast {
  margin-top: 0.8rem;
}

/* Audyt – cells z lepszym oddechem */
.contrast-section .contrast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}
@media (max-width: 720px) {
  .contrast-section .contrast { grid-template-columns: 1fr; }
}
.contrast-section .contrast__cell {
  padding: clamp(1.3rem, 2.2vw, 1.8rem) clamp(1.3rem, 2.2vw, 1.7rem) clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  min-height: clamp(170px, 18vw, 200px);
}
.contrast-section .contrast__h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.2rem;
}
.contrast-section .contrast__sample {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.contrast-section .contrast__sample-sm {
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  line-height: 1.5;
  opacity: 0.82;
  letter-spacing: -0.003em;
}
.contrast-section .contrast__score {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.contrast-section .contrast__score-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════
   v18 · REVEAL on scroll (IntersectionObserver) – jak na main landingu
   ═══════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger – elementy w gridzie kaskadowo */
.reveal[data-stagger] {
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   v21 · GRADIENTS – scalone w sekcję preview jako kontynuacja makiety
   Card: preview area (clickable, copy CSS) + ikona „Pokaż jako tło"
   w lewym górnym rogu (po przeciwnej stronie ikony copy)
   ═══════════════════════════════════════════════════════════════════ */
.gradients-block {
  margin-top: clamp(4.4rem, 6vw, 6.25rem);  /* +30px ekstra oddech od makiet */
}
.gradients-block__head {
  display: flex;
  justify-content: flex-end;     /* desktop: pill po prawej */
  margin-bottom: 2.125rem;       /* identyczny odstęp jak .library__head / .preview__head */
}
@media (max-width: 720px) {
  .gradients-block__head { justify-content: center; }
}
/* Pill w stylu preview tabs (Jasne/Białe/Ciemne) – jedna wartość */
.gradients-block__pill {
  display: inline-flex;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  flex-shrink: 0;
}
.gradients-block__pill-value {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.55rem 1rem;
  background: var(--paper-pure);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
  white-space: nowrap;
}

.gradients-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}
@media (max-width: 900px) {
  .gradients-block__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gradients-block__grid { grid-template-columns: 1fr; }
}

.gradient-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 24, 20, 0.04);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gradient-card:hover {
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 8px 22px -10px rgba(26, 24, 20, 0.14);
}
.gradient-card.is-bg-applied {
  border-color: color-mix(in srgb, var(--p-600, var(--accent)) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--p-600, var(--accent)) 35%, transparent),
    0 10px 24px -10px color-mix(in srgb, var(--p-600, var(--accent)) 28%, transparent);
}

.gradient-card__preview {
  cursor: pointer;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-bottom: 1px solid var(--rule);
  background-image: var(--gradient, linear-gradient(135deg, #eee, #ccc));
  transition: background-image 0.4s var(--ease), border-color 0.3s var(--ease), transform 0.25s var(--ease);
  position: relative;
  display: block;
}
.gradient-card__preview:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.gradient-card__preview:active { transform: scale(0.99); }
.gradient-card:hover .gradient-card__preview { border-bottom-color: transparent; }

/* Frosted ikony w rogach preview – copy (prawo-góra) i bg (lewo-góra).
   ZERO transition na background/color – toggle aria-pressed jest instant
   (color i background zmieniają się synchronicznie, bez "białej chwili"). */
.gradient-card__copy,
.gradient-card__bg {
  position: absolute;
  top: 14px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(26, 24, 20, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.2s var(--ease);
}
.gradient-card__copy { right: 14px; }
.gradient-card__bg {
  left: 14px;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.gradient-card__copy svg,
.gradient-card__bg svg { width: 13px; height: 13px; stroke-width: 1.7; display: block; }
.gradient-card__bg-icon { display: inline-grid; place-items: center; }
.gradient-card:hover .gradient-card__copy,
.gradient-card:hover .gradient-card__bg {
  background: rgba(255, 255, 255, 0.85);
}
.gradient-card__bg:hover { transform: scale(1.06); }
.gradient-card.is-copied .gradient-card__copy {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}
.gradient-card__bg[aria-pressed="true"],
.gradient-card:hover .gradient-card__bg[aria-pressed="true"],
.gradient-card__bg[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.18);
}
.gradient-card__bg[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--paper);
}
.gradient-card__bg:focus-visible,
.gradient-card__preview:focus-visible {
  outline-offset: 2px;
}

.gradient-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.75rem 1rem 0.85rem;
}
.gradient-card__name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gradient-card__type {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* Copy feedback */
.gradient-card.is-copied {
  border-color: color-mix(in srgb, var(--p-600, var(--accent)) 50%, transparent);
}
.gradient-card.is-copied .gradient-card__name::after {
  content: ' · skopiowano';
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p-600, var(--accent));
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "Pokaż jako tło" – aktywny gradient nakładany TYLKO na mockup www (mockup--site).
   Mockup body dostaje gradient zamiast paper background. Smooth fade. */
.mockup--site.is-bg-gradient .mockup__body {
  background-image: var(--bg-gradient, none);
  background-color: transparent;
}

/* Strzałka prowadząca z generatora do podglądu – Apple swipe-down.
   4 chevrony fade-through wave (każdy świeci kolejno top → bottom)
   = wyraźny kierunek ruchu, nie da się przegapić. */
.flow-arrow {
  display: flex;
  justify-content: center;
  margin: calc(clamp(2.25rem, 4.5vw, 3.75rem) - 10px) auto;
  padding: 8px 16px;
  color: var(--ink-mid);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.flow-arrow:hover {
  color: var(--ink);
  transform: translateY(2px);
}
.flow-arrow:active { transform: translateY(3px); }
.flow-arrow__svg {
  width: 34px;
  height: 60px;          /* +20% vs poprzednie 28×36, plus dłuższy svg dla 4 chevronów */
  display: block;
}
.flow-arrow__chev {
  opacity: 0;
  animation: flow-chev-wave 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.flow-arrow__chev[data-chev="0"] { animation-delay: 0s; }
.flow-arrow__chev[data-chev="1"] { animation-delay: 0.12s; }
.flow-arrow__chev[data-chev="2"] { animation-delay: 0.24s; }
.flow-arrow__chev[data-chev="3"] { animation-delay: 0.36s; }
@keyframes flow-chev-wave {
  0%, 65%, 100% { opacity: 0; }
  20%           { opacity: 1; }
  40%           { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-arrow__chev { animation: none; opacity: 0.55; }
  .flow-arrow__chev[data-chev="3"] { opacity: 0.3; }
  .flow-arrow__chev[data-chev="2"] { opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════════════
   v22 · BRAND KIT – premium "Twoja marka w tej palecie"
   Editorial mockup brand booka z paletą klienta, light + dark variant.
   Wszystkie kolory dynamiczne via CSS variables (palette, accent, fonts).
   ═══════════════════════════════════════════════════════════════════ */
.brand-kit {
  /* padding-top jak library/export (+20px ekstra), padding-bottom -5px (z 40px → 35px) */
  padding: calc(clamp(3rem, 5vw, 5rem) + 20px) 0 calc(clamp(2rem, 4vw, 3rem) + 35px);
}
.brand-kit__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 0 – odstępy steruje pojedynczymi marginesami na elementach,
     żeby pill→h2 = TYLKO margin-bottom pilla (1:1 jak .preview__head / .library__head),
     bez sumowania flex gap z marginem. */
  gap: 0;
  text-align: center;
  margin-bottom: clamp(2rem, 3.5vw, 2.875rem);
}
/* Pill identyczny jak .gradients-block__pill (jednolity badge sekcji) */
.brand-kit__pill {
  display: inline-flex;
  padding: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  flex-shrink: 0;
  /* Optical alignment: w .library/.preview/.gradients-block pod margin-bottom 2.125rem
     następuje "twarda" krawędź gridu (zero whitespace). Tu pod pillem jest h2 z fontowym
     top-leading (~8px puste piksele nad ascenderem przy 60px Geist 800). Margin obniżamy
     o tyle (~8px = 0.5rem), żeby optycznie pill→litera "T" wynosił identyczne 34px.
     Dodatkowe -5px na życzenie użytkownika dla jeszcze ciaśniejszego oddechu. */
  margin-bottom: calc(1.625rem - 5px);
}
.brand-kit__pill-value {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.55rem 1rem;
  background: var(--paper-pure);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,24,20,0.08);
  white-space: nowrap;
}
/* H2 1:1 z .library__title (override z sekcji 4 SECTION HEADS) – jednolite nagłówki sekcji */
.brand-kit__h {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
}
@media (max-width: 540px) {
  .brand-kit__h {
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.06;
  }
}
.brand-kit__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-soft);
}
.brand-kit__lead {
  max-width: 56ch;
  /* h2→lead = 23.6px (= dawny intro gap 0.85rem + 10px ekstra na życzenie użytkownika);
     teraz po wyzerowaniu gap intro cały dystans steruje to margin-top. */
  margin: 1.475rem auto 0;
  font-size: clamp(15.5px, 1.55vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.brand-kit__lead strong {
  color: var(--ink);
  font-weight: 600;
}
/* Cena – 1:1 z .card__price z głównego landingu (index.html .card--feature),
   żeby brand spójność cenowa była widoczna w obu miejscach. */
.brand-kit__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-kit__price-value {
  /* clamp(28, 4vw, 42) – cena 2:1 wobec buttona, hierarchia CTA-first
     (zamiast poprzedniego 36-56 gdzie cena dominowała 3:1). */
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
}
.brand-kit__price-meta {
  font-size: 17px;
  color: var(--ink-mid);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Grid – 2 cards desktop, 1 col mobile */
.brand-kit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 720px) {
  .brand-kit__grid { grid-template-columns: 1fr; }
}

/* Card – brand book slide, 4:5 portrait */
.brand-kit__card {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
  font-family: var(--mockup-font-sans);
  border: 1px solid transparent;
  transition: transform 0.45s var(--ease-snap), box-shadow 0.45s var(--ease-snap);
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 18px 44px -28px rgba(26, 24, 20, 0.18);
}
.brand-kit__card:hover {
  transform: translateY(-3px);   /* mikro-lift jak w mockup--ad */
  box-shadow:
    0 1px 2px rgba(26, 24, 20, 0.04),
    0 14px 32px -18px rgba(26, 24, 20, 0.20);
}
@media (prefers-reduced-motion: reduce) {
  .brand-kit__card:hover { transform: none; }
}
.brand-kit__card--light {
  background: var(--p-50);
  color: var(--p-900);
  border-color: color-mix(in srgb, var(--p-900) 8%, transparent);
}
.brand-kit__card--dark {
  /* Tlo z brand-700 → brand-900 — brand-700 ma jeszcze widoczny hue palety (Forest Tech
     #1F3D33 = czytelny ciemny zielony). brand-800/900 byly za ciemne (quasi-czern). */
  background: linear-gradient(180deg, var(--p-700, var(--ink-soft)) 0%, var(--p-900, var(--ink)) 100%);
  color: var(--p-50);
}

/* Meta – header monospace.
   Opacity 0.55 jest osobno na .brand-kit__num zamiast na całym meta, żeby plakietka
   .brand-kit__tag mogła być pełnokontrastowa (glass pill). */
.brand-kit__meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mockup-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-kit__num { opacity: 0.5; }

/* Tag (JASNE/CIEMNE) – Apple liquid-glass pill 2026.
   Adaptacyjny vibrancy: na jasnej karcie ciemna szyba, na ciemnej karcie jasna szyba –
   sam się dopasowuje przez currentColor. Stack: subtle bg tint + adaptive border +
   inset highlight (top) + drobny outer shadow + backdrop-filter (vibrancy poprzez
   palette-tinted card background). */
.brand-kit__tag {
  position: relative;
  right: clamp(-0.75rem, -0.8vw, -0.4rem);
  padding: 0.34rem 0.72rem;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  border-radius: 999px;
  /* Light card – glass nad jasnym tłem: highlight TOP biały (światło z góry),
     subtle inset BOTTOM ciemny (cień własny krawędzi), outer drop bardziej widoczny.
     Bez bordera. */
  background: color-mix(in srgb, currentColor 9%, transparent);
  border: none;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Dark card – glass nad ciemnym tłem: highlight TOP biały (silniejszy bo na czerni
   bardziej "świeci"), inset BOTTOM lekko biały (subtle reflection) */
.brand-kit__card--dark .brand-kit__tag {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Decor – accent orb (asymmetric blur z prawej-góry) — czysty akcent, bez brand mixu */
.brand-kit__decor--orb {
  position: absolute;
  top: -22%;
  right: -28%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-500), color-mix(in srgb, var(--accent-500) 0%, transparent) 70%);
  opacity: 0.85;
  z-index: 0;
  animation: brand-kit-orb 12s ease-in-out infinite;
}
.brand-kit__card--dark .brand-kit__decor--orb {
  opacity: 1;
  width: 86%;
  top: -24%;
  right: -30%;
  background: radial-gradient(
    circle at 32% 32%,
    var(--accent-500),
    color-mix(in srgb, var(--accent-500) 28%, transparent) 50%,
    color-mix(in srgb, var(--accent-500) 0%, transparent) 75%
  );
  filter: saturate(118%);
}
@keyframes brand-kit-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 4%) scale(1.06); }
}

/* Decor – pionowy accent stripe z lewej krawędzi (styl mockup--ad--accent z shine) */
.brand-kit__decor--strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(
    90deg,
    var(--accent-500, var(--p-500)) 0%,
    color-mix(in srgb, var(--accent-500, white) 70%, white) 50%,
    var(--accent-500, var(--p-500)) 100%
  );
  background-size: 220% 100%;
  z-index: 0;
  animation: adStripeShine 4.2s ease-in-out infinite;
}
.brand-kit__card:hover .brand-kit__decor--strip {
  animation-duration: 2.2s;
}
@media (prefers-reduced-motion: reduce) {
  .brand-kit__decor--strip { animation: none; }
}

/* Body – wordmark + tagline (wertykalnie centrowane) */
.brand-kit__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* flex-end zamiast center – wordmark + tagline + specimen kotwiczą się DOŁEM body.
     To realnie obniża wordmark (orb dominuje top karty, wordmark dominuje bottom).
     Odstęp do footer (palette+cta) zapewnia card grid gap 1.5rem. */
  justify-content: flex-end;
  gap: 0.6rem;
}
.brand-kit__wordmark {
  margin: 0;
  font-family: var(--mockup-font-sans);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: currentColor;
  text-wrap: balance;
}
.brand-kit__wordmark em {
  /* Ten sam sans co "Twoja" – zostaje tylko italic + accent color */
  font-family: inherit;
  font-style: italic;
  font-weight: 800;
  /* Light card: akcent subtelnie ztonowany 10% brand-500 (jasniejszy odcien brand niz 700) —
     zachowuje gold/koral character bez nadmiernego przyciemnienia */
  color: color-mix(in srgb, var(--accent-500) 90%, var(--p-500) 10%);
  letter-spacing: -0.04em;
}
.brand-kit__card--dark .brand-kit__wordmark em {
  /* Dark card: akcent rozjasniony 10% paper bo na czerni musi byc wyrazny */
  color: color-mix(in srgb, var(--accent-500) 90%, var(--p-50) 10%);
}
/* Mobile: karta przechodzi na 1 kolumnę (≤720px) – wordmark dynamicznie skaluje się
   z viewportem, analogicznie do .mockup__ad-h--mega w boksach kampanii. */
@media (max-width: 720px) {
  .brand-kit__wordmark { font-size: clamp(48px, 12vw, 84px); }
}
@media (max-width: 420px) {
  .brand-kit__wordmark { font-size: clamp(42px, 13vw, 64px); }
}
.brand-kit__tagline {
  margin: 0;
  font-family: var(--mockup-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
/* Mini-specimen typograficzny pod taglinem – brand book pokazuje typo + kolor + system.
   Bardzo subtle (opacity 0.33) – kolofon-style footnote, nie konkuruje wzrokiem
   z wordmarkiem ani taglinem. */
.brand-kit__specimen {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--mockup-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.33;
  font-variant-numeric: tabular-nums;
}

/* Foot – palette + sample CTA pill */
.brand-kit__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Palette – 5 swatches (mapping i ring identyczny jak .mockup__card-swatches) */
.brand-kit__palette {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.brand-kit__palette span {
  flex: 1;
  height: clamp(12px, 1.5vw, 17px);    /* zmniejszone vs poprzednie 16-22 */
  border-radius: 3px;
  /* Ring zapobiega zlewaniu się swatcha z tłem karty */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-900, var(--ink)) 12%, transparent);
  transition: transform 0.3s var(--ease);
}
.brand-kit__card--dark .brand-kit__palette span {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.brand-kit__card:hover .brand-kit__palette span { transform: scaleY(1.08); }
.brand-kit__palette span[data-sw="100"] { background: var(--p-200, rgba(26,24,20,0.12)); }
.brand-kit__palette span[data-sw="300"] { background: var(--p-400, rgba(26,24,20,0.28)); }
.brand-kit__palette span[data-sw="500"] { background: var(--accent-500, var(--p-500, var(--accent))); }
.brand-kit__palette span[data-sw="700"] { background: var(--p-700, var(--ink-soft)); }
.brand-kit__palette span[data-sw="900"] { background: var(--p-900, var(--ink)); }

/* CTA pill – styl jak mockup__ad-cta z kampanii (paper pill + ink arrow-circle).
   Klikalny visual feedback (cursor + active scale) ale BEZ navigation – sample only. */
.brand-kit__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  /* Lekkie wsunięcie w prawy padding karty – CTA optycznie bliżej krawędzi.
     position+right zamiast margin-right, żeby nie zaburzać szerokości palette w flex-row. */
  position: relative;
  right: clamp(-0.75rem, -0.8vw, -0.4rem);
  background: var(--p-50);
  color: var(--p-900);
  border-radius: 999px;
  font-family: var(--mockup-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px -1px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.brand-kit__card:hover .brand-kit__cta {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px -4px rgba(0, 0, 0, 0.22);
}
.brand-kit__cta:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.brand-kit__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.brand-kit__cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--p-900);
  color: var(--p-50);
  transition: transform 0.3s var(--ease);
}
.brand-kit__cta-arrow svg { width: 11px; height: 11px; display: block; }
.brand-kit__card:hover .brand-kit__cta-arrow { transform: translateX(2px); }

/* Email CTA action below cards */
.brand-kit__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 20px odstępu między ceną a buttonem (-5px vs. poprzednie 25px) */
  gap: 20px;
  /* +5px oddechu nad action (-5px vs. poprzednie +10px) */
  margin-top: calc(clamp(2rem, 3.5vw, 2.875rem) + 5px);
  text-align: center;
}
.brand-kit__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;     /* identycznie jak nav__cta "Napisz maila" */
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 16px -4px rgba(26, 24, 20, 0.22);    /* lekki drop shadow pod */
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.brand-kit__btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px -6px rgba(26, 24, 20, 0.32);
}
.brand-kit__btn:hover .arrow-circle { transform: rotate(-30deg); }
.brand-kit__btn .arrow-circle { background: var(--paper); color: var(--ink); }
.brand-kit__action-sub {
  margin: 0;
  font-size: 13.5px;     /* +1px vs poprzednie 12.5px */
  color: var(--ink-mid);
  max-width: 50ch;
}

@media (prefers-reduced-motion: reduce) {
  .brand-kit__decor--orb { animation: none; }
  .brand-kit__card:hover .brand-kit__palette span { transform: none; }
}




/* ═══════════════════════════════════════════════════════════════════
   v20 · Klikalny audyt chip + popup + download menu w workspace
   ═══════════════════════════════════════════════════════════════════ */

/* Klikalny chip – kontrast otwiera popup, szary jak na index2 */
.workspace__chip--clickable {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  font: inherit;
  cursor: pointer;
  background: rgba(26, 24, 20, 0.04);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.workspace__chip--clickable:hover {
  background: rgba(26, 24, 20, 0.08);
}
.workspace__chip--clickable[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.workspace__chip--clickable[aria-expanded="true"] strong { color: var(--paper); }
.workspace__chip-chev {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 0.15rem;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease);
}
.workspace__chip-chev svg { width: 11px; height: 11px; }
.workspace__chip--clickable[aria-expanded="true"] .workspace__chip-chev { opacity: 1; }

/* Audit popup – portal do body */
.audit-popup {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.05),
    0 24px 64px -16px rgba(26, 24, 20, 0.32);
  animation: auditPopupIn 0.3s var(--ease);
}
@keyframes auditPopupIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.audit-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.4);
  z-index: 99;
  animation: fadeIn 0.25s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.audit-popup__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: clamp(0.8rem, 1.4vw, 1.2rem);
}
.audit-popup__h {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.audit-popup__close {
  width: 32px; height: 32px;
  display: inline-grid;
  place-items: center;
  border: none;
  background: var(--bg-deep);
  border-radius: 50%;
  color: var(--ink-mid);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.audit-popup__close:hover { background: var(--ink); color: var(--paper); }
.audit-popup__close svg { width: 14px; height: 14px; }
.audit-popup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}
@media (min-width: 600px) {
  .audit-popup__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: cells przesuniete 10px nizej (wiekszy padding-top + mniejszy padding-bottom)
   + zmniejszenie cells zeby caly content sie miescil bez scroll */
@media (max-width: 720px) {
  .audit-popup { padding-top: 1.9rem; padding-bottom: 1.5rem; max-height: 92vh; }
  .audit-popup__head { margin-bottom: 1.5rem; }
  .audit-popup .contrast__cell { min-height: 130px; padding: 1rem 1.1rem 1.2rem; gap: 0.6rem; }
}
/* CONTRAST cells – popup styling (większe odstępy) */
.audit-popup .contrast__cell {
  padding: clamp(1.3rem, 2.2vw, 1.8rem) clamp(1.3rem, 2.2vw, 1.7rem) clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  min-height: clamp(170px, 18vw, 200px);
}
.audit-popup .contrast__h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.2rem;
}
.audit-popup .contrast__sample {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.audit-popup .contrast__sample-sm {
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  line-height: 1.5;
  opacity: 0.82;
  letter-spacing: -0.003em;
}
.audit-popup .contrast__score {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.audit-popup .contrast__score-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}

/* DOWNLOAD MENU w workspace tools */
.workspace__tools { position: relative; }
.export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.04),
    0 12px 32px -8px rgba(26, 24, 20, 0.18);
  padding: 0.4rem;
  z-index: 50;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.export-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.export-menu__head {
  padding: 0.55rem 0.75rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.export-menu__list { display: flex; flex-direction: column; }
.export-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s var(--ease);
}
.export-menu__item:hover { background: rgba(26, 24, 20, 0.05); }
.export-menu__item-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
}

/* Hide audit chip poza Skala/Brand mode */
[data-mode="harmony"] #audit-trigger-popup,
[data-mode="random"]  #audit-trigger-popup { display: none; }

/* MOBILE: tip pod chipami, do lewej (kontynuacja layout) */
@media (max-width: 720px) {
  .workspace__bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .workspace__bar-l { width: 100%; }
  .workspace__bar-r {
    justify-content: flex-start;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   === PIXEL FRAME — START ===
   Wariant V1 (mockup--ad--pixel) inspirowany Lightdash 80%:
   ramka z naroznikami + duza pikselowa cyfra "1080" + rozproszone
   bloczki w tle. Klasa modyfikator obok mockup--ad--classic; aby
   cofnac, usun klase mockup--ad--pixel z HTML, bloki ad-pixel-bg /
   ad-pixel-stage, oraz cala sekcje ponizej (do END).
   ═══════════════════════════════════════════════════════════════════ */

/* Tlo wariantu pixel — ciemniejsze (p-900 z radial p-700) by V1 byl ciemnym brandowym kontra do V2-jasnego i V3-sredniego */
.mockup.mockup--ad--classic.mockup--ad--pixel {
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--p-700, var(--accent)) 35%, transparent), transparent 60%),
    var(--p-900, #1A1814);
}

/* Body z h4/p kotwiczone POD ramka pikselowa (absolute, % od WYSOKOSCI boksu) */
.mockup--ad--pixel .mockup__ad-body {
  position: absolute;
  top: calc(49% - 5px);
  left: clamp(22px, 3.4vw, 34px);
  right: clamp(22px, 3.4vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0;
  gap: 0.85rem;
  z-index: 3;
}
.mockup--ad--pixel .mockup__ad-h {
  text-align: center;
  width: min-content;
  margin: 0 auto;
  text-wrap: initial;
  line-height: 0.88;
  /* Skalowanie per-box (container query) — zwarte na 3-col layout (~300px), wieksze na mobile 1-col */
  font-size: clamp(28px, 13cqw, 52px);
}
.mockup--ad--pixel .mockup__ad-p {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(13px, 4.4cqw, 17px);
}

/* Top — w V1 pixel tag zostal zamieniony na rozowy eyebrow (zamiana z V3) */
.mockup--ad--pixel .mockup__ad-top {
  z-index: 3;
}
.mockup--ad--pixel .mockup__ad-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--accent-500, var(--p-500)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-500, var(--p-500)) 32%, transparent);
  border-radius: 999px;
  font-family: var(--mockup-font-mono, var(--font-mono));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-500, var(--p-500));
  margin: 0;
}
.mockup--ad--pixel .mockup__ad-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-500, var(--p-500));
  display: inline-block;
  flex-shrink: 0;
}

/* === Rozproszone piksele w tle (~12 sztuk) === */
.mockup--ad--pixel .mockup__ad-pixel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.mockup--ad--pixel .mockup__ad-pixel-bg-cell {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 16px);
  height: var(--s, 16px);
  border-radius: 3px;
  background: color-mix(in srgb, var(--p-50, white) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--p-50, white) 100%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%) rotate(-1.5deg);
}
/* Zroznicowane odcienie — kolory z generatora */
.mockup--ad--pixel .mockup__ad-pixel-bg-cell:nth-child(3n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--p-50, white) 90%, transparent) 0%,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 75%, white) 100%);
}
.mockup--ad--pixel .mockup__ad-pixel-bg-cell:nth-child(5n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 70%, white) 0%,
      color-mix(in srgb, var(--accent-500, var(--p-500, var(--accent))) 80%, white) 100%);
}
.mockup--ad--pixel .mockup__ad-pixel-bg-cell:nth-child(7n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-500, var(--p-500, var(--accent))) 90%, white) 0%,
      var(--accent-600, var(--p-600, var(--accent))) 100%);
}
.mockup--ad--pixel .mockup__ad-pixel-bg-cell:nth-child(2n) { transform: translate(-50%, -50%) rotate(2deg); }
.mockup--ad--pixel .mockup__ad-pixel-bg-cell:nth-child(4n) { transform: translate(-50%, -50%) rotate(-3deg); }

/* === Stage z ramka (4 narozniki) + duzy pikselowy "108" === */
.mockup--ad--pixel .mockup__ad-pixel-stage {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  transform-origin: 50% 50%;
  width: clamp(180px, 76%, 340px);
  aspect-ratio: 17 / 10;
  z-index: 2;
}
/* Cienka pomaranczowa ramka laczaca narozniki */
.mockup--ad--pixel .mockup__ad-pixel-stage::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 70%, transparent);
  border-radius: 0;
  pointer-events: none;
}
/* Narozniki — kwadraciki w 4 rogach */
.mockup--ad--pixel .mockup__ad-pixel-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 75%, white);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--p-900, var(--ink)) 35%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
.mockup--ad--pixel .mockup__ad-pixel-corner--tl { top: 0; left: 0; }
.mockup--ad--pixel .mockup__ad-pixel-corner--tr { top: 0; right: 0; }
.mockup--ad--pixel .mockup__ad-pixel-corner--bl { bottom: 0; left: 0; }
.mockup--ad--pixel .mockup__ad-pixel-corner--br { bottom: 0; right: 0; }

/* === Pikselowy "108" — siatka 17 x 9 (gruby font); kontr-rotate by cyfry zostaly proste === */
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%) rotate(2.5deg);
  width: 82%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: clamp(1px, 0.5cqw, 2px);
  pointer-events: none;
}
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num span {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
}
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num span.is-on {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--p-50, white) 95%, transparent) 0%,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 60%, white) 100%);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--p-900, var(--ink)) 22%, transparent),
    0 1px 1px rgba(0, 0, 0, 0.18);
}
/* Wariacja kolorystyczna pikseli — co kilka inny odcien (klimat z obrazka) */
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num span.is-on:nth-child(7n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 65%, white) 0%,
      color-mix(in srgb, var(--accent-500, var(--p-500, var(--accent))) 70%, white) 100%);
}
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num span.is-on:nth-child(11n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-500, var(--p-500, var(--accent))) 80%, white) 0%,
      var(--accent-700, var(--p-700, var(--ink-soft))) 100%);
}
.mockup--ad--pixel .mockup__ad-dots.mockup__ad-pixel-num span.is-on:nth-child(17n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--p-50, white) 88%, transparent) 0%,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 80%, white) 100%);
}

/* Mobile — IDENTYCZNE proporcje stage i body co desktop (skalowanie, nie repozycjonowanie) */
@media (max-width: 720px) {
  .mockup--ad--pixel .mockup__ad-pixel-corner { width: 11px; height: 11px; }
  .mockup--ad--pixel .mockup__ad-h {
    line-height: 0.95;
    font-size: clamp(38px, 8.6vw, 54px);
  }
  .mockup--ad--pixel .mockup__ad-p {
    font-size: clamp(15px, 3.8vw, 17px);
    max-width: 26ch;
  }
}

/* === V1 PIXEL — CTA solid-accent (rozowy) — wymaga wyzszego specifity niz .mockup--ad--classic .mockup__ad-cta === */
.mockup--ad--classic.mockup--ad--pixel .mockup__ad-cta.mockup__ad-cta--solid-accent {
  background: var(--accent-500, var(--p-500));
  color: var(--accent-fg, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px -2px color-mix(in srgb, var(--accent-500, black) 40%, transparent);
}
.mockup--ad--classic.mockup--ad--pixel .mockup__ad-cta.mockup__ad-cta--solid-accent .mockup__ad-cta-arrow {
  background: rgba(0, 0, 0, 0.18);
  color: var(--accent-fg, white);
}
.mockup--ad--classic.mockup--ad--pixel:hover .mockup__ad-cta.mockup__ad-cta--solid-accent {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -4px color-mix(in srgb, var(--accent-500, black) 50%, transparent);
}

/* === V3 ACCENT — CTA white pill (przeniesione z V1 classic; aktywuje sie gdy CTA nie ma --solid-accent) === */
.mockup--ad--accent .mockup__ad-cta:not(.mockup__ad-cta--solid-accent) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.55rem 0.55rem 1.05rem;
  background: var(--p-50, white);
  color: var(--p-900, var(--ink));
  border-radius: 999px;
  font-family: var(--mockup-font-sans, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px -1px rgba(0, 0, 0, 0.18);
  align-self: flex-start;
  margin: 0;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mockup--ad--accent .mockup__ad-cta:not(.mockup__ad-cta--solid-accent) .mockup__ad-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--p-900, var(--ink));
  color: var(--p-50, white);
  transition: transform 0.3s var(--ease);
}
.mockup--ad--accent .mockup__ad-cta:not(.mockup__ad-cta--solid-accent) .mockup__ad-cta-arrow svg { width: 12px; height: 12px; }
.mockup--ad--accent:hover .mockup__ad-cta:not(.mockup__ad-cta--solid-accent) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px -4px rgba(0, 0, 0, 0.22);
}
.mockup--ad--accent:hover .mockup__ad-cta:not(.mockup__ad-cta--solid-accent) .mockup__ad-cta-arrow {
  transform: translateX(2px);
}

/* === V3 PIXEL CLUSTER — pikselowy klaster schodkowy w prawym gornym (zastepuje kropki) === */
.mockup--ad--accent .mockup__ad-dots--pixel-cluster {
  width: clamp(75px, 22cqw, 105px);
  right: clamp(1.4rem, 2.6vw, 2rem);
  gap: clamp(2px, 0.5cqw, 3px);
}
.mockup--ad--accent .mockup__ad-dots--pixel-cluster span {
  width: 100%;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
}
.mockup--ad--accent .mockup__ad-dots--pixel-cluster span.is-on {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 70%, white) 0%,
      var(--accent-500, var(--p-500, var(--accent))) 100%);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--p-900, var(--ink)) 30%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.22);
}
.mockup--ad--accent .mockup__ad-dots--pixel-cluster span.is-on:nth-child(3n) {
  background:
    linear-gradient(135deg,
      var(--accent-500, var(--p-500, var(--accent))) 0%,
      var(--accent-700, var(--p-700, var(--ink-soft))) 100%);
}
.mockup--ad--accent .mockup__ad-dots--pixel-cluster span.is-on:nth-child(7n) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 85%, white) 0%,
      color-mix(in srgb, var(--accent-300, var(--p-300, var(--accent))) 60%, white) 100%);
}

/* === PIXEL FRAME — END === */

/* ═══════════════════════════════════════════════════════════════════
   NAV BACK BUTTON · UNIFIED · 2026-05
   Sand bg (#EDE4D1 / hover #E0D5BD), gap 0.25rem, strzałka jako znak ←
   bez wewnętrznego kółka. Mobile: 36×36 circle z tym samym tłem,
   ← znak (font 14px), bez SVG mask. Override dwóch wcześniejszych kopii.
   ═══════════════════════════════════════════════════════════════════ */
.nav__back {
  gap: 0.25rem;
  background: #EDE4D1;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__back:hover { color: var(--ink); background: #E0D5BD; }
.nav__back-arrow {
  width: auto; height: auto;
  background: transparent;
}
@media (max-width: 720px) {
  .nav__back { background: rgba(26, 24, 20, 0.04); }
  .nav__back:hover { background: rgba(26, 24, 20, 0.08); }
  .nav__back-arrow { font-size: 0; }
  .nav__back-arrow::after { display: block; }
}

/* Nav CTA → icon-only on mobile (1:1 z podstrony.css, dopisek surgical) */
@media (max-width: 720px) {
  .nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    gap: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .nav__cta > * { display: none; }
  .nav__cta::after {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    background: #FBF8F2;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 2 15 22 11 13 2 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 2 15 22 11 13 2 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Nav pill + back circle 1:1 with audyt on mobile */
@media (max-width: 720px) {
  .nav {
    position: sticky;
    top: 0.85rem;
    z-index: 100;
    padding: 0 1.25rem;
    pointer-events: none;
  }
  .nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem 0.55rem 1.1rem;
    background: rgba(251, 248, 242, 0.78);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(26, 24, 20, 0.08);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(26, 24, 20, 0.06);
    pointer-events: auto;
  }
  .nav__back {
    justify-self: start;
    padding: 0;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    background: rgba(26, 24, 20, 0.04);
    border-radius: 50%;
  }
  .nav__back span:not(.nav__back-arrow) { display: none; }
  .nav__back-arrow {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 0;
    line-height: 1;
    display: inline-grid;
    place-items: center;
  }
  .nav__back-arrow::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: #1A1814;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3m4-4L3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3m4-4L3 8l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .brand { justify-self: center; padding: 0.25rem; display: inline-flex; align-items: center; }
  .nav__cta { justify-self: end; }
}

/* Lock back button 1:1 with audyt on mobile (defeats palety.css's cream bg + ← text) */
@media (max-width: 720px) {
  .nav__back { background: rgba(26, 24, 20, 0.04) !important; }
  .nav__back-arrow { font-size: 0 !important; background: transparent !important; }
  .nav__back-arrow::after { background: #1A1814 !important; }
}

/* Final lock: back arrow 1:1 with audyt — !important nuke */
@media (max-width: 720px) {
  .nav__back { background: rgba(26, 24, 20, 0.04) !important; }
  .nav__back-arrow { font-size: 0 !important; background: transparent !important; }
  .nav__back-arrow::after {
    display: block !important;
    background: #1A1814 !important;
  }
}


/* MATCH AUDYT EXACTLY — cream bg + ← char (mask off). Audyt: podstrony.css L4352 */
@media (max-width: 720px) {
  .nav__back { background: #EDE4D1 !important; }
  .nav__back:hover { background: #E0D5BD !important; }
  .nav__back-arrow { font-size: 14px !important; background: transparent !important; }
  .nav__back-arrow::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   NAV BACK · MOBILE PARITY · 2026-05-23
   Desktop bez zmian. Mobile: ikona ← w okręgu 40×40 (parity z
   CTA 40×40), glif 18px, padding nav__inner symetryczny 0.7rem
   L/R — lewa krawędź ikony ma ten sam odstęp od lewej krawędzi
   pigułki, co prawa krawędź ikony → od prawej.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .nav__inner {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
  .nav.is-scrolled .nav__inner {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  .nav__back {
    width: 40px !important;
    height: 40px !important;
  }
  .nav__back-arrow { font-size: 18px !important; }
}

/* highlight – identyczny jak na index.html (gradient + shadow + bold) */
.highlight {
  padding: 0.05em 0.3em;
  border-radius: 0.25em;
  background: linear-gradient(135deg, #FBF6E8 0%, #F4ECD7 55%, #EEE4C8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 0 rgba(180, 145, 80, 0.16);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--ink);
  font-weight: 600;
}

/* hero__lead-break: na desktop łamie linię (block), na mobile zostaje inline */
@media (min-width: 720px) {
  .hero__lead-break { display: block; }
}