/* ============================================================================
   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; }

/* ============================================================================
   LAYOUT
============================================================================ */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:96px 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:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--red); }
.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; }
.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:34px; display:block; }
.nav-links { display:none; gap:4px; align-items:center; }
@media (min-width:1024px) { .nav-links { display:flex; } }
.nav-links a { padding:8px 14px; color:var(--text-body); font-weight:500; font-size:.88rem; border-radius:8px; transition:all .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--red); background:var(--red-light); }
.nav-right { display:flex; align-items:center; gap:10px; }
.mob-btn { background:none; border:none; cursor:pointer; padding:8px; color:var(--text); font-size:20px; display:flex; align-items:center; }
@media (min-width:1024px) { .mob-btn { display:none; } }
.mob-menu { display:none; flex-direction:column; padding:8px 0 16px; border-top:1px solid var(--border); background:var(--white); }
.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; }

/* ============================================================================
   STOPKA (wstrzykiwana przez layout.js)
============================================================================ */
.footer { background:var(--navy); padding:36px 0; }
.footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { height:26px; filter:brightness(0) invert(1); opacity:.6; }
.footer-copy { font-size:12px; color:rgba(255,255,255,.4); }
.footer-links a { color:rgba(255,255,255,.5); font-size:12px; padding:5px 10px; border-radius:6px; transition:all .2s; margin-left:2px; }
.footer-links a:hover { color:#fff; background:rgba(255,255,255,.1); }
.footer-legal { font-size:11px; color:rgba(255,255,255,.3); text-align:center; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); line-height:1.6; }

/* ============================================================================
   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; } }