/* RAMA stron TacticLab: wspólna podstawa wszystkich stron (strona główna, dokumenty, konto, 404).
   Co jest w ramie: czcionka Inter, podstawa (reset, tło, linki, fokus), kontener i siatka 12 kolumn, przyciski, nawigacja z paskiem postępu,
   menu na cały ekran na telefonie i na wąskim komputerze (do 1240 px), stopka w kolumnach, ograniczony ruch dla tych elementów.
   Kto ją ładuje: strona główna (index.html), a po scaleniu STRONA-PODSTRONY-E2 także podstrony. Kolejność w <head>:
     <link rel="stylesheet" href="css/02-tokeny.css"> <link rel="stylesheet" href="css/rama.css"> <link rel="stylesheet" href="css/strona.css albo podstrona.css">
   Skrypt ramy: js/rama.js (z defer, po js/ustawienia.js). Kolory, czasy i miary tylko z css/02-tokeny.css.

   NAWIGACJA (wzór dla podstron). Na stronie głównej linki do sekcji są kotwicami (#jak). Na podstronach mają przedrostek index.html
   (index.html#jak), przyciski „Pobierz program” i „Wypróbuj 14 dni” prowadzą do index.html#pobierz i index.html#wyprobuj (js/start.js otwiera wtedy okno).
   Na podstronie bieżący odnośnik dostaje aria-current="page". Dokładny kod (strona główna):

   <header class="nav" id="nav">
     <div class="kontener nav-pasek">
       <a class="logo" href="#start" aria-label="TacticLab, początek strony"><svg class="znak" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5" stroke="currentColor" stroke-width="2"/><circle cx="6" cy="17.5" r="3" stroke="currentColor" stroke-width="2"/><path class="znak-akcent" d="M10.5 17.5Q18.5 17.5 18.5 5.5M15.5 8.5L18.5 5.5L21.5 8.5" stroke-width="2.25"/></svg><span class="marka">Tactic<b>Lab</b></span></a>
       <ul id="menu" class="nav-linki">
         <li><a href="#jak">Jak to działa</a></li><li><a href="#dostajesz">Co dostajesz</a></li><li class="nav-opc"><a href="#wymagania">Wymagania</a></li><li><a href="#cennik">Cennik</a></li><li><a href="#faq">Pytania</a></li><li><a href="pomoc/index.html">Pomoc</a></li><li><a href="konto.html">Moje konto</a></li><li class="menu-tylko"><a href="#cennik" data-pobierz>Pobierz program</a></li>
       </ul>
       <div class="cta"><a class="btn btn-secondary btn-sm js-pobierz" href="#cennik">Pobierz program</a><a class="btn btn-primary btn-sm js-proba" href="#cennik">Wypróbuj 14 dni</a><button class="menu-btn" id="menuBtn" type="button" aria-label="Menu" aria-expanded="false" aria-controls="menu"><span class="menu-kreski" aria-hidden="true"><i></i><i></i><i></i></span></button></div>
     </div>
     <div class="nav-postep" aria-hidden="true"></div>
   </header>

   STOPKA (wzór dla podstron; na podstronach hrefy sekcji z przedrostkiem index.html, znak jak w nawigacji):

   <footer class="stopka">
     <div class="kontener">
       <div class="siatka stopka-siatka">
         <div class="stopka-opis">
           <a class="logo" href="#start" aria-label="TacticLab, początek strony">(znak i marka jak w nawigacji)</a>
           <p>Program na komputer, który z nagrania meczu robi statystyki, klipy i odprawę.</p>
           <p class="stopka-firma">F.H.U. KLAUDIA Czesław Buras<br>adres<br>NIP</p>
         </div>
         <div class="stopka-kolumny">
           <nav aria-labelledby="sfProgram"><h2 class="stopka-tyt" id="sfProgram">Program</h2><ul><li><a href="#jak">Jak to działa</a></li><li><a href="#dostajesz">Co dostajesz</a></li><li><a href="#cennik">Cennik</a></li><li><a href="#faq">Pytania</a></li></ul></nav>
           <nav aria-labelledby="sfPomoc"><h2 class="stopka-tyt" id="sfPomoc">Pomoc</h2><ul><li><a href="pomoc/index.html">Pomoc</a></li><li><a href="#wymagania">Wymagania</a></li></ul></nav>
           <nav aria-labelledby="sfKonto"><h2 class="stopka-tyt" id="sfKonto">Konto</h2><ul><li><a href="konto.html">Moje konto</a></li><li><a class="js-proba" href="#cennik">Wypróbuj 14 dni</a></li><li><a class="js-pobierz" href="#cennik">Pobierz program</a></li></ul></nav>
           <nav aria-labelledby="sfDok"><h2 class="stopka-tyt" id="sfDok">Dokumenty</h2><ul><li><a href="regulamin-proby.html">Regulamin próby</a></li><li><a href="polityka-prywatnosci.html">Polityka prywatności</a></li></ul></nav>
           <nav aria-labelledby="sfKont"><h2 class="stopka-tyt" id="sfKont">Kontakt</h2><ul><li><a href="#" id="kontakt">Napisz do nas</a></li></ul></nav>
         </div>
       </div>
     </div>
   </footer>
*/

