/*
 * Strony produktów: Tablica, Panel Biznesu, Planer Operacyjny, Algebra i Spółka
 * (szablon src/product.mjs). Ładowane tylko tam; każda klasa ma przedrostek tb-,
 * więc nic stąd nie dotyka reszty wizytówki.
 *
 * Kolory i fonty z wizytówki (grafit, pomarańczowy akcent, Bricolage Grotesque).
 * Drugi kolor tła (--tb-navy) każdy produkt ustawia sam: granat tablicy,
 * turkus Panelu, zieleń mapy Planera, zieleń szkolnej tablicy Algebry.
 * Promienie: obudowy 28px, wnętrza 22px, zrzuty w środku 14-16px, przyciski pigułki.
 * Ruch: tylko transform i opacity; przy prefers-reduced-motion wszystko stoi.
 */

.tb {
  --tb-navy: 46 84 160;
  --tb-orange: 255 138 61;
  --tb-ease: cubic-bezier(.22, 1, .36, 1);
  --tb-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tb-R: 28px;
  --tb-pad: 6px;
  --tb-hair: rgb(255 255 255 / .075);
  --tb-core: #15171c;
  --tb-sec: clamp(6rem, 11vw, 9.5rem);
}

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

.tb-h2 {
  font-size: clamp(2rem, 4.3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 20ch;
}
.tb-body { font-size: clamp(1.05rem, 1.35vw, 1.18rem); color: var(--ink-soft); max-width: 46ch; }
.tb-sec { padding-top: var(--tb-sec); }

/* ── Przyciski: pigułka z ikoną w osobnym kółku ─────────────────────────── */

.tb-btn {
  display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap;
  padding: 0.4rem 0.4rem 0.4rem 1.2rem; border-radius: 999px;
  font-size: 0.98rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.5s var(--tb-ease), background-color 0.35s var(--tb-ease), border-color 0.35s var(--tb-ease), box-shadow 0.5s var(--tb-ease);
}
.tb-btn-ico {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-size: 1rem; line-height: 1;
  transition: transform 0.55s var(--tb-spring), background-color 0.35s var(--tb-ease);
}
.tb-btn:hover .tb-btn-ico { transform: translate(3px, -2px) scale(1.07); }
.tb-btn[href^="#"]:hover .tb-btn-ico { transform: translateY(3px) scale(1.07); }
.tb-btn:active { transform: scale(0.97); }
.tb-btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 14px 34px -14px rgb(var(--tb-orange) / .75);
}
.tb-btn-primary .tb-btn-ico { background: rgb(26 17 6 / .13); }
.tb-btn-primary:hover { background: #ff9b57; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 18px 40px -14px rgb(var(--tb-orange) / .9); }
.tb-btn-ghost { color: var(--ink); background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .14); }
.tb-btn-ghost .tb-btn-ico { background: rgb(255 255 255 / .08); color: var(--accent); }
.tb-btn-ghost:hover { border-color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .06); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.tb-hero { position: relative; isolation: isolate; overflow: clip; padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.tb-hero .crumbs { position: relative; }

/* Płynny gradient: trzy miękkie plamy światła, które powoli dryfują. */
.tb-mesh { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.tb-blob { position: absolute; border-radius: 50%; will-change: transform; }
.tb-b1 {
  width: min(78vw, 1050px); aspect-ratio: 1; right: -22%; top: -38%;
  background: radial-gradient(closest-side, rgb(var(--tb-orange) / .30), rgb(var(--tb-orange) / .08) 55%, transparent);
  animation: tbDrift1 22s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
.tb-b2 {
  width: min(90vw, 1200px); aspect-ratio: 1; left: -38%; top: 8%;
  background: radial-gradient(closest-side, rgb(var(--tb-navy) / .42), rgb(var(--tb-navy) / .12) 55%, transparent);
  animation: tbDrift2 28s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
.tb-b3 {
  width: min(55vw, 720px); aspect-ratio: 1; left: 34%; top: 38%;
  background: radial-gradient(closest-side, rgb(255 179 92 / .16), transparent);
  animation: tbDrift3 19s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
@keyframes tbDrift1 { to { transform: translate3d(-9%, 12%, 0) scale(1.08); } }
@keyframes tbDrift2 { to { transform: translate3d(10%, -6%, 0) scale(0.94); } }
@keyframes tbDrift3 { to { transform: translate3d(-14%, -10%, 0) scale(1.15); } }

/* Kratka z zeszytu, wygaszana ku brzegom. */
.tb-paper {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 34px 34px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 20%, transparent 75%);
}
.tb-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.tb-hero-in { padding-top: clamp(2rem, 5vw, 3.6rem); }
.tb-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.38rem 0.95rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  color: #ffc39b; background: rgb(var(--tb-orange) / .09); border: 1px solid rgb(var(--tb-orange) / .28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}
.tb-h1 {
  margin-top: 1.4rem; max-width: 15.5em;
  font-size: clamp(2.35rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.034em;
}
.tb-hero-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}
.tb-lede { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--ink-soft); max-width: 34ch; }
.tb-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

/* Scena: przeglądarka z filmem w perspektywie, tablet z przodu. */
.tb-stage { position: relative; perspective: 2000px; --tx: 0deg; --ty: 0deg; }
.tb-device { margin: 0; }
.tb-bezel {
  padding: 7px; border-radius: var(--tb-R);
  background: linear-gradient(180deg, rgb(255 255 255 / .11), rgb(255 255 255 / .03) 60%);
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .14),
    0 60px 120px -40px rgb(0 0 0 / .9),
    0 40px 80px -50px rgb(var(--tb-orange) / .45);
}
.tb-screen { border-radius: calc(var(--tb-R) - 7px); overflow: hidden; background: #0b0c10; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
.tb-browser {
  transform-origin: 30% 50%;
  transform: rotateX(calc(7deg + var(--ty))) rotateY(calc(-11deg + var(--tx))) rotateZ(0.6deg);
  transition: transform 1.2s var(--tb-ease);
}
.tb-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; background: #121419; border-bottom: 1px solid rgb(255 255 255 / .05); }
.tb-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .12); }
.tb-bar p {
  margin-inline: auto; transform: translateX(-20px);
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0.01em;
  padding: 0.12rem 0.9rem; border-radius: 999px; background: rgb(255 255 255 / .05);
}
.tb-film { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #0b0c10; }

.tb-tablet {
  position: absolute; width: 36%; left: -9%; bottom: -17%;
  transform: translateZ(80px) rotate(-5deg) translate3d(calc(var(--tx) * -3), calc(var(--ty) * 3), 0);
  transition: transform 1.2s var(--tb-ease);
}
.tb-tablet .tb-bezel { padding: 9px; border-radius: 24px; background: linear-gradient(180deg, #2a2d34, #17191e); }
.tb-tablet .tb-screen { border-radius: 16px; }
.tb-tablet img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Wejście hero: czysty CSS, działa także bez JS. */
.tb-in { animation: tbUp 1s var(--tb-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.tb-stage { animation: tbStage 1.5s var(--tb-ease) 0.35s both; }
.tb-tablet { animation: tbTablet 1.4s var(--tb-ease) 0.8s both; }
@keyframes tbUp { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
@keyframes tbStage { from { opacity: 0; transform: translate3d(0, 70px, 0) rotateX(14deg); } }
@keyframes tbTablet { from { opacity: 0; translate: -30px 50px; } }

@media (max-width: 900px) {
  .tb-hero-row { grid-template-columns: 1fr; }
  .tb-lede { max-width: 42ch; }
  .tb-stage { margin: 1.5rem 0 3.5rem; }
  .tb-browser { transform: rotateX(4deg) rotateY(-4deg); }
  .tb-tablet { width: 40%; left: auto; right: -3%; bottom: -22%; transform: rotate(4deg); }
}
@media (max-width: 520px) {
  .tb-bezel { padding: 5px; border-radius: 18px; }
  .tb-screen { border-radius: 13px; }
  .tb-bar { height: 26px; padding-inline: 10px; gap: 5px; }
  .tb-bar span { width: 7px; height: 7px; }
  .tb-bar p { font-size: 0.64rem; transform: translateX(-12px); }
  .tb-browser { transform: none; }
  .tb-tablet { width: 46%; right: -2%; bottom: -30%; }
  .tb-tablet .tb-bezel { padding: 5px; border-radius: 14px; }
  .tb-tablet .tb-screen { border-radius: 10px; }
  .tb-cta .tb-btn { flex: 1 1 auto; justify-content: space-between; }
}

/* ── Pasek faktów pod hero ───────────────────────────────────────────────── */

.tb-facts-sec { border-block: 1px solid var(--line); background: rgb(255 255 255 / .012); }
.tb-facts { margin-block: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-facts > div { padding: 1.5rem 1.5rem 1.5rem 0; }
.tb-facts > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.tb-facts dt { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.tb-facts dd { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--ink); line-height: 1.45; }
@media (max-width: 900px) {
  .tb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-facts > div { padding: 1.2rem 1rem 1.2rem 0; }
  .tb-facts > div + div { padding-left: 0; border-left: 0; }
  .tb-facts > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .tb-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ── Problem ─────────────────────────────────────────────────────────────── */

.tb-statement { font-size: clamp(2.1rem, 5vw, 4.1rem); max-width: 17ch; letter-spacing: -0.035em; }
.tb-problem-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem);
}
.tb-nope { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; justify-items: start; }
.tb-nope li {
  padding: 0.65rem 1.15rem; border-radius: 999px; font-size: 0.98rem; color: var(--muted);
  background: rgb(255 255 255 / .03); border: 1px solid var(--tb-hair);
  text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px;
}
.tb-nope li:nth-child(1) { transform: rotate(-2deg); }
.tb-nope li:nth-child(2) { transform: rotate(1.5deg) translateX(1.5rem); }
.tb-nope li:nth-child(3) { transform: rotate(-0.8deg) translateX(0.5rem); }
.tb-origin {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 64ch; padding-left: 1.25rem;
  border-left: 2px solid var(--accent); color: var(--ink-soft); font-size: 1rem;
}
@media (max-width: 900px) {
  .tb-problem-row { grid-template-columns: 1fr; }
  .tb-nope li { transform: none !important; }
}

/* ── Jak działa ──────────────────────────────────────────────────────────── */

.tb-steps {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem);
}
.tb-steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px;
  background: linear-gradient(90deg, var(--accent), rgb(var(--tb-orange) / .35) 60%, rgb(var(--tb-navy) / .6));
  transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--tb-ease) 0.2s;
}
.tb-steps.is-in::before, html:not(.js) .tb-steps::before { transform: scaleX(1); }
.tb-step-no {
  position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--accent);
  background: var(--bg); border: 1px solid rgb(var(--tb-orange) / .45);
  box-shadow: 0 0 0 6px var(--bg);
}
.tb-steps h3 { margin-top: 1.5rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; }
.tb-steps p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.98rem; max-width: 34ch; }
@media (max-width: 900px) {
  .tb-steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .tb-steps::before { left: 1.5rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--accent), rgb(var(--tb-navy) / .6)); }
  .tb-steps.is-in::before, html:not(.js) .tb-steps::before { transform: scaleY(1); }
  .tb-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.2rem; }
  .tb-step-no { grid-row: span 2; }
  .tb-steps h3 { margin-top: 0.6rem; }
}

