/* ==========================================================================
   MACLOM - system projektowy
   Motyw: papier i wskazniki poziomu tonera.
   Sygnaturowy element: poziome paski wypelnienia (.gauge).
   ========================================================================== */

:root{
  /* Papier: wieksze odstepy miedzy poziomami, zeby sekcje i kafelki
     wyraznie sie od siebie odcinaly. */
  --paper:        #E7E2D6;  /* plotno strony, glebsze */
  --paper-raised: #FCFAF5;  /* sekcje i kafelki, prawie biale */
  --paper-sunken: #DCD6C6;  /* wglebienia, rowki wskaznikow */

  /* Atrament */
  --ink:      #211F1B;
  --ink-soft: #55524A;

  /* Akcenty */
  --teal:      #146664;
  --teal-dark: #0E4B49;
  --magenta:   #A83A63;
  --amber:     #C08F1E;
  --amber-ink: #7A5A0E;  /* wersja bursztynu do tekstu, kontrast 5.3:1 */

  /* Linie */
  --line:        #D8D2C4;  /* dekoracyjne */
  --line-strong: #7F7A6B;  /* obramowania elementow interaktywnych, 3.5:1 */

  /* Glebsza zieleń do gradientow na ciemnych powierzchniach */
  --teal-deep: #0B3E3D;
  --teal-lit:  #17706E;

  /* Ksztalt i rytm */
  --radius:      20px;
  --radius-lg:   26px;
  --radius-sm:   12px;
  --radius-pill: 999px;
  --max:         1120px;
  --gap:         clamp(56px, 8vw, 96px);

  /* Krzywe */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Cienie rozlane, nie ostre: glebia bez twardej krawedzi */
  --shadow-soft: 0 1px 2px rgba(33,31,27,.03), 0 10px 30px -10px rgba(33,31,27,.13);
  --shadow-lift: 0 2px 6px rgba(33,31,27,.05), 0 24px 52px -14px rgba(33,31,27,.20);
  --shadow-deep: 0 4px 10px rgba(11,62,61,.14), 0 30px 64px -18px rgba(11,62,61,.42);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;
  scroll-padding-top:98px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  margin:0;
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:clamp(34px,5.4vw,70px);letter-spacing:-0.035em;line-height:1.04;}
h2{font-size:clamp(27px,4vw,46px);letter-spacing:-0.028em;line-height:1.08;}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-0.015em;line-height:1.2;}
h4{font-size:15px;font-weight:600;letter-spacing:0;line-height:1.3;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
a{color:var(--teal-dark);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--teal);}
img{max-width:100%;height:auto;display:block;}
ul,ol{margin:0 0 1em;padding-left:1.35em;}
li{margin-bottom:.5em;}
li:last-child{margin-bottom:0;}
strong{font-weight:600;}
hr{border:0;border-top:1px solid var(--line);margin:32px 0;}

.mono{font-family:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;font-feature-settings:"tnum";}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px;}
::selection{background:rgba(20,102,100,.18);}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,28px);}
.narrow{max-width:74ch;}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
.small{font-size:13.5px;}
.center{text-align:center;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--teal);color:#fff;padding:11px 18px;border-radius:0 0 10px 10px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0;color:#fff;}

/* --- Warstwa tla: jedno srodowisko dla calej strony ---------------------- */
/* PAPIER CIAGLY: delikatne linie skladania przy krawedziach.
   Rysowane w CSS, zero plikow. */
.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
}
/* Linie zagiecia tylko tam, gdzie jest na nie miejsce w marginesie.
   Kolumna tekstu ma 1120px, wiec ponizej 1240px wchodzilyby na tresc.
   Perforacji nie ma wcale: na waskich ekranach ladowala na literach. */
@media (min-width:1240px){
  .env{
    background-image:
      linear-gradient(90deg, rgba(33,31,27,.07) 1px, transparent 1px),
      linear-gradient(-90deg, rgba(33,31,27,.07) 1px, transparent 1px);
    background-size:52px 100%, 52px 100%;
    background-position:52px 0, calc(100% - 52px) 0;
    background-repeat:no-repeat, no-repeat;
  }
}

/* POSWIATA SWIECY ZA KURSOREM: cieple, miekkie swiatlo o krotkim zasiegu,
   z ledwo wyczuwalnym drzeniem plomienia. Tylko mysz, tylko przy ruchu. */
.kursor-halo{
  position:fixed;left:0;top:0;width:104px;height:104px;
  margin:-52px 0 0 -52px;border-radius:50%;
  pointer-events:none;z-index:5;
  background:radial-gradient(circle,
    rgba(249,193,108,.145) 0%,
    rgba(242,168,80,.10) 28%,
    rgba(224,141,52,.048) 50%,
    rgba(196,116,40,.016) 70%,
    transparent 82%);
  opacity:0;transition:opacity .4s var(--ease);
  will-change:transform;
}
.kursor-halo::before{
  content:'';position:absolute;inset:32%;border-radius:50%;
  background:radial-gradient(circle, rgba(250,201,124,.16), transparent 72%);
  animation:plomien 3.4s var(--ease) infinite alternate;
}
@keyframes plomien{
  from{opacity:.75;transform:scale(.94);}
  to  {opacity:1;  transform:scale(1.07);}
}
.kursor-halo.widoczne{opacity:1;}
body.paused .kursor-halo::before{animation-play-state:paused;}
@media (hover:none),(pointer:coarse){.kursor-halo{display:none;}}
@media (prefers-reduced-motion:reduce){.kursor-halo{display:none;}}
body.motion-off .kursor-halo{display:none;}

/* Drukowanie ze strony dziala tylko tam, gdzie przegladarka je obsluguje.
   Na dotyku wiekszosc mobilnych ignoruje window.print(), wiec przycisku
   nie pokazujemy wcale - zostaje pobranie gotowego PDF. */
@media (hover:none),(pointer:coarse){
  [data-drukuj]{display:none!important;}
}
.env::before{
  content:'';position:absolute;inset:-6%;
  background:
    radial-gradient(56% 42% at 12% 4%,  rgba(20,102,100,.10),  transparent 62%),
    radial-gradient(48% 40% at 94% 24%, rgba(192,143,30,.085), transparent 64%),
    radial-gradient(62% 46% at 48% 104%,rgba(168,58,99,.06),   transparent 66%);
  animation:envDrift 96s var(--ease) -18s infinite alternate;
}
@keyframes envDrift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1.02);}
  to  {transform:translate3d(1.4%,1.2%,0) scale(1.07);}
}

/* --- Pasek tonera: sygnaturowy separator --------------------------------- */
.toner-strip{display:flex;height:3px;border-radius:2px;overflow:hidden;}
.toner-strip i{display:block;height:100%;}
.toner-strip i:nth-child(1){flex:5;background:var(--teal);}
.toner-strip i:nth-child(2){flex:2;background:var(--magenta);}
.toner-strip i:nth-child(3){flex:3;background:var(--amber);}
.toner-strip i:nth-child(4){flex:8;background:var(--line);}

