/* domaai-2026 produkt: system wizualny strony produktu (kierunek C „Precyzja produktu”, 03.10.2026).
   Strona główna; podstrony przechodzą na ten system etapami. */
/* ==========================================================================
   DomaAI - prototyp C „Precyzja produktu”
   Odczyt: korporacyjna strona produktu polskiego asystenta AI dla osób i małych
   firm, język precyzji Linear / Raycast w jasnym motywie, natywny CSS + Geist.
   Pokrętła: DESIGN_VARIANCE 6, MOTION_INTENSITY 5, VISUAL_DENSITY 4.
   System:
   - Kroje: Geist (nagłówki 600, tekst 400/500), Geist Mono (dane, stawki, daty).
   - Jeden akcent: fiolet marki #8b34b5 (ciemny #c07ae0). Neutralne: chłodny grafit.
   - Promienie (jedna reguła): sceny i duże panele 20px, karty 14px,
     elementy wewnątrz kart 10px / 8px, wszystko interaktywne = pigułka.
   - Cienie barwione grafitem, jedno źródło światła z góry.
   - Ciemny motyw: html[data-theme="dark"] (konwencja strony: brak atrybutu = jasny).
   - Jedna świadoma ciemna scena: sekcja „Dwa tryby”.
   - Ikony: Phosphor (regular) jako sprite w HTML.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/css/Geist-latin-pl.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/css/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #fafafb;
  --bg-2: #f3f3f6;
  --surface: #fefefe;
  --surface-2: #f6f6f8;
  --fg: #0f1013;
  --fg-2: #464952;
  --fg-3: #686b74;
  --line: rgba(16, 17, 24, .085);
  --line-2: rgba(16, 17, 24, .14);
  --accent: #8b34b5;
  --accent-ink: #7a2aa2;
  --accent-soft: #f4ecf8;
  --accent-line: rgba(139, 52, 181, .28);
  --btn-bg: #111216;
  --btn-fg: #fafafb;
  --btn-hover: #24252b;
  --on-accent: #ffffff;

  --sh-1: 0 1px 2px rgba(22, 20, 34, .06), 0 1px 1px rgba(22, 20, 34, .04);
  --sh-2: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px -12px rgba(30, 22, 52, .22), 0 3px 8px -2px rgba(30, 22, 52, .07);
  --sh-win: 0 40px 90px -30px rgba(32, 22, 56, .42), 0 14px 30px -14px rgba(32, 22, 56, .26), 0 0 0 1px rgba(16, 17, 24, .07);

  --r-stage: 20px;
  --r-card: 14px;
  --r-in: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --wrap: 1200px;
  --gut: 24px;
  --nav-h: 64px;
  --sec: clamp(88px, 9vw, 128px);

  --z-nav: 40;
  --z-sheet: 39;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0b0b0e;
  --bg-2: #101015;
  --surface: #141419;
  --surface-2: #1a1a20;
  --fg: #ededf1;
  --fg-2: #a9abb4;
  --fg-3: #8b8d96;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --accent: #c07ae0;
  --accent-ink: #d29be9;
  --accent-soft: rgba(192, 122, 224, .12);
  --accent-line: rgba(192, 122, 224, .38);
  --btn-bg: #ededf1;
  --btn-fg: #0b0b0e;
  --btn-hover: #ffffff;
  --on-accent: #1a0a24;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px -14px rgba(0, 0, 0, .7);
  --sh-win: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
  color-scheme: dark;
}

/* ---------- baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--accent-soft); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; fill: currentColor; }
.ic-10 { width: 10px; height: 10px; }
.ic-12 { width: 12px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.mono { font-family: var(--mono); font-feature-settings: "zero" 0; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 10px 16px; border-radius: var(--r-pill); font-weight: 500; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- typografia ---------- */
.display {
  font-weight: 600;
  font-size: clamp(2.5rem, 1.25rem + 3.9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.h2 {
  font-weight: 600;
  font-size: clamp(1.95rem, 1.3rem + 1.9vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.034em;
  text-wrap: balance;
}
.h3 { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.016em; }
.dim { color: var(--fg-3); }
.lead {
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.lead a, .qa-a a, .biz-list a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.lead a:hover, .qa-a a:hover, .biz-list a:hover { text-decoration-color: currentColor; }
.kicker {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--accent-ink); margin-bottom: 18px;
}

/* ---------- przyciski ---------- */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 20px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .25s var(--ease-out), background-color .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary {
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(16, 17, 24, .25), 0 6px 16px -8px rgba(16, 17, 24, .5);
}
.btn-primary:hover { background: var(--btn-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 2px 4px rgba(16, 17, 24, .22), 0 10px 22px -10px rgba(16, 17, 24, .55); }
html[data-theme="dark"] .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 18px -8px rgba(0, 0, 0, .8); }
.btn-ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--fg-3); }
.btn-sm { --h: 36px; padding: 0 16px; font-size: 14px; }
.btn-xs { --h: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { --h: 48px; padding: 0 8px 0 22px; font-size: 15.5px; }
.btn-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  transition: transform .35s var(--ease-out);
}
html[data-theme="dark"] .btn-ic { background: rgba(0, 0, 0, .08); }
.btn:hover .btn-ic { transform: translateX(2px); }
.btn-primary:not(.btn-lg) .btn-ic { width: 26px; height: 26px; margin-right: -10px; }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 15px; color: var(--fg);
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .25s var(--ease-out);
}
.link:hover { border-color: var(--fg); gap: 9px; }
.link .ic { color: var(--fg-3); }

.store { display: inline-flex; border-radius: 10px; transition: transform .25s var(--ease-out), opacity .2s; }
.store:hover { opacity: .86; }
.store:active { transform: translateY(1px); }
.store img { height: 48px; width: auto; }
.store-dark { display: none; }
html[data-theme="dark"] .store-light { display: none; }
html[data-theme="dark"] .store-dark { display: block; }

/* ---------- nawigacja ---------- */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; }
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-row { height: 100%; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -.025em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: 14.5px; color: var(--fg-2); font-weight: 450;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-link:hover, .dd.open .dd-btn { color: var(--fg); background: var(--bg-2); }
.dd-btn .ic { transition: transform .25s var(--ease-out); color: var(--fg-3); }
.dd.open .dd-btn .ic { transform: rotate(180deg); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-login { font-size: 14.5px; color: var(--fg-2); padding: 0 10px; height: 34px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.nav-login:hover { color: var(--fg); }
.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
  color: var(--fg-2); transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.icon-btn .ic { width: 18px; height: 18px; }
.i-sun, html[data-theme="dark"] .i-moon { display: none; }
html[data-theme="dark"] .i-sun { display: block; }
.burger { display: none; }
.burger .i-x, .nav-open .burger .i-menu { display: none; }
.nav-open .burger .i-x { display: block; }

.dd { position: relative; }
.dd-panel {
  position: absolute; top: calc(100% + 10px); left: -12px;
  width: 600px; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 24px 60px -20px rgba(30, 22, 52, .3), 0 4px 12px -4px rgba(30, 22, 52, .08);
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .18s var(--ease), transform .25s var(--ease-out), visibility 0s .25s;
}
html[data-theme="dark"] .dd-panel { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
.dd.open .dd-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.dd-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-in); transition: background-color .15s; }
.dd-item:hover, .dd-item:focus-visible { background: var(--bg-2); }
.dd-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); flex: none; }
.dd-ic .ic { width: 17px; height: 17px; }
.dd-item b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; }
.dd-item small { display: block; font-size: 13px; color: var(--fg-3); line-height: 1.4; margin-top: 1px; }
.tag { font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 7px; border-radius: var(--r-pill); letter-spacing: 0; }

