/* ============================================================================
   LIDERZY.AI - WSPÓLNY DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Jeden arkusz dla wszystkich stron marki. Definiuje:
     • tokeny (paleta, spacing, radius, cienie) + aliasy starych nazw,
     • reset i typografię bazową,
     • układ (.container/.section),
     • przyciski (.btn),
     • wspólny nagłówek (.header) i stopkę (.footer) - markup wstrzyka layout.js.

   Tożsamość: czerwień #DC2626 jako kolor podstawowy, gradient czerwień→pomarańcz
   jako akcent. Sekcje specyficzne dla danej strony zostają w jej inline <style>,
   ale korzystają z tokenów zdefiniowanych tutaj.
============================================================================ */

:root {
    /* ── Marka (kolor podstawowy = czerwień) ── */
    --red:#DC2626; --red-dark:#B91C1C; --red-light:#FEF2F2; --red-border:#FECACA;
    --brand:#DC2626; --brand-dark:#B91C1C; --brand-darker:#7C2D12;
    --brand-light:#EF4444; --brand-bg:#FEF2F2; --brand-border:#FECACA;
    --brand-on-dark:#FB923C; --brand-on-dark-bright:#FDBA74;

    /* ── Akcent (gradient czerwień→pomarańcz) ── */
    --accent:#EA580C;
    --orange:#F97316; --orange-light:#FFF7ED; --orange-dark:#EA580C;
    --brand-gradient:linear-gradient(135deg,var(--red) 0%,var(--orange-dark) 100%);

    /* ── Granat (ciemne tła / hero / footer) ── */
    --navy:#0B0E1A; --navy-mid:#13172B; --navy-light:#1E2440;
    --dark:#1D1E18;

    /* ── Tekst ── */
    --text:#0F172A; --text-body:#334155; --text-muted:#64748B; --text-xmuted:#94A3B8;
    --text-dark:#0F172A; --text-medium:#1E293B; --text-light:#94A3B8; --text-subtle:#CBD5E1;

    /* ── Tła i powierzchnie ── */
    --white:#FFFFFF; --surface:#F8FAFC;
    --bg-white:#FFFFFF; --bg-light:#F8FAFC; --bg-subtle:#F1F5F9;
    --bg-dark:#0F172A; --bg-dark-2:#1e1f3b; --bg-dark-3:#293548;

    /* ── Obramowania ── */
    --border:#E2E8F0; --border-light:#F1F5F9;

    /* ── Kolory pomocnicze ── */
    --blue:#3B82F6; --blue-light:#EFF6FF; --blue-dark:#1D4ED8;
    --purple:#8B5CF6; --purple-light:#F5F3FF; --purple-dark:#7C3AED;
    --green:#10B981; --green-light:#F0FDF4; --green-dark:#059669;
    --amber:#F59E0B; --amber-light:#FFFBEB; --amber-dark:#D97706;
    --success:#059669; --warning:#D97706;

    /* ── Spacing ── */
    --sp-xs:.25rem; --sp-sm:.5rem; --sp-md:1rem; --sp-lg:1.5rem;
    --sp-xl:2rem; --sp-2xl:3rem; --sp-3xl:4rem; --sp-4xl:6rem;

    /* ── Radius ── */
    --r:12px; --rl:16px;
    --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

    /* ── Cienie ── */
    --sh:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
    --sh-md:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.04);
    --sh-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.04);
    --sh-xl:0 20px 25px -5px rgba(0,0,0,.08),0 10px 10px -5px rgba(0,0,0,.02);
    --sh-red:0 10px 30px -5px rgba(220,38,38,.25);
    --sh-sm:0 1px 3px rgba(15,23,42,.06);

    /* ── Przejścia ── */
    --t-fast:150ms ease; --t-base:250ms ease; --t-slow:350ms ease;

    /* ── Aliasy dla stron prawnych ── */
    --color-brand-red:#DC2626; --color-brand-red-dark:#B91C1C; --color-brand-red-bg:#FEF2F2;
    --color-text-dark:#0F172A; --color-text-medium:#334155; --color-text-muted:#64748B;
    --color-bg-white:#FFFFFF; --color-bg-light:#F8FAFC; --color-border:#E2E8F0;
    --spacing-sm:.5rem; --spacing-md:1rem; --spacing-lg:1.5rem; --spacing-xl:2rem;
    --spacing-2xl:3rem; --spacing-3xl:4rem;
    --radius-md:10px; --radius-lg:16px; --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --transition-base:250ms ease;
}