/* --- Naglowek ------------------------------------------------------------ */
/* Belka na atramencie: spina sie z ciemnym hero i ramuje cala strone. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(32,30,26,.95), rgba(24,22,19,.95));
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 26px -14px rgba(0,0,0,.7);
}
@supports not (backdrop-filter:blur(4px)){
  .site-header{background:#1E1C19;}
}
/* Kolorowa krawedz zamiast szarej kreski: ten sam motyw co wskaznik tonera. */
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,
    var(--teal) 0%, var(--teal) 38%,
    var(--magenta) 38%, var(--magenta) 52%,
    var(--amber) 52%, var(--amber) 63%,
    rgba(255,255,255,.16) 63%);
  opacity:.92;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;}
.brand{position:relative;display:inline-flex;align-items:center;text-decoration:none;line-height:0;border-radius:8px;}
/* Poswiata pod logo: miekka plama swiatla, ktora odrywa znak od ciemnej belki. */
.brand::before{
  content:'';position:absolute;left:50%;top:50%;
  width:170%;height:190%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(127,212,208,.20) 0%,
    rgba(127,212,208,.10) 38%,
    rgba(255,255,255,.05) 58%,
    transparent 74%);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.brand img{
  position:relative;width:112px;height:auto;
  filter:drop-shadow(0 0 10px rgba(127,212,208,.28)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transition:filter .25s var(--ease);
}
.brand:hover::before{transform:translate(-50%,-50%) scale(1.08);}
.brand:hover img{filter:drop-shadow(0 0 16px rgba(127,212,208,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.5));}
@media (max-width:620px){ .brand img{width:96px;} }

.site-nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
/* Menu: wersaliki, szerokie rozstrzelenie, font nagłówkowy.
   Charakter bierze się z traktowania liter, nie z nowego kroju. */
.site-nav a{
  font-family:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.11em;
  text-decoration:none;color:#C4C0B4;
  padding:6px 0;position:relative;
  transition:color .18s var(--ease);
}
.site-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.site-nav a:hover{color:#fff;}
.site-nav a:hover::after{transform:scaleX(1);}
.site-nav a[aria-current="page"]{color:#fff;font-weight:600;}
.site-nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--magenta);}
/* Uwaga na kolejnosc: regula z [aria-current] ma wyzsza wage niz sama klasa,
   dlatego przycisk kontaktu deklaruje swoj kolor takze w wariancie aktywnym. */
.site-nav a.nav-cta,
.site-nav a.nav-cta[aria-current="page"]{
  background:var(--teal);color:#fff;padding:11px 20px;border-radius:999px;font-weight:600;
  letter-spacing:.09em;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.site-nav .nav-cta::after{display:none;}
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta[aria-current="page"]:hover{background:var(--teal-dark);color:#fff;transform:translateY(-1px);}

.burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.34);border-radius:10px;
  cursor:pointer;padding:9px 10px;line-height:0;
}
.burger span{display:block;width:20px;height:2px;background:#EDEAE2;border-radius:2px;transition:transform .24s var(--ease),opacity .18s var(--ease);}
.burger span+span{margin-top:5px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --- Pasek zaufania pod hero -------------------------------------------- */
.trust-bar{background:var(--paper-raised);border-bottom:1px solid var(--line);}
.trust-bar-inner{
  display:flex;flex-wrap:wrap;gap:10px clamp(20px,4vw,54px);
  padding:15px clamp(18px,4vw,28px);
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;
  color:var(--ink-soft);
}
.trust-bar-inner span{display:inline-flex;align-items:center;gap:8px;}
.trust-bar-inner span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;}
.trust-bar-inner span:nth-child(2)::before{background:var(--magenta);}
.trust-bar-inner span:nth-child(3)::before{background:var(--amber);}
.trust-bar-inner span:nth-child(4)::before{background:var(--ink-soft);}
.trust-bar-inner b{color:var(--ink);font-weight:500;}

/* --- Sekcje -------------------------------------------------------------- */
main{display:block;}
.section{padding:var(--gap) 0;}
.section--tight{padding:calc(var(--gap) * .62) 0;}
.section--raised{background:var(--paper-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* Sekcja na atramencie: miejsce, gdzie oko ma sie zatrzymac. Uzywac rzadko. */
.section--ink{background:var(--ink);color:#C9C5B8;}
.section--ink h2,.section--ink h3{color:#fff;}
.section--ink .section-head p,.section--ink p{color:#A8A396;}
.section--ink .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#9FE0DC;}
.section--ink .eyebrow::before{background:#7FD4D0;}
.section--ink .card,.section--ink .steps li{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none;
}
.section--ink .card p,.section--ink .steps li p{color:#A8A396;}
.section--ink .card:hover{border-color:#7FD4D0;background:rgba(255,255,255,.07);}
.section--ink .gauge{background:rgba(255,255,255,.13);box-shadow:none;}
.section--ink .tag{background:rgba(127,212,208,.13);color:#9FE0DC;}
.section--ink .tag--new{background:rgba(233,150,182,.15);color:#F0A9C2;}
.section--ink .tag--amber{background:rgba(230,190,90,.15);color:#E6C878;}
.section--ink .link-arrow{color:#7FD4D0;}
.section--ink .link-arrow:hover{color:#fff;}
.section--ink .steps li::before{color:#7FD4D0;}
.section--ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42);}
.section--ink .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.section--ink .checklist li::before{background:#7FD4D0;}
.section--ink a:not(.btn):not(.link-arrow){color:#9FE0DC;}

/* --- Pas wklesly: papier wcisniety, lamie ciag jednego tla --------------- */
.section--sunken{
  position:relative;
  background:var(--paper-sunken);
  box-shadow:inset 0 9px 14px -12px rgba(33,31,27,.30),
             inset 0 -9px 14px -12px rgba(33,31,27,.30);
}
.section--sunken::before,
.section--sunken::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(33,31,27,.16) 12%,rgba(33,31,27,.16) 88%,transparent);
}
.section--sunken::before{top:0;}
.section--sunken::after{bottom:0;}
/* karty na wkleslym tle maja odstawac mocniej */
.section--sunken .card,
.section--sunken .step,
.section--sunken .chip{
  box-shadow:0 2px 0 rgba(255,255,255,.55) inset, 0 10px 22px -14px rgba(33,31,27,.45);
}
/* FAQ na ciemnym tle */
.section--ink .faq{border-top-color:rgba(255,255,255,.16);}
.section--ink .faq-item{border-bottom-color:rgba(255,255,255,.16);}
.section--ink .faq-item summary{color:#F0EDE4;}
.section--ink .faq-item summary:hover{color:#fff;}
.section--ink .faq-answer{color:#B6B2A6;}
.section--ink .faq-icon::before,.section--ink .faq-icon::after{background:#7FD4D0;}
.section--ink .faq-item[open] .faq-icon::before{background:#F0A9C2;}

.section-head{max-width:62ch;margin-bottom:clamp(28px,4vw,44px);}
.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--ink-soft);font-size:16.5px;margin-bottom:0;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark);
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper-raised);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}
.eyebrow--magenta{color:var(--magenta);}
.eyebrow--magenta::before{background:var(--magenta);}

/* --- Przyciski ----------------------------------------------------------- */
.btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;line-height:1.2;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-soft);}
.btn-primary:hover{background:var(--teal-dark);color:#fff;box-shadow:var(--shadow-lift);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-light{background:var(--paper);color:var(--ink);}
.btn-light:hover{background:#fff;color:var(--ink);}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}

.link-arrow{
  font-size:14.5px;font-weight:600;color:var(--teal-dark);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
}
.link-arrow svg{transition:transform .22s var(--ease);flex:none;}
.link-arrow:hover{color:var(--teal);}
.link-arrow:hover svg{transform:translateX(4px);}

/* --- SYGNATURA: wskaznik tonera ------------------------------------------ */
.gauge{
  --level:60%;
  position:relative;width:100%;height:8px;border-radius:99px;
  background:var(--paper-sunken);
  box-shadow:inset 0 1px 2px rgba(33,31,27,.08);
  overflow:hidden;
}
.gauge i{
  position:absolute;inset:0 auto 0 0;display:block;
  width:var(--level);border-radius:99px;background:var(--teal);
  transform-origin:left;
}
.gauge--sm{height:5px;}
.gauge--lg{height:12px;}
.gauge i.is-magenta{background:var(--magenta);}
.gauge i.is-amber{background:var(--amber);}
.gauge i.is-ink{background:var(--ink);}
/* wypelnienie rysuje sie, gdy sekcja wejdzie w kadr (patrz sekcja "Wejscia sekcji") */
.reveal .gauge i{transition:transform 1.1s var(--ease-out) .12s;}
/* zywy detal: powolny polysk po wypelnieniu */
.gauge i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-100%);
}
.live .gauge i::after{animation:sheen 7s var(--ease) -2s infinite;}
@keyframes sheen{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(220%);}
}

.gauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.stat{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-soft);
}
.stat .gauge{margin-bottom:14px;}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3vw,30px);font-weight:700;line-height:1;font-feature-settings:"tnum";}
.stat-label{font-size:13.5px;color:var(--ink-soft);margin-top:6px;}

/* --- SYGNATURA 2: wskaznik poziomu tonera na gorze okna ------------------ */
.toner-progress{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:90;
  background:rgba(33,31,27,.10);pointer-events:none;
}
.toner-progress i{
  display:block;height:100%;width:0;
  background:
    linear-gradient(90deg,
      var(--teal) calc(100% - 36px),
      var(--magenta) calc(100% - 36px), var(--magenta) calc(100% - 18px),
      var(--amber) calc(100% - 18px));
}
body.motion-off .toner-progress{display:none;}

/* --- Hero: ciemny, ze zdjeciem z realnej dzialalnosci -------------------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding:clamp(46px,6.5vw,88px) 0 clamp(34px,4.5vw,58px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;}
/* Przyciemnienie zdjecia zostaje, ale lzejsze: ciezar bierze na siebie szklany panel. */
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(14,44,43,.92) 0%, rgba(16,40,39,.84) 42%, rgba(18,38,37,.74) 74%, rgba(20,40,39,.70) 100%),
    linear-gradient(0deg, rgba(11,62,61,.34), transparent 58%);
}

/* SZKLANY PANEL: jedyny mocny efekt na stronie.
   Zmatowione, przyciemnione szklo w kolorze marki, polozone na zdjeciu busa. */
.hero-main{
  position:relative;
  border-radius:var(--radius-lg);
  padding:clamp(24px,3.2vw,40px) clamp(22px,3vw,40px) clamp(26px,3.4vw,42px);
  background:linear-gradient(150deg, rgba(11,62,61,.80), rgba(8,40,39,.88));
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 30px 70px -26px rgba(0,0,0,.62);
}
/* Bez obslugi mlecznej szyby: pelny kolor zamiast szkla, ten sam kontrast. */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .hero-main{background:linear-gradient(150deg, rgba(11,62,61,.94), rgba(9,44,43,.96));}
}
.hero .wrap{position:relative;z-index:1;}
.hero h1{max-width:16ch;margin-bottom:22px;color:#fff;}

/* Od tabletu w gore: tresc z lewej, wskazniki tonera z prawej.
   Skraca hero o wysokosc calego rzedu statystyk i daje sygnaturze wlasne miejsce. */
@media (min-width:900px){
  .hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(28px,3.5vw,52px);align-items:center;}
  .hero-main{min-width:0;}
  .hero .gauge-row{
    grid-template-columns:1fr;gap:clamp(16px,2vw,24px);
    border-top:0;padding-top:0;
    border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(22px,2.5vw,34px);
  }
  .hero .stat{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 16px;}
  .hero .stat .gauge{grid-column:1 / -1;margin-bottom:10px;}
  .hero .stat-num{grid-column:2;text-align:right;font-size:clamp(26px,2.6vw,36px);}
  .hero .stat-label{grid-column:1;grid-row:2;}
}
@media (max-width:899px){
  .hero .gauge-row{margin-top:clamp(28px,4vw,40px);}
}
.hero h1 em{font-style:normal;color:#7FD4D0;}
.hero .lead{max-width:50ch;margin-bottom:30px;color:#D8D4C8;font-size:clamp(16.5px,1.6vw,19.5px);}
.hero .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#9FE0DC;}
.hero .eyebrow::before{background:#7FD4D0;}
.hero .cta-row{margin-bottom:clamp(40px,6vw,60px);}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42);}
.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.hero-note{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.02em;
  color:#CFCABC;margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.hero-note::before{content:'';width:26px;height:2px;background:var(--amber);border-radius:2px;flex:none;}

/* Statystyki w hero: liczby jako element graficzny, bez pudelek */
.hero .gauge-row{border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(24px,3vw,34px);gap:clamp(20px,4vw,48px);}
.hero .stat{background:none;border:0;box-shadow:none;padding:0;}
.hero .stat .gauge{background:rgba(255,255,255,.14);box-shadow:none;margin-bottom:16px;}
.hero .stat-num{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(28px,4.4vw,46px);letter-spacing:-0.045em;color:#fff;
}
.hero .stat-label{color:#E4E0D4;font-size:13.5px;letter-spacing:.01em;}

/* naglowek podstrony */
.page-hero{padding:clamp(40px,5.5vw,72px) 0 clamp(26px,3.5vw,40px);position:relative;}
.page-hero .page-mark{width:96px;margin-bottom:22px;height:4px;}
.page-hero h1{max-width:18ch;margin-bottom:18px;}
.page-hero .lead{max-width:60ch;font-size:clamp(16.5px,1.6vw,19px);}
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:18px;letter-spacing:.02em;}
.breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.breadcrumb a:hover{color:var(--teal-dark);text-decoration:underline;}
.breadcrumb span{opacity:.55;margin:0 6px;}

/* --- Karty --------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cards--2{grid-template-columns:repeat(2,1fr);}
/* Wypuklosc: pasmo swiatla na gornej krawedzi, cien pod spodem, jasniejsze tlo
   niz papier strony. Kafelek wychodzi z tla zamiast lezec w nim plasko. */
.card,.stat,.price,.contact-block,.calc,.calc-results,.owner,.photo,.map-figure,.video-figure,.steps li{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(148,136,112,.26),
    inset 1px 0 0 rgba(255,255,255,.55),
    inset -1px 0 0 rgba(148,136,112,.10),
    0 2px 3px rgba(58,48,32,.06),
    0 20px 40px -16px rgba(58,48,32,.30);
}
.card{
  position:relative;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card h3{margin-bottom:9px;}
.card p{font-size:14.8px;color:var(--ink-soft);margin-bottom:18px;flex-grow:1;}
.card .card-gauge{margin-bottom:16px;}
.card:hover{
  border-color:var(--teal);transform:translateY(-4px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1.5px 0 rgba(148,136,112,.22),
    0 3px 6px rgba(58,48,32,.07),
    0 34px 62px -20px rgba(58,48,32,.38);
}
.card:hover .gauge i{background:var(--teal-dark);}
.card--link:focus-within{border-color:var(--teal);}
/* Pierwsza karta jako flagowa: szersza, na kolorze, z wieksza typografia.
   Dwie sasiadujace sekcje nie moga mieć tego samego szkieletu, a to jest
   jednocześnie główna usługa firmy, więc dostaje najwięcej miejsca. */
.cards--feature>:first-child{
  grid-column:span 2;
  background:linear-gradient(152deg, var(--teal) 0%, var(--teal-dark) 46%, var(--teal-deep) 100%);
  border-color:rgba(255,255,255,.10);color:#DCEFEE;
  justify-content:flex-end;
  padding:clamp(26px,3.4vw,40px);
  box-shadow:var(--shadow-deep);
  position:relative;overflow:hidden;
}
/* delikatny polysk na gornej krawedzi, tak jak na kartach z przykladow */
.cards--feature>:first-child::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
}
.cards--feature>:first-child h3{color:#fff;font-size:clamp(21px,2.6vw,29px);margin-bottom:12px;}
.cards--feature>:first-child p{color:#C2E0DE;font-size:15.6px;max-width:46ch;}
.cards--feature>:first-child .tag{background:rgba(255,255,255,.14);color:#DCEFEE;}
.cards--feature>:first-child .gauge{background:rgba(255,255,255,.18);box-shadow:none;}
.cards--feature>:first-child .gauge i{background:var(--amber);}
.cards--feature>:first-child .link-arrow{color:#fff;font-size:15.5px;}
.cards--feature>:first-child .link-arrow:hover{color:var(--amber);}
.cards--feature>:first-child:hover{border-color:var(--amber);}
.cards--feature>:first-child:hover .gauge i{background:var(--amber);}
@media (max-width:880px){ .cards--feature>:first-child{grid-column:span 2;} }
@media (max-width:620px){ .cards--feature>:first-child{grid-column:auto;} }

.tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-dark);background:rgba(20,102,100,.10);
  display:inline-block;padding:6px 13px;border-radius:var(--radius-pill);margin-bottom:14px;width:fit-content;
}
.tag--new{color:var(--magenta);background:rgba(168,58,99,.1);}
.tag--amber{color:var(--amber-ink);background:rgba(192,143,30,.13);}

/* --- Blok wyrozniajacy (ciemny) ------------------------------------------ */
.banner{
  background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,46px);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  position:relative;overflow:hidden;
}
.banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 100% at 88% 0%,rgba(20,102,100,.42),transparent 66%);
}
.banner>*{position:relative;}
.banner h2{color:#fff;max-width:24ch;margin-bottom:12px;}
.banner p{color:#C9C5B8;max-width:56ch;margin-bottom:0;font-size:15.5px;}
.banner .toner-strip{width:120px;margin-bottom:20px;}
.banner .toner-strip i:nth-child(4){background:rgba(255,255,255,.18);}

/* --- Kroki procesu ------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(4,1fr);counter-reset:step;}
.steps li{
  position:relative;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;margin:0;
}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-dark);
  display:block;margin-bottom:12px;letter-spacing:.06em;
}
.steps li h3{font-size:17px;margin-bottom:8px;}
.steps li p{font-size:14.3px;color:var(--ink-soft);margin:0;}
.steps--flow li .gauge{position:absolute;left:20px;right:20px;bottom:16px;}
.steps--flow li{padding-bottom:38px;}

/* --- Cennik -------------------------------------------------------------- */
.price-list{display:grid;gap:14px;}
.price{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start;
}
.price h3{font-size:18px;margin-bottom:6px;}
.price p{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:64ch;}
.price-value{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(17px,2vw,20px);font-weight:500;
  color:var(--ink);text-align:right;white-space:nowrap;
}
.price-value small{display:block;font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:3px;}
.price--free .price-value{color:var(--teal-dark);}
.price .gauge{grid-column:1 / -1;margin-top:14px;}

/* --- Listy z ikonami ----------------------------------------------------- */
.checklist{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:11px;}
.checklist li{position:relative;padding-left:30px;margin:0;font-size:15.4px;}
.checklist li::before{
  content:'';position:absolute;left:0;top:.45em;width:16px;height:5px;border-radius:99px;
  background:var(--teal);
}
.checklist--no li::before{background:var(--magenta);width:10px;left:3px;}
.checklist--amber li::before{background:var(--amber);}

/* --- Dwie kolumny -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center;}
.split--wide{grid-template-columns:1.25fr .75fr;}
.split--top{align-items:start;}
/* naglowek w kolumnie splitu nie mial odstepu do tekstu pod nim; .prose ma wlasne */
.split > div:not(.prose) > h2{margin-bottom:14px;}
.media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--paper-sunken);}

/* --- Kogo obsluguje: bran\017Ce klientow zamiast logotypow ------------------- */
.branches{display:flex;flex-wrap:wrap;gap:10px;}
.branches li{
  list-style:none;margin:0;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.01em;
  color:var(--ink-soft);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;
  display:inline-flex;align-items:center;gap:9px;
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.branches li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}
.branches li:nth-child(3n+2)::before{background:var(--magenta);}
.branches li:nth-child(3n+3)::before{background:var(--amber);}
.branches li:hover{border-color:var(--teal);color:var(--ink);transform:translateY(-2px);}
.section--raised .branches li{background:var(--paper-raised);}

/* --- Mapa dojazdu (kafelki OpenStreetMap hostowane lokalnie) ------------- */
.map-figure{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--paper-raised);box-shadow:var(--shadow-soft);
}
.map-link{display:block;position:relative;line-height:0;text-decoration:none;}
.map-link img{width:100%;height:auto;aspect-ratio:768/430;object-fit:cover;}
.map-link::after{
  content:'Zobacz wizytówkę w Mapach Google';
  position:absolute;right:14px;bottom:14px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;line-height:1;
  background:var(--teal);color:#fff;padding:11px 16px;border-radius:999px;
  box-shadow:var(--shadow-lift);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.map-link:hover::after{background:var(--teal-dark);transform:translateY(-2px);}
.map-link:focus-visible{outline-offset:-4px;}
.map-figure figcaption{
  padding:14px 18px;font-size:13px;color:var(--ink-soft);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
}
.map-figure figcaption a{color:var(--ink-soft);}
@media (max-width:620px){ .map-link::after{right:10px;bottom:10px;font-size:12.5px;padding:10px 14px;} }

/* --- Film ---------------------------------------------------------------- */
.video-figure{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--ink);box-shadow:var(--shadow-soft);
}
.video-figure video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:var(--ink);}
.video-figure figcaption{
  padding:14px 18px 16px;font-size:13.8px;color:var(--ink-soft);
  background:var(--paper-raised);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
}
.video-figure figcaption strong{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;}
.video-figure figcaption .mono{font-size:12.5px;color:var(--teal-dark);}

/* --- Zdjecia z realnej dzialalnosci ------------------------------------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.photo-grid--2{grid-template-columns:repeat(2,1fr);}
.photo{
  margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(216,210,196,.55);background:var(--paper-sunken);
  box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.photo img{width:100%;aspect-ratio:20/9;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.photo--tall img{aspect-ratio:9/7;}
.photo:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.photo:hover img{transform:scale(1.03);}
.photo figcaption{
  padding:12px 16px 14px;font-size:13.5px;color:var(--ink-soft);
  background:var(--paper-raised);border-top:1px solid var(--line);
}
.photo figcaption strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px;font-family:'Space Grotesk',sans-serif;font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .photo:hover img{transform:none;}
}
@media (max-width:880px){ .photo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .photo-grid,.photo-grid--2{grid-template-columns:1fr;} }
.media img{width:100%;}
figure{margin:0;}
figcaption{font-size:12.8px;color:var(--ink-soft);margin-top:10px;}

.owner{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-soft);
}
.owner-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.owner-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 22%;border:2px solid var(--paper-raised);box-shadow:var(--shadow-soft);}
.owner-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;line-height:1.2;}
.owner-role{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.owner blockquote{margin:0;font-size:15.6px;line-height:1.65;color:var(--ink);font-style:italic;}
.owner blockquote p{margin-bottom:.7em;}

/* --- Fakty / dane firmy -------------------------------------------------- */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);}
.facts li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);margin:0;font-size:14.6px;
}
.facts dt,.facts .k{color:var(--ink-soft);}
.facts .v{font-family:'IBM Plex Mono',monospace;text-align:right;}

/* --- Kalkulator ---------------------------------------------------------- */
.calc{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-soft);
}
.calc-inputs{display:flex;flex-direction:column;gap:16px;}
.field label{display:block;font-size:13.8px;color:var(--ink-soft);margin-bottom:6px;}
.field input[type="number"]{
  width:100%;padding:12px 14px;font-size:15.5px;font-family:'IBM Plex Mono',monospace;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input[type="number"]:hover{border-color:var(--teal);}
.field input[type="number"]:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,102,100,.16);outline:none;}
.field-hint{font-size:12.5px;color:var(--ink-soft);margin-top:5px;}

