/* styles.css - landing Bridge (testowy).
   Estetyka: ewolucja ciepłego stylu Claude (decyzja Huberta 13-06-2026) - kremowy papier
   i terakota #D97757, szeryfowe nagłówki (Iowan Old Style/Palatino - natywne), ziarno,
   łuk mostu jako signature.
   Ruch: gęsto (dyspozycja po analizie igloo.inc), ale wyłącznie transform/opacity
   (+filter blur w word-reveal), wszystko gaszone przez prefers-reduced-motion,
   efekty kursora tylko (hover:hover) and (pointer:fine). Kontrasty przeliczone
   (przyciski: ciemna terakota #A8512F na light, terakota + ciemny tekst na dark). */

:root {
  color-scheme: light;
  --paper: #f0eee5;
  --surface: #fcfbf8;
  --surface-soft: #f6f4ec;
  --ink: #1f1e1d;
  --ink-soft: #6e6a60;
  --ink-faint: #9b968a;        /* tylko dekoracje i duża typografia */
  --line: #ddd8ca;
  --line-soft: #e9e6db;
  --accent: #d97757;           /* terakota Claude - dekoracje, łuki, duże plamy */
  --accent-ink: #a8512f;       /* akcent jako TEKST (linki) - 4.7:1 na papierze */
  --accent-wash: #f7e7df;
  --btn-bg: #a8512f;           /* 5.4:1 z białym */
  --btn-hover: #9d4b2c;
  --btn-ink: #ffffff;
  --mine: #eef0e9;
  --mine-line: #d6dbc9;
  --human-wash: #faeee6;
  --human-line: #ecc8b4;
  --green: #6f8f63;
  --green-ink: #5c7a50;
  --amber: #c8932c;
  --topbar-bg: rgba(240, 238, 229, 0.78);
  --glow-a: rgba(217, 119, 87, 0.10);
  --glow-b: rgba(111, 143, 99, 0.09);
  --glow-c: rgba(200, 147, 44, 0.07);
  --spot: rgba(217, 119, 87, 0.07);
  --stroke-kinetic: rgba(217, 119, 87, 0.34);
  --shadow-sm: 0 1px 2px rgba(31, 30, 29, 0.05), 0 2px 8px rgba(31, 30, 29, 0.04);
  --shadow-md: 0 2px 4px rgba(31, 30, 29, 0.05), 0 12px 32px rgba(31, 30, 29, 0.08);
  --shadow-lg: 0 4px 10px rgba(31, 30, 29, 0.06), 0 30px 70px rgba(31, 30, 29, 0.13);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Seravek, ui-sans-serif, -apple-system, sans-serif;
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --reveal: cubic-bezier(0.19, 1, 0.22, 1);   /* wspólny podpis wszystkich wejść */
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191713;
  --surface: #221f19;
  --surface-soft: #2a261e;
  --ink: #ece7dc;
  --ink-soft: #b1a999;
  --ink-faint: #837c6d;
  --line: #3b352a;
  --line-soft: #322d24;
  --accent: #d97757;
  --accent-ink: #e89a76;
  --accent-wash: rgba(217, 119, 87, 0.16);
  --btn-bg: #d97757;           /* terakota świeci w ciemności; tekst ciemny 5.4:1 */
  --btn-hover: #e08a66;
  --btn-ink: #2a1a10;
  --mine: #272c1e;
  --mine-line: #3c4429;
  --human-wash: #33261c;
  --human-line: #5a3c2a;
  --green: #8aa87c;
  --green-ink: #8aa87c;
  --amber: #d4a948;
  --topbar-bg: rgba(25, 23, 19, 0.78);
  --glow-a: rgba(217, 119, 87, 0.13);
  --glow-b: rgba(111, 143, 99, 0.10);
  --glow-c: rgba(212, 169, 72, 0.07);
  --spot: rgba(217, 119, 87, 0.10);
  --stroke-kinetic: rgba(217, 119, 87, 0.42);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 34px 80px rgba(0, 0, 0, 0.55);
}

/* No-JS + systemowy dark: zanim (jeśli w ogóle) snippet ustawi data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
  :root:not([data-theme]) body { background: #191713; color: #ece7dc; }
}

/* ---------- baza ---------- */
* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: rgba(217, 119, 87, 0.18);
  overflow-x: clip;
}

