/* =====================================================================
   BLUEMONSTER.PL - system "premium car interior"
   Zasada: premium = usuwanie. Powietrze, światło, skala, jeden ruch.
   Plik jest jedynym źródłem tokenów i komponentów. Nie dopisuj kolorów,
   cieni ani krzywych poza tym plikiem.
   ===================================================================== */

/* ---------- 1. TOKENY ---------- */
:root{
  --t:.9s; --t-press:.25s; --e:cubic-bezier(.4,0,.2,1);

  /* deska jasna (domyślna) */
  --bg:#EEF0F3; --bg-2:#F7F8FA; --rule:rgba(27,36,48,.10);
  --ink:#1B2430; --ink-2:#5F6B7A; --ink-3:#9AA3AF;
  --cyan:#00B3E1; --cyan-soft:#9FE8F8;

  /* klawisz porcelanowy */
  --face:#F7F8FA; --face-2:#DDE0E5; --face-edge:rgba(255,255,255,.95);
  --socket:#CBCFD6; --socket-in:rgba(20,28,40,.28);
  --halo:rgba(255,255,255,.95); --shadow:rgba(20,28,40,.28); --shadow-far:rgba(20,28,40,.16);
  --icon:#1B2430; --icon-glow:transparent;

  /* klawisz piano black (na jasnej desce) */
  --pb-face:#15181E; --pb-face-2:#07090C; --pb-edge:rgba(255,255,255,.12);
  --pb-socket:#C4C9D1; --pb-socket-in:rgba(20,28,40,.32); --pb-ink:#EEF0F3;
  --pb-halo:rgba(20,28,40,.18); --pb-shadow:rgba(20,28,40,.45); --pb-shadow-far:rgba(20,28,40,.25);
  --pb-icon:#9FE8F8; --pb-icon-glow:#00B3E1;

  /* typografia */
  /* Decyzja Marka 2026-09-23: tytuly maja byc tym samym krojem co logotyp.
     Bricolage wypada, zostaje Outfit w calej stronie. */
  --font-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --font-body:"Outfit","Helvetica Neue",Arial,sans-serif;
  --fs-eyebrow:.74rem; --fs-body:1.05rem; --fs-lead:clamp(1.25rem,1.6vw,1.5rem);
  --fs-h3:clamp(1.5rem,2.2vw,2rem); --fs-h2:clamp(2.4rem,5.5vw,5.2rem); --fs-h1:clamp(3.1rem,9vw,9rem);

  /* przestrzeń */
  --container:1440px; --gutter:clamp(24px,5vw,72px);
  --sec:clamp(120px,16vh,220px); --block:64px;
}
/* deska nocna: atrybut na html (globalnie) lub na sekcji (lokalnie) */
[data-mode="night"]{
  color-scheme:dark;
  --bg:#07080B; --bg-2:#101318; --rule:rgba(255,255,255,.10);
  --ink:#EEF0F3; --ink-2:#7A8390; --ink-3:#4B535E;
  --face:#15181E; --face-2:#07090C; --face-edge:rgba(255,255,255,.10);
  --socket:#020304; --socket-in:rgba(0,0,0,.95);
  --halo:rgba(0,179,225,.18); --shadow:rgba(0,0,0,.75); --shadow-far:rgba(0,0,0,.5);
  --icon:var(--cyan-soft); --icon-glow:var(--cyan);
  /* w nocy piano black = porcelana (jeden klawisz) */
  --pb-face:var(--face); --pb-face-2:var(--face-2); --pb-edge:var(--face-edge);
  --pb-socket:var(--socket); --pb-socket-in:var(--socket-in); --pb-ink:var(--ink);
  --pb-halo:var(--halo); --pb-shadow:var(--shadow); --pb-shadow-far:var(--shadow-far);
  --pb-icon:var(--icon); --pb-icon-glow:var(--icon-glow);
}

/* ---------- 2. BAZA ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background var(--t) var(--e),color var(--t) var(--e)}
[data-mode]{background:var(--bg);color:var(--ink);transition:background var(--t) var(--e),color var(--t) var(--e)}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
::selection{background:var(--cyan-soft);color:#1B2430}

/* ---------- 3. TYPOGRAFIA ---------- */
.eyebrow{margin:0;font-family:var(--font-body);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.h1,.h2,.h3{margin:0;font-family:var(--font-display);font-weight:500;text-wrap:balance;color:var(--ink)}
.h1{font-size:var(--fs-h1);line-height:1;letter-spacing:-.035em;max-width:14ch}
.h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em;max-width:14ch}
.h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.01em;max-width:24ch}
.lead{margin:0;font-weight:300;font-size:var(--fs-lead);line-height:1.4;max-width:40ch;color:var(--ink)}
.p{margin:0;max-width:60ch;color:var(--ink-2)}
.p + .p{margin-top:1.2em}
.num--ph{font-size:var(--fs-h3);letter-spacing:.02em;color:var(--ink-3)}
.num{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.link{display:inline-flex;align-items:center;gap:14px;font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);transition:color var(--t) var(--e)}
.link:hover{color:var(--ink)}
.link .arr{width:28px;height:1px;background:currentColor;position:relative;transition:width var(--t) var(--e)}
.link .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.link:hover .arr{width:44px}

/* ---------- 4. PRZESTRZEŃ ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:var(--block)}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c12{grid-column:1 / -1}
.c4{grid-column:span 4}.c3{grid-column:span 3}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--block) clamp(32px,6vw,120px);align-items:end}
.split--rev{grid-template-columns:7fr 5fr}
.split--rev > :first-child{order:2}
.stack{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.stack--lg{gap:var(--block)}
.rule{height:1px;background:var(--rule);border:0;margin:0;transition:background var(--t)}
@media (max-width:900px){
  .split,.split--rev{grid-template-columns:1fr}
  .split--rev > :first-child{order:0}
  .c5,.c6,.c7,.c4,.c3{grid-column:1 / -1}
  :root{--sec:clamp(96px,14vh,140px);--block:48px}
}

/* ---------- 5. NAWIGACJA ---------- */
.nav{display:flex;justify-content:center;align-items:center;gap:32px;padding-block:28px;font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
/* Wordmark w konwencji marki samochodowej: wersaliki, jeden ciezar, szeroki
   rozstrzelony trakting - jak napis na klapie bagaznika. Outfit, nie Bricolage:
   geometryczny grotesk czyta sie tu blizej motoryzacji niz krój displayowy,
   ktory ma za duzo charakteru w pojedynczych literach. Kropka w cyjanie
   zostaje z obecnego logotypu - to jedyny akcent koloru w znaku. */
.nav__brand{font-family:var(--font-body);font-weight:500;font-size:.92rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nav__brand i{font-style:normal;color:var(--cyan)}
.nav__brand--lg{font-size:1.15rem;letter-spacing:.34em}
/* Decyzja Marka 2026-09-23: menu ukryte calkiem. Nawigacja to logo plus
   rozmowa z Blu; sekcje dostepne scrollem. Klasa zostaje w kicie, bo
   komponenty.html jej uzywa. */
.nav__links{display:none}
.nav--kit .nav__links{display:flex;gap:40px;margin:0;padding:0;list-style:none}
.nav__links a{transition:color var(--t) var(--e)}
.nav__links a:hover{color:var(--ink)}
@media (max-width:900px){.nav__links{display:none}}

/* nawigacja nad hero: absolutna, dziedziczy tryb hero */
.nav--over{position:absolute;top:0;left:0;right:0;z-index:2}

/* ---------- 6. KLAWISZ (.k) - detal-sygnatura ---------- */
.k{position:relative;display:inline-flex;border:0;padding:0;background:transparent;cursor:pointer;border-radius:999px;-webkit-tap-highlight-color:transparent;isolation:isolate}
.k .halo{position:absolute;inset:-28px;border-radius:999px;pointer-events:none;filter:blur(24px);z-index:-1;
  background:radial-gradient(60% 70% at 50% 45%,var(--halo),transparent 70%);opacity:.9;transition:opacity var(--t) var(--e),background var(--t) var(--e)}
/* Obrecz duzego klawisza to ten sam szczotkowany metal co w .ctl - swiatlo
   biegnie wokol gradientem stozkowym. Wczesniej byl tu plaski szary kolor
   i klawisz wygladal martwo obok przelacznika trybu. */
.k .socket{position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 200deg,#F4F5F7,#B9BEC6 18%,#F1F2F4 34%,#A8AEB7 52%,#EEF0F2 70%,#B4B9C1 86%,#F4F5F7);
  box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:background var(--t) var(--e),box-shadow var(--t) var(--e)}
[data-mode="night"] .k .socket{
  background:conic-gradient(from 200deg,#3A3F47,#0E1114 18%,#353A42 34%,#0B0D10 52%,#30353D 70%,#0E1114 86%,#3A3F47);
  box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.8)}

.k .face{position:relative;margin:5px;padding:24px 44px;border-radius:inherit;display:inline-flex;align-items:center;gap:16px;overflow:hidden;
  font-weight:400;font-size:1.05rem;letter-spacing:.04em;white-space:nowrap;color:var(--ink);
  background:linear-gradient(180deg,var(--face) 0%,var(--face-2) 100%);
  box-shadow:0 30px 60px -20px var(--shadow),0 60px 120px -40px var(--shadow-far),inset 0 1px 0 var(--face-edge),inset 0 -2px 0 rgba(0,0,0,.08);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),background var(--t) var(--e),color var(--t) var(--e)}
.k .face > *{position:relative;z-index:1}
/* dwukolorowy podział świateł - jedyna animacja dekoracyjna na stronie */
.k .face::before{content:"";position:absolute;top:0;bottom:0;left:-100%;width:200%;z-index:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.42) 72%,rgba(255,255,255,0) 72.2%);
  transition:transform var(--t) var(--e),opacity var(--t) var(--e)}