.sheet { display: none; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 24px; }
.hero-copy { max-width: 820px; }
.news {
  display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 12px 0 4px; margin-bottom: 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--sh-1);
  font-size: 13.5px; font-weight: 500; color: var(--fg);
  transition: border-color .2s var(--ease);
}
.news:hover { border-color: var(--accent-line); }
.news .ic { color: var(--fg-3); transition: transform .25s var(--ease-out); }
.news:hover .ic { transform: translateX(2px); }
.news-tag { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--mono); font-size: 11.5px; }
.hero .display { max-width: 15.5em; }
.hero .lead { margin-top: 22px; max-width: 34em; }
/* 09.10.2026: agent Liquid Glass pod nagłówkiem. Orb w treści (nie w warstwie dekoracji),
   obok dymek, w którym agent pisze krótkie zdania; przy nowym zdaniu podskakuje (js/orby-zywe.js). */
.hero-agent { display: flex; align-items: center; gap: 14px; margin-top: 26px; height: 72px; }
.hero-agent .orb.hero-orb { position: relative; left: auto; top: auto; transform: none; flex: none; --s: 64px; width: 64px; height: 64px; font-size: 6.4px; }
.hero-dymek {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--sh-1); font-size: 15px; color: var(--fg); white-space: nowrap;
  transform-origin: 0 100%; transition: opacity .35s var(--ease), transform .45s var(--ease-out);
}
.hero-dymek.znika { opacity: 0; transform: translateY(4px) scale(.96); }
.hero-kursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; border-radius: 1px; background: var(--accent); animation: hero-kursor 1s steps(1) infinite; }
@keyframes hero-kursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-kursor { animation: none; opacity: 0; } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