/* ── Funkcje: siatka bento, obudowa + wnętrze ─────────────────────────────── */

.tb-bento {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.tb-cell {
  padding: var(--tb-pad); border-radius: var(--tb-R);
  background: rgb(255 255 255 / .028); border: 1px solid rgb(255 255 255 / .06);
}
.tb-core {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  border-radius: calc(var(--tb-R) - var(--tb-pad));
  background: linear-gradient(180deg, #17191f, #131519);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  transition: transform 0.7s var(--tb-ease), box-shadow 0.7s var(--tb-ease);
}
.tb-core::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--tb-orange) / .13), transparent 65%);
  transition: opacity 0.5s var(--tb-ease);
}
.tb-cell:hover .tb-core { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 30px 60px -35px rgb(0 0 0 / .9); }
.tb-cell:hover .tb-core::before { opacity: 1; }
.tb-cell h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; }
.tb-cell p { margin-top: 0.55rem; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.55; }

/* Rozmiary komórek; grid-auto-flow: dense upycha małe komórki w wolne miejsca. */
.tb-bento { grid-auto-flow: dense; }
.tb-s-big { grid-column: span 2; grid-row: span 2; }
.tb-s-tall { grid-row: span 2; }
.tb-s-wide { grid-column: span 2; }
.tb-s-full { grid-column: 1 / -1; }