[data-mode="night"] .k .face::before{opacity:.12}
.k:hover .face::before{transform:translateX(22%)}
.k:hover .face{transform:translateY(-2px);box-shadow:0 38px 70px -20px var(--shadow),0 70px 130px -40px var(--shadow-far),inset 0 1px 0 var(--face-edge),inset 0 -2px 0 rgba(0,0,0,.08)}
.k:hover .halo{opacity:1}
.k:active .face{transform:translateY(2px) scale(.99);transition-duration:var(--t-press);box-shadow:0 6px 14px -6px var(--shadow),inset 0 1px 0 var(--face-edge),inset 0 3px 8px rgba(0,0,0,.14)}
.k:active .face::before{transform:translateX(10%);transition-duration:var(--t-press)}
.k:active .halo{opacity:.4;transition-duration:var(--t-press)}
.k .ico{width:20px;height:20px;fill:var(--icon);filter:drop-shadow(0 0 6px var(--icon-glow)) drop-shadow(0 0 14px var(--icon-glow));transition:fill var(--t),filter var(--t)}
.k--sm .face{padding:16px 28px;font-size:.95rem}

/* wariant piano black: na jasnej desce czarny, w nocy identyczny z .k */
.k--piano .halo{background:radial-gradient(60% 70% at 50% 45%,var(--pb-halo),transparent 70%)}
.k--piano .socket{background:var(--pb-socket);box-shadow:inset 0 4px 10px var(--pb-socket-in),inset 0 -1px 0 rgba(255,255,255,.9)}
.k--piano .face{color:var(--pb-ink);background:linear-gradient(180deg,var(--pb-face) 0%,var(--pb-face-2) 100%);
  box-shadow:0 30px 60px -20px var(--pb-shadow),0 60px 120px -40px var(--pb-shadow-far),inset 0 1px 0 var(--pb-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
.k--piano .face::before{opacity:.14}
.k--piano:hover .face{box-shadow:0 38px 70px -20px var(--pb-shadow),0 70px 130px -40px var(--pb-shadow-far),inset 0 1px 0 var(--pb-edge),inset 0 -2px 0 rgba(0,0,0,.6)}
.k--piano:active .face{box-shadow:0 6px 14px -6px var(--pb-shadow),inset 0 1px 0 rgba(255,255,255,.05),inset 0 3px 8px rgba(0,0,0,.6)}
.k--piano .ico{fill:var(--pb-icon);filter:drop-shadow(0 0 6px var(--pb-icon-glow)) drop-shadow(0 0 14px var(--pb-icon-glow))}
.actions{display:flex;align-items:center;gap:40px;flex-wrap:wrap}

/* ---------- 7. KONTROLKI Z RINGIEM (.ctl) - tylko mikrofon / przełącznik ---------- */
.ctl{position:relative;width:64px;height:64px;border:0;padding:0;border-radius:999px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate}
.ctl .halo{position:absolute;inset:-22px;border-radius:999px;pointer-events:none;filter:blur(20px);z-index:-1;background:radial-gradient(60% 70% at 50% 50%,var(--halo),transparent 70%);opacity:.7;transition:opacity var(--t),background var(--t)}
.ctl .ring{position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 200deg,#F4F5F7,#B9BEC6 18%,#F1F2F4 34%,#A8AEB7 52%,#EEF0F2 70%,#B4B9C1 86%,#F4F5F7);
  box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.25);transition:box-shadow var(--t)}
[data-mode="night"] .ctl .ring{background:conic-gradient(from 200deg,#3A3F47,#0E1114 18%,#353A42 34%,#0B0D10 52%,#30353D 70%,#0E1114 86%,#3A3F47);box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.8)}
.ctl .face{position:absolute;inset:6px;border-radius:inherit;background:linear-gradient(180deg,var(--face),var(--face-2));overflow:hidden;
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -2px 4px rgba(0,0,0,.12);transition:background var(--t) var(--e),transform var(--t-press) var(--e)}
.ctl .face::before{content:"";position:absolute;top:0;bottom:0;left:-100%;width:200%;background:linear-gradient(112deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 62.2%);transition:transform var(--t) var(--e),opacity var(--t)}
[data-mode="night"] .ctl .face::before{opacity:.12}
.ctl:hover .face::before{transform:translateX(22%)}
.ctl .ico{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;fill:var(--icon);filter:drop-shadow(0 0 6px var(--icon-glow)) drop-shadow(0 0 14px var(--icon-glow));transition:fill var(--t),filter var(--t),transform var(--t) var(--e)}
.ctl:active .face{transform:scale(.97)}
.ctl--tg{width:96px;height:52px}
.ctl--tg .face{inset:5px}
[data-mode="night"] .ctl--tg .ico{transform:rotate(-30deg)}
.ctl.is-live .ico{fill:var(--cyan-soft);filter:drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 16px var(--cyan))}

/* ---------- 8. POLE PYTANIA (tryb rozmowy) ---------- */
/* Pas wpisu stoi w tej samej rodzinie co klawisze, wiec ma te sama obrecz. */
.ask{position:relative;display:flex;align-items:center;gap:20px;width:min(100%,640px);border-radius:999px;padding:5px;
  background:conic-gradient(from 200deg,#F4F5F7,#B9BEC6 18%,#F1F2F4 34%,#A8AEB7 52%,#EEF0F2 70%,#B4B9C1 86%,#F4F5F7);
  box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:background var(--t),box-shadow var(--t)}
[data-mode="night"] .ask{
  background:conic-gradient(from 200deg,#3A3F47,#0E1114 18%,#353A42 34%,#0B0D10 52%,#30353D 70%,#0E1114 86%,#3A3F47);
  box-shadow:0 22px 40px -16px var(--shadow),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.8)}
.ask__field{flex:1;min-width:0;border:0;outline:0;border-radius:999px;padding:22px 32px;font:inherit;font-weight:300;font-size:1.05rem;color:var(--ink);caret-color:var(--cyan);
  background:linear-gradient(180deg,var(--face),var(--face-2));box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -2px 0 rgba(0,0,0,.06);transition:background var(--t),color var(--t)}
.ask__field::placeholder{color:var(--ink-3)}
.ask .ctl{flex:none;width:54px;height:54px}
.ask .ctl .halo{display:none}

/* ---------- 9. ZDJĘCIA ---------- */
.ph{position:relative;background:var(--bg-2);border-radius:4px;overflow:hidden;transition:background var(--t)}
.ph > img,.ph > video{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.ph__label{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;margin:0;font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.ph--16x10{aspect-ratio:16/10}.ph--4x5{aspect-ratio:4/5}.ph--3x2{aspect-ratio:3/2}
/* wychodzi poza kontener do krawędzi ekranu (z prawej) */
/* Odleglosc od prawej krawedzi .wrap do krawedzi okna to gutter (gdy okno
   jest wezsze niz kontener) albo polowa nadmiaru (gdy szersze). Poprzedni
   wzor dodawal oba naraz i przy oknie szerszym niz 1440 strona rozjezdzala
   sie w prawo o szerokosc guttera. */
.ph--edge{width:calc(100% + max(var(--gutter),(100vw - var(--container))/2));max-width:none}
/* pełny ekran: jedno zdjęcie, jedno zdanie */
.bleed{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--bg-2)}
.bleed > .ph{position:absolute;inset:0;border-radius:0}
.bleed__line{position:absolute;left:var(--gutter);bottom:clamp(40px,8vh,96px);right:var(--gutter);display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
/* Kadr pod spodem jest ciemny w obu trybach, wiec zdanie zostaje jasne
   zawsze - w trybie dziennym znikalo wczesniej w betonie. */
.bleed__line .h2{max-width:16ch;color:#F7F8FA;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.bleed__line .eyebrow{color:rgba(247,248,250,.55)}
/* odsłona na scrollu: jedyna animacja związana ze scrollem */
/* Odslona dziala w obie strony - kadr zsuwa sie tez przy wyjsciu z ekranu. */
.reveal{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--e)}
.reveal[data-wait]{clip-path:inset(14% 0 14% 0)}

/* ---------- 10. MARKI (sekcja gęsta) ---------- */
.brands{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule);transition:border-color var(--t)}
.brands a{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:180px;padding:28px 28px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background var(--t) var(--e),border-color var(--t)}
.brands a:hover{background:var(--bg-2)}
.brands b{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);letter-spacing:-.01em}
.brands small{font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:900px){.brands{grid-template-columns:repeat(2,1fr)}.brands a{min-height:140px;gap:32px;padding:22px}}

/* ---------- 11. LISTA FAKTÓW (zamiast kart) ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--block) clamp(32px,4vw,64px);margin:0;padding:0;list-style:none}
.facts li{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:1px solid var(--rule);transition:border-color var(--t)}
.facts .h3{max-width:none}
.facts--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.facts,.facts--4{grid-template-columns:1fr}}

/* ---------- 12. STOPKA ---------- */
.foot{display:grid;grid-template-columns:5fr 7fr;gap:var(--block) clamp(32px,6vw,120px);padding-block:var(--sec) 48px}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.foot__cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--ink-2)}
.foot__cols a:hover{color:var(--ink)}
.foot__meta{grid-column:1 / -1;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--rule);font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){.foot{grid-template-columns:1fr}.foot__cols{grid-template-columns:1fr 1fr}}

