/* mateuszroszak.pl — szkielet v5: jasna strona, ciemne akcenty, limonka
   Zmiana vs v4: strona nie jest już czarna od góry do dołu. Ciemne zostają tylko hero,
   sekcja formularza, stopka oraz wstawki (case studies, gwarancja, blok „moment").
   Reszta jest na ciepłej bieli — rytm jasne/ciemne zamiast jednolitej czerni.

   KONTRASTY (policzone):
     limonka #D6FF3F na czerni #0B0B0C ....... 17,0:1  ✅
     czerń na limonce ........................ 17,0:1  ✅
     tekst #3A3A38 na papierze #F5F4F0 ....... 10,2:1  ✅
     tekst #64625C na papierze #EBE9E3 ....... 5,7:1   ✅ (było #6E6C66 = 4,4:1 — poniżej normy)
     tekst #C9C7C2 na czerni ................. 11,9:1  ✅
   ⚠️ Limonka na jasnym tle to ~1,2:1 — NIGDY jako kolor tekstu na papierze.
      Na jasnych sekcjach limonka występuje wyłącznie jako WYPEŁNIENIE pod ciemnym tekstem.
   ⚠️ Fiolet #4B1AFF na czerni to ~2:1 — tylko poświaty, nigdy tekst. */

/* ---------- FONTY ---------- */
@font-face{font-family:'Grotesk';src:url('../fonts/grotesk-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Grotesk';src:url('../fonts/grotesk-latin-ext.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#F5F4F0;        /* ciepła biel — tło strony */
  --paper-2:#EBE9E3;      /* sekcje naprzemienne */
  --card:#FFFFFF;
  --ink:#0B0B0C;          /* hero, stopka, wstawki */
  --ink-2:#161618;
  --surface:#1C1C1F;      /* karty na ciemnym */
  --line-l:rgba(11,11,12,.13);
  --line-l-strong:rgba(11,11,12,.30);
  --line:rgba(245,245,243,.13);
  --line-strong:rgba(245,245,243,.28);
  --white:#F5F5F3;
  --text-l:#3A3A38;       /* tekst na papierze */
  --muted-l:#64625C;
  --text:#C9C7C2;         /* tekst na czerni */
  --muted:#8B887F;
  --lime:#D6FF3F;
  --violet:#4B1AFF;
  --rail-w:288px;
  --r:16px;
  --sp:clamp(2.5rem,5vw,4.25rem);
  --shadow:0 1px 2px rgba(11,11,12,.05),0 10px 26px -14px rgba(11,11,12,.28);
  --shadow-lift:0 2px 6px rgba(11,11,12,.08),0 22px 46px -20px rgba(11,11,12,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --grain:radial-gradient(rgba(245,245,243,.5) .5px,transparent .5px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;background:var(--paper)}
body{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:18px;line-height:1.62;color:var(--text-l);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{font-family:'Grotesk','Inter',sans-serif;line-height:1.06;color:var(--ink);margin:0 0 .55em;font-weight:700;letter-spacing:-.035em}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);max-width:17ch}
h2{font-size:clamp(1.9rem,5vw,3.35rem);max-width:22ch;text-wrap:balance}
h3{font-size:1.2rem;letter-spacing:-.02em}
p{margin:0 0 1em}
strong{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--lime);color:var(--ink);padding:.75rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
/* Czarna obwódka na czarnej sekcji jest niewidoczna — osoba jadąca tabulatorem
   traci z oczu miejsce, w którym stoi. Na ciemnym tle obwódka jest limonkowa. */
.stage :focus-visible,.hero :focus-visible,.sec--dark :focus-visible,
.footer :focus-visible,.topbar :focus-visible,.rail .on-dark:focus-visible,
.consent :focus-visible,.e404 :focus-visible{outline-color:var(--lime)}

/* ---------- RUCH ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- placeholdery szkieletu ---------- */
.ph{color:#8A887F;font-style:italic}
.ph-box{display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(11,11,12,.05),rgba(11,11,12,.05) 12px,rgba(11,11,12,.09) 12px,rgba(11,11,12,.09) 24px);
  border:1px dashed var(--line-l-strong);border-radius:var(--r);color:var(--muted-l);font-size:.82rem;padding:1rem;letter-spacing:.02em}
.sec--dark .ph-box,.hero .ph-box{background:repeating-linear-gradient(135deg,rgba(245,245,243,.05),rgba(245,245,243,.05) 12px,rgba(245,245,243,.09) 12px,rgba(245,245,243,.09) 24px);
  border-color:var(--line-strong);color:var(--muted)}
.ph-box--photo{min-height:300px}
.ph-box--chart{min-height:260px}
.ph-box--list{min-height:150px;margin-top:1.25rem}
.ph-box--quote{min-height:220px}
.todo{display:inline-block;font-size:.7rem;color:#8A4A12;background:#FFEEDD;border:1px solid #F0C9A0;
  border-radius:999px;padding:.15rem .65rem;margin-top:.45rem;font-style:normal;letter-spacing:.02em}
.sec--dark .todo,.hero .todo{color:#FFD9A8;background:rgba(255,140,40,.16);border-color:rgba(255,140,40,.35)}
.todo--block{margin-top:1.5rem;padding:.55rem 1rem;border-radius:10px;display:block;font-size:.78rem}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.7rem;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.98rem;border:2px solid transparent;letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--lime);color:var(--ink);box-shadow:0 12px 30px -14px rgba(11,11,12,.5)}
.btn--primary:hover{background:var(--ink);color:var(--lime);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-l-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(11,11,12,.04)}
.sec--dark .btn--ghost,.hero .btn--ghost{border-color:var(--line-strong);color:var(--white)}
.sec--dark .btn--ghost:hover,.hero .btn--ghost:hover{border-color:var(--lime);color:var(--lime);background:transparent}
.btn--big{width:100%;font-size:1.05rem;padding:1.15rem}

/* ---------- pasek mobilny ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1rem;background:rgba(11,11,12,.92);backdrop-filter:blur(12px);color:var(--white)}
.topbar__logo{display:flex;align-items:center;gap:.55rem;color:var(--white);text-decoration:none;font-weight:700;font-size:.9rem;font-family:'Grotesk',sans-serif;letter-spacing:-.02em}
.topbar__actions{display:flex;align-items:center;gap:.35rem}
.topbar__tel{color:var(--lime);text-decoration:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong)}
.topbar__burger{background:none;border:0;padding:.6rem;cursor:pointer;display:grid;gap:5px;width:40px}
.topbar__burger span{display:block;width:22px;height:2px;background:var(--white);transition:transform .25s var(--ease),opacity .2s}
.topbar__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.topbar__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.layout{max-width:1560px;margin:0 auto}
main{padding-bottom:6rem}

/* ---------- SZYNA ---------- */
.rail{padding:1rem;display:none}

/* ---------- SZKŁO SZYNY ----------
   Kafle są półprzezroczyste i rozmywają to, co pod nimi — więc kolor sekcji
   przebija przez nie przez cały czas (nad hero widać fiolet, nad papierem papier).
   Problem: ciemny tekst na szkle nad czarną sekcją spada poniżej progu czytelności.
   Rozwiązanie: strona szkła (jasna/ciemna) ustawia się KAŻDEMU KAFELKOWI OSOBNO,
   na podstawie tego, co leży pod jego własnym środkiem — klasę .on-dark daje script.js.
   Dlaczego nie całą szyną naraz: przy przejściu przez granicę sekcji wszystkie kafle
   przeskakiwały w jednej klatce i było to widać jako szarpnięcie. Osobno przechodzą
   kaskadą, kafelek po kafelku, tak jak granica przez nie przejeżdża. */
.rail__card,.rail__nav a,.rail__ticker,.rail__tel{
  --glass-bg:rgba(255,255,255,.62);--glass-br:rgba(255,255,255,.66);
  --glass-fg:var(--ink);--glass-mut:var(--muted-l);--glass-line:var(--line-l);
  --glass-fade:rgba(255,255,255,.9);--glass-fade-0:rgba(255,255,255,0)}
.rail__card.on-dark,.rail__nav a.on-dark,.rail__ticker.on-dark,.rail__tel.on-dark{
  --glass-bg:rgba(18,18,20,.55);--glass-br:rgba(245,245,243,.18);
  --glass-fg:var(--white);--glass-mut:var(--muted);--glass-line:var(--line);
  --glass-fade:rgba(18,18,20,.9);--glass-fade-0:rgba(18,18,20,0)}
.rail__card,.rail__ticker,.rail__ticker-track span,.rail__tel{
  transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
.rail.is-open{display:block;background:var(--paper-2);border-bottom:1px solid var(--line-l)}
/* Szkło: jasne, półprzezroczyste kafle z rozmyciem tła. Krycie 0.72 —
   niżej ciemny tekst przestaje przechodzić kontrast nad ciemnym hero. */
.glass{background:var(--glass-bg,rgba(255,255,255,.72));backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid var(--glass-br,rgba(255,255,255,.7));border-radius:var(--r);box-shadow:var(--shadow)}
.rail__card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid var(--glass-br);border-radius:var(--r);padding:1.1rem;margin-bottom:.7rem;box-shadow:var(--shadow)}
.rail__stats{display:flex;gap:.75rem;text-align:center;padding:1rem .75rem}
.rail__stats div{flex:1}
.rail__stats div+div{border-left:1px solid var(--line-l)}
.rail__stats strong{display:block;font-size:1.6rem;color:var(--ink);font-family:'Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rail__stats span{font-size:.68rem;color:var(--muted-l);text-transform:uppercase;letter-spacing:.06em}
/* Każdy punkt menu to OSOBNY kafelek — tak jak kafelek z numerem telefonu. */
.rail__nav{display:grid;gap:.35rem;margin-bottom:.7rem}
.rail__nav a{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-radius:var(--r);text-decoration:none;
  color:var(--glass-fg);font-weight:600;font-size:.88rem;
  background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid var(--glass-br);box-shadow:var(--shadow);
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),border-color .18s}
.rail__nav svg{width:16px;height:16px;flex:0 0 16px;opacity:.5;transition:opacity .18s}
.rail__nav a:hover{transform:translateX(4px);border-color:var(--glass-line)}
.rail__nav a:hover svg{opacity:1}
.rail__nav a.is-active{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.rail__nav a.is-active svg{opacity:1}
.rail__ticker{position:relative;overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.7);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);border:1px solid var(--glass-br);border-radius:var(--r);
  padding:.55rem 0;margin-bottom:.7rem;box-shadow:var(--shadow)}
/* Bez mask-image: nieskończona animacja wewnątrz maski zmusza przeglądarkę do
   przerysowania warstwy w każdej klatce i renderer się dławi. */
.rail__ticker::before,.rail__ticker::after{content:"";position:absolute;top:0;bottom:0;width:26px;z-index:1;pointer-events:none}
.rail__ticker::before{left:0;background:linear-gradient(90deg,var(--glass-fade),var(--glass-fade-0))}
.rail__ticker::after{right:0;background:linear-gradient(270deg,var(--glass-fade),var(--glass-fade-0))}
.rail__ticker-track{display:flex;gap:1.4rem;white-space:nowrap;animation:tick 26s linear infinite;width:max-content;will-change:transform}
.rail__ticker-track span{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--glass-mut);font-weight:700}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rail__tel{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);border:1px solid var(--glass-br);
  border-radius:var(--r);text-decoration:none;font-weight:700;margin-bottom:.7rem;box-shadow:var(--shadow);
  font-family:'Grotesk',sans-serif;font-size:1.05rem;letter-spacing:-.01em;color:var(--glass-fg);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),transform .2s var(--ease)}