.calc-checks{display:grid;gap:10px;margin-top:4px;border-top:1px solid var(--line);padding-top:18px;}
.calc-checks>legend{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);padding:0;margin-bottom:12px;
}
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.8px;color:var(--ink-soft);}
.check input{margin:3px 0 0;accent-color:var(--teal);width:17px;height:17px;flex:none;cursor:pointer;}
.check strong{display:block;color:var(--ink);font-weight:600;font-size:14.4px;}
.check .pct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-dark);}
.check:hover strong{color:var(--teal-dark);}

.calc-results{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2.5vw,26px);align-self:start;}
.result-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;}
.result-label{font-size:14px;color:var(--ink-soft);}
.result-value{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:500;}
.calc-results .gauge{margin-bottom:22px;}
.calc-savings{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0 16px;border-top:1px solid var(--line);padding-top:20px;}
.save-num{display:block;font-family:'IBM Plex Mono',monospace;font-size:clamp(21px,2.6vw,26px);font-weight:500;color:var(--teal-dark);line-height:1.1;}
.save-label{font-size:12.8px;color:var(--ink-soft);margin-top:5px;display:block;}
.calc-note{font-size:12.6px;color:var(--ink-soft);margin-bottom:18px;}

/* --- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:19px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,1.7vw,17.5px);font-weight:500;color:var(--ink);
  transition:color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--teal-dark);}
.faq-icon{position:relative;width:16px;height:16px;flex:none;}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--teal);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .26s var(--ease),background .2s var(--ease);
}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-item[open] .faq-icon::before{background:var(--magenta);}
.faq-answer{padding:0 4px 22px;font-size:15.3px;color:var(--ink-soft);max-width:76ch;}
.faq-item[open] .faq-answer{animation:faqIn .32s var(--ease-out) both;}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* --- Wezwanie do kontaktu ------------------------------------------------ */
.contact-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4.5vw,52px);text-align:center;box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.contact-card .toner-strip{width:88px;margin:0 auto 20px;}
.contact-card h2{margin-bottom:12px;}
.contact-card>p{color:var(--ink-soft);max-width:52ch;margin:0 auto 24px;}
.contact-methods{display:flex;gap:12px 28px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:14.6px;}
.contact-methods a,.contact-methods span{color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.contact-methods a:hover{color:var(--teal-dark);}
.contact-methods svg{flex:none;opacity:.75;}
/* --- Sekcja kontaktu na zdjeciu: mocne zamkniecie strony ----------------- */
.contact-card--foto{
  position:relative;overflow:hidden;
  background:var(--ink);border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px -22px rgba(0,0,0,.5);
}
.contact-card--foto .foto-tlo{position:absolute;inset:0;z-index:0;}
.contact-card--foto .foto-tlo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;}
.contact-card--foto .foto-tlo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(16,38,37,.90) 0%, rgba(14,34,33,.86) 55%, rgba(12,30,29,.92) 100%),
    linear-gradient(0deg, rgba(11,62,61,.30), transparent 60%);
}
.contact-card--foto>*:not(.foto-tlo){position:relative;z-index:1;}
.contact-card--foto h2{color:#fff;}
.contact-card--foto>p{color:#D8D4C8;}
.contact-card--foto .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.contact-card--foto .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.contact-card--foto .contact-methods a,
.contact-card--foto .contact-methods span{color:#CFCABC;}
.contact-card--foto .contact-methods a:hover{color:#fff;}
.contact-card--foto .toner-strip i:nth-child(4){background:rgba(255,255,255,.22);}

/* --- Formularz kontaktowy ------------------------------------------------ */
.contact-form{display:grid;gap:16px;}
.field textarea,
.field select{
  width:100%;padding:12px 14px;font-size:15.5px;font-family:'Inter',sans-serif;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{min-height:130px;resize:vertical;line-height:1.55;}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"]{
  width:100%;padding:12px 14px;font-size:15.5px;font-family:'Inter',sans-serif;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea:hover,.field select:hover,
.field input[type="text"]:hover,.field input[type="tel"]:hover,.field input[type="email"]:hover{border-color:var(--teal);}
.field textarea:focus,.field select:focus,
.field input[type="text"]:focus,.field input[type="tel"]:focus,.field input[type="email"]:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,102,100,.16);outline:none;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-status{
  border-left:3px solid var(--teal);background:var(--paper);padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;color:var(--ink-soft);
}
.req{color:var(--magenta);}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px);align-items:start;}
.contact-block{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.contact-block h3{margin-bottom:14px;}
.contact-big{font-family:'IBM Plex Mono',monospace;font-size:clamp(18px,2.4vw,22px);text-decoration:none;color:var(--ink);display:block;margin-bottom:6px;}
.contact-big:hover{color:var(--teal-dark);}

/* --- Tresc redakcyjna ---------------------------------------------------- */
.prose{max-width:74ch;}
.prose h2{margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{margin:30px 0 10px;}
.prose p,.prose li{font-size:16.2px;color:var(--ink-soft);}
.prose strong{color:var(--ink);}
.prose ol li::marker{font-family:'IBM Plex Mono',monospace;color:var(--teal-dark);font-size:.9em;}
.note{
  border-left:3px solid var(--amber);background:var(--paper-raised);
  padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0;
  font-size:14.8px;color:var(--ink-soft);
}
.note strong{color:var(--ink);}
.note--teal{border-left-color:var(--teal);}
/* --- Spis tresci dlugiej instrukcji -------------------------------------- */
.spis{
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;margin:0 0 8px;
}
.spis h2{font-size:15px!important;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px!important;font-family:'Space Grotesk',sans-serif;}
.spis ol{list-style:none;padding:0;margin:0;counter-reset:sp;display:grid;gap:2px;}
.spis li{margin:0;counter-increment:sp;}
.spis a{
  display:flex;gap:12px;align-items:baseline;padding:7px 8px;margin:0 -8px;
  border-radius:8px;text-decoration:none;color:var(--ink);font-size:15.4px;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.spis a::before{
  content:counter(sp,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-dark);
  flex:none;min-width:20px;
}
.spis a:hover{background:var(--paper-sunken);color:var(--teal-dark);}

/* --- Kroki instrukcji: pionowa sciezka z numerami ------------------------ */
.kroki{list-style:none;padding:0;margin:0;counter-reset:krok;display:grid;gap:18px;}
.kroki>li{
  counter-increment:krok;margin:0;position:relative;
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px 24px 74px;
  box-shadow:var(--shadow-soft);
}
.kroki>li::before{
  content:counter(krok);
  position:absolute;left:22px;top:24px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  box-shadow:0 2px 8px -2px rgba(11,62,61,.5);
}
/* nitka laczaca kolejne kroki */
.kroki>li::after{
  content:'';position:absolute;left:38.5px;top:66px;bottom:-19px;width:1px;
  background:linear-gradient(180deg,var(--line-strong),var(--line));opacity:.5;
}
.kroki>li:last-child::after{display:none;}
.kroki h3{font-size:18.5px;margin:4px 0 12px;}
.kroki ol,.kroki ul{margin:0 0 4px;padding-left:1.2em;}
.kroki li{font-size:15.4px;color:var(--ink-soft);margin-bottom:7px;}
.kroki ol li::marker{font-family:'IBM Plex Mono',monospace;color:var(--teal-dark);font-size:.88em;}
.kroki .note{margin:14px 0 0;font-size:14.2px;}
.kroki .etykieta{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:7px;
}
@media (max-width:600px){
  .kroki>li{padding:22px 20px 22px 20px;}
  .kroki>li::before{position:static;margin-bottom:12px;}
  .kroki>li::after{display:none;}
}

/* --- Tabele w tresci ------------------------------------------------------ */
.tabela-opak{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch;}
.tabela{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;}
.tabela th,.tabela td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
.tabela th{
  font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-strong);
}
.tabela td{color:var(--ink-soft);}
.tabela td:first-child{color:var(--ink);font-weight:600;white-space:nowrap;}
.tabela tr:last-child td{border-bottom:0;}
/* Akapit po tabeli potrzebuje wiekszego oddechu: bez tego wnioski sklejaja sie
   wizualnie z ostatnim wierszem i czyta sie je jak stopke tabeli. */
.tabela-opak + p{margin-top:34px;}


.source-list{list-style:none;padding:0;display:grid;gap:9px;}
.source-list li{margin:0;font-size:15px;}
.source-list a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:500;}
.source-list a:hover{text-decoration:underline;}
.source-list svg{flex:none;opacity:.7;}

/* --- Stopka -------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--paper-raised);padding:44px 0 28px;font-size:14px;color:var(--ink-soft);margin-top:var(--gap);}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr auto;gap:32px;margin-bottom:30px;}
.footer-grid h3,.footer-grid h4{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:13px;letter-spacing:.02em;}
.footer-grid a{display:block;text-decoration:none;color:var(--ink-soft);margin-bottom:9px;width:fit-content;}
.footer-grid a:hover{color:var(--teal-dark);}
.footer-about p{max-width:38ch;font-size:14px;}
.footer-about .toner-strip{width:72px;margin-bottom:16px;}
.footer-qr{text-align:center;}
/* 140px zewnetrznie = 128px samego kodu. Ponizej ok. 110px kod przestaje
   sie skanowac, bo logo na srodku zjada zapas korekcji bledow. */
.footer-qr img{width:140px;border-radius:8px;border:1px solid var(--line);background:#fff;padding:6px;}
.footer-qr span{display:block;font-size:11.5px;margin-top:8px;font-family:'IBM Plex Mono',monospace;letter-spacing:.05em;}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;}
.footer-bottom .mono{letter-spacing:.02em;}

/* --- Wejscia sekcji ------------------------------------------------------
   Stan ukryty obowiazuje TYLKO gdy JavaScript dziala (klasa .js na <html>).
   Bez JS albo przy zablokowanym skrypcie cala tresc jest widoczna od razu. */
.reveal,.stagger>*{transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);}
.js .reveal{opacity:0;transform:translateY(18px);}
.js .reveal.in{opacity:1;transform:none;}
.js .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);}
.js .stagger.in>*{opacity:1;transform:none;}
.stagger.in>:nth-child(1){transition-delay:.04s;}
.stagger.in>:nth-child(2){transition-delay:.12s;}
.stagger.in>:nth-child(3){transition-delay:.2s;}
.stagger.in>:nth-child(4){transition-delay:.28s;}
.stagger.in>:nth-child(5){transition-delay:.36s;}
.stagger.in>:nth-child(6){transition-delay:.44s;}
/* po wejsciu kasujemy opoznienia, zeby hover nie byl opozniony */
.stagger.done>:nth-child(n){transition-delay:0s;}
/* wypelnienia wskaznikow tez czekaja na wejscie tylko przy dzialajacym JS */
.reveal .gauge i{transform:scaleX(1);}
.js .reveal .gauge i{transform:scaleX(0);}
.js .reveal.in .gauge i{transform:scaleX(1);}