/* scena z oknem przeglądarki i telefonem */
.stage {
  position: relative; isolation: isolate;
  margin-top: 56px; padding: 48px 48px 56px;
  border-radius: var(--r-stage);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.stage-art, .band-art, .final-art, .c-img::before {
  position: absolute; inset: 0; z-index: -1;
  background: #d7d4df url("/images/produkt/stage-jasny.webp") center / cover no-repeat;
}
html[data-theme="dark"] .stage-art, html[data-theme="dark"] .final-art { background-image: url("/images/produkt/stage-ciemny.webp"); background-color: #15141a; }

.win {
  position: relative;
  width: min(830px, 71%);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-win);
  overflow: hidden;
}
.win-shot { width: 100%; height: auto; }
.shot-dark { display: none; }
html[data-theme="dark"] .shot-light { display: none; }
html[data-theme="dark"] .shot-dark { display: block; }
.win-bar {
  height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.win-dots.ghost { visibility: hidden; }
.win-url {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; min-width: 260px; justify-content: center;
  padding: 0 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; color: var(--fg-3);
}
.mode-pill {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; font-weight: 500;
}
.mode-pill b { padding: 4px 12px; border-radius: var(--r-pill); color: var(--fg-3); font-weight: 500; }
.mode-pill b.on { background: var(--surface); color: var(--fg); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.mode-pill.is-pc b.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.m-user { align-self: flex-end; max-width: 82%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.m-user p { background: var(--fg); color: var(--bg); padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 13px; line-height: 1.5; }
.atts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.atts span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--fg-2); }
.atts .ic { color: var(--fg-3); }
.steps { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-3); }
.steps span { display: inline-flex; align-items: center; gap: 5px; }
.steps .ic { color: var(--accent); }

.file { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.ftype {
  display: grid; place-items: center; width: 38px; height: 44px; border-radius: 7px; flex: none;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2);
  position: relative;
}
.ftype::before { content: ""; position: absolute; left: 7px; right: 7px; top: 8px; height: 2px; border-radius: 2px; background: currentColor; opacity: .25; }
.ftype.x { color: #23774a; }
.ftype.w { color: #2b5bb5; }
.ftype.p { color: #b23a3a; }
html[data-theme="dark"] .ftype.x { color: #6fcf97; }
html[data-theme="dark"] .ftype.w { color: #8fb1f0; }
html[data-theme="dark"] .ftype.p { color: #f08f8f; }
.file-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; flex: 1; }
.file-t b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-t small { font-size: 11.5px; color: var(--fg-3); }
.mini-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--fg); }
.mini-btn.solid { background: var(--fg); color: var(--bg); border-color: transparent; }

.phone {
  position: absolute; right: 64px; top: 34px; width: 272px;
  box-shadow: 0 30px 40px -4px rgba(32, 22, 56, .35), 0 6px 10px -4px rgba(32, 22, 56, .18);
}
html[data-theme="dark"] .phone { box-shadow: 0 30px 40px -4px rgba(0, 0, 0, .6); }

/* wejście hero (przy ładowaniu) */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .22s; }
  .stage { animation: rise 1.1s .25s var(--ease-out) both; }
  .phone { animation: phoneIn 1.2s .55s var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes phoneIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---------- pas dostawców ---------- */
.proof { padding: 40px 0 8px; }
.proof-row { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; align-items: center; gap: 40px; }
.proof-cap { font-size: 14.5px; line-height: 1.5; color: var(--fg-3); }
.proof-cap b { color: var(--fg); font-weight: 500; }
.logos { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.logos li { display: flex; align-items: center; justify-content: center; gap: 9px; height: 68px; color: var(--fg-2); font-weight: 600; font-size: 16px; letter-spacing: -.025em; }
.logos li + li { border-left: 1px solid var(--line); }
.logos img { opacity: .82; }
html[data-theme="dark"] .logos img, html[data-theme="dark"] .model-prov img, html[data-theme="dark"] .app img.inv { filter: invert(1); }

/* ---------- sekcje ---------- */
.sec { padding-block: var(--sec); }
.sec-tint { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head .lead { margin-top: 18px; }

/* ---------- dwa tryby: ciemna scena ---------- */
.band {
  --bg: #0d0d11; --bg-2: #15151b; --surface: #17171d; --surface-2: #1d1d24;
  --fg: #f0f0f3; --fg-2: #b2b4bd; --fg-3: #9294a0;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --accent: #c07ae0; --accent-ink: #d29be9; --accent-soft: rgba(192, 122, 224, .14); --accent-line: rgba(192, 122, 224, .4);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --on-accent: #1a0a24;
  position: relative; isolation: isolate;
  margin-top: clamp(64px, 7vw, 96px);
  padding-block: var(--sec);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.band .band-art { background: #0d0d11 url("/images/produkt/scena-grafit.webp") center / cover no-repeat; opacity: .9; }
.band-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 17, .55), rgba(13, 13, 17, 0) 35%, rgba(13, 13, 17, 0) 70%, rgba(13, 13, 17, .6)); }
html[data-theme="dark"] .band { --bg: #070709; border-block: 1px solid rgba(255, 255, 255, .06); }
html[data-theme="dark"] .band .band-art { opacity: .75; }
.band-head { max-width: 720px; }
.band-head .lead { margin-top: 18px; }

.seg {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  margin-top: 40px; padding: 4px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.seg-btn {
  position: relative; z-index: 1; height: 40px; min-width: 136px; padding: 0 22px;
  border-radius: var(--r-pill); font-weight: 500; font-size: 15px; color: var(--fg-2);
  transition: color .25s var(--ease);
}
.seg-btn:hover { color: var(--fg); }
.seg-btn[aria-selected="true"] { color: #0d0d11; }
.seg-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: var(--r-pill); background: #f0f0f3;
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px -6px rgba(0, 0, 0, .6);
  transition: transform .45s var(--ease-out), background-color .3s var(--ease);
}
.seg.is-pc .seg-thumb { transform: translateX(100%); background: var(--accent); }
.seg.is-pc .seg-btn[aria-selected="true"] { color: #1a0a24; }

.pane > *, .auto > *, .faq > *, .bento > *, .models > *, .biz > * { min-width: 0; }
.pane { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; margin-top: 48px; }
.pane[hidden] { display: none; }
.pane-copy .h3 { font-size: 1.5rem; letter-spacing: -.025em; }
.ticks { margin-top: 22px; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--fg-2); line-height: 1.5; }
.ticks .ic { margin-top: 4px; color: var(--accent); }
.kv { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.kv div { padding-top: 14px; }
.kv dt { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.kv dd { font-weight: 500; margin-top: 2px; }

.ui {
  position: relative;
  border-radius: var(--r-card);
  background: rgba(23, 23, 29, .88);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 40px 80px -30px rgba(0, 0, 0, .8);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 13px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ui-top { display: flex; align-items: center; justify-content: space-between; }
.ui-time { font-size: 12px; color: var(--fg-3); }
.ui .m-user { max-width: 86%; }
.ui .m-user p { background: #f0f0f3; color: #0d0d11; }
.mail { border: 1px solid var(--line-2); border-radius: var(--r-in); background: var(--surface-2); padding: 12px 14px; display: grid; gap: 6px; }
.mail-row { display: grid; grid-template-columns: 52px 1fr; font-size: 12.5px; }
.mail-row span { color: var(--fg-3); }
.mail-row b { font-weight: 500; }
.mail p { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 12.5px; line-height: 1.55; }
.mail-act { display: flex; gap: 6px; margin-top: 6px; }
.mail-act .mini-btn.solid { background: #f0f0f3; color: #0d0d11; }

.todo-h { font-size: 11.5px; color: var(--fg-3); margin-bottom: -4px; }
.todo { display: grid; gap: 2px; }
.todo li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--fg-2); font-size: 13px; transition: background-color .3s, color .3s; }
.pm { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); }
.pm .ic { position: absolute; opacity: 0; transition: opacity .25s; }
.todo li.done { color: var(--fg); }
.todo li.done .pm { background: var(--accent); border-color: transparent; color: #1a0a24; }
.todo li.done .ok { opacity: 1; }
.todo li.now { background: rgba(255, 255, 255, .05); color: var(--fg); }
.todo li.now .spin { opacity: 1; color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.site { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-in); border: 1px solid var(--line-2); background: var(--surface-2); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.site-fav { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: #efe6d8; color: #4a3423; font-weight: 600; font-size: 16px; flex: none; }
.site-state { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.ui-pc:not(.is-done) .site { opacity: .35; transform: translateY(4px); }
.ui-pc .file-t small { font-size: 11.5px; }

/* ---------- bento ---------- */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  grid-template-areas:
    "ma ma ma ma ma ma ma im im im im im"
    "dc dc dc dc wb wb wb im im im im im"
    "cl cl cl cl cl cn cn cn cn cn cn cn";
}
.cell {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  padding: 28px;
  display: flex; flex-direction: column; gap: 22px;
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.cell:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.cell-copy .h3 { margin-bottom: 6px; }
.cell-copy p { color: var(--fg-2); font-size: 15px; line-height: 1.55; max-width: 44ch; }
.cell-copy .link { margin-top: 16px; font-size: 14px; }
.cell-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); margin-bottom: 16px; }
.cell-ic .ic { width: 17px; height: 17px; }

.c-ma { grid-area: ma; display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; background: linear-gradient(160deg, var(--surface) 30%, var(--accent-soft)); }
.scen { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.scen-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--r-in); cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.scen-row input { position: absolute; opacity: 0; pointer-events: none; }
.scen-row:hover { background: var(--surface); border-color: var(--line); }
.scen-n { font-weight: 500; font-size: 14.5px; }
.scen-k { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.scen-d { grid-column: 1 / -1; font-size: 13px; color: var(--fg-3); line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease-out), opacity .25s var(--ease), margin .3s var(--ease); }
.scen-row:has(input:checked) { background: var(--surface); border-color: var(--accent-line); box-shadow: var(--sh-1); }
.scen-row:has(input:checked) .scen-k { color: var(--accent-ink); font-weight: 500; }
.scen-row:has(input:checked) .scen-d { max-height: 60px; opacity: 1; margin-top: 4px; }
.scen-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.scen-note { font-size: 12.5px; color: var(--fg-3); padding: 8px 12px 0; }

.c-img { grid-area: im; color: #f0f0f3; border-color: transparent; padding-bottom: 0; }
.c-img::before { content: ""; background-image: url("/images/produkt/scena-grafit.webp"); background-position: 30% 50%; }
.c-img .cell-copy p { color: #b9bbc4; }
.cell-phone { position: absolute; left: 50%; top: 168px; width: 310px; max-width: 80%; transform: translateX(-50%); box-shadow: 0 30px 40px -4px rgba(0, 0, 0, .55); transition: transform .6s var(--ease-out); }
.c-img:hover .cell-phone { transform: translate(-50%, -6px); }

.c-doc { grid-area: dc; }
.files { display: grid; gap: 8px; margin-top: auto; }
.files li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface-2); }
.files li:nth-child(2) { margin-left: 14px; margin-right: -14px; background: var(--surface); box-shadow: var(--sh-2); }

.c-web { grid-area: wb; background: var(--surface-2); }
.crumbs { margin-top: auto; display: grid; gap: 6px; font-size: 12.5px; }
.crumb-url { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--fg-2); font-family: var(--mono); font-size: 11.5px; width: max-content; max-width: 100%; }
.crumb { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-2); padding-left: 12px; }
.crumb .ic { color: var(--accent); }

.c-cal { grid-area: cl; }
.event { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2); margin-top: auto; }
.event-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); margin-bottom: 4px; }
.event-top .mono { margin-left: auto; font-size: 11px; }
.event b { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.event-when { font-size: 12px; color: var(--fg-2); }
.event-warn { font-size: 13px; color: var(--fg-2); padding: 8px 10px; margin-top: 6px; border-radius: var(--r-sm); background: var(--accent-soft); }
.event-act { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.voice { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.voice .ic { color: var(--accent); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.wave i { width: 3px; border-radius: 2px; background: var(--fg-3); height: 40%; }
.wave i:nth-child(2) { height: 75%; } .wave i:nth-child(3) { height: 100%; } .wave i:nth-child(4) { height: 55%; }
.wave i:nth-child(5) { height: 85%; } .wave i:nth-child(6) { height: 45%; } .wave i:nth-child(7) { height: 65%; }
@media (prefers-reduced-motion: no-preference) {
  .c-cal.in .wave i { animation: wave 1.2s var(--ease) infinite alternate; }
  .c-cal.in .wave i:nth-child(odd) { animation-delay: -.6s; }
  .c-cal.in .wave i:nth-child(3n) { animation-delay: -.3s; }
}
@keyframes wave { to { transform: scaleY(.35); } }

.c-con { grid-area: cn; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: auto; }
.app { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 116px; gap: 12px; padding: 14px; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; font-weight: 500; line-height: 1.3; transition: transform .3s var(--ease-out), border-color .2s; }
.app:hover { transform: translateY(-2px); border-color: var(--line-2); }
.app img { width: 26px; height: 26px; }
.app small { display: block; font-weight: 400; font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.apps-note { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--fg-3); }
.apps-note span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- agenci automatyzacji ---------- */
.auto { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.auto-stage { order: -1; }
.auto-copy .lead { margin-top: 18px; }
.facts { margin: 32px 0 30px; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.facts div { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 12px; padding: 13px 0; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { font-size: 15px; font-weight: 500; color: var(--fg); }
.facts dd { color: var(--fg-2); font-size: 15px; }

.auto-stage {
  position: relative; isolation: isolate;
  border-radius: var(--r-stage); overflow: hidden;
  padding: 40px 40px 196px;
  border: 1px solid var(--line);
}
.auto-art { position: absolute; inset: 0; z-index: -1; background: #e8e0ef url("/images/hero-automatyzacje-1920.webp") 72% 40% / cover no-repeat; }
.auto-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 250, 251, .05), rgba(250, 250, 251, .25)); }
html[data-theme="dark"] .auto-art { filter: brightness(.5) saturate(.85); }
html[data-theme="dark"] .auto-art::after { background: rgba(11, 11, 14, .25); }

.agent {
  width: min(420px, 100%);
  border-radius: var(--r-card); background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line); box-shadow: var(--sh-win);
  padding: 18px;
}
.agent-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.agent-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; flex: none; }
.agent-av.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; }
.agent-t { display: flex; flex-direction: column; line-height: 1.3; }
.agent-t b { font-weight: 600; font-size: 15px; }
.agent-t small { color: var(--fg-3); font-size: 13px; }
.agent-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.agent-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.agent-kv { display: grid; gap: 6px; padding: 14px 0; font-size: 13.5px; }
.agent-kv div { display: grid; grid-template-columns: 64px 1fr; }
.agent-kv dt { color: var(--fg-3); }
.agent-kv dd { font-weight: 500; }
.agent-kv dd.mono { font-size: 12.5px; font-weight: 450; }
.agent-sub { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); padding-top: 12px; border-top: 1px solid var(--line); }
.perms { display: grid; gap: 4px; margin-top: 8px; }
.perm { padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.perm-l { font-size: 13.5px; min-width: 0; }
.tri { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line); flex: none; }
.tri label { position: relative; cursor: pointer; }
.tri input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.tri span { display: block; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; color: var(--fg-3); transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s; }
.tri label:hover span { color: var(--fg); }
.tri input:checked + span { background: var(--surface); color: var(--fg); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.tri label:nth-child(2) input:checked + span { background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-line); }
.tri label:nth-child(3) input:checked + span { background: var(--fg); color: var(--bg); box-shadow: none; }
.tri input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.ask {
  position: absolute; right: 32px; bottom: 28px; width: min(330px, calc(100% - 64px));
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-win); padding: 14px 16px 16px; font-size: 13.5px;
}
.ask-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ask-head b { font-weight: 600; font-size: 13.5px; }
.ask-head .mono { margin-left: auto; font-size: 11.5px; color: var(--fg-3); }
.ask > p { color: var(--fg-2); line-height: 1.5; }
.ask-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ask-done { display: none; align-items: center; gap: 7px; margin-top: 12px; font-weight: 500; color: var(--fg); }
.ask-done .ic { color: var(--accent); }
.ask[data-state] .ask-act { display: none; }
.ask[data-state="yes"] .ask-done[data-done="yes"], .ask[data-state="no"] .ask-done[data-done="no"] { display: flex; animation: fade .35s var(--ease) both; }

/* ---------- modele ---------- */
.models { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.model { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .35s var(--ease-out), box-shadow .3s var(--ease), border-color .25s; }
.model-big { padding: 26px 26px 22px; display: flex; flex-direction: column; min-height: 268px; }
.model-big:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.model-prov { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-3); font-weight: 500; }
.model-prov img { opacity: .8; }
.model-name { font-weight: 600; font-size: 1.75rem; letter-spacing: -.035em; line-height: 1.1; margin-top: 18px; }
.model-big p { color: var(--fg-2); margin-top: 10px; font-size: 15px; line-height: 1.55; }
.model-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.rate { display: flex; align-items: baseline; gap: 8px; }
.rate b { font-size: 2.5rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.rate span { font-size: 13px; color: var(--fg-3); }
.plan-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.model-list { display: grid; grid-template-rows: repeat(3, 1fr); gap: 0; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.model-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 4px; padding: 16px 22px; transition: background-color .2s; }
.model-row + .model-row { border-top: 1px solid var(--line); }
.model-row:hover { background: var(--surface-2); }
.model-row h3 { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.model-row .model-prov { grid-column: 1; font-size: 12.5px; }
.rate-sm { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rate-sm b { font-size: 1.125rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eu { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--r-pill); }
.models-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.models-foot p { color: var(--fg-2); font-size: 15px; max-width: 64ch; }

/* ---------- dla firm ---------- */
.biz { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.biz-col { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 30px 30px 14px; }
.biz-h { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--fg-3); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.biz-list li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; padding: 18px 0; }
.biz-list li + li { border-top: 1px dashed var(--line); }
.biz-list .ic { margin-top: 2px; color: var(--fg-2); width: 20px; height: 20px; }
.biz-list b { font-weight: 600; font-size: 15.5px; letter-spacing: -.012em; }
.biz-list p { color: var(--fg-2); font-size: 14.5px; margin-top: 3px; line-height: 1.55; }
.biz-cta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 30px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent-line); box-shadow: var(--sh-1); }
.biz-cta b { font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; }
.biz-cta p { color: var(--fg-2); font-size: 15px; margin-top: 2px; }

/* ---------- cennik ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 26px 24px 24px; }
.plan-hi { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--sh-2); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 46%); }
.plan-top { min-height: 196px; }
.plan-n { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; }
.plan-tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--accent-ink); background: var(--surface); border: 1px solid var(--accent-line); padding: 2px 9px; border-radius: var(--r-pill); }
.plan-d { color: var(--fg-3); font-size: 14px; margin-top: 4px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price b { font-size: 2.25rem; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.price span { color: var(--fg-3); font-size: 14px; }
.plan-kr { font-family: var(--mono); font-size: 12px; color: var(--fg-2); margin-top: 10px; line-height: 1.45; }
.plan-f { display: grid; gap: 11px; padding-top: 20px; border-top: 1px solid var(--line); margin-bottom: 24px; }
.plan-f li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.plan-f .ic { margin-top: 3px; color: var(--fg); }
.plan-hi .plan-f .ic { color: var(--accent); }
.plan-btn { margin-top: auto; width: 100%; }
.plans-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.plans-foot p { color: var(--fg-2); font-size: 15px; }
.plans-foot b { color: var(--fg); font-weight: 600; }

/* ---------- co nowego ---------- */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 52px; }
.news-head .h2 { max-width: 14em; }
.ver { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); flex: none; }
.ver-n { display: grid; place-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-in); background: var(--fg); color: var(--bg); font-size: 15px; font-weight: 500; }
.ver-t { display: flex; flex-direction: column; font-weight: 500; font-size: 14px; line-height: 1.35; }
.ver-t small { color: var(--fg-3); font-weight: 400; font-size: 13px; }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; position: relative; margin-bottom: 40px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
.tl li { position: relative; padding-top: 32px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--fg-3); }
.tl li:first-child::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl time { font-size: 12.5px; color: var(--fg-3); }
.tl-tag { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--fg-2); padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); }
.tl h3 { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.018em; margin-top: 14px; }
.tl p { color: var(--fg-2); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-side .lead { margin-top: 18px; font-size: 1.0625rem; }
.faq-list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 2px; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.012em;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent-ink); }
.qa summary .ic { color: var(--fg-3); transition: transform .35s var(--ease-out); }
.qa[open] summary .ic { transform: rotate(45deg); color: var(--fg); }
.qa-a { padding: 0 48px 24px 2px; color: var(--fg-2); line-height: 1.65; max-width: 68ch; }
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa-a { animation: rise .4s var(--ease-out) both; }
}