.rail__tel:hover{border-color:var(--glass-fg);transform:translateY(-1px)}
.rail__cta{display:flex;width:100%}

/* ---------- EKRAN 1: STAGE ----------
   Po wejściu widać TYLKO wordmark i zdjęcie — jak u heynesh. Nagłówek i menu
   pojawiają się dopiero po zjechaniu z tego ekranu. */
.stage{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);color:var(--text);
  display:grid;place-items:center;padding:4rem 1.25rem 5rem;overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(1100px 700px at 78% 10%,rgba(75,26,255,.45),transparent 62%),
             radial-gradient(820px 560px at 6% 94%,rgba(214,255,63,.12),transparent 66%)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:4px 4px;opacity:.28;pointer-events:none}
.stage__wordmark{position:absolute;left:1.25rem;right:1.25rem;top:50%;transform:translateY(-50%);
  pointer-events:none;user-select:none;z-index:0;display:flex;flex-direction:column;gap:.08em}
.stage__wordmark svg{display:block;width:100%;height:auto}
/* Bez vector-effect:non-scaling-stroke — przy niejednorodnym skalowaniu jest bardzo kosztowny. */
.stage__wordmark text{font-family:'Grotesk',sans-serif;font-weight:700;fill:none;stroke:rgba(214,255,63,.38);stroke-width:2.6}
/* font-size musi wypełnić wysokość viewBoxa, inaczej textLength rozciąga 16-pikselowy tekst w kreski */
.stage__wordmark svg:first-child text{font-size:285px}
.stage__wordmark svg:last-child text{font-size:136px}
.stage__photo{position:relative;z-index:1;width:min(80vw,400px);height:min(64vh,560px)}
.stage__hint{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);margin:0;z-index:2;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:.6rem}
.stage__arrow{display:inline-block;color:var(--lime);font-size:1rem;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- EKRAN 2: obietnica (ciemne) ---------- */
.hero{position:relative;background:var(--ink);color:var(--text);padding:3.5rem 1.25rem 3.5rem;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:4px 4px;opacity:.28;pointer-events:none}
.hero__body{position:relative}
.hero h1{color:var(--white);margin-bottom:.45em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--lime);display:block}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--lime);margin-bottom:1.1rem}
.kicker::before{content:"";width:26px;height:1px;background:var(--lime);opacity:.7}
.hero .lead{color:var(--text);font-size:1.06rem;max-width:46ch}
/* strong dziedziczy kolor atramentu z reguły globalnej — na czarnym hero byłoby to
   czarne na czarnym, czyli liczba znikała. Musi być jawnie jasne. */