/* ---------- 13. RUCH ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}.reveal[data-wait]{clip-path:inset(0)}}

/* ---------- 14. HERO ---------- */
/* Przeniesione ze strony pokazowej komponenty.html, gdzie siedzialo w <style>.
   Blu jest warstwowy (stopklatka + ruchome oczy + klip), wiec zamiast <img>
   stoi tu kontener .hero__blu o tej samej geometrii. */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;background:#000;overflow:hidden}
.hero > .wrap{height:100%;display:grid;grid-template-columns:1fr;align-items:center;gap:32px}
/* Blu stoi na dolnej krawedzi hero, a nie wisi w srodku - inaczej klatka
   urwana u dolu czyta sie jak uciety obrazek. Jest poza siatka tekstu,
   wiec kolumna tekstu nie musi mu ustepowac. */
.hero__blu{position:absolute;right:0;bottom:0;height:min(76vh,76svh,820px);pointer-events:none;z-index:1}
.hero > .wrap{position:relative;z-index:2}
.hero__foot{position:absolute;left:0;right:0;bottom:0}
.hero__foot .wrap{display:flex;justify-content:space-between;padding-block:32px}
.hero .nav--over{height:auto;display:block;padding:0}
@media (max-width:900px){
  .hero > .wrap{align-content:end;padding-top:110px;padding-bottom:180px}
  .hero__blu{height:44vh;right:50%;transform:translateX(50%)}
  .hero__foot .wrap{padding-block:24px}
}

/* ---------- 15. FAQ ---------- */
/* Lista pytan bez kart: linia, pytanie, odpowiedz. Ten sam rytm co .facts. */
.faq{margin:0;padding:0;list-style:none;display:grid}
.faq li{border-top:1px solid var(--rule);transition:border-color var(--t)}
.faq li:last-child{border-bottom:1px solid var(--rule)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:32px;
  padding:32px 0;border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.faq__s{flex:none;font-family:var(--font-body);font-weight:300;font-size:1.5rem;line-height:1;color:var(--ink-3);transition:transform var(--t) var(--e),color var(--t)}
.faq li[data-open] .faq__s{transform:rotate(45deg);color:var(--ink-2)}
.faq__a{overflow:hidden;height:0;transition:height var(--t) var(--e)}
.faq__a .p{padding-bottom:32px}

/* ---------- 16. DOK ROZMOWY ---------- */
/* Po zjechaniu z hero Blu zwija sie do klasycznego czatu przy prawej krawedzi.
   Gniazdo i ruch swiatel te same co w .k - to ten sam przedmiot, mniejszy. */
.dock{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:16px;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.dock[data-on]{opacity:1;transform:none;pointer-events:auto}
.dock__btn{position:relative;width:72px;height:72px;border:0;padding:0;border-radius:999px;background:transparent;cursor:pointer;isolation:isolate}
.dock__btn .halo{position:absolute;inset:-22px;border-radius:999px;pointer-events:none;filter:blur(24px);z-index:-1;
  background:radial-gradient(60% 70% at 50% 50%,var(--pb-halo),transparent 70%);opacity:.9;transition:opacity var(--t)}
.dock__btn .socket{position:absolute;inset:0;border-radius:inherit;background:var(--pb-socket);
  box-shadow:inset 0 4px 10px var(--pb-socket-in),inset 0 -1px 0 rgba(255,255,255,.9)}
.dock__btn .face{position:absolute;inset:5px;border-radius:inherit;overflow:hidden;
  background:linear-gradient(180deg,var(--pb-face),var(--pb-face-2));
  box-shadow:0 30px 60px -20px var(--pb-shadow),inset 0 1px 0 var(--pb-edge);
  transition:transform var(--t) var(--e)}
.dock__btn .face::before{content:"";position:absolute;top:0;bottom:0;left:-100%;width:200%;
  background:linear-gradient(112deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.14) 72%,rgba(255,255,255,0) 72.2%);
  transition:transform var(--t) var(--e)}
.dock__btn:hover .face::before{transform:translateX(22%)}
.dock__btn:hover .face{transform:translateY(-2px)}
.dock__btn:active .face{transform:translateY(2px) scale(.99);transition-duration:var(--t-press)}
.dock__blu{position:absolute;inset:5px;border-radius:999px;overflow:hidden;pointer-events:none}
/* Blu w klatce nie stoi na srodku: srodek twarzy to ~61% szerokosci i ~30%
   wysokosci. Bez tego przesuniecia w kolku laduje jego ramie zamiast twarzy. */
.dock__blu img{position:absolute;left:-134%;top:0;width:300%;max-width:none}
/* kropka statusu - jedyny element, ktory pulsuje */
.dock__dot{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:999px;background:var(--cyan);
  box-shadow:0 0 0 3px var(--bg),0 0 12px var(--cyan)}
/* Podpowiedz lezy nad dowolna sekcja - takze nad zdjeciem - wiec nie moze
   brac tla z trybu strony. Zawsze piano black, jak sam klawisz doku. */
.dock__hint{font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--pb-ink);background:var(--pb-face);padding:10px 16px;border-radius:999px;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.6),inset 0 1px 0 var(--pb-edge)}
[data-mode="night"] .dock__hint{box-shadow:0 20px 40px -24px #000,inset 0 1px 0 var(--pb-edge)}
@media (max-width:900px){.dock__btn{width:60px;height:60px}.dock__hint{display:none}}

/* panel rozmowy zadokowany przy krawedzi */
.chat{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:61;
  width:min(420px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 80px));
  display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:24px;
  background:var(--bg);box-shadow:0 40px 90px -30px var(--shadow),0 0 0 1px var(--rule);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transform-origin:100% 100%;
  transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.chat[data-on]{opacity:1;transform:none;pointer-events:auto}
.chat__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.chat__x{border:0;background:transparent;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--ink-3);transition:color var(--t)}
.chat__x:hover{color:var(--ink)}
.chat__log{flex:1;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin}
.chat__msg{max-width:46ch;white-space:pre-wrap;margin:0}
.chat__msg--me{align-self:flex-end;text-align:right;color:var(--ink-2)}
.chat__sugg{display:flex;flex-wrap:wrap;gap:8px 20px}
.chat__sugg button{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;
  font-weight:400;font-size:.86rem;color:var(--ink-2);transition:color var(--t)}