/* ---------- końcowe CTA ---------- */
.final { padding-bottom: var(--sec); }
.final-box {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-stage); border: 1px solid var(--line);
  min-height: 420px;
  display: grid; grid-template-columns: 1fr 380px; align-items: center;
  padding: 72px 64px;
}
.final-copy { padding-bottom: 0; }
.final-h { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem); }
.final-copy .lead { margin-top: 16px; }
.final-phone { position: absolute; right: 88px; bottom: 28px; width: 300px; box-shadow: 0 30px 40px -4px rgba(32, 22, 56, .32); }
html[data-theme="dark"] .final-phone { box-shadow: 0 30px 40px -4px rgba(0, 0, 0, .6); }

/* ---------- stopka ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 40px; background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.foot-brand p { color: var(--fg-2); font-size: 14.5px; margin-top: 14px; max-width: 30ch; }
.foot-brand address { color: var(--fg-3); font-size: 13.5px; line-height: 1.7; margin-top: 18px; }
.foot-brand address a { color: var(--fg-2); }
.foot-brand address a:hover { color: var(--fg); }
.foot-col h4 { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--fg-3); margin: 6px 0 16px; }
.foot-col ul { display: grid; gap: 10px; }
.foot-col a { font-size: 14px; color: var(--fg-2); transition: color .15s; }
.foot-col a:hover { color: var(--fg); }
.foot-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--fg-3); }
.foot-bottom a:hover { color: var(--fg); }

/* ---------- odsłanianie przy przewijaniu ---------- */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Responsywność
   ========================================================================== */