.hero strong,.hero__traits li strong{color:var(--white)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0}
.hero__traits{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hero__traits li{font-size:.74rem;color:var(--text);border:1px solid var(--line);background:rgba(245,245,243,.04);
  border-radius:999px;padding:.35rem .8rem}
.hero__stats{position:relative;display:grid;gap:.7rem;margin-top:2.25rem}
.statcard{background:rgba(245,245,243,.05);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;
  transition:transform .3s var(--ease),border-color .3s}
.statcard:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.statcard strong{display:block;font-family:'Grotesk',sans-serif;font-size:2.1rem;font-weight:700;color:var(--white);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.045em}
.statcard span{font-size:.78rem;color:var(--muted);line-height:1.35;display:block;margin-top:.3rem}
.statcard--hl{background:var(--lime);border-color:var(--lime)}
.statcard--hl strong,.statcard--hl span{color:var(--ink)}

/* ---------- pasek narzędzi ---------- */
.tools{background:var(--paper-2);padding:1.75rem 1.25rem;border-bottom:1px solid var(--line-l)}
.tools__label{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--muted-l);margin:0 0 1rem}
.tools__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem}
.tools__grid img{width:26px;height:26px;filter:brightness(0);opacity:.42;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tools__grid li:hover img{opacity:.95;transform:translateY(-2px)}
.tools__txt{font-family:'Grotesk',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink);opacity:.6;letter-spacing:-.02em}
.tools__txt:hover{opacity:.95}

