/* System wizualny digitalk, tokeny zdjęte z żywej strony 10.09.2026.
   Sygnatura tego narzędzia: tor pomiaru 0-100 z nacięciem na progu 90. */
@font-face{font-family:'Futura PT';src:url('fonts/FuturaPT-Book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Futura PT';src:url('fonts/FuturaPT-Demi.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Futura PT';src:url('fonts/FuturaPT-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --plum:#611f40; --plum-ciemny:#672747; --czerwien:#ff4747; --zielen:#2e9b4e; --bursztyn:#f6a81e;
  --tlo:#f6f6f6; --linia:#e9e9e9; --atrament:#000; --atrament-2:#1a1a1a; --szary:#707070; --szary-2:#707070; --kreska:#909090;
  --szer:1086px;
}
*{box-sizing:border-box}
/* atrybut hidden musi wygrywac z display z klas, inaczej ukryty przycisk dalej widac */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--atrament-2);
  font:400 16px/1.6 'Futura PT','Nunito Sans',-apple-system,'Segoe UI',sans-serif}
.szer{max-width:var(--szer);margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--atrament);font-weight:700;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(32px,4.4vw,43px);line-height:1.15}
h2{font-size:clamp(27px,3.6vw,38px);line-height:1.2}
h3{font-size:20px;line-height:1.3}
p{margin:0}
a{color:var(--plum)}

/* nagłówek strony */
.gora{border-bottom:1px solid var(--linia)}
.gora .szer{display:flex;align-items:center;gap:34px;height:78px}
.gora img{height:26px;width:auto}
.menu{margin-left:auto;display:flex;gap:26px;font-size:15px}
.menu a{color:var(--atrament-2);text-decoration:none}
.menu a:hover{color:var(--plum)}

/* przyciski: rogi 0, waga 400, strzałka, dokładnie jak na digitalk.pl */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:var(--plum);color:#fff;font:400 16px/1 'Futura PT',sans-serif;padding:17px 28px;
  text-decoration:none;transition:background .18s ease}
.btn:hover{background:var(--plum-ciemny)}
.btn.czarny{background:var(--atrament-2)}
.btn.czarny:hover{background:#000}
.btn::after{content:'›';font-size:19px;line-height:0}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--czerwien);outline-offset:3px}

/* SYGNATURA: tor pomiaru z nacięciem na 90 */
.tor{position:relative;height:20px;background:var(--tlo);border:1px solid var(--linia)}
.tor i{position:absolute;inset:0 auto 0 0;width:var(--v,0%);background:var(--kolor,var(--plum));display:block}
.tor::after{content:'';position:absolute;left:90%;top:-4px;bottom:-4px;width:2px;background:var(--atrament-2)}
.tor-linia{position:relative;height:1px;background:var(--linia);border:0;margin:0}
.tor-linia::after{content:'';position:absolute;left:90%;top:-5px;height:11px;width:2px;background:var(--czerwien)}

/* tylko dla czytników ekranu: stan testu, który wizualnie niesie kolorowy znacznik */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* sekcje */
.sek{padding:72px 0}
.sek.szara{background:var(--tlo)}
.sek.sliwka{background:var(--plum);color:#fff}
.sek.sliwka h2{color:#fff}
.lead{font-size:18px;line-height:1.62;color:var(--szary);max-width:56ch}
.sek.sliwka .lead{color:#ffffffcc}

/* formularz */
.pole{display:block;margin-bottom:16px}
.pole span{display:block;font-size:14px;font-weight:600;color:var(--atrament-2);margin-bottom:7px}
.pole input{width:100%;background:var(--tlo);border:1px solid var(--linia);border-radius:8px;
  padding:14px;font:400 16px 'Futura PT',sans-serif;color:var(--atrament-2)}
.pole input::placeholder{color:var(--szary-2)}
.zgoda{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--szary);line-height:1.5;margin:18px 0 20px}
.zgoda input{margin-top:3px;accent-color:var(--plum);width:17px;height:17px;flex:none}

/* karty */
.karta{background:#fff;border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.18);padding:32px}

@media (prefers-reduced-motion:no-preference){
  .tor i{animation:rosnie .9s cubic-bezier(.22,1,.36,1) both}
  @keyframes rosnie{from{width:0}}
}
@media (max-width:860px){
  .sek{padding:52px 0}
  .menu{display:none}
}