@media (max-width: 1140px) {
  .nav-row { gap: 20px; }
  .nav-login { display: none; }
  .win { width: 71%; }
  .phone { right: 40px; width: 250px; }
  .bento { grid-template-areas:
    "ma ma ma ma ma ma ma ma im im im im"
    "dc dc dc dc wb wb wb wb im im im im"
    "cl cl cl cl cl cl cn cn cn cn cn cn"; }
  .c-ma { grid-template-columns: 1fr; }
  .apps { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .plan-top { min-height: 0; }
  .plan-d { min-height: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  :root { --nav-h: 60px; }
  .nav-links, .nav-right .theme-btn { display: none; }
  .burger { display: grid; }
  .nav-cta { margin-left: auto; }
  .sheet {
    display: block; position: fixed; z-index: var(--z-sheet);
    left: 0; right: 0; top: var(--nav-h); height: calc(100dvh - var(--nav-h));
    background: var(--bg); border-top: 1px solid var(--line);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .3s var(--ease-out), visibility 0s .3s;
  }
  .nav-open .sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-open { overflow: hidden; }
  .nav-open .nav { background: var(--bg); border-bottom-color: var(--line); }
  .nav-open .nav-cta { visibility: hidden; }
  .sheet-inner { padding: 24px var(--gut) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 100%; }
  .sheet-label { font-family: var(--mono); font-size: 12px; color: var(--fg-3); margin-bottom: 8px; }
  .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .sheet-grid a { padding: 11px 0; font-size: 16px; color: var(--fg-2); }
  .sheet-main { display: grid; padding: 8px 0; }
  .sheet-main a { padding: 13px 0; font-size: 22px; font-weight: 600; letter-spacing: -.025em; border-bottom: 1px solid var(--line); }
  .sheet-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
  .sheet-foot .btn { width: 100%; --h: 50px; font-size: 16px; }
  .sheet-theme { display: flex; align-items: center; gap: 10px; height: 44px; color: var(--fg-2); font-size: 15px; }
  .sheet-theme .t-light, html[data-theme="dark"] .sheet-theme .t-dark { display: none; }
  html[data-theme="dark"] .sheet-theme .t-light { display: inline; }

  .stage { padding: 36px 32px 44px; }
  .win { width: 80%; }
  .phone { width: 200px; right: 24px; top: 36px; }
  .proof-row { grid-template-columns: 1fr; gap: 16px; }
  .pane, .auto, .faq { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .auto-stage { order: 0; }
  .faq-side { position: static; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "ma ma" "im dc" "im wb" "cl cn"; }
  .cell-phone { top: 190px; width: 270px; }
  .auto-stage { min-height: 0; }
  .models { grid-template-columns: 1fr 1fr; }
  .model-list { grid-column: 1 / -1; grid-template-rows: none; }
  .biz { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .tl::before { display: none; }
  .tl li { border-top: 1px solid var(--line-2); }
  .tl li::before { top: -6px; }
  .news-head { flex-direction: column; align-items: flex-start; }
  .final-box { grid-template-columns: 1fr 250px; padding: 56px 40px; }
  .final-phone { width: 240px; right: 32px; }
}

@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "ma" "im" "dc" "wb" "cl" "cn"; }
  .c-img { min-height: 520px; }
  .cell-phone { width: 250px; margin-bottom: -200px; }
  .apps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --gut: 16px; --nav-h: 56px; --sec: 64px; }
  body { font-size: 15.5px; }
  .brand span { font-size: 16px; }
  .nav-cta { --h: 34px; padding: 0 14px; font-size: 13.5px; }
  .hero { padding-top: 28px; }
  .news { margin-bottom: 18px; height: 30px; font-size: 13px; }
  .hero .lead { margin-top: 16px; }
  .hero-agent { margin-top: 20px; height: 56px; gap: 10px; }
  .hero-agent .orb.hero-orb { --s: 50px; width: 50px; height: 50px; font-size: 5px; }
  .hero-dymek { height: 36px; padding: 0 13px; font-size: 14px; }
  .cta-row { margin-top: 24px; gap: 10px; }
  .btn-lg { --h: 46px; padding-left: 18px; font-size: 15px; }
  .btn-lg .btn-ic { width: 30px; height: 30px; }
  .store img { height: 46px; }
  .stage { height: 420px; margin-top: 32px; padding: 0; border-radius: 16px; }
  .win { position: absolute; left: 34px; top: 22px; width: 540px; border-radius: 10px; }
  .win-bar { height: 28px; padding: 0 10px; }
  .win-dots i { width: 8px; height: 8px; }
  .win-url { height: 20px; min-width: 0; font-size: 10px; padding: 0 10px; }
  .phone { width: 152px; left: 12px; right: auto; top: 66px; }
  .proof { padding-top: 28px; }
  .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; padding: 18px 12px; }
  .logos li { height: 34px; font-size: 15px; }
  .logos li + li { border-left: 0; }
  .sec-head { margin-bottom: 36px; }
  .seg { display: grid; width: 100%; margin-top: 28px; }
  .seg-btn { min-width: 0; }
  .pane { margin-top: 28px; }
  .ui { padding: 14px; }
  .cell { padding: 22px; }
  .c-img { min-height: 500px; }
  .files li:nth-child(2) { margin-left: 8px; margin-right: -8px; }
  .event-act .mini-btn { flex: 0 0 auto; }
  .apps-note { flex-direction: column; }
  .auto-stage { padding: 20px 14px 200px; border-radius: 16px; }
  .ask { right: 14px; bottom: 14px; width: calc(100% - 28px); }
  .agent { padding: 14px; }
  .perm-l { font-size: 12.5px; }
  .tri span { padding: 3px 7px; font-size: 11px; }
  .models { grid-template-columns: 1fr; }
  .model-big { min-height: 0; }
  .rate b { font-size: 2.125rem; }
  .biz-col { padding: 22px 20px 6px; }
  .biz-list li { padding: 14px 0; gap: 14px; }
  .app { min-height: 0; }
  .app small { display: none; }
  .biz-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .biz-cta .btn { width: 100%; }
  .plans, .tl {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 12px; scroll-padding-inline: var(--gut);
  }
  .plans::-webkit-scrollbar, .tl::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 86%; scroll-snap-align: start; padding: 22px 20px 20px; }
  .plan-f { gap: 9px; padding-top: 16px; margin-bottom: 20px; }
  .tl { gap: 24px; margin-bottom: 28px; }
  .tl li { flex: 0 0 80%; scroll-snap-align: start; }
  .ver { width: 100%; }
  .qa summary { padding: 18px 0; font-size: 1rem; }
  .qa-a { padding-right: 0; }
  .final-box { grid-template-columns: 1fr; padding: 36px 20px 0; border-radius: 16px; }
  .final-copy { padding-bottom: 28px; }
  .final-phone { display: none; }
  .final-box { min-height: 0; }
  .final-copy { padding-bottom: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-bottom { flex-direction: column; }
}

