/* LabKarta / LabCard — shared styles (dark ink theme, prototype-consistent) */

:root{
  --ink:#0d1b2a;          /* deep ink — bg */
  --ink-2:#13263b;        /* panel */
  --ink-3:#1c3349;        /* border/hover */
  --paper:#eef2f6;        /* light text */
  --muted:#8aa0b4;        /* secondary text */
  --signal:#5fd4a8;       /* signal accent: in-range / success */
  --signal-dim:#3a8d72;
  --warn:#f0a35e;         /* out-of-range */
  --line:#27425a;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;
}
::selection{background:var(--signal);color:var(--ink)}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
.wrap.narrow{max-width:760px}

/* ---- NAV ---- */
.nav{
  border-bottom:1px solid var(--line);
  background:rgba(13,27,42,.85);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap;gap:16px;
}
.brand{
  display:flex;align-items:baseline;gap:10px;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;
  color:var(--paper);
}
.brand::before{
  content:"";width:10px;height:10px;background:var(--signal);
  display:inline-block;border-radius:50%;align-self:center;
}
.brand span{color:var(--muted);font-weight:400;font-size:13px}
.nav ul{
  list-style:none;display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  /* generyczne `ul,ol{margin:12px 0 12px 20px}` niżej w pliku dokładało pasek
     nawigacji o 24 px wysokości — nav nie jest listą treści */
  margin:0;max-width:none;
}
.nav ul a{
  color:var(--muted);font-size:14px;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;
}
.nav ul a:hover,.nav ul a.active{color:var(--paper);text-decoration:none}
.nav .lang{
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--muted);letter-spacing:0.06em;
}
.nav .lang:hover{border-color:var(--signal);color:var(--paper);text-decoration:none}

/* hamburger — widoczny tylko w mediach mobilnych niżej */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:36px;padding:0;flex-shrink:0;
  background:transparent;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);cursor:pointer;transition:.15s;
  -webkit-appearance:none;appearance:none;
}
.nav-toggle:hover{color:var(--paper);border-color:var(--signal-dim)}
.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,212,168,.25)}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";position:absolute;left:0;
  display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease;
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav.nav-open .nav-toggle{color:var(--paper);border-color:var(--signal-dim)}
.nav.nav-open .nav-toggle-bars{background:transparent}
.nav.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Warunek celowo obejmuje też NISKI viewport: iPhone w poziomie ma ~390–430 px
   wysokości, a 844 px szerokości, więc nie łapie się w zwykły mobilny breakpoint —
   a to właśnie tam pasek nawigacji zjada najwięcej użytecznej przestrzeni.
   Ten sam warunek jest zduplikowany w assets/js/nav.js (MQ) — zmieniać razem. */