/* --- Responsywnosc ------------------------------------------------------- */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .footer-qr{grid-column:1 / -1;text-align:left;}
}
@media (max-width:880px){
  /* Menu zawija sie do wlasnego wiersza wewnatrz belki. Zadnego pozycjonowania
     absolutnego i zadnych sztywnych pikseli, wiec nie ma jak sie rozjechac. */
  .header-inner{flex-wrap:wrap;}
  .site-nav{
    order:3;flex:0 0 100%;
    flex-direction:column;align-items:stretch;gap:2px;
    margin-top:12px;padding:10px 0 6px;
    border-top:1px solid rgba(255,255,255,.18);
    display:none;
    max-height:68dvh;overflow-y:auto;
  }
  .site-nav a{border-bottom-color:rgba(255,255,255,.12);}
  .site-nav.open{display:flex;animation:navIn .22s var(--ease-out) both;}
  @keyframes navIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
  .site-nav a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line);}
  .site-nav a::after{display:none;}
  .site-nav a:last-child{border-bottom:0;}
  .site-nav .nav-cta{margin-top:12px;text-align:center;justify-content:center;display:flex;}
  .burger{display:block;}
  .split,.split--wide,.contact-grid,.calc{grid-template-columns:1fr;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .banner{grid-template-columns:1fr;}
  .gauge-row{grid-template-columns:1fr;}
  .stat{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;}
  .stat .gauge{grid-column:1 / -1;margin-bottom:10px;}
  .stat-label{margin-top:0;}
}
@media (max-width:620px){
  .cards,.cards--2,.steps,.calc-savings{grid-template-columns:1fr;}
  /* Hero na telefonie: statystyki jako zwarta lista, zeby tresc nie uciekala pod ekran */
  .hero .gauge-row{gap:16px;padding-top:22px;}
  .hero .stat{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 14px;}
  .hero .stat .gauge{grid-column:1 / -1;margin-bottom:8px;height:5px;}
  .hero .stat-num{font-size:clamp(24px,7.4vw,32px);grid-column:2;text-align:right;}
  .hero .stat-label{grid-column:1;grid-row:2;margin-top:0;font-size:13px;}
  .hero .lead{margin-bottom:24px;}
  .hero .cta-row{margin-bottom:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .price{grid-template-columns:1fr;}
  .price-value{text-align:left;}
  .contact-methods{flex-direction:column;align-items:center;gap:12px;}
  .field-row{grid-template-columns:1fr;}
  .hero .cta-row .btn{width:100%;}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr;}
}