.chat__sugg button:hover{color:var(--ink)}
.chat .ask{width:100%}
.chat .ask__field{padding:16px 22px;font-size:.98rem}
.caret{display:inline-block;width:.42em;height:.92em;margin-left:3px;vertical-align:-.1em;background:var(--cyan)}
/* Znak czeka na swoja kolej przezroczysty, ale juz zajmuje miejsce. */
.zn{opacity:0;transition:opacity .22s var(--e)}
.zn--jest{opacity:1}
.typing{display:flex;gap:6px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:999px;background:var(--cyan);opacity:.35}

/* ---------- 17. DROBNE ---------- */
figure{margin:0}
/* Trzy czasowniki jeden pod drugim. Lamanie jest w tresci (znaki nowej linii),
   bo naglowek doczytuje sie przez textContent i znacznik <br> by nie przezyl. */
.hero .h1{--fs-h1:clamp(2.6rem,5vw,5rem);max-width:16ch;white-space:pre-line}
.hero__sub{margin:0;font-weight:300;font-size:var(--fs-lead);line-height:1.4;max-width:34ch;color:var(--ink-2)}
.split--top{align-items:start}
/* .actions w .stack dostaje szerokosc max-content i nie zawija - na waskim
   ekranie drugorzedny .link wypadal poza kadr. */
.actions{max-width:100%}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---------- 18. LOGO ---------- */
.brandmark{display:block;height:20px;width:auto}
.brandmark--night{display:none}
[data-mode="night"] .brandmark--day{display:none}
[data-mode="night"] .brandmark--night{display:block}

/* ---------- 19. PRZELACZNIK TRYBU ---------- */
/* Na hero jest zbedny, wiec wjezdza dopiero po zjechaniu z pierwszego ekranu.
   Ikona pokazuje stan docelowy: w dzien ksiezyc, w nocy slonce. */
/* Prawy dol, bo cala tresc strony stoi przy lewej krawedzi - po lewej
   klawisz wchodzil na naglowki i wiersze marek. */