@media (max-width: 380px) {
  .nav-cta { display: none; }
}

.nw{ white-space:nowrap }

/* zwijanie napisu „DomaAI” przy przewijaniu (js/nav-brand.js dokłada .brand-min).
   Pojawianie: najpierw otwiera się miejsce, potem napis wjeżdża i się wyostrza.
   Znikanie: napis gaśnie i rozmywa się, potem zwija się miejsce; znak lekko rośnie. */
.nav .brand img{ transform-origin:left center; transition:transform .5s cubic-bezier(.22,1,.36,1) }
.nav .brand span{ display:inline-block; white-space:nowrap; overflow:hidden; line-height:1.25; max-width:var(--w, 7em); opacity:1; transform:none; filter:none;
  transition:max-width .5s cubic-bezier(.22,1,.36,1), opacity .35s ease .12s, transform .5s cubic-bezier(.22,1,.36,1) .04s, filter .35s ease .12s }
.nav.brand-min .brand span{ max-width:0; opacity:0; transform:translateX(-8px); filter:blur(3px);
  transition:opacity .2s ease, filter .2s ease, transform .3s cubic-bezier(.4,0,.2,1), max-width .42s cubic-bezier(.4,0,.2,1) .1s }
.nav.brand-min .brand img{ transform:scale(1.14) }
@media (prefers-reduced-motion: reduce){ .nav .brand span, .nav .brand img{ transition:none } .nav.brand-min .brand span{ max-width:var(--w, 7em); opacity:1; transform:none; filter:none } .nav.brand-min .brand img{ transform:none } }

/* ==========================================================================
   09.10.2026: własny agent AI (konfigurator, proces, ekrany aplikacji)
   i orby agentów porozrzucane po stronie. Orby to dekoracja: aria-hidden,
   pod treścią (z-index 0), w warstwie z overflow:hidden, na telefonie mniej
   i mniejsze, przy „ogranicz ruch” stoją.
   ========================================================================== */
.has-orbs { position: relative; isolation: isolate; }
.has-orbs > .wrap, .has-orbs > .rail { position: relative; z-index: 1; }
.orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 09.10.2026 (wieczór): żywe orby. Kula bez oczu (obraz) + oczy w HTML/CSS + blask na wierzchu.
   Ruch robi js/orby-zywe.js (transform/opacity); bez JS i przy „ogranicz ruch” orb stoi z otwartymi oczami.
   1em = 0,1 średnicy kuli, więc oczy, poświata i cień skalują się z orbem. */
@property --ciecie { syntax: "<percentage>"; inherits: false; initial-value: 260%; }
.orb {
  --c: 124, 92, 255;
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 120px); height: var(--s, 120px);
  font-size: calc(var(--s, 120px) / 10);
  transform: translate(-50%, -50%);
}
.orb-cialo, .orb-obrot { position: absolute; inset: 0; display: block; }
.orb-cialo { will-change: transform; }
/* 12.10.2026: połysk i pierścień szkła rysuje shader (orby-plyn.js) i są wypalone w obrazach zapasowych, bez osobnej warstwy blasku */
.orb-kula { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* płyn w kuli jak w aplikacji (js/orby-plyn.js, WebGL); obraz kuli zostaje jako zapas do pierwszej klatki */
.orb-plyn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: 0; transition: opacity .5s ease; }
.orb.plyn .orb-plyn { opacity: 1; }
.orb.plyn .orb-kula { opacity: 0; transition: opacity .5s ease; }
.orb-cien {
  position: absolute; left: 17%; right: 17%; top: 100.5%; height: 13%; border-radius: 50%;
  /* 12.10.2026: szklana kula — miękki cień kontaktowy, a w nim jasna kaustyka (światło skupione przez kulę,
     zabarwione szkłem agenta); same gradienty, bez filter */
  background: radial-gradient(34% 46% at 55% 45%, rgba(255, 255, 255, .5), rgba(var(--c), .32) 55%, rgba(var(--c), 0) 88%),
    radial-gradient(closest-side, rgba(14, 16, 34, .3), rgba(14, 16, 34, .12) 62%, rgba(14, 16, 34, 0));
  will-change: transform, opacity;
}
/* oczy: białe świecące pigułki 0,142 x 0,285 średnicy, rozstaw 0,085, środek 0,035 nad środkiem kuli */
.orb-oczy {
  position: absolute; left: 31.55%; top: 32.25%; width: 36.9%; height: 28.5%;
  display: flex; justify-content: space-between; will-change: transform;
  filter: drop-shadow(0 0 .1em rgba(255, 255, 255, .55)) drop-shadow(0 0 .45em rgba(var(--c), .75));
}
.orb-oczy i {
  position: relative; display: block; width: 38.48%; height: 100%; border-radius: 99em;
  background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--c)) 9%, #fff) 0%, #fdfdff 46%, color-mix(in srgb, rgb(var(--c)) 26%, #fff) 100%);
  box-shadow: inset 0 0 .07em .02em rgba(var(--c), .26), inset 0 -.12em .2em rgba(var(--c), .18);
  transform-origin: 50% 56%;
  /* radość: dół oka wycięty łukiem (oczy-łuki), --ciecie przejeżdża z 260% (nic) do 84% */
  -webkit-mask: radial-gradient(62% 42% at 50% var(--ciecie), transparent 96%, #000 100%);
          mask: radial-gradient(62% 42% at 50% var(--ciecie), transparent 96%, #000 100%);
  transition: --ciecie .26s cubic-bezier(.3, 1.3, .5, 1);
}
.orb-oczy i::after {
  content: ""; position: absolute; left: 22%; top: 12%; width: 22%; height: 32%; border-radius: 99em;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0)); filter: blur(.01em);
}
/* Miny jak w aplikacji (MinaOczu): górna powieka (--gora), uśmiech oczami (--ciecie), skala i skos oka.
   Klasy mina-* ustawia js/orby-zywe.js; zmiany przelewają się sprężyście. */