@media (max-width:720px), (max-height:520px){
  .nav .wrap{padding-top:10px;padding-bottom:10px;gap:12px;flex-wrap:nowrap}
  .brand{font-size:16px;min-width:0}
  .brand span{display:none}
  .nav-toggle{display:inline-flex}

  .nav ul{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    margin:0;max-width:none;
    padding:4px 24px 14px;
    background:var(--ink-2);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px rgba(0,0,0,.35);
    max-height:calc(100vh - 58px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav.nav-open ul{display:flex}
  .nav ul li{border-top:1px solid var(--line)}
  .nav ul li:first-child{border-top:none}
  .nav ul a{display:block;padding:13px 2px;font-size:15px}
  .nav .lang{display:inline-block;margin:12px 2px 0;padding:7px 12px}
  .nav ul li:has(.lang){border-top:1px solid var(--line)}
}

/* iPhone w poziomie: 390–430 px wysokości. Rozłożone menu nie może zająć całego
   ekranu, więc pozycje są ciaśniejsze niż w pionie. */
@media (max-height:520px){
  .nav ul{padding-bottom:10px}
  .nav ul a{padding:9px 2px;font-size:14px}
  .nav .lang{margin:9px 2px 0;padding:5px 10px}
}

/* ---- MAIN ---- */
main{flex:1;padding:56px 0 96px}
main.tight{padding:32px 0 64px}

/* ---- HERO ---- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--signal);margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--signal)}
h1{
  font-size:clamp(34px,6vw,56px);font-weight:700;line-height:1.04;
  letter-spacing:-0.02em;margin-bottom:18px;
}
h1 .em{color:var(--signal)}
h2{font-size:28px;font-weight:600;line-height:1.15;margin:56px 0 16px;letter-spacing:-0.01em}
h3{font-size:19px;font-weight:600;margin:32px 0 10px}
h4{font-size:15px;font-weight:600;margin:20px 0 8px;color:var(--paper);
   font-family:'JetBrains Mono',monospace;letter-spacing:0.03em}
.lede{font-size:18px;color:var(--muted);max-width:60ch}
.lede strong{color:var(--paper);font-weight:500}
p{margin:12px 0;color:var(--muted);max-width:70ch}
p strong{color:var(--paper);font-weight:500}
ul,ol{margin:12px 0 12px 20px;color:var(--muted);max-width:70ch}
li{margin:6px 0}
li strong{color:var(--paper);font-weight:500}
hr{border:none;border-top:1px solid var(--line);margin:48px 0}

/* ---- BUTTONS / CTAs ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:13px;
  letter-spacing:0.08em;text-transform:uppercase;font-weight:500;
  cursor:pointer;border:1px solid var(--line);
  background:transparent;color:var(--paper);transition:.2s;
}
.btn.primary{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.btn.primary:hover{background:#7ce0b8;text-decoration:none}
.btn:hover{border-color:var(--signal);color:var(--signal);text-decoration:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* Ikona wiodąca w przycisku — rysowana kreską, dziedziczy kolor tekstu. */
.btn .btn-icon{
  width:16px;height:16px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Logotypy marek (Simple Icons, CC0) są pełnymi kształtami, nie konturem. */
.btn .brand-icon{fill:currentColor;stroke:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- FEATURE CARDS ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:32px}
.card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.card .kicker{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--signal);
  margin-bottom:10px;
}
.card h3{margin:0 0 8px;font-size:17px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* ---- BADGES / TAGS ---- */
.badge{
  display:inline-block;padding:3px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--muted);
}
.badge.signal{border-color:var(--signal-dim);color:var(--signal);background:rgba(95,212,168,.06)}
.badge.warn{border-color:var(--warn);color:var(--warn);background:rgba(240,163,94,.07)}

/* ---- NOTES ---- */
.note{
  margin:16px 0;padding:14px 16px;border-radius:10px;font-size:14px;
  border:1px solid var(--line);background:var(--ink-2);color:var(--muted);
}
.note:empty{display:none}
.note.err{border-color:var(--warn);color:var(--warn);background:rgba(240,163,94,.07)}
.note.ok{border-color:var(--signal-dim);color:var(--signal);background:rgba(95,212,168,.06)}

/* ---- TABLES ---- */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  font-family:'JetBrains Mono',monospace;font-size:13px;
  margin:16px 0;
}
thead th{
  text-align:left;color:var(--muted);font-weight:500;
  padding:12px 14px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--paper)}
tbody tr:last-child td{border-bottom:none}

/* ---- FOOTER ---- */
footer{
  border-top:1px solid var(--line);padding:32px 0;
  color:var(--muted);font-size:12px;line-height:1.7;
  background:var(--ink-2);margin-top:auto;
}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .col{max-width:44ch}
footer strong{color:var(--paper);font-weight:500}
footer a{color:var(--muted)}
footer a:hover{color:var(--paper)}

/* ---- CODE / PRE ---- */
code{
  font-family:'JetBrains Mono',monospace;font-size:.92em;
  background:var(--ink-3);padding:2px 6px;border-radius:4px;color:var(--paper);
}
pre{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;overflow-x:auto;font-size:13px;line-height:1.5;
  color:var(--paper);margin:16px 0;
}
pre code{background:transparent;padding:0}

/* ---- HERO GRID (with visual sidekick) ---- */
.hero-grid{
  display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;
  margin-bottom:28px;
}
/* Lead jest rozbity na dwa bloki, bo na mobile animacja wchodzi POMIĘDZY nie. */
@media (max-width:820px){
  /* `display:contents` wyciąga h1 i oba bloki na poziom kolumny, żeby dało
     się wsunąć `.hero-visual` między nie samym `order` — bez duplikowania
     SVG-a w HTML-u i bez drugiej kopii animacji. */
  .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy h1{order:1}
  .hero-copy .lede-intro{order:2}
  .hero-visual{order:3;align-self:center;margin:20px 0 4px}
  .hero-copy .privacy-note{order:4}
}