.tgdock{position:fixed;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:60;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.tgdock[data-on]{opacity:1;transform:none;pointer-events:auto}
/* Ostatni wiersz stopki zaczyna sie za klawiszem trybu, ktory stoi w lewym
   dolnym rogu - inaczej nazwa spolki chowala sie pod nim. */
.foot__meta{padding-left:clamp(72px,10vw,140px)}
.ico--sun{display:none}
[data-mode="night"] .ico--moon{display:none}
[data-mode="night"] .ico--sun{display:block}

/* ---------- 20. GLEBIA SEKCJI ---------- */
/* Swiatlo padajace na plaszczyzne: jedno bardzo lagodne przejscie z --bg-2
   do --bg. Zadnych blobow ani poswiat - tylko dwa kolory z tokenow. */
.sec--deep{background:radial-gradient(120% 78% at 50% 0%,var(--bg-2) 0%,var(--bg) 62%);
  transition:background var(--t) var(--e)}
.sec--deep.sec--deep-b{background:radial-gradient(120% 78% at 50% 100%,var(--bg-2) 0%,var(--bg) 62%)}

/* ---------- 21. AKCENT W NAGLOWKU ---------- */
/* Cichsza czesc zdania. Bez gradientu, bez koloru marki - tylko --ink-2. */
.h1 em,.h2 em{font-style:normal;color:var(--ink-2)}


/* ---------- 22. KADR DZIEN / NOC ---------- */
/* Sekcja .bleed ma dwa ujecia tego samego wnetrza. Podmieniaja sie razem
   z trybem, tak samo jak logo. */
.ph__night{display:none}
[data-mode="night"] .ph__day{display:none}
[data-mode="night"] .ph__night{display:block}


/* ---------- 23. HERO: ROZMOWA ZAMIAST TYTULU ---------- */
/* Klikniecie w klawisz zamienia naglowek na rozmowe z Blu. Ten sam blok,
   ta sama kolumna - nic nie wyjezdza z boku. */
.hero__intro,.hero__chat{transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.hero__chat{display:none;flex-direction:column;gap:20px;width:min(100%,560px);max-height:100%;opacity:0;transform:translateY(12px)}
.hero[data-chat] .hero__intro{opacity:0;transform:translateY(-12px);pointer-events:none;position:absolute}
.hero[data-chat] .hero__chat{display:flex;opacity:1;transform:none}
.hero__log{display:flex;flex-direction:column;gap:22px;min-height:0;max-height:34vh;overflow-y:auto;scrollbar-width:thin}
/* Rozmowa gra w tej samej skali co naglowek - hero nie zmienia sie w widget
   z drobnym tekstem, tylko dalej mowi pelnym glosem. */
.hero__msg{margin:0;max-width:22ch;white-space:pre-wrap;color:var(--ink);
  font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.4rem,2.4vw,2.3rem)}
/* Odpowiedz czlowieka to drobny podpis w jednej kolumnie z Blu, nie dymek:
   glosy rozroznia skala, tak jak opis przy zegarze rozni sie od cyfry. */
.hero__msg--me{align-self:flex-start;max-width:34ch;text-align:left;color:var(--ink-2);
  font-family:var(--font-body);font-weight:500;line-height:1.4;
  font-size:.82rem;letter-spacing:.24em;text-transform:uppercase}
.hero__msg--me::before{content:"";display:inline-block;width:1.6em;height:1px;
  margin:0 .9em .3em 0;background:var(--cyan);vertical-align:middle}
/* Tematy jako lista z wloskowatymi liniami - czyta sie jak spis pozycji w
   menu auta, nie jak rzad przyciskow. */
.hero__topics{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.hero__topics button{border:0;border-bottom:1px solid var(--rule);background:transparent;
  width:100%;padding:12px 0;cursor:pointer;text-align:left;
  font-family:var(--font-body);font-weight:400;font-size:1.05rem;color:var(--ink-2);
  transition:color var(--t) var(--e),padding-left var(--t) var(--e)}
.hero__topics button:hover{color:var(--ink);padding-left:14px}
.caret{display:inline-block;width:.42em;height:.92em;margin-left:3px;vertical-align:-.1em;background:var(--cyan)}
.typing{display:flex;gap:6px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:999px;background:var(--cyan);opacity:.35}


/* ---------- 24. MARKI: KADR NA NAJECHANIE ---------- */
/* Pod siatka jest jedno pole. Domyslnie stoi w nim opis, po najechaniu na
   marke przenika w jej kadr. Wysokosc pola jest stala, wiec nic nie skacze.
   Jedyny ruch to crossfade var(--t) - zadnego skalowania ani przesuniecia. */
.brands__slot{position:relative;width:min(100%,520px);aspect-ratio:3/2;margin-top:var(--block)}
.brands__desc{position:absolute;inset:0;margin:0;opacity:1;transition:opacity var(--t) var(--e)}
.brands__shot{position:absolute;inset:0;opacity:0;transition:opacity var(--t) var(--e)}
.brands__shot img{width:100%;height:100%;object-fit:cover}
.brands__slot[data-marka] .brands__desc{opacity:0}
.brands__slot[data-marka] .brands__shot{opacity:1}
/* kadry marek sa ciemne, wiec na jasnej sekcji dostaja wlasne, ciemne pole */
.brands__slot[data-marka]{background:var(--pb-face);border-radius:4px}
@media (max-width:900px){.brands__slot{aspect-ratio:4/3}}

/* Pole odpowiedzi w hero jest wieksze niz w reszcie strony - ma pasowac do
   skali rozmowy, nie do formularza w stopce. */
.hero__chat .ask{width:min(100%,560px)}
.hero__chat .ask__field{padding:20px 28px;font-size:1.15rem}
.hero__chat .caret{background:var(--cyan)}


/* ---------- 25. KADR PELNOEKRANOWY: NAPIS U GORY ---------- */
/* Gdy auto stoi nisko w kadrze, zdanie idzie pod gorna krawedz, zeby go
   nie przyslanialo. */
.bleed--gora .bleed__line{bottom:auto;top:clamp(96px,14vh,180px);align-items:start}

/* ---------- 26. LISTA KOMPETENCJI: DWIE LINIE ---------- */
/* Kazda pozycja lamie sie na dwie linie - lamanie siedzi w tresci. */
.facts--2w .h3{white-space:pre-line}

/* ---------- 27. MARKI: DO DWOCH KADROW ---------- */
.brands__slot{width:min(100%,820px);aspect-ratio:auto;height:clamp(220px,28vh,340px)}
.brands__set{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.brands__set[hidden]{display:none}
.brands__shot figure{position:relative;overflow:hidden;border-radius:4px;margin:0}
.brands__shot img{width:100%;height:100%;object-fit:cover}


/* ---------- 28. LICZBA NALICZANA OD ZERA ---------- */
/* Sama liczba, bez tarczy - luk obok rozpychal wiersz i przeszkadzal. */
.num em{font-style:normal}

/* ---------- 29. PRZEJSCIE TRYBU ---------- */
/* Nowe tlo rozchodzi sie kolem od przelacznika, a pod nim zmienia sie tryb.
   Wlasna animacja zamiast View Transitions: tamta zostawiala zamrozony kadr,
   gdy przegladarka wstrzymala animacje, i nieobsluzone odrzucenie obietnicy.
   Warstwa bierze tokeny z wlasnego data-mode, wiec ma kolor tla docelowego. */
.tgwipe{position:fixed;inset:0;z-index:55;pointer-events:none;background:var(--bg);
  clip-path:circle(0% at var(--tgx,50%) var(--tgy,90%));
  transition:clip-path .62s var(--e),opacity .32s var(--e) .62s}
.tgwipe[data-otwarta]{clip-path:circle(142% at var(--tgx,50%) var(--tgy,90%));opacity:0}

/* ---------- 30. ODSTEP BLOKU ---------- */
/* Zastepuje style w atrybutach - odstepy tez naleza do kitu. */
.mt-blok{margin-top:var(--block)}
.mb-blok{margin-bottom:var(--block)}
/* Wiekszy oddech tam, gdzie kadr sasiaduje z duzym naglowkiem. */
.mt-duzy{margin-top:calc(var(--block) * 2)}


/* ---------- 31. MARKI: SIATKA I KADR POD NIA ---------- */
/* Powrot do plytek, ale z wieksza iloscia powietrza: siatka bez ramki
   zewnetrznej, sama wloskowata kratka, nazwa marki w skali naglowka.
   Najechanie wycisza pozostale plytki, wybrana dostaje cyjanowa kreske. */
.brands{border-left:0;border-top:1px solid var(--rule)}
.brands a{gap:64px;min-height:212px;padding:32px 32px 28px;border-right:0;
  transition:opacity var(--t) var(--e),background var(--t) var(--e),border-color var(--t)}
.brands a + a{border-left:1px solid var(--rule)}
.brands a:hover{background:transparent}
.brands b{font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:-.02em}
.brands:hover a{opacity:.34}
.brands:hover a:hover,.brands a:focus-visible{opacity:1}
.brands a[data-wybrana]{opacity:1;border-top:2px solid var(--cyan);padding-top:30px}
.brands__slot{width:100%;max-width:none;aspect-ratio:auto;height:clamp(300px,46vh,520px);margin-top:var(--block)}
.brands__desc{position:static;inset:auto;margin-top:28px;max-width:52ch;color:var(--ink-2)}
@media (max-width:900px){
  .brands a + a{border-left:0}
  .brands a:nth-child(2n){border-left:1px solid var(--rule)}
  /* Na waskim ekranie plytka jest nizsza, inaczej nazwy lamia sie na trzy
     linie i siatka rosnie na dwa ekrany. */
  .brands a{min-height:132px;gap:22px;padding:20px}
  .brands a[data-wybrana]{padding-top:18px}
  .brands b{font-size:1.2rem}
  .brands__slot{height:clamp(220px,34vh,320px)}
}

/* ---------- 32. ZNAK W STYLU KLAWISZA ---------- */
/* Ten sam korpus co klawisz trybu, tylko bez akcji - stoi przy pozycji
   na liscie zamiast tarczy z numerem. */
.ctl--znak{width:56px;height:56px;pointer-events:none;cursor:default}
.ctl--znak .face{inset:5px}
.ctl--znak .ico{width:22px;height:22px;margin:-11px 0 0 -11px;fill:none;stroke:var(--icon)}

/* ---------- 33. KLAWISZE W NAWIGACJI ---------- */
/* Naglowek hero: znak posrodku, trzy klawisze przy prawej krawedzi. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;justify-content:unset}
.nav__bok{display:flex;align-items:center;gap:12px}
.nav__bok--p{justify-content:flex-end}
.ctl--nav{width:46px;height:46px}
.ctl--nav .face{inset:4px}
.ctl--nav .ico{width:19px;height:19px;margin:-9.5px 0 0 -9.5px;fill:none;stroke:var(--icon)}
@media (max-width:760px){.nav{grid-template-columns:1fr}.nav__bok{display:none}}


/* ---------- 34. WARIANT B: EKRAN NA DESCE ---------- */
/* Osobny wariant hero (public/wariant-b.html): Blu schodzi do ikony, znika
   sledzenie wzroku, a cala scena to ekran multimedialny na desce - wszystko
   wysrodkowane. Ekran idzie niemal na pelna szerokosc, 64 px luzu po bokach,
   mniej u gory i dolu. Jedyne miejsce w kicie, gdzie swiadomie stoi panel
   z cieniem, bo panelem jest tu sam ekran; poza ta sekcja regula "cien tylko
   pod .k i .ctl" obowiazuje dalej. */
/* Zakladka stoi przy gornej krawedzi i rozwija sie w dol - przy
   wysrodkowaniu rosla w obie strony naraz. */
.deska{position:relative;min-height:100vh;min-height:100svh;display:grid;
  align-items:start;justify-items:center;
  padding:clamp(16px,2.6vh,30px) clamp(12px,3vw,32px);background:var(--bg);overflow:hidden}
/* Swiatlo zza ekranu - jedyne zrodlo glebi w tle. */
.deska::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 34%,rgba(255,255,255,.9),transparent 70%)}

/* Wejscie rozpisane na kroki: najpierw zwinieta zakladka z nazwa i godzina,
   potem zapala sie dioda, zakladka rozwija sie w ekran, wchodzi glowa Blu,
   pisze sie powitanie, na koncu pole wpisu z tematami. Kazdy krok dokladany
   jest osobna klasa, wiec stany sa skumulowane, nie zastepuja sie. */
.ekran{position:relative;width:100%;display:flex;flex-direction:column;gap:18px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.ekran.f-pasek{opacity:1;transform:none}

.ekran__ramka{position:relative;display:flex;flex-direction:column;
  height:var(--h-pasek,82px);padding:clamp(20px,2.4vw,38px);
  transition:height 1.1s var(--e);
  border:1px solid var(--rule);border-radius:26px;background:var(--bg-2);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 90px -40px rgba(20,28,40,.34);
  overflow:hidden}

/* Pasek stanu: znak w lewym gornym rogu, godzina i dioda w prawym. */
.ekran__pasek{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--rule);
  transition:border-color .7s var(--e),padding-bottom .9s var(--e);
  font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
/* Znak jest odrobine wiekszy niz reszta paska - to jedyna nazwa na ekranie. */
.ekran__znak{font-size:.94rem;letter-spacing:.3em;color:var(--ink-2);transition:color var(--t) var(--e)}
.ekran__znak:hover{color:var(--ink)}
.ekran__znak i{font-style:normal;color:var(--cyan)}
.ekran__stan{display:flex;align-items:center;gap:12px}
.ekran__stan b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)}
  .ekran__dioda{width:6px;height:6px;border-radius:999px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan)}

/* Zwinieta zakladka: sam pasek, bez kreski pod nim. */
.ekran:not(.f-rozwiniety) .ekran__pasek{border-bottom-color:transparent;padding-bottom:0}
.ekran.f-rozwiniety .ekran__ramka{height:clamp(420px,calc(100svh - 92px),1100px)}
/* Dioda i podpis zapalaja sie osobno, po pojawieniu sie zakladki. */
.ekran__dioda,.ekran__stan span:last-child{opacity:0;transition:opacity .6s var(--e)}
.ekran.f-online .ekran__dioda,.ekran.f-online .ekran__stan span:last-child{opacity:1}
/* Glowa wchodzi po rozwinieciu. */
.ekran__srodek{opacity:0;transition:opacity .8s var(--e)}
.ekran.f-glowa .ekran__srodek{opacity:1}
/* Powitanie ma zajete miejsce od poczatku, wiec jego pojawienie sie nic nie
   przesuwa - ukrywamy je widocznoscia, nie wyjmowaniem z ukladu. */