@property --gora { syntax: "<number>"; inherits: false; initial-value: 0; }
.orb-oczy i {
  clip-path: inset(calc(var(--gora) * 100%) -20% -20% -20%);
  transition: --ciecie .3s cubic-bezier(.3, 1.3, .5, 1), --gora .32s cubic-bezier(.3, 1.25, .5, 1),
    scale .42s cubic-bezier(.3, 1.45, .5, 1), rotate .42s cubic-bezier(.3, 1.3, .5, 1);
}
.orb.mina-radosna .orb-oczy i { --ciecie: 84%; scale: 1.06; }
.orb.mina-glaskana .orb-oczy i { --ciecie: 80%; scale: 1.08 .92; }
.orb.mina-zadowolona .orb-oczy i { --ciecie: 98%; scale: .97; }
.orb.mina-zdziwiona .orb-oczy i:first-child { scale: 1.28; }
.orb.mina-zdziwiona .orb-oczy i:last-child { scale: 1.12; }
.orb.mina-mysli .orb-oczy i { --gora: .18; scale: .95; }
.orb.mina-mysli .orb-oczy i:first-child { rotate: -8deg; }
.orb.mina-mysli .orb-oczy i:last-child { rotate: 8deg; }
.orb.mina-senna .orb-oczy i:first-child { --gora: .52; }
.orb.mina-senna .orb-oczy i:last-child { --gora: .58; }
.orb.mina-oczko .orb-oczy i:first-child { scale: 1.05; }
.orb.mina-oczko .orb-oczy i:last-child { --ciecie: 60%; scale: 1 .5; }
/* rumieńce przy radości i głaskaniu: miękkie różowe owale pod oczami */
.orb-oczy::before, .orb-oczy::after {
  content: ""; position: absolute; top: 82%; width: 58%; height: 28%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 112, 156, .95), rgba(255, 112, 156, 0));
  opacity: 0; scale: .55; transition: opacity .5s ease, scale .55s cubic-bezier(.3, 1.45, .5, 1);
}
.orb-oczy::before { left: -34%; }
.orb-oczy::after { right: -34%; }
.orb.rumience .orb-oczy::before, .orb.rumience .orb-oczy::after { opacity: .85; scale: 1; }
.orb.glass.rumience .orb-oczy::before, .orb.glass.rumience .orb-oczy::after { opacity: .95; }
/* serduszko nad orbem (głaskanie, stuknięcie) */
.orb-serce { position: absolute; bottom: 86%; width: clamp(12px, 24%, 26px); aspect-ratio: 1; pointer-events: none; z-index: 2; }
.orb-serce svg { display: block; width: 100%; height: 100%; fill: #ff5f93; filter: drop-shadow(0 2px 4px rgba(255, 79, 154, .45)); }
/* głębia: dalsze orby mniejsze, rozmyte i przygaszone, bez cienia */
.orb.far { opacity: .78; filter: blur(1.5px) saturate(.9); }
.orb.dal { opacity: .58; filter: blur(3px) saturate(.85); }
.orb.far .orb-cien, .orb.dal .orb-cien { display: none; }
/* 12.10.2026: orby to szklane kule liczone w shaderze (orby-plyn.js), który sam załamuje tło spod orba,
   więc bez backdrop-filter; „glass” = prawie bezbarwne, lekko błękitne szkło. */
@media (prefers-reduced-motion: reduce) { .orb-oczy i { transition: none; } }
/* 10.10.2026: cienie zrzutów telefonów jako box-shadow z zaokrągleniem ramki zamiast filter: drop-shadow —
   drop-shadow na dużych obrazach przerysowywał się przy przewijaniu (klatki do 180 ms, szarpały też orby). */
.phone, .cell-phone, .final-phone, .ag-shot, .pr-phone img, .rail-item img, .trust-phone img { border-radius: 15% / 7.2%; }
/* 10.10.2026: telefon/tablet — rozmycie tła pod szklanym orbem i blur dalekich orbów liczyły się od nowa
   w każdej klatce płynu i ruchu (zacinanie na iPhonie); na dotyku zostaje sama przezroczystość. */
@media (hover: none) {
  .orb.far, .orb.dal { filter: none; }
}

/* hero: tekst nad orbami; na węższych laptopach orby mniejsze, żeby nie wchodziły na nagłówek */
@media (min-width: 761px) and (max-width: 1180px) { .hero .orbs .orb { width: calc(var(--s) * .8); height: calc(var(--s) * .8); font-size: calc(var(--s) * .08); } }
.hero.has-orbs .orbs { bottom: auto; height: 640px; }
.hero .stage { position: relative; z-index: 1; }

/* ---------- Twój agent: konfigurator ---------- */
.ag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "head stage" "steps stage"; grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 36px; }
.ag > * { min-width: 0; }
.ag-head { grid-area: head; }
.ag-head .lead { margin-top: 18px; }
.ag-steps { grid-area: steps; align-self: start; display: grid; gap: 6px; max-width: 560px; }
.ag-step {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; text-align: left;
  padding: 14px 16px; border-radius: var(--r-card); border: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.ag-step:hover { background: var(--surface); border-color: var(--line); }
.ag-step[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-2); }
.ag-n { font-family: var(--mono); font-size: 12px; color: var(--fg-3); padding-top: 3px; font-variant-numeric: tabular-nums; }
.ag-step[aria-selected="true"] .ag-n { color: var(--accent-ink); }
.ag-t b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.012em; color: var(--fg); }
.ag-d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease-out), opacity .3s var(--ease), margin .3s var(--ease); }
.ag-d > span { overflow: hidden; color: var(--fg-2); font-size: 14.5px; line-height: 1.55; }
.ag-step[aria-selected="true"] .ag-d { grid-template-rows: 1fr; opacity: 1; margin-top: 5px; }
.ag-step:active { transform: translateY(1px); }