/* Każda komórka z obrazem ma własne tło, żeby siatka nie była szara. */
.tb-media .tb-core { background: radial-gradient(110% 90% at 100% 100%, rgb(var(--tb-navy) / .42), transparent 62%), linear-gradient(180deg, #17191f, #121419); }
.tb-media:nth-child(3n) .tb-core { background: radial-gradient(100% 80% at 0% 100%, rgb(var(--tb-orange) / .16), transparent 60%), linear-gradient(180deg, #17191f, #131519); }
.tb-c-plot .tb-core { background: radial-gradient(120% 90% at 100% 100%, rgb(var(--tb-navy) / .5), transparent 60%), linear-gradient(180deg, #17191f, #121419); }
.tb-c-formula .tb-core { background: radial-gradient(110% 70% at 50% 110%, rgb(var(--tb-orange) / .22), transparent 60%), linear-gradient(180deg, #17191f, #131519); }
.tb-c-solid .tb-core { background: radial-gradient(90% 120% at 0% 100%, rgb(var(--tb-navy) / .45), transparent 60%), linear-gradient(180deg, #17191f, #121419); }
.tb-c-sheet .tb-core { background: radial-gradient(70% 140% at 100% 0%, rgb(255 179 92 / .14), transparent 60%), linear-gradient(180deg, #17191f, #131519); }

.tb-media .tb-core { display: flex; gap: 1.5rem; }
.tb-clip {
  flex: none; border-radius: 16px; overflow: hidden; background: #0b0c10;
  border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9);
}
.tb-clip video { width: 100%; height: 100%; object-fit: cover; }
.tb-c-plot .tb-core { align-items: stretch; }
.tb-c-plot .tb-copy { flex: 1; }
.tb-c-plot .tb-clip { width: 52%; aspect-ratio: 1 / 1.05; }
.tb-c-plot .tb-clip video { object-position: 50% 18%; }
.tb-c-formula .tb-core { flex-direction: column; }
.tb-c-formula .tb-clip { margin-top: auto; aspect-ratio: 9 / 13; width: 100%; }
.tb-c-formula .tb-clip video { object-position: 50% 100%; transform: scale(1.45); transform-origin: 50% 62%; }
.tb-c-solid .tb-core { align-items: center; }
.tb-c-solid .tb-copy { flex: 1; }
.tb-c-solid .tb-clip { width: 40%; aspect-ratio: 4 / 3; }
.tb-c-solid .tb-clip video { object-position: 50% 38%; transform: scale(1.35); transform-origin: 50% 55%; }

/* Zrzut ekranu w komórce: wychodzi spod tekstu i ucieka za prawy dolny róg. */
.tb-land .tb-core { display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: 0; padding-right: 0; }
.tb-land .tb-copy { padding-right: clamp(1.3rem, 2.2vw, 1.8rem); }
.tb-land .tb-clip {
  margin-top: auto; border-radius: 14px 0 0 0; border-width: 1px 0 0 1px; box-shadow: none;
  aspect-ratio: 16 / 10;
}
.tb-land .tb-clip img, .tb-land .tb-clip video { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform 0.9s var(--tb-ease); }
.tb-land:hover .tb-clip img, .tb-land:hover .tb-clip video { transform: translate3d(-5px, -5px, 0); }
.tb-s-wide.tb-land .tb-core, .tb-s-full.tb-land .tb-core { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
.tb-s-wide.tb-land .tb-copy, .tb-s-full.tb-land .tb-copy { padding-bottom: clamp(1.3rem, 2.2vw, 1.8rem); }
.tb-s-wide.tb-land .tb-clip, .tb-s-full.tb-land .tb-clip { align-self: end; aspect-ratio: 16 / 9; }
/* Telefon w komórce: pionowy zrzut przycięty od góry. */
.tb-phone-cell .tb-core { flex-direction: column; padding-bottom: 0; }
.tb-phone-cell .tb-clip { margin: auto auto 0; width: min(62%, 240px); aspect-ratio: 9 / 13; border-radius: 26px 26px 0 0; border-width: 6px 6px 0; border-color: #25282f; }
.tb-phone-cell .tb-clip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

@media (max-width: 1000px) {
  .tb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-s-big, .tb-s-wide, .tb-s-full { grid-column: 1 / -1; }
  .tb-s-big { grid-row: auto; }
}
@media (max-width: 640px) {
  .tb-bento { grid-template-columns: 1fr; }
  .tb-c-plot .tb-clip video { object-position: 50% 22%; }
  .tb-bento > li { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .tb-s-wide.tb-land .tb-core, .tb-s-full.tb-land .tb-core { grid-template-columns: 1fr; gap: 1.2rem; }
  .tb-s-wide.tb-land .tb-copy, .tb-s-full.tb-land .tb-copy { padding-bottom: 0; }
  .tb-media .tb-core { flex-direction: column; }
  .tb-c-plot .tb-copy { align-self: stretch; }
  .tb-c-plot .tb-clip, .tb-c-formula .tb-clip { width: 100%; aspect-ratio: 4 / 4.2; }
  .tb-c-solid .tb-clip { width: 100%; }
}

/* ── Liczby z testu ──────────────────────────────────────────────────────── */

.tb-stats {
  position: relative; isolation: isolate; overflow: clip; margin-top: var(--tb-sec);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(60% 90% at 85% 0%, rgb(var(--tb-orange) / .16), transparent 70%),
    radial-gradient(60% 100% at 5% 100%, rgb(var(--tb-navy) / .35), transparent 70%),
    var(--bg-lift);
}
.tb-stats::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.tb-nums { margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.tb-nums > div { border-top: 1px solid rgb(var(--tb-orange) / .4); padding-top: 1.3rem; }
.tb-nums dt {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 0.95;
  font-size: clamp(3rem, 7vw, 5.6rem); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tb-nums dd { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 24ch; }
.tb-note { margin-top: 2.5rem; font-size: 0.85rem; color: var(--muted); max-width: 82ch; }
@media (max-width: 900px) { .tb-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.2rem; } }

/* ── Zrzuty w pasku przewijanym w bok ────────────────────────────────────── */

.tb-rail-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; }
.tb-rail-nav { display: none; gap: 0.5rem; flex: none; }
.js .tb-rail-nav { display: flex; }
.tb-rail-nav button {
  width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; font: inherit; font-size: 1.1rem; color: var(--ink);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .14);
  transition: transform 0.45s var(--tb-spring), border-color 0.3s var(--tb-ease), background-color 0.3s var(--tb-ease);
}
.tb-rail-nav button:hover { border-color: var(--accent); background: rgb(var(--tb-orange) / .1); transform: scale(1.06); }
.tb-rail-nav button:active { transform: scale(0.94); }
.tb-rail-nav button:disabled { opacity: 0.35; cursor: default; transform: none; }

.tb-rail {
  --edge: max(1.25rem, calc((100vw - var(--wrap)) / 2));
  margin-top: clamp(2rem, 4vw, 3rem); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none;
  padding-bottom: 1rem;
}
.tb-rail::-webkit-scrollbar { display: none; }
.tb-rail:focus-visible { outline-offset: -2px; }
.tb-rail ul { list-style: none; margin: 0; padding: 0 var(--edge); display: flex; gap: 1.25rem; width: max-content; }
.tb-rail li { width: min(80vw, 660px); scroll-snap-align: start; }
.tb-rail figure { margin: 0; }
.tb-shot { padding: 5px; border-radius: 22px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .07); }
.tb-shot img { border-radius: 17px; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; width: 100%; transition: transform 0.9s var(--tb-ease); }
.tb-rail li:hover .tb-shot img { transform: scale(1.015); }
.tb-rail figcaption { margin-top: 0.85rem; font-size: 0.9rem; color: var(--ink-soft); padding-left: 0.3rem; }
@media (max-width: 640px) { .tb-rail li { width: 84vw; } .tb-rail-nav button { width: 2.6rem; height: 2.6rem; } }

/* ── Czego nie robi ──────────────────────────────────────────────────────── */

.tb-honest { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tb-honest-head .tb-body { margin-top: 1.2rem; }
.tb-limits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.tb-limits li {
  position: relative; padding: 1.1rem 1.2rem 1.1rem 3.1rem; border-radius: 20px; font-size: 0.97rem; color: var(--ink-soft);
  background: rgb(255 255 255 / .025); border: 1px solid var(--tb-hair);
}
.tb-limits li::before {
  content: "×"; position: absolute; left: 1.1rem; top: 0.95rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.95rem; line-height: 1; color: var(--accent); background: rgb(var(--tb-orange) / .12);
}
.tb-limits li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .tb-honest, .tb-limits { grid-template-columns: 1fr; } }

/* ── Plany: darmowy i pilotaż ────────────────────────────────────────────── */

.tb-plan-grid { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.tb-plan { padding: var(--tb-pad); border-radius: var(--tb-R); background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .07); }
.tb-plan .tb-core { display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.4rem); }
.tb-plan h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; }
.tb-plan-d { margin-top: 0.5rem; color: var(--ink-soft); }
.tb-plan ul { list-style: none; margin: 1.6rem 0 2rem; padding: 1.4rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.7rem; }
.tb-plan li { position: relative; padding-left: 1.8rem; font-size: 0.98rem; }
.tb-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; }
.tb-plan .tb-btn { margin-top: auto; align-self: flex-start; }
.tb-plan-pilot {
  border: 0; padding: calc(var(--tb-pad) + 1px);
  background: linear-gradient(140deg, rgb(var(--tb-orange) / .75), rgb(var(--tb-orange) / .12) 38%, rgb(var(--tb-navy) / .2) 70%, rgb(var(--tb-navy) / .7));
}
.tb-plan-pilot .tb-core { background: radial-gradient(80% 60% at 100% 0%, rgb(var(--tb-orange) / .16), transparent 70%), linear-gradient(180deg, #1a1b20, #141519); }
.tb-plan-foot { margin-top: 2rem; display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); max-width: 78ch; }
.tb-plan-links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.tb-plan-links a { color: var(--accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgb(var(--tb-orange) / .35); transition: border-color 0.3s var(--tb-ease); }
.tb-plan-links a:hover { border-bottom-color: var(--accent); }
@media (max-width: 760px) { .tb-plan-grid { grid-template-columns: 1fr; } .tb-plan .tb-btn { align-self: stretch; justify-content: space-between; } }

/* ── Wejście przy przewijaniu (klasę is-in daje tablica.js) ─────────────── */

.js .tb [data-tb-reveal] {
  opacity: 0; transform: translate3d(0, 30px, 0);
  transition: opacity 0.9s var(--tb-ease), transform 1.1s var(--tb-ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .tb [data-tb-reveal].is-in { opacity: 1; transform: none; }
.js .tb .tb-nope[data-tb-reveal] li { opacity: 0; translate: -18px 0; transition: opacity 0.7s var(--tb-ease), translate 0.9s var(--tb-ease); }
.js .tb .tb-nope.is-in li { opacity: 1; translate: 0 0; }
.js .tb .tb-nope.is-in li:nth-child(2) { transition-delay: 0.12s; }
.js .tb .tb-nope.is-in li:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .tb-blob, .tb-in, .tb-stage, .tb-tablet { animation: none !important; }
  .js .tb [data-tb-reveal], .js .tb .tb-nope[data-tb-reveal] li { opacity: 1 !important; transform: none !important; translate: none !important; }
  .tb-steps::before { transform: none !important; }
}



/* Pod stroną produktu kontakt dotyczy produktu, nie zleceń: bez faktów o Useme. */
.tb ~ .contact .contact-details { display: none; }

/* ── Telefon zamiast tabletu w scenie hero ───────────────────────────────── */

.tb-phone {
  position: absolute; width: 23%; right: -4%; bottom: -16%;
  transform: translateZ(90px) rotate(4deg) translate3d(calc(var(--tx) * -3), calc(var(--ty) * 3), 0);
  transition: transform 1.2s var(--tb-ease);
  animation: tbTablet 1.4s var(--tb-ease) 0.8s both;
}
.tb-phone .tb-bezel { padding: 7px; border-radius: 30px; background: linear-gradient(180deg, #2a2d34, #17191e); }
.tb-phone .tb-screen { border-radius: 23px; }
.tb-phone img { aspect-ratio: 9 / 17; object-fit: cover; object-position: 50% 0; width: 100%; }
@media (max-width: 900px) { .tb-phone { width: 28%; right: -2%; bottom: -20%; transform: rotate(4deg); } }
@media (max-width: 520px) { .tb-phone { width: 30%; bottom: -24%; } .tb-phone .tb-bezel { padding: 4px; border-radius: 18px; } .tb-phone .tb-screen { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .tb-phone { animation: none !important; } }

/* ── Nagłówek sekcji z etykietą ──────────────────────────────────────────── */

.tb-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem;
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.tb-kicker::before { content: ""; width: 1.4rem; height: 1px; background: currentColor; opacity: 0.7; }
.tb-head .tb-body { margin-top: 1.2rem; display: grid; gap: 0.9rem; }
.tb-problem .tb-body { display: grid; gap: 0.9rem; }
.tb-h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }

/* Kroki: ile ich jest, tyle kolumn (3 albo 4). */
.tb-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tb-steps-4 { grid-template-columns: 1fr; } }

/* ── Przejście krok po kroku ze zrzutami ─────────────────────────────────── */

.tb-walk { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: clamp(3rem, 7vw, 6rem); counter-reset: walk; }
.tb-walk-row { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; }
.tb-walk-row:nth-child(even) .tb-walk-copy { order: 2; }
.tb-walk-no {
  display: block; margin-bottom: 0.9rem; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgb(var(--tb-orange) / .7);
}
.tb-walk h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.tb-walk-copy p { margin-top: 0.8rem; color: var(--ink-soft); max-width: 42ch; }
.tb-walk .tb-shot img, .tb-walk .tb-shot video { border-radius: 17px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; display: block; }
.tb-walk-phone .tb-shot { justify-self: center; width: min(100%, 300px); padding: 7px; border-radius: 34px; background: linear-gradient(180deg, #2a2d34, #17191e); }
.tb-walk-phone .tb-shot img { border-radius: 27px; aspect-ratio: 9 / 16; }
@media (max-width: 860px) {
  .tb-walk-row { grid-template-columns: 1fr; }
  .tb-walk-row:nth-child(even) .tb-walk-copy { order: 0; }
}

/* ── Tekst obok zrzutu ───────────────────────────────────────────────────── */

.tb-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tb-split-left .tb-split-copy { order: 2; }
.tb-split .tb-body { margin-top: 1.2rem; display: grid; gap: 0.9rem; }
.tb-split .tb-cta { margin-top: 1.8rem; }
.tb-split-media { position: relative; }
.tb-split-media::before {
  content: ""; position: absolute; inset: 8% -6% -10% 10%; z-index: -1; border-radius: 40px; filter: blur(50px);
  background: radial-gradient(closest-side, rgb(var(--tb-navy) / .55), transparent);
}
.tb-split .tb-shot img, .tb-split .tb-shot video { border-radius: 17px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; display: block; }
.tb-split-phone .tb-shot { width: min(100%, 300px); margin-inline: auto; padding: 7px; border-radius: 34px; background: linear-gradient(180deg, #2a2d34, #17191e); }
.tb-split-phone .tb-shot img { border-radius: 27px; aspect-ratio: 9 / 16; }
.tb-ticks { list-style: none; margin: 1.5rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; }
.tb-ticks li { position: relative; padding-left: 1.7rem; font-size: 0.95rem; color: var(--ink-soft); }
.tb-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .tb-split { grid-template-columns: 1fr; } .tb-split-left .tb-split-copy { order: 0; } }

/* Telefon w pasku zrzutów: węższy, żeby nie był gigantem obok poziomych. */
.tb-rail li.tb-rail-phone { width: min(44vw, 290px); }
.tb-rail-phone .tb-shot img { aspect-ratio: 9 / 16; object-position: 50% 0; }

/* ── Filmy z dźwiękiem ───────────────────────────────────────────────────── */

.tb-films { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.tb-films figure { margin: 0; }
.tb-films video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 17px; background: #0b0c10; }
.tb-films figcaption { margin-top: 0.85rem; font-size: 0.92rem; color: var(--ink-soft); padding-left: 0.3rem; }
@media (max-width: 900px) { .tb-films { grid-template-columns: 1fr; } }

/* „Plusy” zamiast krzyżyków, gdy lista mówi, co jest, a nie czego brakuje. */
.tb-limits-plus li::before { content: "✓"; font-size: 0.8rem; }

/* Plany: trzy karty obok siebie. */
.tb-plan-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tb-plan-grid-3 { grid-template-columns: 1fr; } }

/* ── Technologie ─────────────────────────────────────────────────────────── */

.tb-stack-row { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); gap: 2rem; align-items: start; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.tb-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-stack li {
  font-size: 0.86rem; color: var(--ink-soft); padding: 0.45rem 0.95rem; border-radius: 999px;
  background: rgb(255 255 255 / .03); border: 1px solid var(--tb-hair);
}
@media (max-width: 760px) { .tb-stack-row { grid-template-columns: 1fr; } }

/* ── Inne projekty ───────────────────────────────────────────────────────── */

.tb-others { padding-bottom: clamp(4rem, 8vw, 6rem); }
.tb-others-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.tb-others a { display: grid; gap: 0.3rem; text-decoration: none; }
.tb-others .tb-shot { margin-bottom: 0.8rem; overflow: hidden; }
.tb-others .tb-shot img { border-radius: 17px; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; width: 100%; transition: transform 0.9s var(--tb-ease); }
.tb-others a:hover .tb-shot img { transform: scale(1.03); }
.tb-others-tag { font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.tb-others-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; display: flex; gap: 0.5rem; align-items: baseline; }
.tb-others-arrow { color: var(--accent); transition: transform 0.45s var(--tb-spring); }
.tb-others a:hover .tb-others-arrow { transform: translateX(5px); }
.tb-others-what { font-size: 0.92rem; color: var(--ink-soft); max-width: 40ch; }
@media (max-width: 900px) { .tb-others-grid { grid-template-columns: 1fr; } }