.ekran__tytul{visibility:hidden}
.ekran.f-tekst .ekran__tytul{visibility:visible}
/* Pole wpisu i tematy na koniec. */
.pas,.podpowiedzi{opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .8s var(--e),transform .8s var(--e)}
.ekran.f-gotowy .pas,.ekran.f-gotowy .podpowiedzi{opacity:1;transform:none;pointer-events:auto}

.ekran__srodek{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(20px,3vh,34px);padding-block:clamp(20px,3vh,40px);text-align:center}
/* Blu zostaje kolem niezaleznie od tego, ile miejsca ma reszta. */
.awatar{flex:none;width:clamp(72px,7vw,96px);height:clamp(72px,7vw,96px);margin:0;
  border-radius:999px;overflow:hidden;background:#07090C;transition:transform var(--t) var(--e)}
.awatar{position:relative}
.awatar img,.awatar__film{width:100%;height:100%;object-fit:cover;display:block}
/* Film lezy na stopklatce i pokazuje sie dopiero, gdy faktycznie odtwarza -
   gdy przegladarka go zablokuje, zostaje nieruchoma ikona. */
.awatar__film{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e)}
.awatar[data-film] .awatar__film{opacity:1}
/* Gdy Blu mysli, wokol ikony rozchodzi sie pierscien - pauza przed
   odpowiedzia ma wygladac na zamierzona, nie na zawieszenie. Obie wartosci
   to --cyan, tylko w dwoch przezroczystosciach; obrys nie jest cieniem,
   wiec regula o cieniach stoi. */
.ekran[data-mysli] .awatar{transform:scale(.94);animation:bluPuls 1.5s var(--e) infinite}
@keyframes bluPuls{
  from{outline:1px solid rgba(0,179,225,.5);outline-offset:4px}
  to{outline:1px solid rgba(0,179,225,0);outline-offset:15px}}
@media (prefers-reduced-motion:reduce){.ekran[data-mysli] .awatar{animation:none}}

/* Tytul zawiera zlamanie linii ("Jestes. Milo mi.\nCzego szukacie?"). Bez
   pre-line zdania sklejaly sie w "Milo mi.Czego szukacie?" - to pierwsza
   rzecz, jaka czlowiek widzi na ekranie. */
.ekran__tytul{white-space:pre-line;margin:0;max-width:19ch;font-family:var(--font-display);font-weight:500;
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);
  font-size:clamp(1.2rem,2.1vw,1.9rem)}

/* Rozmowa w tej samej kolumnie, tez wysrodkowana. */
.rozmowa{display:flex;flex-direction:column;align-items:center;gap:26px;
  width:100%;max-width:840px;margin-inline:auto;
  min-height:0;max-height:100%;padding-bottom:14px;overflow-y:auto;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 8px),transparent 100%)}
.rozmowa__msg{margin:0;max-width:34ch;white-space:pre-wrap;color:var(--ink);
  font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.2rem,2.1vw,1.9rem)}
/* Dluga wypowiedz czyta sie jak akapit, nie jak naglowek: mniejszy stopien,
   luzniejszy interlinia i pelna szerokosc kolumny. Bez tego 350 znakow
   w skali naglowka nie miescilo sie w oknie rozmowy i urywalo sie w polowie. */
.rozmowa__msg--dlugi{max-width:100%;letter-spacing:-.01em;line-height:1.45;
  font-size:clamp(1rem,1.25vw,1.15rem)}
/* Akapity i punkty w wypowiedzi Blu. Lista buduje sie z elementow, nie
   z HTML-a, wiec tresc od modelu nie ma prawa nic wykonac. */
/* ---------- TRYB ROZMOWY ----------
   Powitanie stoi na srodku ekranu i ma byc duze. Ale gdy rozmowa ma kilka tur,
   wysrodkowana kolumna pokazuje jedna wiadomosc naraz, reszta chowa sie pod
   maska i nie wyglada to jak rozmowa, tylko jak pojedynczy blok tekstu.
   Dlatego od pierwszej wiadomosci uklad sie przestawia: ikona maleje i idzie
   na gore, a log dostaje cala wolna wysokosc. */
.ekran[data-rozmowa] .ekran__srodek{justify-content:flex-start;gap:18px;
  padding-block:clamp(14px,2vh,22px)}
.ekran[data-rozmowa] .awatar{width:44px;height:44px}
.ekran[data-rozmowa] .rozmowa{flex:1;max-height:none;text-align:left;align-items:stretch}
/* W trybie rozmowy wszystkie wypowiedzi Blu maja jeden stopien pisma. Prog
   dlugosci przelaczal go w srodku rozmowy i sasiadujace odpowiedzi mialy
   rozne wielkosci. Duza skala zostaje wylacznie dla powitania. */
.ekran[data-rozmowa] .rozmowa__msg,
.ekran[data-rozmowa] .rozmowa__msg--dlugi{letter-spacing:-.01em;line-height:1.45;
  font-size:clamp(1rem,1.15vw,1.12rem)}
.ekran[data-rozmowa] .rozmowa__msg--ja{font-size:.78rem;line-height:1.4;letter-spacing:.2em}

/* Glosy rozroznia strona, nie dymek: Blu przy lewej krawedzi, czlowiek przy
   prawej. Od razu widac, kto mowi, bez ramek i tel. */
.ekran[data-rozmowa] .rozmowa__msg{max-width:88%;margin-right:auto}
.ekran[data-rozmowa] .rozmowa__msg--ja{max-width:80%;margin-left:auto;margin-right:0;
  text-align:right}
.ekran[data-rozmowa] .rozmowa__msg--ja::before{display:none}
.ekran[data-rozmowa] .rozmowa__msg--ja::after{content:"";display:inline-block;
  width:1.6em;height:1px;margin:0 0 .3em .9em;background:var(--cyan);vertical-align:middle}

/* Wiadomosc z lista wyrownana do lewej w calosci, ale sam blok dalej stoi
   na srodku kolumny. */
.rozmowa__msg--lista{text-align:left;max-width:100%}
.rozmowa__msg .akapit{display:block}
.rozmowa__msg .akapit + .akapit{margin-top:.7em}
.rozmowa__msg ul{margin:.7em 0 0;padding:0;list-style:none;text-align:left;
  display:flex;flex-direction:column;gap:.45em}
.rozmowa__msg li{position:relative;padding-left:1.1em}
.rozmowa__msg li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:1px;background:var(--cyan)}
.rozmowa__msg ul + .akapit{margin-top:.8em}

/* Gdy Blu prosi o kontakt, pas wpisu zapala sie cyjanem - widac, ze to ten
   moment, a nie kolejne pytanie. */
.pas[data-pyta="mail"],.pas[data-pyta="telefon"],.pas[data-pyta="kontakt"]{
  border-color:var(--cyan)}
/* Na czas odpowiedzi pole jest wyciszone i zablokowane. */
/* Kontener Turnstile musi byc widoczny i miec realne wymiary - w elemencie
   schowanym przez .sr widget odmawia rysowania i token nigdy nie powstaje.
   W trybie interaction-only nic tu nie widac, dopoki Cloudflare nie ma
   watpliwosci, wiec pusty kontener po prostu nie zajmuje miejsca. */
/* Widget pokazuje sie tylko na czas sprawdzania, jako czesc rozmowy. Potem
   znika - weryfikacja ma byc pierwszym zdaniem Blu, nie bramka przed strona.
   Kontener musi byc widoczny i miec realne wymiary, bo w schowanym elemencie
   Turnstile odmawia rysowania i token nigdy nie powstaje. */
.turnstile{display:flex;justify-content:center;transform:scale(.8);transform-origin:top center;
  height:0;opacity:0;overflow:hidden;transition:opacity .6s var(--e)}
.ekran[data-sprawdzam] .turnstile{height:auto;opacity:1;margin-top:6px}
.pas[data-zajete]{opacity:.55}
.pas input:disabled{cursor:default}
.rozmowa__msg--ja{max-width:36ch;color:var(--ink-2);font-family:var(--font-body);
  font-weight:500;line-height:1.4;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase}

.pas{display:flex;align-items:center;gap:12px;width:100%;max-width:840px;margin-inline:auto;
  padding:8px 8px 8px 22px;
  border:1px solid var(--rule);border-radius:999px;background:var(--bg);
  transition:border-color var(--t) var(--e)}