/* ===== czcionka: Inter (zmienna, OFL 1.1, fonts/OFL.txt) i zapas o tej samej metryce ===== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");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";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");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 zapas";src:local("Segoe UI"),local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

/* ===== podstawa ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
html.menu-otwarte{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:"Inter","Inter zapas",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
button{font-family:inherit}
kbd{font-family:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r6)}
.tylko-czytnik{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* kontener: szerokość --kino-w i margines --kino-gutter; siatka: 12 kolumn w kontenerze */
.kontener{width:100%;max-width:var(--kino-w);margin:0 auto;padding:0 var(--kino-gutter)}
.siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* ===== przyciski: jedna rodzina ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r8);font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;transition:transform var(--t-1) var(--ease-out),background var(--t-1),border-color var(--t-1),color var(--t-1)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-duzy{height:52px;padding:0 28px;font-size:16px}
.btn .strzalka{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-1) var(--ease-out)}
.btn:hover .strzalka{transform:translateX(3px)}

/* ===== nawigacja ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background var(--t-2),border-color var(--t-2)}
.nav-pasek{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px;transition:height var(--t-2) var(--ease-in-out)}
.nav.scrolled,.nav.open{background:var(--nav-tlo);border-bottom-color:var(--border)}
.nav.scrolled .nav-pasek{height:var(--nav-h-mala)}
.nav-postep{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--primary);transform-origin:0 50%;transform:scaleX(var(--postep,0));opacity:0;transition:opacity var(--t-2)}
.nav.scrolled .nav-postep{opacity:1}
.logo{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex:none;font-weight:700;font-size:18px;letter-spacing:-.01em;view-transition-name:logo}
.logo svg{width:28px;height:28px}
.znak{display:block;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.znak .znak-akcent{stroke:var(--primary)}
.marka{letter-spacing:-.02em}
.marka b{font-weight:700;color:var(--primary)}
.nav-linki{list-style:none;display:flex;gap:clamp(16px,1.9vw,28px);font-size:14px;color:var(--text-2);font-weight:500;white-space:nowrap}
.nav-linki a{position:relative;display:block;padding:6px 0;transition:color var(--t-1)}
.nav-linki a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-2) var(--ease-out)}
.nav-linki a:hover,.nav-linki a.akt,.nav-linki a[aria-current=page]{color:var(--text)}
.nav-linki a.akt::after,.nav-linki a[aria-current=page]::after{transform:scaleX(1)}
.menu-tylko{display:none}
.nav .cta{position:relative;z-index:2;display:flex;flex:none;gap:10px;align-items:center}

/* przycisk menu: trzy kreski zamieniają się w krzyżyk ruchem */
.menu-btn{display:none;position:relative;width:var(--tap);height:var(--tap);border:1px solid var(--border-strong);border-radius:var(--r8);background:transparent;color:var(--text);cursor:pointer}
.menu-kreski{position:absolute;left:50%;top:50%;width:18px;height:14px;margin:-7px 0 0 -9px}
.menu-kreski i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-3) var(--ease-out),opacity var(--t-2)}
.menu-kreski i:nth-child(1){top:0}
.menu-kreski i:nth-child(2){top:6px}
.menu-kreski i:nth-child(3){top:12px}
.nav.open .menu-kreski i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .menu-kreski i:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav.open .menu-kreski i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* szeroki ekran: pasek z rozmytym tłem; dwa mniej ważne odnośniki znikają, gdy brakuje miejsca */
@media(min-width:1241px){
  .nav.scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
@media(min-width:1241px) and (max-width:1499px){.nav-opc{display:none}}

/* wąski ekran: menu na cały ekran (lista #menu przechodzi w warstwę nad stroną) */
@media(max-width:1240px){
  .menu-btn{display:block}
  .nav.scrolled,.nav.open{background:var(--bg)}
  .menu-tylko{display:list-item}
  .nav-linki{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:calc(var(--nav-h) + 16px) var(--kino-gutter) 32px;overflow-y:auto;background:var(--bg);font-size:clamp(30px,8vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--text);visibility:hidden;opacity:0;transform:translate3d(0,-12px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out),visibility 0s linear var(--t-3)}
  .nav.open .nav-linki{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav-linki li{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
  .nav.open .nav-linki li{opacity:1;transform:none}
  .nav.open .nav-linki li:nth-child(1){transition-delay:90ms}
  .nav.open .nav-linki li:nth-child(2){transition-delay:130ms}
  .nav.open .nav-linki li:nth-child(3){transition-delay:170ms}
  .nav.open .nav-linki li:nth-child(4){transition-delay:210ms}
  .nav.open .nav-linki li:nth-child(5){transition-delay:250ms}
  .nav.open .nav-linki li:nth-child(6){transition-delay:290ms}
  .nav.open .nav-linki li:nth-child(7){transition-delay:330ms}
  .nav.open .nav-linki li:nth-child(8){transition-delay:370ms}
  .nav.open .nav-linki li:nth-child(9){transition-delay:410ms}
  .nav-linki a{padding:10px 0;min-height:var(--tap)}
  .nav-linki a::after{display:none}
  .nav-linki a.akt,.nav-linki a[aria-current=page]{color:var(--primary)}
  .nav-linki li:nth-last-child(-n+2) a{font-size:clamp(20px,5vw,28px);font-weight:600;color:var(--text-2)}
}
@media(max-width:860px){.btn-sm{height:var(--tap)}}
@media(max-width:560px){.nav .cta .btn-secondary{display:none}}

/* ===== stopka ===== */
.stopka{padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,48px);font-size:14px;color:var(--text-2)}
.stopka .logo{color:var(--text)}
.stopka-siatka{row-gap:40px}
.stopka-opis{grid-column:1 / span 3;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stopka-opis p{max-width:30ch}
.stopka-firma{color:var(--text-3);font-size:13px}
.stopka-kolumny{grid-column:4 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 24px;padding-left:clamp(0px,3vw,48px)}
.stopka-tyt{margin-bottom:14px;font-size:14px;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--text)}
.stopka-kolumny ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.stopka-kolumny a{display:inline-flex;align-items:center;min-height:32px;transition:color var(--t-1)}
.stopka-kolumny a:hover{color:var(--text)}
@media(max-width:1100px){
  .stopka-opis{grid-column:1 / -1}
  .stopka-kolumny{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0}
}
@media(max-width:600px){
  .stopka-kolumny{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stopka-kolumny a{min-height:var(--tap)}
}

/* ===== ograniczony ruch: menu i przyciski pojawiają się od razu ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;transition-delay:0s;scroll-behavior:auto}
  .nav-linki,.nav-linki li{transition:none}
}