/* ---------- sekcje ---------- */
.sec{padding:var(--sp) 1.25rem;position:relative;background:var(--paper)}
.sec--alt{background:var(--paper-2)}
.sec--dark{background:var(--ink);color:var(--text);position:relative;isolation:isolate}
.sec--dark::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:4px 4px;opacity:.28}
.sec--dark h2,.sec--dark h3{color:var(--white)}
.sec--dark .lead{color:var(--text)}
.sec--dark strong{color:var(--white)}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--ink);border:1px solid var(--line-l-strong);
  border-radius:999px;padding:.4rem 1rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.4rem}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.sec--dark .pill{color:var(--lime);border-color:var(--line-strong)}
.sec--dark .pill::before{background:var(--lime)}
.lead{font-size:1.14rem;max-width:58ch;color:var(--text-l)}
.turn{margin-top:3rem;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;color:var(--ink);max-width:52ch;
  border-left:4px solid var(--lime);padding-left:1.4rem;line-height:1.4;font-family:'Grotesk',sans-serif;letter-spacing:-.02em}

/* ---------- karty ---------- */
.grid{display:grid;gap:1.1rem;margin-top:2.75rem}
.card{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.7rem;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-l-strong)}
.card p:last-child{margin-bottom:0}
.card__n{display:block;font-family:'Grotesk',sans-serif;font-size:.75rem;font-weight:700;color:var(--ink);letter-spacing:.1em;margin-bottom:.9rem;
  background:var(--lime);border-radius:999px;padding:.15rem .55rem;width:max-content}

/* ---------- case studies (ciemne wstawki na jasnym tle) ---------- */
.carousel{margin-top:2.75rem;position:relative}
.carousel__track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.25rem;scrollbar-width:thin}
.case{flex:0 0 min(86%,350px);scroll-snap-align:start;background:var(--ink);color:var(--text);border-radius:var(--r);padding:1.7rem;
  display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--ink);
  transition:transform .3s var(--ease)}