.pas:focus-within{border-color:var(--cyan)}
.pas input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);padding-block:14px}
.pas input::placeholder{color:var(--ink-3)}
.pas input:focus{outline:0}
.ctl--wyslij{width:48px;height:48px;flex:none}
.ctl--wyslij .face{inset:4px}
.ctl--wyslij .ico{width:18px;height:18px;margin:-9px 0 0 -9px;fill:none;stroke:var(--icon)}

.podpowiedzi{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  width:100%;max-width:840px;margin:16px auto 0}
.podpowiedzi button{border:1px solid var(--rule);border-radius:999px;background:transparent;
  padding:11px 20px;cursor:pointer;color:var(--ink-2);font-family:var(--font-body);font-size:.94rem;
  transition:color var(--t) var(--e),border-color var(--t) var(--e)}
.podpowiedzi button:hover{color:var(--ink);border-color:var(--ink-3)}
.podpowiedzi button[data-wybrany]{color:var(--cyan);border-color:var(--cyan)}

/* Zgoda na kontakt stoi pod polem wpisu - dane osobowe zbieramy dopiero
   w rozmowie, ale uprzedzic trzeba, zanim ktos zacznie pisac. */
.zgoda{max-width:840px;margin:14px auto 0;text-align:center;
  font-size:.76rem;line-height:1.5;color:var(--ink-3)}
.zgoda a{text-decoration:underline;text-underline-offset:3px}
.zgoda a:hover{color:var(--ink-2)}
.ekran .zgoda{opacity:0;transition:opacity .8s var(--e)}
.ekran.f-gotowy .zgoda{opacity:1}

/* Swiatlo nastrojowe u dolu ekranu - jedyny akcent w tej scenie. */
.ekran__swiatlo{height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}
/* Tekst Blu wychodzi slowo po slowie, kazde z krotkim wyostrzeniem z
   rozmycia - tak drukuje model, a nie dalekopis. Slowo czeka na swoja kolej
   przezroczyste, ale juz zajmuje miejsce, wiec uklad nie drgnie. */
.sl{display:inline-block;opacity:0;filter:blur(5px);
  transition:opacity .85s var(--e),filter .85s var(--e)}
.sl--jest{opacity:1;filter:none}

/* Slowo, ktore klient sam podal (imie, marka), wraca w wypowiedzi Blu
   podswietlone cyjanem. Pasmo blysku wlacza sie DOPIERO po dopisaniu calego
   fragmentu: background-clip maluje tlo rodzica przyciete do wszystkich liter
   w srodku, wiec wlaczony wczesniej pokazywalby tez te jeszcze ukryte. */
.iskra{color:var(--cyan)}
.iskra--blysk{background-image:linear-gradient(100deg,
    var(--cyan) 0 40%,#BCEDFF 50%,var(--cyan) 60% 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:bluIskra 1.2s var(--e) forwards}
@keyframes bluIskra{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .sl{opacity:1;transform:none;filter:none}
  .iskra--blysk{animation:none;-webkit-text-fill-color:currentColor;background-image:none}
}

/* Kursor maszyny - miga tylko, gdy stoi; w trakcie pisania jest ciagly. */
.zn--kursor{animation:bluMiga 1s steps(1,end) infinite}
@keyframes bluMiga{0%,55%{opacity:1}56%,100%{opacity:0}}

@media (max-width:640px){
  .ekran__ramka{height:clamp(440px,calc(100svh - 86px),860px);border-radius:20px}
  /* Na waskim pasku zostaje godzina i dioda - podpis "Blu online" lamal sie
     na dwie linie i rozpychal naglowek ekranu. */
  .ekran__stan span:last-child{display:none}
  .ekran__pasek{letter-spacing:.18em}
  .pas{padding-left:18px}
}


/* ---------- 35. BLOG ---------- */
/* Lista wpisow i strona wpisu. Wpis czyta sie dluzej niz reszta strony, wiec
   dostaje wezsza kolumne i luzniejsza interlinie - to jedyne miejsce, gdzie
   tekst ma byc czytany, a nie ogladany. */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--block) clamp(24px,3vw,48px)}
.karta{display:flex;flex-direction:column;gap:14px;transition:opacity var(--t) var(--e)}
.karta .ph{margin-bottom:6px}
.karta .h3{max-width:none;transition:color var(--t) var(--e)}
.karty:hover .karta{opacity:.42}
.karty:hover .karta:hover,.karta:focus-visible{opacity:1}
/* Rodzaj wpisu rozroznia kreska nad nadtytulem, nie kolor tla. */
.karta .eyebrow{padding-top:12px;border-top:1px solid var(--rule)}
.karta--case .eyebrow{border-top-color:var(--cyan)}
.karta--news .eyebrow{border-top-color:var(--ink-3)}
@media (max-width:900px){.karty{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.karty{grid-template-columns:1fr}}

.wpis{max-width:680px;margin-inline:auto}
.wpis__tytul{max-width:20ch;margin-block:18px 20px}
.wpis__kadr{margin-block:var(--block)}
.wpis__tresc{display:flex;flex-direction:column;gap:22px;margin-top:var(--block)}
.wpis__tresc .p{max-width:none;line-height:1.7}
.wpis__h2{font-size:clamp(1.5rem,2.4vw,2rem);max-width:24ch;margin-top:26px}
.wpis__lista{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;
  color:var(--ink-2);line-height:1.6}
.wpis__lista li::marker{color:var(--cyan)}
.wpis__cytat{margin:10px 0;padding-left:22px;border-left:2px solid var(--cyan);
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.4;color:var(--ink)}
.wpis__kreska{height:1px;border:0;background:var(--rule);margin-block:14px}
.wpis code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  padding:2px 6px;border-radius:4px;background:var(--bg-2)}
.wpis__tresc a{text-decoration:underline;text-underline-offset:3px}
.wpis__stopka{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:var(--block);padding-top:26px;border-top:1px solid var(--rule)}
.arr--wstecz{transform:rotate(180deg)}
.nav__bok .link{font-size:var(--fs-eyebrow)}


/* ---------- 36. PRZEKAZANIE DO XDIVISION ---------- */
/* Zamkniecie strony uslugowej, ktora realizuje dzial technologiczny. Stoi na
   koncu, po tresci merytorycznej - strona ma odpowiadac na pytanie sama
   z siebie, a nie byc bramka do innej domeny. */
.przekaz{max-width:680px;margin-inline:auto;padding-top:30px;border-top:1px solid var(--rule)}
.przekaz .h3{margin-block:10px 14px;max-width:26ch}
.przekaz .p{max-width:56ch;color:var(--ink-2)}

/* Formularz na stronie uslugowej. Lead zostaje u nas, nawet gdy robote
   wykona dzial technologiczny - dlatego formularz jest glownym dzialaniem,
   a odnosnik do xdivision stoi pod nim jako alternatywa. */
