/* Nowy wygląd strony (docs/DESIGN-botversity-apple.md, decyzje 2026-10-14): Apple + fonty, kolor
   akcji, ciemne powierzchnie i pasek starej strony. Tokeny z przedrostkiem --ui-, klasy z u-, żeby
   nie mieszały się ze stylami stron w starym wyglądzie (site.css), które przerabiamy po kolei. */
:root {
  --ui-accent: #2563EB;          /* przyciski i linki na bieli, 5,2:1 z białym napisem (D2) */
  --ui-accent-hover: #1D4ED8;
  --ui-accent-on-dark: #3B82F6;  /* linki i obrysy na #080B12, 5,4:1 */
  --ui-ink: #1d1d1f;
  --ui-ink-80: #333336;
  --ui-ink-48: #6e6e73;
  --ui-on-dark: #ffffff;
  --ui-on-dark-muted: #c7c9d1;
  --ui-on-dark-note: #a1a7b6;
  --ui-hairline: #e0e0e0;
  --ui-hairline-2: #d2d2d7;
  --ui-canvas: #ffffff;
  --ui-parchment: #f5f5f7;
  --ui-dark: #080B12;            /* tło starej strony: wszystkie ciemne powierzchnie */
  --ui-nav: rgba(8, 11, 18, .97); /* pasek starej strony (D1); bez rozmycia tła (backdrop-filter obciążał laptopy przy przewijaniu), więc prawie nieprzezroczysty */
  --ui-nav-line: rgba(148, 163, 184, .14);
  --ui-shadow-product: drop-shadow(3px 5px 30px rgba(0, 0, 0, .22));
  --ui-display: 'Space Grotesk', system-ui, sans-serif;
  --ui-text: 'Inter', system-ui, sans-serif;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-wrap: 980px;
}

body.ui { background: var(--ui-canvas); }
.u-page { position: relative; background: var(--ui-canvas); color: var(--ui-ink); font: 400 17px/1.5 var(--ui-text); -webkit-font-smoothing: antialiased; }
:where(.u-page) main { padding-top: var(--hdr); }
:where(.u-page) :where(h1, h2, h3) { font-family: var(--ui-display); font-weight: 600; margin: 0; text-wrap: balance; }
:where(.u-page) p { margin: 0; text-wrap: pretty; }
:where(.u-page) :where(img, video) { display: block; max-width: 100%; }
.u-page :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 4px; }
.u-page .u-dark :focus-visible { outline-color: var(--ui-accent-on-dark); }

/* reguły bazowe w :where() mają zerową specyficzność, żeby klasy niżej (u-sub, u-note) i style
   komponentów zawsze wygrywały */
/* sekcje: kafle na całą szerokość, zmiana tła jest separatorem */
.u-tile { position: relative; overflow: hidden; text-align: center; padding: 72px 22px; scroll-margin-top: var(--hdr); }
.u-light { background: var(--ui-canvas); color: var(--ui-ink); }
.u-parch { background: var(--ui-parchment); color: var(--ui-ink); }
.u-dark { background: var(--ui-dark); color: var(--ui-on-dark); }
.u-wrap { max-width: var(--ui-wrap); margin: 0 auto; }

.u-kicker { font-family: var(--ui-display); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: .01em; }
.u-h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -.02em; }
.u-h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.015em; }
.u-sub { font-size: clamp(18px, 2vw, 24px); line-height: 1.4; margin-top: 10px; color: var(--ui-ink-80); }
.u-dark .u-sub { color: var(--ui-on-dark-muted); }
.u-note { font-size: 14px; line-height: 1.43; color: var(--ui-ink-48); margin-top: 12px; font-variant-numeric: tabular-nums; }
.u-dark .u-note { color: var(--ui-on-dark-note); }

/* przyciski: pigułki; jeden kolor akcji */
.u-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 24px; }
.u-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 999px; font-size: 17px; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ui-ease), background-color .2s; }
.u-pill:active { transform: scale(.95); }
.u-pill-primary { background: var(--ui-accent); color: #fff; }
.u-pill-primary:hover { background: var(--ui-accent-hover); }
.u-pill-ghost { color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.u-dark .u-pill-ghost { color: var(--ui-accent-on-dark); box-shadow: inset 0 0 0 1px var(--ui-accent-on-dark); }
.u-link { color: var(--ui-accent); text-decoration: none; }
.u-link:hover { text-decoration: underline; }
.u-dark .u-link { color: var(--ui-accent-on-dark); }
.u-link::after { content: '\00a0›'; }

/* produkt na powierzchni: jedyny cień w systemie */
.u-product { filter: var(--ui-shadow-product); height: auto; }

/* wejście kafli przy przewijaniu: tylko gdy przeglądarka umie animację powiązaną z widokiem;
   bez niej (i przy ograniczonym ruchu) treść jest po prostu widoczna */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-rise { animation: u-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes u-rise { from { opacity: .001; transform: translateY(48px) scale(.98); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .u-pill { transition: none; }
}
/* telefon (2026-10-21): dwa przyciski zawsze w jednym rzędzie, jak w kaflu Brain; jeden pod drugim w różnych
   szerokościach wyglądały na rozjechane. Mniejszy tekst i padding, żeby „Zapytaj o wycenę” + „Zobacz, co potrafi”
   zmieściły się od 360 px; wysokość 44 px zostaje (cel dotyku). Zawijanie zostaje jako zabezpieczenie dla
   dłuższych napisów: lepiej drugi rząd niż przycisk poza ekranem. */
@media (max-width: 640px) {
  .u-tile { padding: 56px 20px; }
  .u-pills { gap: 8px; }
  .u-pill { font-size: 15px; padding: 11px 16px; }
}
@media (max-width: 374px) {
  .u-pill { font-size: 14px; padding: 11px 12px; }
}
@media (max-width: 419px) {
  .u-h1 { font-size: 38px; }
}

/* kropki pod galerią przesuwaną palcem (data-gal, site.js → initGallery); galerie są zwykle tylko na telefonie,
   więc kropki też; u-dots-all = galeria także na komputerze (przykłady zastosowań), kropki zawsze. Przycisk 28px
   na kropkę 8px; przesuwa się palcem albo kliknięciem w kropkę lub wystającą kartę, kropki pokazują, gdzie jesteś */
.u-dots { display: none; justify-content: center; gap: 2px; margin-top: 16px; }
.u-dots.u-dots-all { display: flex; }
.u-dots button { appearance: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.u-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-hairline-2); transition: background-color .2s, width .2s var(--ui-ease); }
/* aktywna kropka; w galerii, która sama się przełącza, --p (0–1) wypełnia ją jak pasek postępu */
.u-dots button[aria-current]::before { background: linear-gradient(90deg, var(--ui-ink-48) calc(var(--p, 1) * 100%), var(--ui-hairline-2) 0); width: 20px; border-radius: 4px; }
.u-dark .u-dots button::before { background: rgba(255, 255, 255, .25); }
.u-dark .u-dots button[aria-current]::before { background: linear-gradient(90deg, rgba(255, 255, 255, .8) calc(var(--p, 1) * 100%), rgba(255, 255, 255, .25) 0); }
@media (max-width: 640px) {
  .u-dots { display: flex; }
}