a, button, summary, input { touch-action: manipulation; }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.015em; line-height: 1.12; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 18px; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 14px; font-weight: 600; font-size: 14px;
  transform: translateY(-64px); opacity: 0;
  transition: transform 0.2s var(--ease-out), opacity 0.2s ease;
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* ---------- tło: bloby + ziarno ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.blob-a {
  width: 56vw; height: 56vw; min-width: 520px; min-height: 520px;
  left: -14vw; top: -18vw;
  background: radial-gradient(circle at 35% 35%, var(--glow-a), transparent 65%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.blob-b {
  width: 48vw; height: 48vw; min-width: 460px; min-height: 460px;
  right: -16vw; top: 16%;
  background: radial-gradient(circle at 60% 40%, var(--glow-b), transparent 65%);
  animation: drift-b 41s ease-in-out infinite alternate;
}
.blob-c {
  width: 44vw; height: 44vw; min-width: 420px; min-height: 420px;
  left: 18vw; bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, var(--glow-c), transparent 65%);
  animation: drift-c 28s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vh, 0) scale(1.12); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-6vw, 8vh, 0) scale(0.94); } }
@keyframes drift-c { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(5vw, -6vh, 0) scale(1.1); } }

.grain {
  position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- spotlight + progress ---------- */
.spotlight { display: none; }
@media (hover: hover) and (pointer: fine) {
  .spotlight {
    display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(620px circle at var(--mx, 50%) var(--my, 35%), var(--spot), transparent 70%);
  }
}
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: var(--accent);
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, 36px);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-arc {
  width: 20px; height: 10px; flex: 0 0 20px;
  border: 2.5px solid var(--accent); border-bottom: 0; border-radius: 10px 10px 0 0;
  transition: transform 0.25s var(--spring);
}
.brand:hover .brand-arc { transform: translateY(-2px); }
.topnav { display: flex; gap: clamp(14px, 2.4vw, 28px); }
.topnav a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; padding: 8px 2px; }
.topnav a:hover { color: var(--accent-ink); text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }

.lang-toggle {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; touch-action: manipulation;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--spring);
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.lang-toggle:active { transform: scale(0.92); }

.theme-toggle {
  position: relative; min-width: 40px; height: 40px; padding: 0 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-soft); cursor: pointer; touch-action: manipulation;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--spring);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle .ico-wrap { display: grid; place-items: center; width: 17px; height: 17px; }
.theme-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.25s ease, transform 0.35s var(--spring); }
.ico-moon { opacity: 0; transform: rotate(-50deg) scale(0.6); }
[data-theme="dark"] .ico-sun { opacity: 0; transform: rotate(50deg) scale(0.6); }
[data-theme="dark"] .ico-moon { opacity: 1; transform: none; }
.theme-cap { font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: currentColor; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 0; border-radius: 11px; padding: 13px 24px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
  transition: background 0.15s ease, transform 0.2s var(--spring), box-shadow 0.2s ease;
  will-change: transform;
}
.btn:hover { background: var(--btn-hover); text-decoration: none; box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.96); }
/* disabled bez opacity - solidne tło, by animowana grafika pod spodem nie prześwitywała przez przycisk */
.btn:disabled { background: var(--line); color: var(--ink-faint); cursor: default; box-shadow: none; }
.btn:disabled:hover { background: var(--line); }
.btn-small { padding: 9px 16px; font-size: 14px; border-radius: 9px; }
.btn-big { padding: 15px 30px; font-size: 16.5px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn-ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; padding: 10px 2px; }
.link-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--spring); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- układ sekcji ---------- */
main { position: relative; z-index: 2; }
.section { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 7vw, 100px) clamp(18px, 4vw, 36px) 0; }
.section-narrow { max-width: 820px; }
.section-lead { color: var(--ink-soft); font-size: 17px; max-width: 56ch; margin-top: 18px; }

.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 16px;
}
.arc {
  width: 18px; height: 9px; flex: 0 0 18px;
  border: 2.5px solid var(--accent); border-bottom: 0; border-radius: 9px 9px 0 0;
}
.in .arc, .kicker.in .arc { animation: arc-draw 0.7s 0.15s var(--ease-out) both; }
@keyframes arc-draw { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* ---------- reveal: wspólny podpis wejść (tylko gdy działa JS) ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--reveal), transform 0.8s var(--reveal);
}
html.js .reveal.d2.in { transition-delay: 0.1s; }
html.js .reveal.d3.in { transition-delay: 0.2s; }
html.js .reveal.d4.in { transition-delay: 0.3s; }
html.js .reveal.settled { transition-delay: 0s; transition-duration: 0.2s; }