/* Palce zamiast myszy: wieksze cele dotyku, bez zmiany ukladu */
@media (pointer:coarse){
  .btn,.site-nav a,.link-arrow,.faq-item summary{min-height:44px;}
  .site-nav a{display:flex;align-items:center;}
  .link-arrow{display:inline-flex;align-items:center;}
}

/* --- Mniej ruchu --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.stagger>*{opacity:1!important;transform:none!important;}
  .reveal .gauge i{transform:none!important;}
  .env{animation:none;}
}
/* stan wymuszony z JS, gdy uzytkownik wlaczy tryb w trakcie ogladania */
body.motion-off .reveal,body.motion-off .stagger>*{opacity:1!important;transform:none!important;}
body.motion-off .reveal .gauge i{transform:none!important;}
body.motion-off *,body.motion-off *::before,body.motion-off *::after{
  animation-play-state:paused!important;transition-duration:.001ms!important;transition-delay:0ms!important;
}
/* animacje spia poza kadrem i na ukrytej karcie */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important;}

/* --- Druk ---------------------------------------------------------------- */

/* --- Sciaga do wydruku: jedna kartka A4 --------------------------------- */
.sciaga{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 30px;box-shadow:var(--shadow-soft);color:#1A1815;
}
.sciaga-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:18px;
}
.sciaga-head h3{font-size:20px;margin:0 0 3px;letter-spacing:-.02em;}
.sciaga-head p{font-size:13px;color:var(--ink-soft);margin:0;}
.sciaga-marka{text-align:right;flex:none;}
.sciaga-marka .toner-strip{width:60px;margin:0 0 6px auto;}
.sciaga-marka strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:.05em;}
.sciaga-marka span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-soft);}