/* ============================================================================
   RESET & BASE
============================================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:16px; line-height:1.6;
    color:var(--text); background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; min-height:100vh;
    padding-bottom:env(safe-area-inset-bottom);
}
body.menu-open, body.modal-open { overflow:hidden; }
section[id] { scroll-margin-top:80px; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
ul { list-style:none; }
strong { font-weight:600; }
img { max-width:100%; height:auto; display:block; }

/* Treść tylko dla czytników ekranu (utrzymuje strukturę nagłówków bez zmian wizualnych) */
.sr-only {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================================
   LAYOUT
============================================================================ */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
@media (max-width:640px) { .section { padding:56px 0; } }
.section-spacing { padding:var(--sp-2xl) 0; }
@media (min-width:640px)  { .section-spacing { padding:var(--sp-3xl) 0; } }
@media (min-width:1024px) { .section-spacing { padding:var(--sp-4xl) 0; } }
.bg-surface { background:var(--surface); }
.bg-navy { background:var(--navy); }

/* ============================================================================
   TYPOGRAFIA SEKCJI
============================================================================ */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--red); padding:8px 20px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--white); box-shadow:var(--sh); }
.sec-label { text-align:center; margin-bottom:14px; }
.sec-title { font-size:clamp(1.9rem,4.5vw,2.75rem); font-weight:800; line-height:1.15; text-align:center; margin-bottom:18px; letter-spacing:-.03em; color:var(--text); }
.sec-sub { text-align:center; color:var(--text-body); max-width:640px; margin:0 auto 56px; font-size:1.05rem; line-height:1.7; }
.accent { color:var(--red); background:var(--brand-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ============================================================================
   PRZYCISKI
============================================================================ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; font-weight:600; border-radius:var(--r); cursor:pointer; transition:all .2s; text-decoration:none; font-size:.9rem; border:2px solid transparent; white-space:nowrap; font-family:inherit; }
.btn-lg { padding:14px 28px; font-size:.975rem; }
.btn-full { width:100%; justify-content:center; }
.btn-primary { background:linear-gradient(135deg,var(--orange-dark) 0%,var(--red-dark) 100%); color:#fff; border:none; box-shadow:var(--sh-md); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--sh-red); }
.btn-outline { background:var(--white); color:var(--text); border-color:var(--border); box-shadow:var(--sh); }
.btn-outline:hover { border-color:var(--red); color:var(--red); background:var(--red-light); }
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); }
.btn-ghost:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); }
.btn-secondary { background:var(--white); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--red); color:var(--red); background:var(--red-light); }
.btn-ghost-orange { background:transparent; color:var(--brand-on-dark); border:1.5px solid var(--brand-on-dark); }
.btn-ghost-orange:hover { background:rgba(251,146,60,.12); border-color:var(--brand-on-dark-bright); color:var(--brand-on-dark-bright); }
.btn:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
/* Spójny, widoczny fokus klawiatury na WSZYSTKICH elementach interaktywnych
   (nie tylko .btn): linki nav, karty-linki gier/materiałów, LinkedIn, hamburger, pola. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline:2px solid var(--red); outline-offset:2px; border-radius:6px;
}
/* Na wąskich ekranach długie CTA nie mieszczą się w jednej linii - pozwól im zawijać */
@media (max-width:640px) {
    .btn { white-space:normal; text-align:center; min-height:44px; }
}
.btn-loading { position:relative; pointer-events:none; color:transparent !important; }
.btn-loading::after { content:''; position:absolute; width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; left:50%; top:50%; margin:-9px 0 0 -9px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================================
   NAGŁÓWEK (wstrzykiwany przez layout.js)
============================================================================ */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:all .3s; }
.header.scrolled { border-bottom-color:var(--border); box-shadow:var(--sh-md); background:rgba(255,255,255,.98); }
.nav { display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }
.logo img { height:27px; width:auto; display:block; }
.nav-links { display:none; gap:2px; align-items:center; }
@media (min-width:1120px) { .nav-links { display:flex; } }
.nav-links a { padding:8px 12px; color:var(--text-body); font-weight:500; font-size:.88rem; border-radius:8px; transition:all .2s; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active { color:var(--red); background:var(--red-light); }
.nav-right { display:flex; align-items:center; gap:10px; }
/* Cel dotykowy hamburgera min. 44×44px (WCAG 2.5.5 / Apple HIG) - wcześniej ~36px */
.mob-btn { background:none; border:none; cursor:pointer; padding:8px; color:var(--text); font-size:20px; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
@media (min-width:1120px) { .mob-btn { display:none; } }
/* Poniżej 1120px nawigacja jest w menu mobilnym (z własnym CTA), więc długi
   przycisk CTA w nagłówku ukrywamy - inaczej wypycha logo i hamburger na mobile */
@media (max-width:1119px) { .nav-right > .btn-primary { display:none; } }
/* Panel menu wychodzi na pełną szerokość (margin:0 -24px znosi padding .container),
   a treść trzymamy wyrównaną do 24px (jak logo/hamburger) - bez „obciętych" brzegów i szwu na bokach. */
.mob-menu { display:none; flex-direction:column; margin:0 -24px; padding:8px 24px 16px; border-top:1px solid var(--border); background:var(--white); max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; }
.mob-menu.open { display:flex; }
.mob-menu a { padding:12px 0; color:var(--text-body); font-weight:500; border-bottom:1px solid var(--border); font-size:.95rem; transition:color .2s; }
.mob-menu a:hover { color:var(--red); }
.mob-menu .btn { margin-bottom:8px; border-bottom:none; }
/* CTA w menu mobilnym to przycisk, nie zwykły link: białą czcionkę z .btn-primary
   przykrywała reguła `.mob-menu a` (wyższa specyficzność) -> ciemny, nieczytelny tekst na czerwieni.
   Przywracamy biel + wagę przycisku i zmniejszamy rozmiar o ~10% (.95rem -> .855rem). */
.mob-menu .btn-primary { color:#fff; font-weight:600; font-size:.855rem; }

/* ============================================================================
   STOPKA (wstrzykiwana przez layout.js)
============================================================================ */
.footer { background:var(--navy); padding:40px 0; }
.footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { height:28px; filter:brightness(0) invert(1); opacity:.85; }
.footer-copy { font-size:13px; color:rgba(255,255,255,.72); }
.footer-links a { color:rgba(255,255,255,.8); font-size:13px; font-weight:500; padding:6px 12px; border-radius:6px; transition:all .2s; margin-left:2px; }
.footer-links a:hover { color:#fff; background:rgba(255,255,255,.14); }
.footer-legal { font-size:12.5px; color:rgba(255,255,255,.62); text-align:center; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); line-height:1.7; }
/* MOBILE FIX: linki stopki (Regulamin / Polityka / Cookies) miały cel dotykowy ~25px -
   na mobile powiększamy do min. 44px (WCAG 2.5.5), zachowując wygląd na desktopie. */
@media (max-width:640px) {
    .footer-links a { display:inline-flex; align-items:center; min-height:44px; padding:11px 12px; }
}

/* ============================================================================
   ANIMACJE
============================================================================ */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .fade-up { opacity:1; transform:none; } html { scroll-behavior:auto; } }

/* ============================================================================
   PASEK POSTĘPU CZYTANIA (element w nagłówku, wstrzykiwany przez layout.js)
   Addytywne — działa tylko, gdy element .reading-progress istnieje w headerze.
============================================================================ */
.reading-progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; z-index:2; }
.reading-progress span { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:var(--brand-gradient); transition:transform .1s linear; }
@media (prefers-reduced-motion:reduce) { .reading-progress span { transition:none; } }