/* word-by-word (spany tworzy JS) */
.w { display: inline-block; }
html.js [data-words]:not(.in) .w { opacity: 0; }
html.js [data-words].in .w {
  animation: word-in 0.85s var(--reveal) both;
  animation-delay: calc(var(--i) * 0.045s);
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(50%); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(48px, 7vh, 96px) clamp(18px, 4vw, 36px) clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 20px;
}
.lead { color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 19.5px); max-width: 50ch; margin-top: 22px; }
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 34px; }
.hero-note { color: var(--ink-soft); font-size: 14px; margin-top: 26px; font-family: var(--serif); font-style: italic; }

/* okno demo - rozmowa agentów (gwiazda strony) */
.hero-stage { position: relative; }
.demo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.demo-top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
  font-size: 12.5px; color: var(--ink-soft);
}
.demo-arc { width: 16px; height: 8px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 8px 8px 0 0; }
.demo-room { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo-room b { font-weight: 600; color: var(--ink); }
.demo-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font-weight: 600; margin-left: auto; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 143, 99, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(111, 143, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 143, 99, 0); }
}
.demo-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-count b { color: var(--ink); font-weight: 600; }

.demo-feed { display: flex; flex-direction: column; gap: 11px; padding: 18px 16px 16px; transition: opacity 0.45s ease; }
.demo.fading .demo-feed { opacity: 0; }

.drow { display: grid; }
.drow > * { grid-area: 1 / 1; }
.drow .dmsg.from-b { justify-self: end; align-self: start; }
.drow .dtyping { justify-self: start; align-self: start; }

.dmsg { display: flex; gap: 9px; max-width: 94%; }
.dmsg.from-b { flex-direction: row-reverse; align-self: flex-end; }
.davatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; margin-top: 2px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 12.5px; font-weight: 700; color: #fdfbf7;
  background: var(--accent);
}
.davatar.k { background: var(--green); }
.davatar.hm { background: var(--ink); color: var(--paper); font-size: 10.5px; }
.dbubble {
  background: var(--surface-soft); border: 1px solid var(--line-soft);
  border-radius: 13px; padding: 9px 13px; font-size: 13.8px; line-height: 1.5; min-width: 0;
}
.dmsg.from-b .dbubble { background: var(--mine); border-color: var(--mine-line); }
.dwho { display: block; font-size: 11px; font-weight: 650; color: var(--ink-soft); margin-bottom: 3px; letter-spacing: 0.02em; }

.dtyping { display: flex; gap: 9px; align-items: center; align-self: flex-start; }
.ddots {
  display: inline-flex; gap: 5px; padding: 12px 14px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 13px;
}
.ddots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }

.dtask {
  display: flex; align-items: center; gap: 9px;
  margin-top: 3px; padding: 10px 13px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); border-left: 3px solid var(--green);
  border-radius: 11px; font-size: 13px; color: var(--ink-soft);
}
.dtask b { color: var(--ink); font-weight: 600; }
.dtask svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--green-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dtask-done {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green-ink); background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 2px 9px;
}

/* choreografia pętli: spokój przed .play, sekwencja po .play */
html.js .demo .dmsg, html.js .demo .dtask, html.js .demo .dtyping { opacity: 0; }
.demo.play .dmsg { animation: msg-pop 0.5s var(--reveal) both; animation-delay: var(--t); }
.demo.play .dtask { animation: task-pop 0.55s var(--spring) both; animation-delay: var(--t); }
.demo.play .dtyping { animation: typing-window var(--dur) ease both; animation-delay: var(--t); }
.demo.play .ddots i { animation: dot-bounce 1s ease-in-out infinite; }
.demo.play .ddots i:nth-child(2) { animation-delay: 0.2s; }
.demo.play .ddots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes msg-pop { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes task-pop { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes typing-window {
  0% { opacity: 0; transform: translateY(8px); }
  12% { opacity: 1; transform: none; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.94); }
}
@keyframes dot-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }

/* ---------- marquee ---------- */
.marquee-wrap { padding: clamp(44px, 6vw, 76px) 0 clamp(150px, 19vw, 240px); }
.marquee-label {
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px;
  position: relative; z-index: 1;
}
.marquee {
  display: flex; overflow: hidden; user-select: none; gap: 18px;
  position: relative; z-index: 1;
  max-width: min(1140px, 90vw); margin-inline: auto;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 18px; flex-shrink: 0; min-width: 100%;
  justify-content: space-around; align-items: center;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - 18px)); } }
.chip-l {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.chip-l svg { width: 17px; height: 17px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip-soon { color: var(--ink-soft); border-style: dashed; background: transparent; box-shadow: none; }

/* ---------- kinetic strip ---------- */
/* overflow-x clip tnie poziomy przesuw; clip-margin daje zapas w pionie na ogonki (ą, ż, ę),
   a większy line-height trzyma descendery w line-boxie - nie są cięte między sekcjami */
.kinetic { overflow-x: clip; overflow-clip-margin: 0.4em; padding: clamp(40px, 6vw, 84px) 0 clamp(10px, 1.6vw, 22px); }
.kinetic-line {
  display: inline-block; white-space: nowrap;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(56px, 9vw, 124px); line-height: 1.32;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--stroke-kinetic);
  transform: translateX(var(--kx, 0px));
  will-change: transform;
}
@supports not (-webkit-text-stroke: 1px black) {
  .kinetic-line { color: var(--stroke-kinetic); }
}

/* ---------- jak działa ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 48px; padding: 0; counter-reset: none;
}
.step {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 28px; box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute; top: 16px; right: 20px;
  font-family: var(--serif); font-size: 56px; line-height: 1; font-weight: 600;
  color: var(--accent); opacity: 0.16;
}
.step h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 20px; }
.step p { color: var(--ink-soft); font-size: 14.5px; }

.step-art { height: 88px; display: flex; align-items: center; }
.art-socket {
  width: 72px; height: 56px; border: 1.5px dashed var(--line);
  border-radius: 12px; display: grid; place-items: center; background: var(--surface-soft);
}
.art-plug { width: 30px; height: 30px; fill: none; stroke: var(--accent-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: plug-in 4.5s ease-in-out infinite; }
@keyframes plug-in {
  0%, 12% { transform: translateY(-12px); opacity: 0.45; }
  30%, 78% { transform: none; opacity: 1; }
  92%, 100% { transform: translateY(-12px); opacity: 0.45; }
}
.art-invite {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-wash); border: 1px solid var(--human-line);
  color: var(--accent-ink); border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 600;
}
.art-invite svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.art-copied {
  position: absolute; top: -14px; right: -10px;
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--surface); border: 1px solid var(--line); color: var(--green-ink);
  border-radius: 999px; padding: 2px 9px;
  animation: copied-pop 4.5s ease-in-out infinite;
}
@keyframes copied-pop {
  0%, 38% { opacity: 0; transform: translateY(6px) scale(0.85); }
  48%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-4px) scale(0.9); }
}
.art-watch {
  position: relative; width: 96px; height: 60px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 11px 12px; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 7px;
}
.art-dot { width: 9px; height: 9px; border-radius: 50%; }
.art-dot.a { background: var(--accent); animation: blink-a 3s ease-in-out infinite; }
.art-dot.b { background: var(--green); animation: blink-a 3s ease-in-out 1.5s infinite; }
@keyframes blink-a { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.art-bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--line-soft); width: 84%; }
.art-bar.short { width: 56%; }

/* ---------- zastosowania ---------- */
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.use {
  background: var(--surface); border: 1px solid var(--line); border-radius: 15px;
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform 0.22s var(--spring), box-shadow 0.2s ease, border-color 0.2s ease;
}
.use:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--human-line); }
.use h3 { font-family: var(--serif); font-size: 18.5px; }
.use p { color: var(--ink-soft); font-size: 14px; flex: 1; }
.use-tag {
  align-self: flex-start; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-wash); border-radius: 999px; padding: 3px 10px;
}

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.cell {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 17px;
  padding: 22px; box-shadow: var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.22s ease-out, box-shadow 0.2s ease;
  will-change: transform;
}
.cell:hover { box-shadow: var(--shadow-md); }
.cell::after {  /* shine podążający za kursorem */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.25s ease;
}
[data-theme="dark"] .cell::after { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 235, 220, 0.07), transparent 60%); }
.cell:hover::after { opacity: 1; }
.cell-wide { grid-column: span 2; }
.cell h3 { font-family: var(--serif); font-size: 19px; margin: 16px 0 7px; }
.cell p { color: var(--ink-soft); font-size: 14px; max-width: 52ch; }
/* badge "wkrótce" na kaflach funkcji roadmapy (poza <h3>, bo applyLang nadpisuje textContent) */
.cell-soon {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface);
  border: 1.5px dashed var(--line); border-radius: 999px; padding: 3px 9px;
}