.sciaga-kolumny{display:grid;grid-template-columns:1fr 1.12fr;gap:24px;align-items:start;}

/* Naglowki sekcji: bez letter-spacing na dlugich frazach, zeby nic sie nie ucinalo */
.sciaga h4{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:var(--teal-dark);
  margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid var(--line);
  overflow-wrap:break-word;white-space:normal;
}
.sciaga h4:not(:first-child){margin-top:16px;}

/* Kazdy punkt ma kratke do odhaczenia */
.sciaga-lista{list-style:none;margin:0;padding:0;}
.sciaga-lista li{
  position:relative;padding-left:20px;margin:0 0 6px;
  font-size:12.4px;line-height:1.45;
}
.sciaga-lista li::before{
  content:'';position:absolute;left:0;top:3px;
  width:10px;height:10px;border:1.2px solid var(--line-strong);border-radius:2px;
  background:#fff;
}
.sciaga-lista li b{font-weight:600;}
.sciaga-lista li em{font-style:normal;font-weight:600;color:var(--magenta);}

/* Kroki: kratka plus numer */
.sciaga-kroki{counter-reset:sk;}
.sciaga-kroki li{padding-left:36px;margin-bottom:7px;}
.sciaga-kroki li::after{
  counter-increment:sk;content:counter(sk)'.';
  position:absolute;left:16px;top:0;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  color:var(--teal-dark);
}