/* poświata pod telefonem (150% sceny) nie może poszerzać strony przy 1000-1140 px */
#agent { overflow-x: clip; }
.ag-stage { grid-area: stage; align-self: center; position: relative; justify-self: center; width: min(100%, 330px); }
.ag-stage::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: min(150%, 100vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(19, 181, 200, .20), rgba(124, 92, 255, .16) 45%, rgba(255, 79, 154, .07) 70%, transparent);
  filter: blur(10px);
}
.ag-shot { width: 100%; height: auto; box-shadow: 0 34px 44px -4px rgba(32, 22, 56, .26), 0 6px 12px -4px rgba(32, 22, 56, .12); }
html[data-theme="dark"] .ag-shot { box-shadow: 0 34px 44px -4px rgba(0, 0, 0, .65); }
.ag-shot + .ag-shot { position: absolute; left: 0; top: 0; }
.ag-shot { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.ag-shot.is-on { opacity: 1; transform: none; }
.ag-dots { display: none; }

.ag-plans { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.ag-plans > div { padding: 20px 22px; }
.ag-plans > div + div { border-left: 1px solid var(--line); }
.ag-plans dt { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.01em; }
.ag-plans dt .plan-chip { margin-left: auto; }
.ag-plans dd { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.ag-note { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--fg-3); max-width: 80ch; }
.ag-note a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ---------- proces, zadania w tle, zespoły ---------- */
.pr { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.pr > * { min-width: 0; }
.pr-cell {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  padding: 30px 30px 0; display: flex; flex-direction: column; gap: 26px;
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.pr-cell:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.pr-okno { grid-column: span 7; }
.pr-tlo { grid-column: span 5; background: linear-gradient(170deg, var(--surface) 35%, var(--accent-soft)); }
.pr-zespol { grid-column: 1 / -1; display: grid; grid-template-columns: 340px 1fr; align-items: center; gap: 48px; padding: 34px 40px; }
.pr-copy .h3 { font-size: 1.375rem; letter-spacing: -.022em; margin-bottom: 8px; }
.pr-copy p { color: var(--fg-2); font-size: 15px; line-height: 1.6; max-width: 48ch; }
.pr-copy .ticks { margin-top: 16px; gap: 10px; }
.pr-copy .ticks li { font-size: 14.5px; }
.pr-copy .link { margin-top: 18px; font-size: 14px; }
.soon { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-bottom: 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent-ink); font-family: var(--mono); font-size: 11.5px; }
.pr-phone { margin-top: auto; height: 380px; overflow: hidden; display: flex; justify-content: center; }
.pr-phone img { width: 300px; height: auto; align-self: flex-start; box-shadow: 0 24px 34px -4px rgba(32, 22, 56, .24); transition: transform .6s var(--ease-out); }
html[data-theme="dark"] .pr-phone img { box-shadow: 0 24px 34px -4px rgba(0, 0, 0, .6); }
.pr-cell:hover .pr-phone img { transform: translateY(-6px); }
.pr-facts { margin-top: 22px; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; border-top: 1px solid var(--line-2); }
.pr-facts div { padding: 14px 28px 0 0; }
.pr-facts dt { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.pr-facts dd { font-weight: 500; margin-top: 2px; font-size: 15px; }

/* zespół: główny agent i klony porozrzucane swobodnie, każdy żyje sam (karta „Klony, subagenci i zespoły”).
   --k skaluje wszystkie orby sceny na węższych ekranach. */
.zespol { --k: 1; position: relative; width: 100%; max-width: 340px; height: 300px; justify-self: center; }
.zespol .orb { width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k)); font-size: calc(var(--s) * var(--k) / 10); }

/* ---------- ekrany aplikacji: przewijany pas telefonów ---------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.rail-head .sec-head { margin-bottom: 0; }
.rail-nav { display: flex; gap: 8px; flex: none; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); box-shadow: var(--sh-1); transition: background-color .2s var(--ease), transform .2s var(--ease-out), opacity .2s; }
.rail-btn:hover { background: var(--surface-2); }
.rail-btn:active { transform: scale(.96); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn.prev .ic { transform: rotate(180deg); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 262px; gap: 28px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px max(var(--gut), calc((100% - var(--wrap)) / 2)) 28px;
  scroll-padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: start; }
.rail-item img { width: 100%; height: auto; box-shadow: 0 22px 28px -4px rgba(32, 22, 56, .22), 0 4px 8px -4px rgba(32, 22, 56, .1); transition: transform .5s var(--ease-out); }
html[data-theme="dark"] .rail-item img { box-shadow: 0 22px 30px -4px rgba(0, 0, 0, .6); }
.rail-item:hover img { transform: translateY(-6px); }
.rail-item figcaption { margin-top: 18px; padding-right: 8px; }
.rail-item figcaption b { display: block; font-weight: 600; letter-spacing: -.012em; }
.rail-item figcaption span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.rail-item figcaption a { color: var(--accent-ink); }

/* ---------- przejrzystość i zgody ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 80px; align-items: center; }
.trust-phone { position: relative; justify-self: center; width: min(100%, 320px); }
.trust-phone img { width: 100%; height: auto; box-shadow: 0 34px 44px -4px rgba(20, 22, 56, .3); }
html[data-theme="dark"] .trust-phone img { box-shadow: 0 34px 44px -4px rgba(0, 0, 0, .65); }
.trust-list { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.trust-list li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.trust-list b { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; }
.trust-list b .ic { color: var(--accent); }
.trust-list p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.trust .link { margin-top: 30px; }

/* ---------- poradniki z bloga ---------- */
.reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.read { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out); }
.read:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.read img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.read-b { padding: 16px 18px 20px; display: grid; gap: 6px; }
.read-b small { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.read-b b { font-weight: 600; font-size: 15.5px; line-height: 1.35; letter-spacing: -.012em; text-wrap: balance; }
.reads-foot { margin-top: 28px; }

/* konektory w bento: więcej kont, mniejsze kafle */
.apps.apps-8 { grid-template-columns: repeat(4, 1fr); }
.apps-8 .app { min-height: 92px; }
html[data-theme="dark"] .app img.inv { filter: invert(1); }

@media (max-width: 1140px) {
  .ag { column-gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .pr-zespol { grid-template-columns: 260px 1fr; gap: 36px; }
  .zespol { --k: .84; height: 260px; }
  .reads { grid-template-columns: repeat(2, 1fr); }
  .trust { gap: 56px; }
}
@media (max-width: 980px) {
  .ag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "steps"; grid-template-rows: none; row-gap: 32px; }
  .ag-stage { width: min(100%, 300px); }
  .ag-steps { max-width: none; }
  .ag-plans { grid-template-columns: 1fr; margin-top: 44px; }
  .ag-plans > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .pr-okno, .pr-tlo { grid-column: 1 / -1; }
  .pr-zespol { grid-template-columns: 1fr; padding: 30px; }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .trust-phone { width: min(100%, 280px); }
}
@media (max-width: 760px) {
  /* telefon: orby z klasą m wychylają się zza krawędzi ekranu (połowa kuli), reszta dekoracji znika */
  .orbs .orb.d:not(.m) { display: none; }
  .orbs .orb { width: var(--sm, 64px); height: var(--sm, 64px); font-size: calc(var(--sm, 64px) / 10); left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
  .rail-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
  .rail { grid-auto-columns: 214px; gap: 18px; }
  .trust-list { grid-template-columns: 1fr; gap: 18px; }
  .pr-facts { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 640px) {
  .ag-stage { width: min(78%, 270px); }
  .ag-step { padding: 12px 12px; grid-template-columns: 28px 1fr; column-gap: 10px; }
  .pr-cell { padding: 24px 22px 0; }
  .pr-phone { height: 330px; }
  .pr-phone img { width: 260px; }
  .pr-zespol { padding: 26px 22px; gap: 24px; }
  .zespol { --k: .74; height: 226px; }
  .reads { grid-template-columns: 1fr; }
  .read { display: grid; grid-template-columns: 120px 1fr; }
  .read img { height: 100%; aspect-ratio: auto; }
  .read-b { padding: 12px 14px; }
  .read-b b { font-size: 14.5px; }
  .hero.has-orbs .orbs { height: 360px; }
}

/* kalendarz w bento: przypomnienie nad wydarzeniem (zamiast trybu głosowego, wyłączonego 10.2026) */
.push { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-top: auto; border-radius: var(--r-in); border: 1px solid var(--line); background: var(--surface-2); }
.push + .event { margin-top: 10px; }
.push-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.push-t { display: grid; gap: 1px; min-width: 0; }
.push-t b { font-weight: 600; font-size: 13.5px; }
.push-t small { font-size: 12.5px; color: var(--fg-2); }
.push .mono { margin-left: auto; font-size: 11px; color: var(--fg-3); }
/* zadania w tle: telefon od dołu (karta pytania agenta), górna krawędź gaśnie */
.pr-tlo .pr-phone { align-items: flex-end; padding-bottom: 26px; height: 406px; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.pr-tlo .pr-phone img { align-self: flex-end; }
@media (max-width: 640px) { .pr-tlo .pr-phone { height: 350px; padding-bottom: 20px; } }
@media (max-width: 640px) {
  .apps.apps-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .apps-8 .app { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; padding: 10px 12px; gap: 10px; }
  .apps-8 .app img { width: 22px; height: 22px; }
}