.case::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(560px 300px at 110% -10%,rgba(75,26,255,.4),transparent 60%)}
.case:hover{transform:translateY(-4px)}
.case header{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1.4rem}
.case__no{font-family:'Grotesk',sans-serif;font-weight:700;color:var(--lime);margin-right:auto;letter-spacing:.06em;font-size:.9rem}
.tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line-strong);border-radius:999px;padding:.22rem .65rem}
.case__before{font-size:.87rem;color:var(--muted);margin-bottom:1.4rem;min-height:3.2em}
.case__before strong{color:var(--white)}
.case__big{font-family:'Grotesk',sans-serif;font-size:3.15rem;font-weight:700;color:var(--lime);line-height:1;margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.case__unit{font-size:.88rem;margin:.35rem 0 1.6rem}
.case__who{font-weight:700;color:var(--white);margin:auto 0 .3rem;font-family:'Grotesk',sans-serif;letter-spacing:-.02em}
.case__quote{font-size:.87rem;margin:0;color:var(--muted)}
.carousel__foot{display:flex;align-items:center;gap:.75rem;margin-top:.4rem}
.carousel__hint{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-l);margin:0 0 0 auto}
.iconbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-l-strong);background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);transition:background .2s,transform .2s var(--ease),border-color .2s,color .2s}
.iconbtn:hover{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:translateY(-2px)}

.chart{margin:3.25rem 0 0}
.chart figcaption{font-size:.88rem;color:var(--muted-l);margin-top:.9rem;max-width:58ch;padding-left:1rem;border-left:3px solid var(--lime)}

/* ---------- kroki ---------- */
.steps{list-style:none;padding:0;margin:2.75rem 0 0;display:grid;gap:1.1rem}
.steps li{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.7rem 1.7rem 1.7rem 4.9rem;position:relative;
  box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-l-strong)}
.steps__no{position:absolute;left:1.4rem;top:1.6rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-family:'Grotesk',sans-serif;font-weight:700;font-size:1.05rem}
.steps h3 em{font-style:normal;color:var(--muted-l);font-weight:600;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:0;display:block;margin-top:.2rem}
.steps p:last-child{margin:0}

/* ---------- cennik ---------- */
.anchor-price{margin-top:2.25rem;font-size:1.15rem;max-width:50ch;color:var(--ink);font-weight:600;font-family:'Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.45}
.pricing{align-items:stretch}
.price{display:flex;flex-direction:column;position:relative}
.price--hl{border:2px solid var(--ink);box-shadow:var(--shadow-lift)}
.badge{position:absolute;top:-.9rem;left:1.4rem;background:var(--lime);color:var(--ink);font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:.35rem .9rem;margin:0;border:1px solid var(--ink)}
.price__amt{margin:.6rem 0;color:var(--ink);font-size:1.05rem}
.price__amt strong{font-family:'Grotesk',sans-serif;font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.price__amt span{font-size:.78rem;color:var(--muted-l)}
.price__for{font-size:.9rem;color:var(--muted-l)}
.netto{margin-top:1.1rem;font-size:.84rem;color:var(--muted-l)}

/* ---------- gwarancja (ciemna wstawka) ---------- */
.guarantee{margin-top:var(--sp);background:var(--ink);color:var(--text);border-radius:var(--r);padding:2.25rem 1.6rem;
  position:relative;isolation:isolate;overflow:hidden}
.guarantee::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lime)}
.guarantee::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(680px 380px at 105% 0%,rgba(75,26,255,.4),transparent 62%)}
.guarantee h2{color:var(--white);font-size:clamp(1.5rem,4vw,2.5rem);max-width:20ch}
.guarantee p{max-width:58ch}
.guarantee strong{color:var(--white)}

/* ---------- oś czasu ---------- */
.timeline{list-style:none;padding:0;margin:2.75rem 0 0;display:grid;gap:1.1rem;position:relative}
.timeline li{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.7rem;position:relative;
  box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.timeline li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-l-strong)}
.timeline__yr{display:block;font-family:'Grotesk',sans-serif;font-size:2.3rem;font-weight:700;color:transparent;
  -webkit-text-stroke:1.5px var(--ink);line-height:1;margin-bottom:.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.timeline li:hover .timeline__yr{color:var(--ink);-webkit-text-stroke-color:transparent}
.timeline p:last-child{margin:0}
.moment{margin-top:2.25rem;background:var(--ink);color:var(--text);border-radius:var(--r);padding:2.25rem 1.6rem;
  position:relative;isolation:isolate;overflow:hidden}
.moment::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 420px at 0% 110%,rgba(75,26,255,.45),transparent 62%)}
.moment h3{color:var(--white);font-size:clamp(1.35rem,3.6vw,2.15rem);line-height:1.14;max-width:22ch}
.moment strong{color:var(--lime)}
.moment p:last-child{margin:0;font-weight:700;color:var(--white)}
.photo2{margin-top:2.25rem}