.sciaga-uwaga{
  border-left:3px solid var(--amber);background:var(--paper-raised);
  padding:10px 13px;border-radius:0 8px 8px 0;
}
.sciaga-uwaga p{font-size:11.6px;line-height:1.45;margin:0 0 5px;color:var(--ink-soft);}
.sciaga-uwaga p:last-child{margin:0;}
.sciaga-uwaga strong{color:var(--ink);}

.sciaga-stopka{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px solid var(--line);margin-top:18px;padding-top:11px;
  font-size:11px;color:var(--ink-soft);
}
.sciaga-stopka span{min-width:0;}
.sciaga-stopka span:first-child{font-size:12px;color:var(--ink);}
.sciaga-stopka strong{color:var(--ink);}
.sciaga-qr{flex:none;width:66px;height:66px;border:1px solid var(--line);border-radius:5px;padding:3px;background:#fff;}

@media (max-width:700px){
  .sciaga{padding:20px 18px;}
  .sciaga-kolumny{grid-template-columns:1fr;gap:14px;}
  .sciaga-head{flex-direction:column;}
  .sciaga-marka{text-align:left;}
  .sciaga-marka .toner-strip{margin-left:0;}
  .sciaga-stopka{flex-wrap:wrap;align-items:flex-start;}
}

@media print{
  .site-header,.site-footer,.env,.burger,.btn,.skip-link,
  .toner-progress,.kursor-halo{display:none!important;}
  body{background:#fff;color:#000;}
  .card,.stat,.price,.calc,.contact-card{border:1px solid #999;box-shadow:none;}
  .faq-answer{display:block!important;}
  /* Sekcje odslaniane przy scrollowaniu sa przezroczyste, dopoki nie wejda
     w widok. Bez tego wydruk czesci strony wychodzil pusty. */
  .reveal,.stagger>*{opacity:1!important;transform:none!important;}
  .reveal .gauge i{transform:none!important;}
}
/* Na podstronie ze sciaga drukuje sie wylacznie ona: jedna kartka A4. */
@page{size:A4 portrait;margin:11mm;}
@media print{
  body:has(#sciaga) main > section:not(#sciaga){display:none!important;}
  body:has(#sciaga) #sciaga{padding:0!important;}
  body:has(#sciaga) #sciaga .section-head{display:none!important;}
  body:has(#sciaga) #sciaga .wrap{max-width:none;padding:0;}
  .sciaga{border:0;border-radius:0;box-shadow:none;padding:0;}
  .sciaga,.sciaga-kolumny > div{break-inside:avoid;}
  .sciaga-kroki li,.sciaga-lista li{break-inside:avoid;}
  .sciaga-uwaga{background:#fff;border-left-color:#000;}
  /* Na papierze wiekszym drukiem: kartka i tak sie miesci. */
  .sciaga-head h3{font-size:22px;}
  .sciaga h4{font-size:13.5px;}
  .sciaga-lista li{font-size:13.4px;line-height:1.5;margin-bottom:7px;}
  .sciaga-uwaga p{font-size:12.4px;line-height:1.48;}
  .sciaga-stopka{font-size:11.6px;}
  .sciaga-stopka span:first-child{font-size:12.6px;}
  .sciaga-qr{width:74px;height:74px;}
}

/* ==========================================================================
   Kreator "Czy musisz wystawiac KPO" (/czy-musze-wystawiac-kpo/).
   Wszystko pod .kreator, zeby nic nie wyciekalo na pozostale podstrony.
   ========================================================================== */
.kreator-zastrzezenie{
  font-size:14.2px;line-height:1.55;color:var(--ink-soft);max-width:62ch;
  border-left:3px solid var(--amber);padding:9px 0 9px 14px;margin:18px 0 0;
}
.kreator .postep-etykieta{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);display:block;
}
.kreator .kod{
  font-family:'IBM Plex Mono',monospace;font-size:.92em;background:var(--paper-raised);
  border:1px solid var(--line);padding:.05em .38em;border-radius:2px;white-space:nowrap;
}

/* pasek postepu: ten sam motyw co wskaznik tonera */
.kreator .postep{display:flex;flex-direction:column;gap:8px;margin:0 0 26px;}
.kreator .postep-glowa{display:flex;justify-content:space-between;align-items:baseline;}
.kreator .postep-licznik{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.kreator .postep-tor{
  height:14px;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:2px;overflow:hidden;
}
.kreator .postep-wypelnienie{
  height:100%;width:0;background:var(--teal);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* karty pytan */
.kreator .krok{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;margin-bottom:16px;
}
.kreator .krok[hidden]{display:none;}
.kreator .krok-glowa{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kreator .krok-glowa h2{font-size:21px;margin:0;}
.kreator .krok-podpowiedz{font-size:14.8px;color:var(--ink-soft);margin:0;}
.kreator .opcje{display:flex;flex-direction:column;gap:9px;}
.kreator .opcja{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;font-size:16px;line-height:1.45;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .15s,background .15s,transform .15s;
}
.kreator .opcja:hover{border-color:var(--teal);background:#fff;}
.kreator .opcja:active{transform:translateY(1px);}
.kreator .opcja[aria-pressed="true"]{
  border-color:var(--teal);border-left:4px solid var(--teal);background:#fff;font-weight:500;
}
.kreator .opcja span{
  display:block;font-size:13.8px;color:var(--ink-soft);font-weight:400;margin-top:3px;
}

/* wynik */
.kreator .wynik{
  border:1px solid var(--line);border-left:5px solid var(--teal);
  background:var(--paper-raised);border-radius:var(--radius);
  padding:26px 24px;margin-top:24px;display:flex;flex-direction:column;gap:16px;
}
.kreator .wynik[hidden]{display:none;}
.kreator .wynik.uwaga{border-left-color:var(--amber);}
.kreator .wynik.poza{border-left-color:var(--magenta);}
.kreator .werdykt{
  font-family:'Space Grotesk',Georgia,serif;font-size:24px;font-weight:700;
  line-height:1.2;letter-spacing:-.01em;margin:0;
}
.kreator .wynik ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;}
.kreator .wynik li{font-size:15.6px;color:var(--ink-soft);}
.kreator .wynik li strong{color:var(--ink);}

/* mity */
.kreator.mity{display:flex;flex-direction:column;gap:18px;}
.kreator .mit{
  border-top:1px solid var(--line);padding-top:18px;
  display:flex;flex-direction:column;gap:7px;
}
.kreator .mit-teza{
  font-family:'Space Grotesk',Georgia,serif;font-size:17px;font-weight:500;
  color:var(--ink-soft);font-style:italic;margin:0;
}
.kreator .mit-odp{font-size:15.8px;margin:0;}
.kreator .mit-odp strong{color:var(--magenta);font-weight:600;}

/* zrodla */
.kreator .zrodla{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-raised);
}
.kreator .zrodla summary{
  cursor:pointer;padding:15px 18px;font-family:'Space Grotesk',Georgia,serif;
  font-weight:500;font-size:16.5px;list-style:none;
}
.kreator .zrodla summary::-webkit-details-marker{display:none;}
.kreator .zrodla summary::after{content:' +';font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}
.kreator .zrodla[open] summary::after{content:' –';}
.kreator .tresc-detali{
  padding:0 18px 20px;font-size:15px;color:var(--ink-soft);
  display:flex;flex-direction:column;gap:11px;
}
.kreator .tresc-detali ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;}

@media (max-width:480px){
  .kreator .krok{padding:18px 15px;}
  .kreator .wynik{padding:20px 16px;}
  .kreator .werdykt{font-size:21px;}
}