:root {
  --color-bg: #000000;
  --color-bg-card: #242424;
  --color-text: #FFFFFF;
  /* Bold optycznie "świeci" na ciemnym tle, więc dostaje odcień ciemniejszy od tekstu
     zwykłego. Wartość wyliczona z APCA: kompensacja wagi 700 vs 400 = ok. -15 Lc
     => #D9D9D9 przy białym (#FFFFFF) regularze. */
  --color-text-bold: #D9D9D9;
  --color-text-muted: #999999;
  --color-link: #08ADE4;
  --color-link-hover: #FE3E4B;
  --color-red: #FE3E4B;
  --color-cyan: #00FFFF;
  --color-green: #59FF59;
  --color-update-green: #00C800; /* np. BRASIL w updatach */
  --color-orange: #F7931E;       /* np. INDIA w updatach */
  --color-blue: #29ABE2;
  --color-gold: #FFD700;
  --color-nav-hover: #29ABE2;
  --color-nav-active: #FE404C;
  --color-nav-bar-top: #000000;
  --color-nav-bar-bottom: #242424;
  --color-footer-bg: rgba(36, 36, 36, 0.2);
  --color-gradient-top: rgba(41, 171, 226, 0.4);
  --color-gradient-bottom: rgba(0, 0, 0, 0.3);
  --font-main: 'Open Sans', Arial, Helvetica, sans-serif;
  /* Centralne rozmiary tekstu — jedno miejsce dla wszystkich podstron */
  --fs-base: 14px;   /* podstawowy tekst i linki */
  --fs-small: 13px;  /* drobne napisy: NOTE, stopka, karty dystrybutorów, etykiety formularza */
  --fs-h2: 18px;     /* czerwone/niebieskie nagłówki sekcji na podstronach */
  --max-width: 960px;
  --nav-height: 41px;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-regular.woff2') format('woff2'),
       url('../fonts/opensans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-semibold.woff2') format('woff2'),
       url('../fonts/opensans-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-bold.woff2') format('woff2'),
       url('../fonts/opensans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-extrabold.woff2') format('woff2'),
       url('../fonts/opensans-extrabold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 17px;
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

strong, b { color: var(--color-text-bold); }

img { max-width:100%; height:auto; display:block; }
a { color: var(--color-link); text-decoration:none; transition: color 0.2s; }
a:hover { color: var(--color-link-hover); }
ul, ol { list-style:none; }

.container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 20px; }
.page-wrapper { flex:1; display:flex; flex-direction:column; }
main { flex:1; }

.site-header {
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(to bottom, var(--color-nav-bar-top), var(--color-nav-bar-bottom));
  box-shadow: 0 3px 3px rgba(36,36,36,0.5);
}
.header-inner {
  display:flex; align-items:center; justify-content:center;
  max-width:var(--max-width); margin:0 auto; padding:0 20px;
  height:var(--nav-height);
}
.site-logo { display:none; }

.main-nav { display:flex; align-items:center; }
.main-nav__list { display:flex; gap:0; }
.main-nav__item { position:relative; }
.main-nav__link {
  display:flex; align-items:center; padding:0 14px;
  height:var(--nav-height); color:var(--color-text);
  font-size:16px; line-height:19px; font-weight:600;
  text-transform:uppercase; white-space:nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.main-nav__link:hover { background-color:var(--color-nav-hover); color:#FFF; }
.main-nav__link--active { background-color:var(--color-nav-active); color:#FFF; }
.main-nav__link--forum { color:var(--color-cyan); }
.main-nav__link--demo { color:var(--color-green); }
.main-nav__link--shop { color:var(--color-gold); }
.main-nav__link--forum:hover,
.main-nav__link--demo:hover,
.main-nav__link--shop:hover { color:#FFF; }

.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:var(--nav-height); background:none; border:0; padding:0; cursor:pointer; }
.nav-toggle__bar { display:block; width:100%; height:3px; background:var(--color-text); border-radius:2px; transition:transform 0.3s, opacity 0.3s; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity:0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* Hero z logo X-Tool — wspólny dla strony głównej i podstron.
   Na podstronie wstaw zaraz po <div class="page-wrapper">:
   <section class="hero">
     <div class="hero__inner">
       <div class="hero__logo">
         <a href="https://shop.x-tool.org" target="_blank" rel="noopener">
           <img src="images/logo_xtool_new.png" alt="X-Tool" width="280">
         </a>
       </div>
       <div class="hero__tagline"><p>Opcjonalny napis obok loga (w połowie jego wysokości)</p></div>
     </div>
   </section> */
.hero { background:#111; padding:25px 20px 12px; }
.hero__inner { display:flex; align-items:center; gap:30px; max-width:var(--max-width); margin:0 auto; }
.hero__logo { flex-shrink:0; }
.hero__logo img { width:280px; height:auto; }
.hero__tagline { font-size:25px; line-height:30px; font-weight:600; color:var(--color-text); }

.page-title {
  font-size:30px; line-height:1; color:var(--color-text-bold);
  font-weight:600; padding:11px 13px; margin:15px 0 10px; text-align:center;
  background:linear-gradient(to bottom, var(--color-gradient-top), var(--color-gradient-bottom));
}

.site-footer {
  background-color:var(--color-footer-bg);
  text-align:center; padding:12px 20px;
  font-size:var(--fs-small); line-height:18px; color:var(--color-text); font-weight:400;
  box-shadow:0 -3px 5px rgba(0,0,0,0.25);
}
.site-footer a { color:var(--color-text); }
.site-footer a:hover { color:var(--color-link); }
.footer-brand { color:var(--color-red); }

.cookie-notice {
  position:fixed; bottom:0; left:0; right:0; z-index:99999;
  background:#242424; border-top:1px solid #FF3D4D;
  padding:10px 20px; display:flex; align-items:center; justify-content:center; gap:20px;
  font-size:12px; font-family:Arial, Helvetica, sans-serif;
}
.cookie-notice__text { color:#FFFFFF; }
.cookie-notice__text a { color:var(--color-link); }
.cookie-notice__btn {
  background:#C00; color:#FFF; padding:0 10px 2px; text-decoration:none;
  font-size:12px; font-family:Arial, Helvetica, sans-serif;
}

@media (max-width:768px) {
  :root { --nav-height:50px; }
  .header-inner { justify-content:flex-end; }
  .nav-toggle { display:flex; }
  .main-nav__list {
    display:none; position:absolute; top:var(--nav-height); left:0; right:0;
    flex-direction:column; background:linear-gradient(to bottom, var(--color-nav-bar-bottom), #111);
    box-shadow:0 4px 8px rgba(0,0,0,0.4); z-index:999;
  }
  .main-nav__list.is-open { display:flex; }
  .main-nav__link { padding:12px 20px; height:auto; border-bottom:1px solid rgba(255,255,255,0.05); }
  .page-title { font-size:22px; padding:10px 12px; }
  .hero__inner { flex-direction:column; gap:15px; text-align:center; }
  .hero__logo img { width:180px; }
  .hero__tagline { font-size:18px; line-height:24px; }
}