.cell-art {
  position: relative; height: 110px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--line-soft);
  overflow: hidden; display: grid; place-items: center;
}
.cell-art > svg { width: 34px; height: 34px; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* transkrypt: pionowy marquee bąbelków */
.feed-loop { place-items: stretch; padding: 0 14px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.floop-inner { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; animation: floop 16s linear infinite; }
.feed-loop:hover .floop-inner { animation-play-state: paused; }
@keyframes floop { to { transform: translateY(calc(-50% - 4px)); } }
.fbub {
  font-size: 12px; line-height: 1.45; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 6px 11px; width: fit-content; max-width: 78%;
}
.fbub.b { align-self: flex-end; background: var(--mine); border-color: var(--mine-line); }

/* task board: karta wędruje po kolumnach */
.board-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; place-items: stretch; }
.mini-col { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; }
.mini-col i {
  position: absolute; top: 6px; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mini-card {
  position: absolute; top: 50%; left: 6.5%; width: 20%; height: 30px; margin-top: -8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  box-shadow: var(--shadow-sm); display: grid; place-items: center;
  animation: card-hop 9s var(--ease-out) infinite;
}
.mini-card svg { width: 13px; height: 13px; fill: none; stroke: var(--green-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: card-check 9s ease infinite; }
@keyframes card-hop {
  0%, 26% { transform: translateX(0); }
  33%, 59% { transform: translateX(168%); }
  66%, 92% { transform: translateX(336%); }
  97%, 100% { transform: translateX(0); }
}
@keyframes card-check { 0%, 63% { opacity: 0; } 70%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* artefakty: chip pliku wpada cyklicznie */
.afile {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
  animation: afile-in 6s var(--ease-out) infinite;
}
.afile svg { width: 17px; height: 17px; fill: none; stroke: var(--accent-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.afile em { font-style: normal; font-size: 10.5px; color: var(--ink-soft); font-weight: 500; }
@keyframes afile-in {
  0% { opacity: 0; transform: translateY(18px) scale(0.94); }
  10%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

/* inbox: badge pulsuje */
.inbox-loop > svg { animation: none; }
.inbox-badge {
  position: absolute; top: 26px; right: 34%;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 2px 8px;
  animation: badge-pop 5s var(--spring) infinite;
}
[data-theme="dark"] .inbox-badge { color: #2a1a10; }
@keyframes badge-pop {
  0%, 18% { opacity: 0; transform: scale(0.4); }
  28%, 80% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.7); }
}

/* guardraile: tarcza + stempel STOP BRIDGE */
.gshield { animation: shield-pulse 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes shield-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.gstamp {
  position: absolute; right: 14px; bottom: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--accent-ink); border: 1.5px solid var(--accent-ink); border-radius: 6px;
  padding: 3px 8px; transform: rotate(-7deg);
  animation: stamp 7s ease infinite;
}
@keyframes stamp {
  0%, 52% { opacity: 0; transform: rotate(-7deg) scale(1.5); }
  58%, 88% { opacity: 1; transform: rotate(-7deg) scale(1); }
  96%, 100% { opacity: 0; transform: rotate(-7deg) scale(1); }
}

/* dane w UE: pierścienie pulsu */
.eu-ring {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0;
  animation: ring 3.2s ease-out infinite;
}
.eu-ring.r2 { animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: 0.5; transform: scale(0.55); } 80%, 100% { opacity: 0; transform: scale(1.5); } }

/* pamięć między pokojami: dwa pokoje, iskra pamięci płynie między nimi */
.mem-loop { display: flex; align-items: center; justify-content: center; gap: 38px; }
.mem-loop .mroom { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); border: 1.5px solid var(--accent-ink); }
.mem-loop .mdot {
  position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(217, 119, 87, 0.6);
  animation: mem-flow 3.6s var(--ease-out) infinite;
}
@keyframes mem-flow {
  0%, 8% { transform: translateX(-30px) scale(0.6); opacity: 0; }
  24% { opacity: 1; }
  50% { transform: translateX(30px) scale(1); opacity: 1; }
  74% { opacity: 1; }
  90%, 100% { transform: translateX(30px) scale(0.6); opacity: 0; }
}

/* persony: nakładające się awatary ról, każdy po kolei wychodzi do przodu */
.persona-loop { display: flex; align-items: center; justify-content: center; }
.persona-loop .pav {
  position: relative; width: 40px; height: 40px; border-radius: 50%; margin-left: -12px;
  display: grid; place-items: center; font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--accent-ink); background: var(--surface); border: 1.5px solid var(--accent-ink);
  box-shadow: var(--shadow-sm); animation: persona-cycle 5.4s ease infinite;
}
.persona-loop .pav.a { margin-left: 0; }
.persona-loop .pav.b { animation-delay: 1.8s; }
.persona-loop .pav.c { animation-delay: 3.6s; }
@keyframes persona-cycle {
  0%, 70%, 100% { transform: translateY(0) scale(1); z-index: 0; }
  12%, 46% { transform: translateY(-9px) scale(1.08); z-index: 3; background: var(--accent); color: #fff; border-color: var(--accent); }
}

/* podsumowanie pokoju: linie streszczenia dopisują się po kolei, ostatnia w akcencie */
.summary-loop .scard {
  width: 90px; padding: 13px; background: var(--surface); border: 1.5px solid var(--accent-ink);
  border-radius: 10px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px;
}
.summary-loop .sline { height: 5px; border-radius: 3px; background: var(--accent-ink); opacity: 0.5; transform-origin: left; animation: sline-in 4.4s ease infinite; }
.summary-loop .sline.l1 { width: 100%; }
.summary-loop .sline.l2 { width: 84%; animation-delay: 0.5s; }
.summary-loop .sline.l3 { width: 62%; opacity: 1; animation-delay: 1s; }
@keyframes sline-in { 0%, 10% { transform: scaleX(0); } 32%, 100% { transform: scaleX(1); } }

/* ---------- dashboard ---------- */
.dash-stage { perspective: 1400px; margin-top: 44px; }
html.js .dash-stage .dash { transform: rotateX(14deg) scale(0.96); opacity: 0.55; }
html.js .dash-stage.in .dash {
  transform: none; opacity: 1;
  transition: transform 1.1s var(--reveal), opacity 0.9s ease;
}
.dash {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform-origin: 50% 100%;
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft);
}
.dash-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 600; font-size: 16px; }
.dash-brand .brand-arc { width: 16px; height: 8px; flex-basis: 16px; border-width: 2px; }
.dash-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 12px;
}
.presence { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.presence.on { animation: pulse 2.2s ease-out infinite; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; padding: 16px; }
.dash-panel { background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 12px; padding: 13px; }
.dash-panel h4 {
  margin: 0 0 11px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.dash-side { display: flex; flex-direction: column; gap: 14px; }
.dash-msg { display: flex; gap: 8px; margin-bottom: 10px; }
.dash-msg:last-child { margin-bottom: 0; }
.dash-msg .dbubble { font-size: 13px; padding: 8px 11px; background: var(--surface); }
.dash-msg.human .dbubble { background: var(--human-wash); border-color: var(--human-line); border-left: 3px solid var(--accent); }
.tag-human {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 5px; padding: 1px 6px; margin-left: 5px;
}
[data-theme="dark"] .tag-human { color: #2a1a10; }
.dash-task {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px; margin-bottom: 7px;
}
.dash-task:last-child { margin-bottom: 0; }
.dash-task em { font-style: normal; margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.tdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.tdot.doing { background: var(--amber); }
.tdot.done { background: var(--green); }
.dash-art { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.dash-art svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- cennik ---------- */
.badge-wip {
  display: inline-block; margin-right: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber); border: 1.5px dashed var(--amber); border-radius: 999px; padding: 3px 11px;
  vertical-align: 1px;
}
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.22s ease-out, box-shadow 0.2s ease;
  will-change: transform;
}
.plan:hover { box-shadow: var(--shadow-md); }
.plan h3 { font-family: var(--serif); font-size: 22px; }
.plan-hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; padding: 4px 14px;
}
.plan-price { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.plan-price b { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; }
.plan-price span { color: var(--ink-soft); font-size: 14px; }
.plan-tag { color: var(--ink-soft); font-size: 13.5px; min-height: 2.6em; }
.plan ul { display: flex; flex-direction: column; gap: 8px; flex: 1; margin: 4px 0 10px; }
.plan li { position: relative; padding-left: 24px; font-size: 14px; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 9px; height: 5px; border-left: 2px solid var(--green-ink); border-bottom: 2px solid var(--green-ink);
  transform: rotate(-45deg);
}
.enterprise { margin-top: 30px; text-align: center; color: var(--ink-soft); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; display: flex; flex-direction: column; gap: 11px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: 0 20px; box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--human-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  list-style: none; cursor: pointer; touch-action: manipulation;
  padding: 17px 0; font-weight: 600; font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--spring);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { color: var(--ink-soft); font-size: 14.5px; padding: 0 0 18px; max-width: 64ch; }
.faq details[open] p { animation: faq-in 0.4s var(--reveal) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- zapisy ---------- */
.signup { text-align: center; padding-bottom: clamp(40px, 6vw, 80px); }
.signup .section-lead { margin-inline: auto; }
.signup-form { max-width: 460px; margin: 34px auto 0; text-align: left; }
.signup-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.signup-row { display: flex; gap: 10px; }
.signup-row input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 16px;  /* >=16px - iOS nie zoomuje */
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup-row input::placeholder { color: var(--ink-faint); }
.signup-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18); }
.signup-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }

/* ---------- stopka ---------- */
.footer { border-top: 1px solid var(--line-soft); margin-top: clamp(30px, 4vw, 50px); position: relative; z-index: 2; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 26px clamp(18px, 4vw, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer .brand { font-size: 17px; }
.footer p { color: var(--ink-soft); font-size: 13px; }
.footer nav { display: flex; gap: 18px; }
.footer nav a { color: var(--ink-soft); font-size: 13.5px; }
.footer nav a:hover { color: var(--accent-ink); }

/* ---------- responsywność ---------- */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 34px; }
  .hero-copy { text-align: left; }
  .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .plan-hot { order: -1; }
  .dash-grid { grid-template-columns: 1fr; }
  .topnav { display: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .cell-wide { grid-column: auto; }
  .uses { grid-template-columns: 1fr; }
  .signup-row { flex-direction: column; }
  .signup-row .btn { width: 100%; }
  .hero-cta { gap: 14px; }
  .demo-count { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion: wszystko stoi, wszystko widać ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html.js .reveal, html.js [data-words]:not(.in) .w { opacity: 1; transform: none; }
  html.js .demo .dmsg, html.js .demo .dtask { opacity: 1; }
  html.js .demo .dtyping { display: none; }
  html.js .dash-stage .dash { transform: none; opacity: 1; }
  .kinetic-line { transform: none; }
  .blob, .spotlight { display: none; }
}

/* ===== v2: nić mostu - szlak połączeń przez stronę ===== */
.thread { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; display: none; }
html.js .thread { display: block; }
.thread-base { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 8; }
.thread-draw {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(217, 119, 87, 0.4));
}
.thread-node {
  fill: var(--surface); stroke: var(--ink-faint); stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease;
  transform-box: fill-box; transform-origin: center;
}
.thread-node.lit { fill: var(--accent); stroke: var(--accent); animation: node-pop 0.45s var(--spring); }
@keyframes node-pop { from { transform: scale(0.5); } to { transform: scale(1); } }
.thread-dot {
  position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: 0.5; z-index: 1; pointer-events: none;
  box-shadow: 0 0 12px rgba(217, 119, 87, 0.55);
  offset-rotate: 0deg;
  animation: dot-travel 40s linear infinite;
}
@keyframes dot-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (max-width: 900px) { html.js .thread, .thread-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { .thread, .thread-dot { display: none !important; } }

/* ===== v3: ilustracje Higgsfield (wariant jasny + ciemny) =====
   Krawędzie "kartki" z generacji wygładzone miękką maską (feather ze wszystkich stron),
   zamiast twardego clip-path - granica rozpływa się w tło. Light: multiply na papierze;
   dark: screen, by terakota świeciła na grafitowym tle. */
.marquee-wrap { position: relative; }
.signup { position: relative; }

/* ===== v4.2: most = sylwetka z grafiki przemalowana naszą terakotą (świeci sam most, bez prostokątnego tła) ===== */
.bridge-svg {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: min(1140px, 90vw); height: auto; overflow: visible;
  pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.bridge-paint .paint-fill { fill: #b0552f; }
[data-theme="dark"] .bridge-paint .paint-fill { fill: url(#paintD); }
[data-theme="dark"] .bridge-paint { filter: drop-shadow(0 0 5px rgba(229,142,86,.5)) drop-shadow(0 0 12px rgba(229,142,86,.26)); }
.bspark { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
[data-theme="dark"] .bspark { filter: drop-shadow(0 0 7px var(--accent)); }
@media (prefers-reduced-motion: reduce) { .bspark { display: none; } }
@media (max-width: 640px) { .bridge-svg { bottom: -8px; } }

/* ===== v3: konstelacja SVG za finałowym CTA (ten sam schemat light/dark) =====
   Świetliki na SMIL animateMotion (powoli, równo). Linie i węzły delikatnie pulsują.
   Budzi się mocniejszym terakotowym pulsem, gdy nić mostu dojedzie na dół (.awake z JS). */
.constellation {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: min(1040px, 96vw); height: auto; overflow: visible;
  pointer-events: none; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.cline { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.4; animation: c-shimmer 7s ease-in-out infinite; }
.clines use:nth-child(2) { animation-delay: -1.6s; }
.clines use:nth-child(3) { animation-delay: -3.1s; }
.clines use:nth-child(4) { animation-delay: -4.4s; }
.clines use:nth-child(5) { animation-delay: -5.7s; }
@keyframes c-shimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.58; } }
.cnode { fill: var(--accent); opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: c-pulse 4.6s ease-in-out infinite; }
.cnode.green { fill: var(--green); }
.cnodes circle:nth-child(2n) { animation-delay: -1.4s; }
.cnodes circle:nth-child(3n) { animation-delay: -2.7s; }
.cnodes circle:nth-child(4n) { animation-delay: -3.6s; }
@keyframes c-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.82); } 50% { opacity: 0.95; transform: scale(1.1); } }
.cspark { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
/* dark: ten sam kształt, mocniejsze świecenie na graficie */
[data-theme="dark"] .cline { opacity: 0.5; }
[data-theme="dark"] .cspark { filter: drop-shadow(0 0 7px var(--accent)); }
[data-theme="dark"] .cnode { filter: drop-shadow(0 0 4px var(--accent)); }
/* obudzenie - delikatny, ale mocniejszy puls (nie przyspieszenie) */
.constellation.awake .cline { animation-name: c-shimmer-awake; }
.constellation.awake .cnode { animation-name: c-pulse-awake; }
.constellation.awake .cspark { filter: drop-shadow(0 0 9px var(--accent)); }
@keyframes c-shimmer-awake { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes c-pulse-awake { 0%, 100% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .cline, .cnode { animation: none; } }

/* ===== v3: przełącznik cennika miesięcznie / rocznie ===== */
.billing { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
.billing-switch {
  position: relative; display: grid; grid-auto-flow: column;
  padding: 4px; background: var(--surface-soft);
  border: 1px solid var(--line); border-radius: 999px;
}
.billing-opt {
  position: relative; z-index: 1; min-width: 116px;
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 22px; border-radius: 999px; cursor: pointer; touch-action: manipulation;
  transition: color 0.2s ease;
}
.billing-opt:hover { color: var(--ink); }
.billing-opt.is-active { color: var(--btn-ink); }
.billing-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 999px;
  background: var(--btn-bg); box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--spring);
}
.billing.is-yearly .billing-thumb { transform: translateX(100%); }
.billing-save {
  font-size: 12.5px; font-weight: 600; color: var(--green-ink);
  background: var(--mine); border: 1px solid var(--mine-line);
  border-radius: 999px; padding: 4px 13px;
  opacity: 0.5; transition: opacity 0.25s ease, transform 0.25s var(--spring);
}
.billing.is-yearly .billing-save { opacity: 1; transform: scale(1.04); }
.plan-eq {
  display: block; min-height: 1.15em; margin: -7px 0 2px;
  font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.plan-amount { display: inline-block; font-variant-numeric: tabular-nums; } /* tabular - liczba nie skacze w trakcie count-up */
@media (prefers-reduced-motion: reduce) { .billing-thumb { transition: none; } }