/* ---- PANEL PRYWATNOŚCI W HERO (reguła #2 jako element, nie przypis) ---- */
.privacy-note{
  display:flex;align-items:flex-start;gap:14px;
  margin-top:26px;padding:15px 18px 15px 16px;max-width:60ch;
  background:var(--ink-2);border:1px solid var(--line);
  border-left:2px solid var(--signal);border-radius:var(--radius);
}
.privacy-note p{margin:0;max-width:none;font-size:15px;line-height:1.55}
.privacy-note strong{color:var(--paper);font-weight:600}
.privacy-lock{flex:0 0 auto;width:40px;height:40px}
.privacy-lock svg{width:40px;height:40px;display:block;overflow:visible}
.privacy-lock .w{
  fill:none;stroke:var(--signal);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.privacy-lock .w-fill{fill:var(--signal)}
/* Pałąk startuje uniesiony (kłódka otwarta) i opada dopiero po wyrysowaniu
   konturu — „zatrzask". Reszta korzysta ze wspólnego mechanizmu `data-draw`. */
.privacy-note.draw-init .lock-shackle{transform:translateY(-4.5px)}
.privacy-note.draw-init.is-drawn .lock-shackle{
  animation:draw-stroke .8s cubic-bezier(.35,0,.25,1) forwards,
            lock-close .45s cubic-bezier(.34,1.5,.64,1) .75s forwards;
}
@keyframes lock-close{to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .privacy-note.draw-init .lock-shackle{transform:none}
}

/* ---- HERO ANIMATION (scoped to .hero-visual, unikamy kolizji z .drop OCR itp.) ---- */
.hero-visual{--anim-line:var(--signal);--anim-line-dim:#2f6b58;--anim-dur:12s;flex-shrink:0}
.hero-visual .stage{width:432px;height:432px}
.hero-visual .stage svg{width:100%;height:100%;overflow:visible}
.hero-visual .wire{
  fill:none;stroke:var(--anim-line);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.hero-visual .wire-dim{stroke:var(--anim-line-dim);stroke-width:1.2}
/* Cała animacja to jedna scena `.doc`: wspólny obrys `.outline` morfuje
   między trzema kształtami (probówka → kartka → telefon), a zawartość każdej
   fazy (`tube-content`, `paper-content`, `phone-content`) cross-faduje na jego
   tle. Obrys ma strukturę `M + L C L C L C L C + Z` (9 komend) — dla ostrych
   naroży kartki/probówki kontrolne punkty C leżą na odcinku start-end
   (degenerują się do prostej), dla telefonu dają zaokrąglenie r=8, dla dna
   probówki r=18.

   ⚠️ SAM MORF SIEDZI W HTML-u, W SMIL-u (`<animate attributeName="d">`) —
   NIE PRZENOSIĆ GO Z POWROTEM DO `@keyframes { d: path(...) }`. WebKit
   (Safari, każda przeglądarka na iOS) **nie implementuje CSS-owej właściwości
   `d`** — na iPhonie obrys zostawał zamrożony na probówce, a treść kartki
   i telefonu przelatywała po nim. SMIL działa we wszystkich silnikach.
   Czas trwania `12s` jest w SMIL-u zapisany na sztywno (SMIL nie czyta
   custom properties) — przy zmianie `--anim-dur` poprawić w OBU miejscach. */
.hero-visual .scene{transform-origin:150px 150px}
.hero-visual .doc{animation:hero-doc var(--anim-dur) cubic-bezier(.4,0,.2,1) infinite}
.hero-visual .tube-content{animation:hero-tube var(--anim-dur) ease-out infinite}
.hero-visual .paper-content{animation:hero-paper var(--anim-dur) ease-out infinite}
.hero-visual .phone-content{animation:hero-phone var(--anim-dur) ease-out infinite}
.hero-visual .drop{animation:hero-travel var(--anim-dur) cubic-bezier(.5,0,.3,1) infinite}
.hero-visual .drop circle{fill:var(--anim-line)}
.hero-visual .liquid{transform-origin:150px 176px;animation:hero-fill var(--anim-dur) ease-out infinite}
.hero-visual .paper-content .row{animation:hero-row-in var(--anim-dur) ease-out infinite}
.hero-visual .paper-content .row:nth-of-type(2){animation-delay:.35s}
.hero-visual .paper-content .row:nth-of-type(3){animation-delay:.7s}
.hero-visual .trend-reveal{animation:hero-trend var(--anim-dur) cubic-bezier(.5,0,.3,1) infinite}
@media (max-width:820px){
  .hero-visual .stage{width:336px;height:336px}
}
@media (prefers-reduced-motion:reduce){
  .hero-visual .drop,
  .hero-visual .liquid,
  .hero-visual .tube-content,
  .hero-visual .paper-content{
    animation:none;opacity:0;
  }
  .hero-visual .doc,
  .hero-visual .phone-content{animation:none;opacity:1}
  /* Obrysu nie da się zatrzymać stąd — SMIL-a nie obchodzą media queries.
     Robi to `draw-in.js`: kasuje `<animate>` i zamraża kształt na telefonie. */
  .hero-visual .trend-reveal{animation:none;width:54px}
}

/* Domyślnie `.doc` widoczne przez prawie cały cykl — krótki fade-in na starcie
   i fade-out na końcu ukrywają "reset" morfa (telefon → probówka) w loop-poincie. */
@keyframes hero-doc{
  0%,3%    {opacity:0;transform:translateY(6px) scale(.98)}
  8%       {opacity:1;transform:none}
  92%      {opacity:1;transform:none}
  100%     {opacity:0;transform:translateY(-4px) scale(1.01)}
}
@keyframes hero-tube{
  0%,3%    {opacity:0}
  8%,22%   {opacity:1}
  30%,100% {opacity:0}
}
@keyframes hero-paper{
  0%,26%   {opacity:0}
  34%,48%  {opacity:1}
  58%,100% {opacity:0}
}
@keyframes hero-phone{
  0%,58%   {opacity:0}
  66%,90%  {opacity:1}
  98%,100% {opacity:0}
}
@keyframes hero-row-in{
  0%,28%   {opacity:0;transform:translateX(-6px)}
  38%,48%  {opacity:.9;transform:none}
  58%,100% {opacity:0;transform:translateX(4px)}
}
@keyframes hero-travel{
  /* Probówka: kropka wpada z góry do cieczy */
  0%,4%    {opacity:0; transform:translate(150px,104px)}
  10%      {opacity:1; transform:translate(150px,104px)}
  22%      {opacity:1; transform:translate(150px,138px)}
  /* Kartka: zig-zag jak wodzenie wzrokiem po trzech wierszach (y=132/152/172) */
  32%      {opacity:1; transform:translate(120px,132px)}
  37%      {opacity:1; transform:translate(180px,132px)}
  41%      {opacity:1; transform:translate(120px,152px)}
  46%      {opacity:1; transform:translate(180px,152px)}
  50%      {opacity:1; transform:translate(120px,172px)}
  55%      {opacity:1; transform:translate(180px,172px)}
  /* Przejście kartka → telefon: chowamy kropkę, żeby nie "jechała" przez
     pół sceny w lewo podczas cross-fade'u, i pojawiamy ją już na starcie
     linii trendu. */
  58%      {opacity:0; transform:translate(180px,172px)}
  64%      {opacity:0; transform:translate(124px,176px)}
  /* Telefon: kropka wędruje wzdłuż linii trendu w tempie jej rysowania —
     wygląda jak pióro kreślące wykres, kończy jako końcowy punkt danych. */
  66%      {opacity:1; transform:translate(124px,176px)}
  71%      {opacity:1; transform:translate(142px,160px)}
  74%      {opacity:1; transform:translate(160px,168px)}
  80%,90%  {opacity:1; transform:translate(176px,144px)}
  94%,100% {opacity:0; transform:translate(176px,144px)}
}
@keyframes hero-fill{
  0%,2%   {transform:scaleY(0);opacity:0}
  8%,22%  {transform:scaleY(1);opacity:1}
  28%,100%{transform:scaleY(1);opacity:0}
}
@keyframes hero-trend{
  /* `x + width` klipu pokrywa się z pozycją X kropki: 124 → 142 → 160
     → 176. Końcowy zapas odsłania prawą połówkę zaokrąglonej końcówki. */
  0%,66%   {width:0}
  71%      {width:18px}
  74%      {width:36px}
  80%,100% {width:54px}
}

/* ---- SHOWCASE (podgląd Apple Zdrowie nad FAQ) ---- */
.showcase{margin-top:80px}
.showcase h2{margin-bottom:10px}
.showcase .intro{
  color:var(--muted);max-width:none;margin-bottom:32px;font-size:16px;line-height:1.6;
}
.showcase .intro strong{color:var(--paper);font-weight:500}
.showcase-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 40px;
  align-items:start;
}
@media (max-width:720px){
  .showcase-grid{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
}
.showcase figure{margin:0;text-align:center}
.iphone-frame{
  aspect-ratio:9/19;background:var(--ink);
  border:2px solid var(--line);border-radius:40px;padding:6px;
  position:relative;margin:0 auto;max-width:275px;
  box-shadow:0 14px 44px rgba(0,0,0,.35);
}
.iphone-frame::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:58px;height:16px;background:var(--ink);border-radius:0 0 12px 12px;
  z-index:2;
}
.iphone-screen{
  width:100%;height:100%;background:linear-gradient(180deg,#12253a,#0d1b2a);
  border-radius:28px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;padding:26px 12px 14px;
}
.iphone-screen .title{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px;
}
.iphone-screen svg{width:100%;flex:1;overflow:visible}
.iphone-screen .wire{
  fill:none;stroke:var(--signal);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
}
.iphone-screen .wire-dim{stroke:#2f6b58;stroke-width:.9;opacity:.8}
.iphone-screen .fill-signal{fill:var(--signal)}
.iphone-screen .txt{
  fill:var(--muted);font-family:'JetBrains Mono',monospace;font-size:5px;
}
.iphone-screen .txt-strong{fill:var(--paper);font-size:6px}

/* Wariant ze zrzutem ekranu / wideo z Apple Zdrowie
   (screenshoty mają własny statusbar, więc ukrywamy fake-notch i padding) */
.iphone-screen--photo{padding:0;background:#000}
.iphone-screen--photo img,
.iphone-screen--photo video{
  display:block;width:100%;height:100%;object-fit:cover;
}
.iphone-frame:has(.iphone-screen--photo)::before{display:none}

/* Subtelna ikona replay w rogu telefonika (pojawia się po zakończeniu wideo) */
.video-replay{
  position:absolute;right:12px;bottom:12px;
  width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  /* półprzezroczysta ciemna otoczka + drop-shadow — oddziela od ikonek na tle wideo */
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.55);
  opacity:0;transform:scale(.85);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,background-color .15s ease;
  z-index:3;
}
.video-replay.is-visible{opacity:.95;transform:scale(1);pointer-events:auto}
.video-replay:hover{opacity:1;background:rgba(0,0,0,.72)}
.video-replay:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.video-replay svg{width:22px;height:22px}

.showcase figcaption{
  margin-top:16px;font-size:14px;color:var(--paper);font-weight:500;
}
.showcase figcaption span{
  display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px;
}
/* ---- „Jakim cudem to działa" — tekst + grafika obok ---- */
.explainer{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:48px;
  align-items:center;margin-top:4px;
}
@media (max-width:900px){
  .explainer{grid-template-columns:1fr;gap:32px}
  .explainer-figure{max-width:220px;margin-inline:auto}
}
.explainer .intro{margin-bottom:16px}
.explainer .intro:last-child{margin-bottom:0}
.explainer .intro strong{color:var(--paper);font-weight:600}
.explainer .intro sup{font-size:9px;color:var(--muted);vertical-align:super}
.explainer .intro .ref{
  color:var(--signal);text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  vertical-align:super;padding-left:1px;
}
.explainer .intro .ref:hover{text-decoration:underline}

.explainer-links{list-style:none;margin:22px 0 0;padding:0}
.explainer-links a{
  display:inline-flex;align-items:flex-start;gap:9px;
  color:var(--muted);font-size:13.5px;line-height:1.5;text-decoration:none;
  transition:color .16s ease;
}
.explainer-links a:hover{color:var(--signal)}
.explainer-links .ico{
  flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.explainer-links .ico-globe{width:16px;height:16px;margin-top:2px;color:var(--signal-dim)}
.explainer-links a:hover .ico-globe{color:var(--signal)}
.explainer-links .ico-ext{width:13px;height:13px;margin-top:3px;opacity:.65}

.explainer-more{margin:24px 0 0;text-align:center}
.explainer-more a{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 24px;border-radius:999px;
  border:1px solid var(--signal-dim);
  color:var(--signal);font-size:15px;font-weight:600;text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}
.explainer-more a::after{content:"→"}
.explainer-more a:hover{background:rgba(95,212,168,.1);border-color:var(--signal)}

.explainer-figure{margin:0;text-align:center}
.fhir-stage{position:relative}
.explainer-figure svg{width:100%;height:auto;display:block;overflow:visible}
.explainer-figure .w{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.explainer-figure .w-dim{fill:none;stroke:#2f6b58;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.explainer-figure .rec-title{fill:var(--paper);opacity:.75}
.explainer-figure .rec-key{fill:#2f6b58}
.explainer-figure .rec-val{fill:var(--signal);opacity:.85}
.explainer-figure .rec-check{
  fill:none;stroke:var(--signal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.fhir-badge{
  position:absolute;left:50%;top:46%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;transform:translate(-50%,-50%);
  opacity:0; /* pokażemy ją tylko w animacji; bez JS zostaje sam gotowy rekord */
}
.fhir-badge img{
  display:block;width:52px;height:52px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.fhir-wordmark{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--paper);white-space:nowrap;
}
.fhir-wordmark sup{font-size:7px;color:var(--muted);vertical-align:super}
.explainer-figure figcaption{
  margin-top:18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;line-height:1.7;color:var(--muted);letter-spacing:.01em;
  text-wrap:balance;
}
.explainer-figure figcaption sup{font-size:7.5px;vertical-align:super}

/* ---- „Dlaczego warto" — trzy kolumny, ikona nad tekstem, bez ramek ---- */
.why{margin-top:88px}
.why h2{margin-top:0;margin-bottom:6px}
.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px;margin-top:44px;
}
@media (max-width:820px){
  .why-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:44px}
}
.why-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.why-icon{
  width:136px;height:136px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 46%,rgba(95,212,168,.13),rgba(95,212,168,0) 68%);
}
.why-icon svg{width:101px;height:101px;display:block;overflow:visible}
.why-icon .w{fill:none;stroke:var(--signal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-icon .w-dim{fill:none;stroke:#2f6b58;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.why-icon .w-ring{fill:none;stroke:#2f6b58;stroke-width:1.5}
.why-icon .w-fill{fill:var(--signal)}
.why-item h4{
  margin:0 0 10px;font-size:18px;color:var(--paper);
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-0.01em;
}
.why-item p{margin:0;color:var(--muted);font-size:15px;max-width:34ch}

/* ---- Animacja „wyrysowania" (klasy dokłada JS: assets/js/draw-in.js) ---- */
.draw-init .w,
.draw-init .w-dim{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
}
.draw-init .w-fill,
.draw-init .w-ring,
.draw-init text{opacity:0}
.draw-init .w-fill{transform:scale(.4);transform-box:fill-box;transform-origin:center}
.draw-init.is-drawn .w,
.draw-init.is-drawn .w-dim{
  animation:draw-stroke .85s cubic-bezier(.35,0,.25,1) forwards;
  animation-delay:calc(var(--i,0) * .11s);
}
.draw-init.is-drawn .w-fill{
  animation:draw-pop .4s cubic-bezier(.34,1.4,.64,1) forwards;
  animation-delay:calc(.45s + var(--i,0) * .07s);
}
.draw-init.is-drawn .w-ring{
  animation:draw-fade .7s ease forwards;animation-delay:.15s;
}
.draw-init.is-drawn text{
  animation:draw-fade .5s ease forwards;
  animation-delay:calc(.3s + var(--i,0) * .05s);
}
@keyframes draw-stroke{to{stroke-dashoffset:0}}
@keyframes draw-pop{to{opacity:1;transform:scale(1)}}
@keyframes draw-fade{to{opacity:1}}

/* Ognik FHIR „wjeżdża" na podkładkę, chwilę leży jako znak standardu,
   po czym znika i zostawia po sobie wypisujący się rekord */
.explainer-figure.draw-init .rec-row{opacity:0}
.explainer-figure.draw-init .rec-check{stroke-dasharray:31;stroke-dashoffset:31}
.explainer-figure.draw-init.is-drawn .fhir-badge{
  animation:fhir-land 4.4s cubic-bezier(.22,.72,.3,1) forwards;
  animation-delay:.3s;
}
.explainer-figure.draw-init.is-drawn .rec-row{
  animation:rec-in .5s ease forwards;
  animation-delay:calc(4.15s + var(--d,0) * .13s);
}
.explainer-figure.draw-init.is-drawn .rec-check{
  animation:draw-stroke .55s cubic-bezier(.35,0,.25,1) forwards;
  animation-delay:5.3s;
}
@keyframes fhir-land{
  0%{opacity:0;transform:translate(-50%,-186%) scale(1.18)}
  12%{opacity:1}
  30%{transform:translate(-50%,-50%) scale(1)}
  86%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(.66)}
}
@keyframes rec-in{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- Standardy, na których to stoi (strona „Jak i dlaczego") ---- */
.standards-panel{
  margin:28px 0 8px;padding:28px 26px 26px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:
    linear-gradient(0deg,rgba(95,212,168,.03),rgba(95,212,168,.03)),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 100%,
    var(--ink-2);
  background-blend-mode:normal;
  position:relative;overflow:hidden;
}
.standards-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(13,27,42,0) 20%,var(--ink-2) 100%);
  opacity:.85;
}
.standards-panel > *{position:relative;z-index:1}
.standards-panel h2{margin-top:0}
.standards{display:grid;gap:14px;margin-top:22px}
.standard{
  background:rgba(13,27,42,.55);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;
  display:grid;grid-template-columns:52px minmax(0,1fr);
  column-gap:18px;row-gap:6px;align-items:start;
  grid-template-areas:"mark title" "mark text" "mark link";
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
@media (max-width:560px){
  .standard{grid-template-columns:1fr;grid-template-areas:"mark" "title" "text" "link"}
}
.standard-mark{
  grid-area:mark;
  width:52px;height:52px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
}
.standard-mark img{display:block;width:34px;height:34px;object-fit:contain}
.standard-mark svg{width:28px;height:28px;display:block}
.standard-mark .w{fill:none;stroke:var(--signal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.standard-mark .w-fill{fill:var(--signal)}
.standard h4{
  grid-area:title;
  margin:0;font-size:13.5px;color:var(--paper);
  font-family:'JetBrains Mono',monospace;letter-spacing:.03em;
}
.standard h4 sup{font-size:9px;color:var(--muted);vertical-align:super}
.standard p{grid-area:text;margin:0;font-size:13.5px;color:var(--muted);max-width:none}
.standard code{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);
  background:rgba(255,255,255,.05);border-radius:4px;padding:1px 5px;
}
.standard-link{
  grid-area:link;margin-top:4px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal);justify-self:start;
}

@media (prefers-reduced-motion:reduce){
  .draw-init .w,.draw-init .w-dim{stroke-dasharray:none;stroke-dashoffset:0}
  .draw-init .w-fill,.draw-init .w-ring,.draw-init text{opacity:1;transform:none}
  .explainer-figure.draw-init .rec-row{opacity:1}
  .explainer-figure.draw-init .rec-check{stroke-dasharray:none;stroke-dashoffset:0}
  .explainer-figure.draw-init.is-drawn .fhir-badge,
  .explainer-figure.draw-init.is-drawn .rec-check,
  .explainer-figure.draw-init.is-drawn .rec-row{animation:none}
  .draw-init.is-drawn .w,
  .draw-init.is-drawn .w-dim,
  .draw-init.is-drawn .w-fill,
  .draw-init.is-drawn .w-ring,
  .draw-init.is-drawn text{animation:none}
}

/* ---- FAQ (native <details>) ---- */
.faq{margin-top:64px}
.faq h2{margin-bottom:20px}
.faq details{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;margin:10px 0;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:18px 22px;font-weight:500;
  color:var(--paper);list-style:none;
  display:flex;align-items:center;gap:14px;font-size:15px;
  transition:background .15s;
}
.faq summary:hover{background:var(--ink-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";color:var(--signal);
  font-family:'JetBrains Mono',monospace;font-size:20px;
  display:inline-block;width:14px;flex-shrink:0;line-height:1;
}
.faq details[open] summary::before{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .answer{padding:16px 22px 20px 58px;color:var(--muted);font-size:15px;line-height:1.6}
.faq .answer p{margin:0 0 10px;color:var(--muted);max-width:none}
.faq .answer p:last-child{margin-bottom:0}
.faq .answer strong{color:var(--paper);font-weight:500}
.faq .answer ul{margin:8px 0 8px 20px}
.faq .answer li{margin:4px 0}
@media (max-width:560px){.faq .answer{padding-left:22px}}

/* ---- UTIL ---- */
.mono{font-family:'JetBrains Mono',monospace}
.muted{color:var(--muted)}
.mt-0{margin-top:0}
.mt-4{margin-top:32px}