/* ---------- FAQ ---------- */
details{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);margin-top:.7rem;padding:0 1.5rem;
  box-shadow:var(--shadow);transition:border-color .2s}
details[open]{padding-bottom:.6rem;border-color:var(--line-l-strong)}
summary{cursor:pointer;font-weight:700;color:var(--ink);padding:1.25rem 0;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;font-family:'Grotesk',sans-serif;letter-spacing:-.02em;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:22px;height:22px;flex:0 0 22px;background:var(--ink);
  -webkit-mask:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;
  mask:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(135deg)}
details p{font-size:.97rem}
details.ph summary{color:var(--muted-l)}

/* ---------- formularz (ciemna sekcja) ---------- */
.form{max-width:540px;margin-top:2.25rem;background:rgba(245,245,243,.05);border:1px solid var(--line);border-radius:var(--r);padding:1.75rem}
.form__row{display:grid;gap:.4rem;margin-bottom:1.1rem}
.form__row label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.form__row label span{font-weight:400;text-transform:none;letter-spacing:0}
.form input[type=text]{padding:.95rem 1.1rem;border-radius:12px;border:1px solid var(--line-strong);background:rgba(0,0,0,.35);
  color:var(--white);font-size:1rem;font-family:inherit;width:100%;transition:border-color .2s}
.form input[type=text]:focus{border-color:var(--lime)}
.form input::placeholder{color:var(--muted)}
.form__row--hp{position:absolute;left:-9999px}
.form__check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;margin-bottom:1.4rem;color:var(--text)}
.form__check input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--lime)}
.form__check a{color:var(--lime)}
.form__msg:empty{display:none}
.form__msg{font-size:.9rem;margin-top:.75rem}
.ps{margin-top:2.75rem;max-width:60ch;font-size:.97rem;border-top:1px solid var(--line);padding-top:1.75rem}
.ps strong:first-child{color:var(--lime);font-family:'Grotesk',sans-serif;letter-spacing:.04em}

/* ---------- stopka ---------- */
.footer{background:var(--ink);color:var(--muted);padding:2.5rem 1.25rem 6.5rem;font-size:.85rem}
.footer a{color:var(--text)}
.footer a:hover{color:var(--lime)}
.footer strong{color:var(--white)}
.footer p{margin:0 0 .55rem}

/* Na telefonie przycisk też wjeżdża dopiero po zjechaniu z pierwszego ekranu,
   żeby nie zasłaniał wejścia. */