.form{margin-top:30px}
.form__pola{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pole{display:flex;flex-direction:column;gap:8px}
.pole--szer{grid-column:1 / -1}
.pole span{font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.pole input,.pole textarea{width:100%;padding:14px 16px;border:1px solid var(--rule);
  border-radius:12px;background:var(--bg-2);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);
  transition:border-color var(--t) var(--e)}
.pole textarea{resize:vertical;min-height:86px}
.pole input:focus,.pole textarea:focus{outline:0;border-color:var(--cyan)}
.form__dol{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px}
.form__dol .k .face{padding:18px 34px}
.form__stan{margin:0;font-size:.92rem;color:var(--ink-2)}
.form__stan[data-blad]{color:var(--cyan)}
.form .zgoda{margin-top:18px;text-align:left;max-width:52ch}
.turnstile--form{margin-top:18px;height:auto;opacity:1;transform:scale(.8);
  justify-content:flex-start}
/* Po wyslaniu pola znikaja, zostaje potwierdzenie. */
.form[data-wyslane] .form__pola,.form[data-wyslane] .form__dol .k,
.form[data-wyslane] .turnstile--form,.form[data-wyslane] .zgoda{display:none}
.przekaz__alternatywa{margin-top:26px;font-size:.94rem;color:var(--ink-3)}
.przekaz__alternatywa a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.przekaz__alternatywa a:hover{color:var(--ink)}
@media (max-width:620px){.form__pola{grid-template-columns:1fr}}


/* ---------- 37. ZGODA NA POMIAR ---------- */
/* Baner buduje site.js, wiec zaden plik HTML go nie zawiera. Wylacznie tokeny
   projektu: to samo tlo co panele, ta sama wloskowata kreska, ta sama krzywa
   ruchu. Dwa przyciski rownorzedne - odmowa nie jest schowana ani slabsza. */
.zgody{position:fixed;z-index:80;
  right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);
  width:min(400px,calc(100vw - 32px));
  display:flex;flex-direction:column;gap:18px;
  padding:22px 24px;border:1px solid var(--rule);border-radius:16px;
  background:var(--bg-2);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.zgody[data-widoczny]{opacity:1;transform:none}
.zgody__tekst{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.zgody__tekst a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.zgody__akcje{display:flex;gap:10px}
.zgody__akcje button{flex:1;padding:12px 16px;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;background:transparent;
  font-family:var(--font-body);font-weight:500;font-size:.9rem;color:var(--ink-2);
  transition:color var(--t) var(--e),border-color var(--t) var(--e)}
.zgody__akcje button:hover{color:var(--ink);border-color:var(--ink-3)}
.zgody__akcje button:first-child{color:var(--ink);border-color:var(--cyan)}
/* Klawisz trybu stoi w lewym dolnym rogu i na waskim ekranie wpadlby pod
   baner - na czas pytania o zgode ustepuje mu miejsca. */
@media (max-width:620px){
  .zgody{left:16px;right:16px;width:auto}
  [data-pyta-o-zgode] .tgdock{transform:translateY(-150px)}
}

/* ---------- 38. WYNIKI JAKO PRZYPADKI ---------- */
/* Jeden zestaw liczb to jeden przypadek. Wszystkie leza w tej samej komorce
   siatki, wiec wysokosc trzyma najwyzszy z nich i przelaczanie nie przesuwa
   niczego pod spodem. Nawigacje dokłada JS i tylko wtedy, gdy przypadkow jest
   wiecej niz jeden - przy jednym sekcja wyglada jak przed zmiana, a strona bez
   JS pokazuje pierwszy przypadek i tyle. */
.przypadki{display:flex;flex-direction:column;gap:var(--block);align-items:flex-start;width:100%}
.przypadki__scena{display:grid;width:100%}
.przypadek{grid-area:1 / 1;display:flex;flex-direction:column;gap:32px;align-items:flex-start;
  width:100%;
  /* Kontener chowa sie dopiero po zgasnieciu dzieci - inaczej ucialby im
     wyjscie w pol ruchu. Wejscie jest natychmiastowe. */
  transition:visibility 0s linear .16s}
.przypadek[aria-hidden="false"]{transition:visibility 0s}
/* Nieaktywny wypada z czytania i z tabulacji: samo opacity zostawiloby go
   w drzewie dostepnosci i pod palcem czytnika. */
.przypadek[aria-hidden="true"]{visibility:hidden;pointer-events:none}

/* Przejscie robia dzieci, nie kontener, i robia je po kolei: najpierw stary
   zestaw gasnie, dopiero potem wchodzi nowy. Przenikanie obu naraz w tej samej
   komorce daje nalozone na siebie liczby, czyli dokladnie to "skakanie".
   Stan wyjsciowy wisi na [data-gotowe], ktore dokłada JS - bez tego strona
   bez JS pokazalaby pusta sekcje. */
.przypadki[data-gotowe] .przypadek .facts li,
.przypadki[data-gotowe] .przypadek > .eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .16s var(--e),transform .16s var(--e)}
.przypadki[data-gotowe] .przypadek[aria-hidden="false"] .facts li,
.przypadki[data-gotowe] .przypadek[aria-hidden="false"] > .eyebrow{opacity:1;transform:none;
  transition:opacity .38s var(--e),transform .38s var(--e)}
/* Kolumny wchodza kaskada, zrodlo na koncu - czyta sie jak jeden ruch,
   a nie jak trzy rzeczy, ktore zapalily sie rownoczesnie. */
.przypadki[data-gotowe] .przypadek[aria-hidden="false"] .facts li:nth-child(2){transition-delay:.07s}
.przypadki[data-gotowe] .przypadek[aria-hidden="false"] .facts li:nth-child(3){transition-delay:.14s}
.przypadki[data-gotowe] .przypadek[aria-hidden="false"] > .eyebrow{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .przypadki[data-gotowe] .przypadek .facts li,
  .przypadki[data-gotowe] .przypadek > .eyebrow{transform:none}
}

.przypadki__nawigacja{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.przypadki__k{appearance:none;-webkit-appearance:none;background:0;border:0;margin:0;padding:6px 0 10px;
  position:relative;cursor:pointer;font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);transition:color var(--t)}
.przypadki__k::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--e)}
.przypadki__k:hover{color:var(--ink-2)}
.przypadki__k[aria-selected="true"]{color:var(--ink)}
.przypadki__k[aria-selected="true"]::after{transform:scaleX(1)}
.przypadki__k:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}
@media (max-width:900px){.przypadki__nawigacja{gap:20px}}

/* ---------- 39. KLAWISZE ODPOWIEDZI W ROZMOWIE ---------- */
/* Gotowe odpowiedzi pod wiadomoscia Blu. Gdy model ich nie poda, pas zostaje
   pusty i czlowiek pisze w polu jak dotad - zadnego pustego ekranu. */
.odp{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
/* Rzad otwarcia stoi pod tytulem, zanim log rozmowy sie pokaze. */
.odp--otwarcie{margin-top:22px}
.odp__k{display:inline-flex;align-items:center;gap:7px;appearance:none;-webkit-appearance:none;
  font-family:var(--font-body);font-size:.88rem;line-height:1;cursor:pointer;
  padding:9px 15px;border-radius:999px;border:1px solid var(--rule);
  background:var(--bg-2);color:var(--ink);
  transition:border-color var(--t),background var(--t),opacity var(--t)}
.odp__k:hover{border-color:var(--cyan)}
.odp__k:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.odp__k[disabled]{opacity:.4;cursor:default}
/* Etykieta nie lamie sie w srodku klawisza - od tego jest zawijanie rzedu.
   Bez tego "Jednego i drugiego" robi z pigulki trzywierszowy owal. */
.odp__k{white-space:nowrap}
/* SVG bez wlasnych wymiarow rozciaga sie do wolnego miejsca we flexie:
   zmierzone 0x0, 40x40 i 64x64 w jednym rzedzie, i to one dyktowaly
   wysokosc klawisza. Rozmiar musi byc podany wprost. */
.odp__k .ico{width:18px;height:18px;flex:0 0 18px}

/* Dziewiec kratek na numer. Ponizej 768 px jedno pole - dziewiec kratek
   na telefonie przegrywa z kciukiem i z klawiatura. */
.numer{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:14px 0 4px}
.numer__kratki{display:flex;gap:6px}
.numer__kratki input{width:34px;height:44px;text-align:center;font-size:1rem;
  font-family:var(--font-body);border:1px solid var(--rule);border-radius:8px;
  background:var(--bg-2);color:var(--ink)}
.numer__kratki input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.numer__jedno{height:44px;padding:0 14px;font-size:1rem;font-family:var(--font-body);
  border:1px solid var(--rule);border-radius:8px;background:var(--bg-2);color:var(--ink);
  width:min(220px,100%)}
.numer__jedno:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.podpowiedzi__podpis{align-self:center;font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.numer__podpis{margin:0;font-size:var(--fs-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
@media (max-width:767px){.numer__kratki,.numer__podpis{display:none}}
@media (min-width:768px){.numer__jedno{display:none}}

/* ---------- 40. BLU PISZE ---------- */
/* Trzy skaczace kropki w miejscu, w ktorym za chwile stanie odpowiedz.
   Pulsowanie samego awatara bylo za ciche - przy kilkusekundowym czekaniu
   czlowiek nie wiedzial, czy cokolwiek sie dzieje. */
.pisze{display:flex;gap:6px;align-items:center;height:24px;margin:0}
.pisze span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);
  animation:bluSkok 1.25s var(--e) infinite}
.pisze span:nth-child(2){animation-delay:.16s}
.pisze span:nth-child(3){animation-delay:.32s}
@keyframes bluSkok{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-6px);opacity:1}
}
/* Bez ruchu kropki zostaja widoczne - informacja o czekaniu musi dotrzec
   takze do kogos, kto animacje wylaczyl. */
@media (prefers-reduced-motion:reduce){
  .pisze span{animation:none;opacity:.55}
}