.mobile-cta{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;background:var(--lime);color:var(--ink);
  text-align:center;padding:1.05rem;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 12px 30px rgba(11,11,12,.35);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.is-past-stage .mobile-cta{opacity:1;transform:none;pointer-events:auto}
/* Przy formularzu przycisk znika — inaczej przykrywa 'Wysyłam zgłoszenie' i koniec sekcji. */
body.is-at-form .mobile-cta{opacity:0;transform:translateY(16px);pointer-events:none}

/* ============ 640 ============ */
@media (min-width:640px){
  .grid--2,.grid--3{grid-template-columns:repeat(2,1fr)}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .statcard--hl{grid-column:1/-1}
  .sec,.hero,.tools{padding-left:2.75rem;padding-right:2.75rem}
}

/* ============ 1024 — szyna jako pływająca nakładka ============ */
@media (min-width:1024px){
  .topbar,.mobile-cta{display:none}
  /* Szyna PŁYWA nad treścią. Sekcje przewijają się POD nią, więc szkło ma co rozmywać. */
  .layout{padding:0}
  /* Szyna NIE wjeżdża żadną animacją. Leży w układzie strony, zaczyna się dokładnie tam,
     gdzie zaczyna się nagłówek (margines górny = wysokość pierwszego ekranu), przewija się
     razem ze stroną, a po dojechaniu do góry przykleja się (position:sticky).
     Siedzi w tym samym polu siatki co treść, więc sekcje idą pod nią i szkło ma co rozmywać. */
  .layout{display:grid;grid-template-columns:calc(var(--rail-w) + 3rem) minmax(0,1fr)}
  main{grid-column:1/-1;grid-row:1}
  .rail{display:flex;flex-direction:column;grid-column:1;grid-row:1;z-index:40;
        position:sticky;top:1.5rem;align-self:start;
        margin:calc(100vh + 1.5rem) 0 0 1.5rem;height:calc(100vh - 3rem);padding:0;width:var(--rail-w)}
  @supports (height:100svh){.rail{margin-top:calc(100svh + 1.5rem);height:calc(100svh - 3rem)}}
  .rail__nav,.rail__stats,.rail__ticker,.rail__tel,.rail__cta{flex:0 0 auto}
  .rail__ticker{margin-top:auto}
  @media (max-height:760px){.rail__ticker{display:none}}
  @media (max-height:660px){.rail__stats{display:none}}
  main{padding-bottom:0}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .card--wide{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,1fr)}
  /* Ekran 1 zajmuje pełną szerokość — menu jeszcze nie ma, więc nic go nie ogranicza */
  .stage{padding:5rem 3.25rem}
  .stage__wordmark{left:3.25rem;right:3.25rem}
  .stage__photo{width:min(34vw,460px);height:min(70vh,640px)}
  .hero{padding:5rem 3.25rem 5rem calc(var(--rail-w) + 4.5rem)}
  .hero__stats{grid-template-columns:repeat(2,1fr);margin-top:2rem;max-width:920px}
  .statcard--hl{grid-column:1/-1}
  .tools{padding:1.75rem 3.25rem 1.75rem calc(var(--rail-w) + 4.5rem)}
  .sec{padding:var(--sp) 3.25rem var(--sp) calc(var(--rail-w) + 4.5rem)}
  .guarantee{padding:2.75rem}

  /* EFEKTY: bez przewijania w poziomie — trzy karty w rzędzie. */
  #efekty{padding-left:calc(var(--rail-w) + 2.25rem)}
  #efekty .carousel__track{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding-bottom:0}
  #efekty .case{flex:none;min-width:0}
  #efekty .carousel__foot{display:none}

  /* oś czasu zygzakiem z linią łączącą */
  .timeline{grid-template-columns:repeat(2,1fr);column-gap:4.5rem}
  .timeline::before{content:"";position:absolute;left:50%;top:2rem;bottom:2rem;width:2px;
    background:repeating-linear-gradient(180deg,var(--line-l-strong) 0 8px,transparent 8px 16px)}
  .timeline li:nth-child(odd){transform:translateY(-2rem)}
  .timeline li:nth-child(odd):hover{transform:translateY(-2.4rem)}
  .timeline li::after{content:"";position:absolute;top:2.2rem;width:11px;height:11px;border-radius:50%;background:var(--lime);border:3px solid var(--paper)}
  .timeline li:nth-child(odd)::after{right:-2.55rem}
  .timeline li:nth-child(even)::after{left:-2.55rem}
  .moment{padding:2.75rem;grid-column:1/-1}
  .case{flex-basis:370px}
  .footer{padding:2.5rem 3.25rem 2.5rem calc(var(--rail-w) + 4.5rem);display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
  .footer p{margin:0}
}

@media (min-width:1400px){
  .sec,.hero,.footer,.tools{padding-right:5rem}
}


/* ---------- ZDJĘCIA TYMCZASOWE (do podmiany po sesji) ----------
   Zdjęcia z Pexels, tylko na czas budowy. Znacznik „zdjęcie tymczasowe" ma
   przypominać, że przed publikacją wchodzą pliki z sesji Mateusza.
   Usunięcie tej sekcji + atrybutów data-tmp = koniec trybu tymczasowego. */
.photo-tmp{margin:0;position:relative;overflow:hidden;border-radius:var(--r)}
.photo-tmp img{display:block;width:100%;height:100%;object-fit:cover}
.stage__photo.photo-tmp img{object-position:50% 15%}
.photo2.photo-tmp{margin-top:2.25rem;max-width:520px}
.photo-tmp::after{content:attr(data-tmp);position:absolute;left:.55rem;bottom:.55rem;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#FFD9A8;background:rgba(11,11,12,.72);border:1px solid rgba(255,140,40,.45);
  border-radius:999px;padding:.2rem .6rem}

/* ---------- listy w pakietach + górna półka cenowa ---------- */
.price__list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.7rem}
.price__list li{position:relative;padding-left:1.7rem;font-size:.92rem;line-height:1.5;color:var(--ink)}
.price__list li::before{content:"";position:absolute;left:0;top:.36em;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--lime);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
.price__list strong{color:var(--ink)}
.upper-shelf{margin-top:1.75rem;max-width:62ch;font-size:.98rem;color:var(--muted-l);line-height:1.6}
.upper-shelf strong{color:var(--ink);white-space:nowrap}

/* ---------- PODSTRONY (kontakt, polityka, audyt) ----------
   Bez lewej szyny — prosty dokument wyśrodkowany na papierze. */
body.doc .footer{padding:2.5rem 1.25rem}
.doc-main{max-width:70ch;margin:0 auto;padding:2.5rem 1.25rem 4rem}
.doc-main h1{font-size:clamp(1.9rem,6vw,3rem);margin:0 0 1rem}
.doc-main h2{font-size:clamp(1.25rem,3.6vw,1.7rem);margin:2.5rem 0 .75rem}
.doc-main h3{margin:1.75rem 0 .5rem;font-size:1.05rem}
.doc-main p,.doc-main li{color:var(--text-l);line-height:1.7}
.doc-main ul,.doc-main ol{padding-left:1.15rem;margin:.6rem 0 1rem;display:grid;gap:.45rem}
.doc-main table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.doc-main th,.doc-main td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line-l);vertical-align:top}
.doc-main th{font-family:'Grotesk',sans-serif;color:var(--ink)}
.doc-lead{font-size:1.1rem;color:var(--ink)!important;font-weight:500}
.doc-meta{font-size:.82rem;color:var(--muted-l)}
.doc-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;text-decoration:none;
  color:var(--muted-l);margin-bottom:1.5rem}
.doc-back:hover{color:var(--ink)}
.doc-box{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.5rem;margin:1.75rem 0;box-shadow:var(--shadow)}
.doc-box p:last-child{margin-bottom:0}
.contact-cards{display:grid;gap:1rem;margin:2rem 0}
@media (min-width:640px){.contact-cards{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow)}
.contact-card span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-l);margin-bottom:.5rem}
.contact-card a{font-family:'Grotesk',sans-serif;font-size:1.4rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.contact-card a:hover{color:var(--lime-ink,#5B7A00)}

/* ---------- baner zgód ---------- */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;background:var(--ink);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:1.25rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  display:grid;gap:1rem;transform:translateY(130%);transition:transform .32s var(--ease)}
.consent.is-in{transform:translateY(0)}
.consent__txt{margin:0;font-size:.88rem;line-height:1.6;max-width:62ch}
.consent__txt a{color:var(--lime)}
.consent__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.consent .btn{padding:.7rem 1.25rem;font-size:.88rem}
/* dopóki baner wisi, przycisk CTA na telefonie schodzi z drogi */
body.has-consent .mobile-cta{display:none}
@media (min-width:768px){
  .consent{left:auto;right:1.5rem;bottom:1.5rem;max-width:520px}
}

/* ---------- WYRÓWNANIE KART W RZĘDZIE (subgrid) ----------
   Problem: karty case studies i pakiety cenowe mają teksty różnej długości,
   więc duża liczba i lista „ptaszków" startowały w każdej karcie na innej
   wysokości. Subgrid wpina wiersze karty w siatkę rzędu — wszystkie karty
   dzielą te same wiersze, więc liczby i listy stoją w jednej linii.
   Bez subgrid (stare Safari) zostaje dotychczasowy układ flex — nic się nie psuje. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    #efekty .carousel__track{grid-template-rows:auto auto auto auto auto auto}
    #efekty .case{grid-row:span 6;display:grid;grid-template-rows:subgrid}
    #efekty .case__before{min-height:0}
    #efekty .case__who{margin:0 0 .3rem}

    .pricing{grid-template-rows:auto auto auto auto}
    .price{grid-row:span 4;display:grid;grid-template-rows:subgrid;align-content:start}
    .price__list{align-self:start}
  }
}

/* ---------- SEKCJA FORMULARZA: dwie kolumny na desktopie ----------
   Formularz ma 540 px. Na szerokim ekranie zostawało obok niego pół ekranu pustki,
   a PS lądował dopiero pod spodem — czyli poza kadrem człowieka, który patrzy na
   formularz. Teraz PS stoi obok, w zasięgu wzroku w momencie wypełniania. */
.contact-grid{display:grid;gap:0}
@media (min-width:1024px){
  .contact-grid{grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:3.25rem;align-items:start}
  .contact-grid .ps{margin-top:2.25rem;border-top:0;padding:.25rem 0 .25rem 1.75rem;
    border-left:1px solid var(--line)}
}

/* ---------- WYKRES GSC ---------- */
.gsc{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line-l);
  border-radius:var(--r);box-shadow:var(--shadow)}
.gsc-note{font-size:.78rem;color:var(--muted-l);margin:.6rem 0 0}